/**
 * LMS 모바일 반응형 CSS
 * /assets/css/mobile.css
 *
 * 사용자 포털(user/), 사업주(company/), 대리점(agency/), 강사(tutor/) 공통
 * 브레이크포인트:
 *   1024px — 태블릿 가로 (네비게이션 전환)
 *    768px — 태블릿 세로 / 대형 폰
 *    640px — 폰 기본
 *    480px — 소형 폰
 *
 * v2.1 — 2026-05-14  마이페이지 사이드바 수평탭 전환, mp-layout 클래스 정합성 수정, 과정상세 margin-top 조정
 */

/* ═══════════════════════════════════════════════════════════════
   0. 공통 기반 — iOS zoom 방지, 터치 타겟, 스크롤
   ═══════════════════════════════════════════════════════════════ */

/* iOS 입력 필드 자동 확대 방지 */
@media (max-width: 768px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 터치 타겟 최소 44px */
@media (max-width: 768px) {
  .gnb-menu > li > a,
  .gnb-actions .gnb-btn,
  .tab-nav a,
  .tab-nav button,
  .pagination a,
  .pagination span,
  .btn,
  button,
  [role="button"] {
    min-height: 44px;
  }
}

/* 테이블 수평 스크롤 */
@media (max-width: 768px) {
  .table-responsive,
  .user-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive table,
  .user-table-wrap table {
    min-width: 560px;
  }
}

/* 탭 수평 스크롤 */
@media (max-width: 640px) {
  .tab-nav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-nav a,
  .tab-nav button {
    flex-shrink: 0;
    font-size: .8rem !important;
    padding: 9px 14px !important;
  }
}

/* 모바일 타이포그래피 */
@media (max-width: 640px) {
  .user-page h1 { font-size: 1.5rem !important; }
  .user-page h2 { font-size: 1.25rem !important; }
  .user-page h3 { font-size: 1.05rem !important; }
  .user-page h4 { font-size: .95rem !important; }
}

/* 차트 높이 */
@media (max-width: 640px) {
  canvas { max-height: 220px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   1. GNB — 모바일 드로어 보강
      (기본 구조는 user.css의 #mobile-drawer/.gnb-hamburger 참조,
       여기서는 960px 이하 보강 스타일만 정의)
   ═══════════════════════════════════════════════════════════════ */

/* 드로어 패널 너비 / 스크롤 보강 */
@media (max-width: 960px) {
  #mobile-drawer .md-panel {
    width: 86%;
    max-width: 320px;
    -webkit-overflow-scrolling: touch;
  }
}

/* 드로어 내 서브메뉴 링크 들여쓰기 보강 */
@media (max-width: 960px) {
  .md-nav .md-nav-sub {
    padding-left: 32px !important;
    font-size: .84rem !important;
    color: var(--text-sub, #6b7280) !important;
    min-height: 40px !important;
  }
  .md-nav .md-nav-sub .md-nav-sub-indent {
    color: var(--border, #d1d5db);
    margin-right: 6px;
  }
  /* 모바일 드로어 서브메뉴 그룹 라벨 */
  .md-nav .md-nav-group-label {
    padding: 8px 20px 4px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted, #9ca3af);
    pointer-events: none;
  }
  .md-nav .md-nav-sep {
    margin: 6px 16px !important;
  }
}

/* 드로어 footer 버튼 전폭 */
@media (max-width: 960px) {
  .md-footer .gnb-btn {
    width: 100% !important;
    min-height: 44px !important;
  }
}

/* mockup(_nav.php) GNB 모바일 전환 */
@media (max-width: 960px) {
  /* 메뉴 목록 + 액션 버튼들 숨김 (햄버거는 유지) */
  .user-gnb .gnb-menu { display: none !important; }
  .user-gnb .gnb-actions .gnb-btn-ghost   { display: none !important; }
  .user-gnb .gnb-actions .gnb-btn-primary { display: none !important; }
  .user-gnb .gnb-actions .gnb-user-wrap   { display: none !important; }
  /* gnb-actions 자체는 flex 유지 — 햄버거 버튼이 안에 있음 */
  .user-gnb .gnb-actions { display: flex !important; }
  /* 햄버거 버튼 표시 */
  .user-gnb .gnb-hamburger { display: flex !important; }
  .user-gnb .wrapper {
    height: 60px !important;
    padding: 0 16px !important;
    justify-content: space-between !important;
  }
}

@media (max-width: 640px) {
  .gnb-inner,
  .user-gnb .wrapper {
    height: 56px !important;
    padding: 0 14px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   2. site-wrap / page-hero / wrapper 공통
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .user-page .wrapper { padding: 0 18px !important; }
  .user-page .site-wrap { padding: 28px 18px 60px !important; }
  .user-page .site-wrap-md,
  .user-page .site-wrap-sm { padding: 28px 18px 60px !important; }
  /* page-hero 직후는 상단 여백 줄임 */
  .user-page .page-hero + .site-wrap,
  .user-page .page-hero + .site-wrap-md,
  .user-page .page-hero + .site-wrap-sm { padding-top: 20px !important; }
}

@media (max-width: 480px) {
  .user-page .wrapper { padding: 0 14px !important; }
  .user-page .site-wrap,
  .user-page .site-wrap-md,
  .user-page .site-wrap-sm { padding: 24px 14px 48px !important; }
  .user-page .page-hero + .site-wrap,
  .user-page .page-hero + .site-wrap-md,
  .user-page .page-hero + .site-wrap-sm { padding-top: 16px !important; }
}

/* 페이지 히어로 */
@media (max-width: 768px) {
  .user-page .page-hero {
    padding: 44px 18px 52px !important;
    margin-bottom: 28px !important;
    min-height: 0 !important;
  }
  .user-page .page-hero h2 { font-size: 1.45rem !important; }
  .user-page .page-hero p  { font-size: .92rem !important; }
  .user-page .page-hero .page-hero-inner { padding: 0 !important; }
}

@media (max-width: 480px) {
  .user-page .page-hero {
    padding: 32px 14px 40px !important;
    margin-bottom: 20px !important;
  }
  .user-page .page-hero h2 { font-size: 1.25rem !important; }
  .user-page .page-hero p  { font-size: .85rem !important; }
  .user-page .page-hero .breadcrumb {
    font-size: .75rem !important;
    padding: 5px 12px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   3. 메인 페이지 (홈)
   ═══════════════════════════════════════════════════════════════ */

/* HERO 섹션 */
@media (max-width: 768px) {
  .user-page .hero .wrapper {
    flex-direction: column !important;
    min-height: unset !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    gap: 28px !important;
  }
  .user-page .hero-content { max-width: 100% !important; text-align: center; }
  .user-page .hero-content h1 { font-size: 1.7rem !important; }
  .user-page .hero-actions { justify-content: center !important; }
  .user-page .hero-visual { display: none !important; }
  .user-page .hero-stat-bar { display: none !important; }
}

@media (max-width: 480px) {
  .user-page .hero-content h1 { font-size: 1.45rem !important; }
  .user-page .hero-badge { font-size: .75rem !important; }
}

/* 통계 카드 */
@media (max-width: 640px) {
  .user-page .stat-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .user-page .stat-item { padding: 16px !important; }
  .user-page .stat-item .stat-val { font-size: 1.5rem !important; }
}

/* 과정 그리드 */
@media (max-width: 960px) {
  .user-page .course-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .user-page .course-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* 섹션 제목 */
@media (max-width: 640px) {
  .user-page .section-title { font-size: 1.2rem !important; }
  .user-page .section-sub   { font-size: .85rem !important; }
  .user-page .section-head  { margin-bottom: 20px !important; }
}

/* 퀵 메뉴 바 */
@media (max-width: 768px) {
  .user-page .quick-menu-bar .wrapper,
  .user-quick .wrapper {
    gap: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 14px !important;
    flex-wrap: nowrap !important;
  }
  .user-page .quick-menu-bar .wrapper::-webkit-scrollbar,
  .user-quick .wrapper::-webkit-scrollbar { display: none; }
  .user-page .qm-item,
  .user-quick .qm-item {
    flex-shrink: 0 !important;
    font-size: .78rem !important;
    padding: 10px 14px !important;
    white-space: nowrap !important;
  }
}

/* 공지사항 */
@media (max-width: 640px) {
  .user-page .notice-list li { padding: 12px 0 !important; }
  .user-page .notice-list .n-title { font-size: .9rem !important; }
  .user-page .notice-list .n-date  { font-size: .75rem !important; }
}

/* 배너 */
@media (max-width: 768px) {
  .user-page .banner-swiper .swiper-slide { border-radius: 10px !important; }
  .user-page .banner-cta { font-size: .85rem !important; padding: 12px 20px !important; }
}

/* 파트너 로고 */
@media (max-width: 640px) {
  .user-page .partner-logos { gap: 12px !important; }
  .user-page .partner-logo-item { max-height: 36px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   4. 과정 목록 (course/index.php)
   ═══════════════════════════════════════════════════════════════ */

/* [2026-07-31] 이 절은 예전 마크업(.cl-filter-sidebar / .cl-list-area / .cl-search-wrap /
   .cl-filter-toggle-btn / .cl-sort-bar / .course-list-grid)을 겨냥하고 있었으나
   course/index.php 가 상단 검색바 + 전체폭 목록(.cl-topsearch / .cl-grid) 구조로 바뀌면서
   전부 대상이 사라졌다. 유일하게 살아 있던 `.cl-wrap { padding: 0 18px !important }` 이
   위쪽 여백을 지워 히어로와 검색카드가 붙어 보이던 원인이었다. 현재 마크업 기준으로 다시 씀. */

@media (max-width: 960px) {
  /* 히어로 바로 아래 붙지 않도록 위·아래 여백을 준다 */
  .user-page .cl-wrap { padding: 28px 18px 48px !important; }
  .user-page .cl-hero-inner { padding: 0 18px !important; }
}

@media (max-width: 640px) {
  .user-page .cl-wrap { padding: 22px 16px 40px !important; }
  .user-page .cl-topsearch { margin-bottom: 18px !important; }
  /* 검색 카드 입력은 iOS 확대 방지를 위해 16px 이상 유지 */
  .user-page .csf-search-card-input { font-size: 16px !important; min-height: 44px !important; }
  /* 결과 바: 건수와 정렬을 세로로 */
  .user-page .cl-result-bar { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .user-page .cl-result-bar select { width: 100% !important; min-height: 44px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   5. 과정 상세 (course/detail.php)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .user-page .cd-layout {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .user-page .cd-main { width: 100% !important; }
  .user-page .cd-aside {
    position: static !important;
    width: 100% !important;
  }
  /* 수강신청 패널을 하단 고정 */
  .user-page .cd-enroll-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 500 !important;
    border-radius: 0 !important;
    border-top: 2px solid var(--gray-200, #e5e7eb) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.1) !important;
    padding: 14px 18px !important;
    background: #fff !important;
  }
  .user-page .cd-enroll-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px !important;
    font-size: 1rem !important;
  }
  /* 하단 고정 패널 공간 확보 */
  .user-page .cd-layout { padding-bottom: 80px !important; }
}

@media (max-width: 640px) {
  .user-page .cd-title { font-size: 1.25rem !important; }
  .user-page .cd-tabs .tab-nav a { font-size: .8rem !important; padding: 10px 12px !important; }
  .user-page .cd-curriculum-item { padding: 12px 14px !important; }
  .user-page .cd-curriculum-item .ci-title { font-size: .88rem !important; }
  .user-page .cd-info-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   6. 마이페이지 전체
   ═══════════════════════════════════════════════════════════════ */

/* 레이아웃 스택 — .mp-layout (sidebar.php 정의) */
@media (max-width: 860px) {
  .user-page .mp-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* 사이드바: sticky → static, 수평 탭 네비 전환 */
  .user-page .mp-sidebar {
    position: static !important;
    top: unset !important;
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }
  /* [2026-07-29] 사이드바 프로필 카드(.mp-profile-card/.mp-avatar-lg/.mp-uname/.mp-uid) 규칙 삭제
     — 마크업이 user/mypage/sidebar.php 에서 제거되어 대상이 없다 */
  /* 사이드바 메뉴: 수직 → 수평 스크롤 탭 */
  .user-page .mp-nav {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border-top: none !important;   /* 위에 프로필 카드가 없으므로 구분선 불필요 */
    border-bottom: 1px solid var(--gray-200, #e5e7eb) !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .user-page .mp-nav::-webkit-scrollbar { display: none; }
  /* 그룹 타이틀 숨김, 그룹 수평 배치 */
  .user-page .mp-nav-group {
    display: contents !important;
  }
  .user-page .mp-nav-group-title { display: none !important; }
  /* 메뉴 링크 수평 탭 스타일 */
  .user-page .mp-nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 12px 14px !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    font-size: .82rem !important;
    min-height: 44px !important;
    color: var(--gray-600, #4b5563) !important;
    background: transparent !important;
    text-decoration: none !important;
  }
  .user-page .mp-nav-link.active {
    border-bottom-color: var(--primary, #1a6cf0) !important;
    color: var(--primary, #1a6cf0) !important;
    font-weight: 600 !important;
    background: transparent !important;
  }
  .user-page .mp-nav-link svg { display: none !important; }
  /* 로그아웃 버튼 숨김 (GNB 드로어에 있음) */
  .user-page .mp-sidebar-footer { display: none !important; }
  /* 마이페이지 메인 영역 */
  .user-page .mp-main,
  .user-page .mp-layout > main {
    padding-top: 20px !important;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .user-page .mp-nav-link {
    font-size: .78rem !important;
    padding: 10px 12px !important;
  }
}

/* 구버전 클래스명 대응 (.mypage-layout / .mypage-sidebar) */
@media (max-width: 768px) {
  .user-page .mypage-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .user-page .mypage-sidebar {
    position: static !important;
    top: unset !important;
    border-radius: var(--radius, 10px) !important;
    margin-bottom: 20px !important;
    padding: 12px 0 !important;
  }
  .user-page .mypage-sidebar > nav,
  .user-page .mp-sidebar-nav {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    flex-wrap: nowrap !important;
  }
  .user-page .mypage-sidebar > nav::-webkit-scrollbar,
  .user-page .mp-sidebar-nav::-webkit-scrollbar { display: none; }
  .user-page .mypage-sidebar a {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 10px 16px !important;
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
  }
  .user-page .mypage-sidebar a.active {
    border-left: none !important;
    border-bottom-color: var(--primary, #1a6cf0) !important;
    background: transparent !important;
  }
  .user-page .mypage-sidebar .ms-section-title { display: none !important; }
}

@media (max-width: 480px) {
  .user-page .mypage-layout { padding: 0 14px 48px !important; }
}

/* 마이페이지 홈 통계 카드 */
@media (max-width: 640px) {
  .user-page .mypage-stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .user-page .mypage-stat-card { padding: 16px 12px !important; }
  .user-page .mypage-stat-card .stat-value { font-size: 1.4rem !important; }
  .user-page .mypage-stat-card .stat-label { font-size: .78rem !important; }
}

/* 학습 과정 카드 목록 */
@media (max-width: 640px) {
  .user-page .mp-course-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .user-page .mp-course-item .ci-thumb {
    width: 100% !important;
    height: 120px !important;
    border-radius: 8px !important;
  }
  .user-page .mp-course-item .ci-body { width: 100% !important; }
  .user-page .mp-course-item .ci-actions {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }
  .user-page .mp-course-item .ci-actions .btn {
    flex: 1 !important;
    justify-content: center !important;
    font-size: .85rem !important;
    padding: 10px !important;
  }
  .user-page .mp-progress-bar { height: 6px !important; }
  .user-page .mp-course-title { font-size: .95rem !important; }
}

/* 수강신청 내역 테이블 */
@media (max-width: 768px) {
  .user-page .mp-enrollment-table thead { display: none !important; }
  .user-page .mp-enrollment-table tbody tr {
    display: block !important;
    border: 1px solid var(--gray-200, #e5e7eb) !important;
    border-radius: 10px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
  }
  .user-page .mp-enrollment-table tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 0 !important;
    border: none !important;
    font-size: .88rem !important;
  }
  .user-page .mp-enrollment-table tbody td::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: var(--gray-500, #6b7280) !important;
    font-size: .8rem !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
  }
}

/* 장바구니 */
@media (max-width: 768px) {
  .user-page .cart-layout {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .user-page .cart-items { width: 100% !important; }
  .user-page .cart-summary {
    width: 100% !important;
    position: static !important;
  }
}
@media (max-width: 640px) {
  .user-page .cart-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .user-page .cart-item-thumb { width: 100% !important; height: 100px !important; border-radius: 8px !important; }
  .user-page .cart-item-body { width: 100% !important; }
  .user-page .cart-item-price { align-self: flex-end !important; }
}


/* ═══════════════════════════════════════════════════════════════
   7. 게시판 (board/)
   ═══════════════════════════════════════════════════════════════ */

/* 공지사항 목록 */
@media (max-width: 640px) {
  .user-page .board-list-table thead { display: none !important; }
  .user-page .board-list-table tbody tr {
    display: block !important;
    border-bottom: 1px solid var(--gray-100, #f3f4f6) !important;
    padding: 14px 0 !important;
  }
  .user-page .board-list-table tbody td {
    display: block !important;
    padding: 2px 0 !important;
    border: none !important;
  }
  .user-page .board-list-table tbody td.col-num,
  .user-page .board-list-table tbody td.col-writer { display: none !important; }
  .user-page .board-list-table tbody td.col-title {
    font-size: .92rem !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
  }
  .user-page .board-list-table tbody td.col-date {
    font-size: .76rem !important;
    color: var(--gray-400, #9ca3af) !important;
  }
}

/* 게시글 상세 */
@media (max-width: 640px) {
  .user-page .board-view-title { font-size: 1.1rem !important; }
  .user-page .board-view-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    font-size: .8rem !important;
  }
  .user-page .board-view-content { font-size: .92rem !important; line-height: 1.8 !important; }
  .user-page .board-view-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .user-page .board-view-actions .btn { width: 100% !important; justify-content: center !important; }
}

/* FAQ */
@media (max-width: 640px) {
  .user-page .faq-item-q {
    font-size: .92rem !important;
    padding: 14px 16px !important;
  }
  .user-page .faq-item-a { padding: 14px 16px !important; font-size: .88rem !important; }
}

/* QnA / 1:1 문의 */
@media (max-width: 640px) {
  .user-page .inquiry-form .form-row { grid-template-columns: 1fr !important; }
  .user-page .inquiry-submit-wrap { text-align: center !important; }
  .user-page .inquiry-submit-wrap .btn { width: 100% !important; }
}


/* ═══════════════════════════════════════════════════════════════
   8. 인증 페이지 (로그인/회원가입)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .user-page .auth-shell { grid-template-columns: 1fr !important; }
  .user-page .auth-brand { display: none !important; }
  .user-page .auth-panel { padding: 40px 24px 60px !important; }
  .user-page .auth-panel-top { right: 24px !important; }
  .user-page .auth-card { max-width: 420px !important; }
}

@media (max-width: 480px) {
  .user-page .auth-panel { padding: 32px 18px 48px !important; }
  .user-page .auth-card .auth-title { font-size: 1.5rem !important; }
  .user-page .auth-panel-top { display: none !important; }
  .user-page .auth-card .auth-options { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
  .user-page .auth-card .auth-altlinks { flex-direction: column !important; gap: 10px !important; align-items: center !important; }
  .user-page .auth-card .auth-altlinks a + a::before { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   9. 결제 (payment/)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .user-page .pay-layout {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .user-page .pay-main { width: 100% !important; }
  .user-page .pay-aside {
    width: 100% !important;
    position: static !important;
  }
}

@media (max-width: 640px) {
  .user-page .pay-section-title { font-size: 1rem !important; }
  .user-page .pay-form .form-row { grid-template-columns: 1fr !important; }
  .user-page .pay-method-list {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .user-page .pay-method-item { width: 100% !important; padding: 14px !important; }
  .user-page .pay-price-table { font-size: .88rem !important; }
  .user-page .pay-price-table td { padding: 10px !important; }
  .user-page .pay-submit-btn { width: 100% !important; padding: 16px !important; font-size: 1rem !important; }
  .user-page .pay-coupon-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .user-page .pay-coupon-row input { width: 100% !important; }
  .user-page .pay-coupon-row button { width: 100% !important; }
}

/* 결제 완료 페이지 */
@media (max-width: 480px) {
  .user-page .pay-complete-box {
    padding: 32px 18px !important;
    text-align: center !important;
  }
  .user-page .pay-complete-box .complete-icon { font-size: 3rem !important; }
  .user-page .pay-complete-box h2 { font-size: 1.2rem !important; }
  .user-page .pay-complete-actions { flex-direction: column !important; gap: 8px !important; }
  .user-page .pay-complete-actions .btn { width: 100% !important; }
}


/* ═══════════════════════════════════════════════════════════════
   10. 학습 플레이어 (learn/)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .user-page .player-wrap,
  .user-page .learn-wrap {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .user-page .player-main,
  .user-page .learn-video-area { width: 100% !important; }
  .user-page .player-sidebar,
  .user-page .learn-sidebar {
    width: 100% !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-top: 1px solid var(--gray-200, #e5e7eb) !important;
    border-left: none !important;
  }
}

@media (max-width: 640px) {
  .user-page .player-header { padding: 10px 14px !important; }
  .user-page .player-header .ph-title { font-size: .9rem !important; }
  .user-page .player-controls { flex-wrap: wrap !important; gap: 8px !important; }
  .user-page .player-progress-bar { height: 4px !important; }
  .user-page .learn-tab-content { padding: 14px !important; }
  .user-page .learn-content-item { padding: 10px 12px !important; font-size: .88rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   11. 학습지원 (support/)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .user-page .support-layout {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .user-page .support-sidebar { width: 100% !important; }
  .user-page .support-sidebar-nav {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    border-right: none !important;
    border-bottom: 1px solid var(--gray-200, #e5e7eb) !important;
    margin-bottom: 20px !important;
  }
  .user-page .support-sidebar-nav::-webkit-scrollbar { display: none; }
  .user-page .support-sidebar-nav a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 12px 16px !important;
    border-right: none !important;
    border-bottom: 3px solid transparent !important;
    font-size: .85rem !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .user-page .support-sidebar-nav a.active {
    border-bottom-color: var(--primary, #1a6cf0) !important;
  }
  .user-page .support-content { width: 100% !important; }
}

@media (max-width: 480px) {
  .user-page .support-content h3 { font-size: 1.05rem !important; }
  .user-page .support-content p  { font-size: .9rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   12. 토론/과제/설문 (discussion/, task/, survey/)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* 토론 목록 */
  .user-page .discussion-item { padding: 14px !important; }
  .user-page .discussion-item .di-title { font-size: .92rem !important; }
  .user-page .discussion-item .di-meta  { font-size: .76rem !important; }

  /* 토론 상세 */
  .user-page .discussion-view .dv-content { font-size: .9rem !important; line-height: 1.8 !important; }
  .user-page .discussion-reply .dr-actions { flex-direction: column !important; gap: 8px !important; }
  .user-page .discussion-reply .dr-actions .btn { width: 100% !important; }

  /* 과제 제출 */
  .user-page .task-submit-form textarea { min-height: 160px !important; font-size: .9rem !important; }
  .user-page .task-actions { flex-direction: column !important; gap: 8px !important; }
  .user-page .task-actions .btn { width: 100% !important; justify-content: center !important; }

  /* 설문 */
  .user-page .survey-question { padding: 18px 14px !important; }
  .user-page .survey-question .sq-title { font-size: .92rem !important; }
  .user-page .survey-options label { padding: 12px 14px !important; font-size: .88rem !important; }
  .user-page .survey-nav-btn { width: 100% !important; justify-content: center !important; }
}


/* ═══════════════════════════════════════════════════════════════
   13. 수료증 / 시험
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* 수료증 */
  .user-page .certificate-card {
    padding: 24px 16px !important;
    transform: none !important;
  }
  .user-page .certificate-card .cert-title { font-size: 1.1rem !important; }
  .user-page .certificate-print-btn { width: 100% !important; justify-content: center !important; }

  /* 시험 */
  .user-page .exam-wrap { padding: 16px !important; }
  .user-page .exam-question { padding: 16px !important; font-size: .92rem !important; }
  .user-page .exam-option { padding: 12px 14px !important; font-size: .88rem !important; }
  .user-page .exam-timer {
    position: fixed !important;
    top: 60px !important;
    right: 14px !important;
    z-index: 200 !important;
    font-size: .8rem !important;
    padding: 6px 12px !important;
  }
  .user-page .exam-nav-btns {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .user-page .exam-nav-btns .btn { width: 100% !important; }
}


/* ═══════════════════════════════════════════════════════════════
   14. 카드 / 버튼 공통
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .user-page .card-header { padding: 16px 18px !important; }
  .user-page .card-body   { padding: 18px !important; }
  .user-page .card-footer { padding: 14px 18px !important; }
  .user-page .card-header h3 { font-size: .98rem !important; }

  /* 버튼 전폭 */
  .user-page .btn-block-mobile,
  .user-page .d-flex-mobile-col .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* 빈 상태 */
  .user-page .empty-state { padding: 40px 16px !important; }
  .user-page .empty-state .empty-icon { width: 52px !important; height: 52px !important; font-size: 1.4rem !important; }
  .user-page .empty-state h4 { font-size: 1rem !important; }
}

/* 페이지네이션 */
@media (max-width: 480px) {
  .user-page .pagination { gap: 3px !important; margin-top: 24px !important; }
  .user-page .pagination a,
  .user-page .pagination span {
    min-width: 34px !important;
    height: 34px !important;
    font-size: .8rem !important;
    padding: 0 8px !important;
  }
}

/* 폼 공통 */
@media (max-width: 640px) {
  .user-page .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .user-page .form-group { margin-bottom: 16px !important; }
  .user-page .form-control,
  .user-page input[type="text"],
  .user-page input[type="email"],
  .user-page input[type="password"],
  .user-page input[type="number"],
  .user-page input[type="tel"],
  .user-page input[type="date"],
  .user-page input[type="search"],
  .user-page select,
  .user-page textarea {
    padding: 12px 14px !important;
    font-size: 16px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   15. 푸터 (site-footer) 모바일
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  #site-footer .footer-top {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 36px 0 24px !important;
  }
  #site-footer .footer-links {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  #site-footer .footer-brand .footer-sns {
    margin-top: 16px !important;
  }
}

@media (max-width: 640px) {
  #site-footer .footer-inner { padding: 0 16px !important; }
  #site-footer .footer-links { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  #site-footer .footer-links .fl-col strong { font-size: .82rem !important; }
  #site-footer .footer-links .fl-col a { font-size: .78rem !important; margin-bottom: 7px !important; }
  #site-footer .footer-brand .f-logo { font-size: 1.1rem !important; }
  #site-footer .footer-brand > p { font-size: .8rem !important; }
  #site-footer .ft-tel { font-size: .95rem !important; }
  #site-footer .footer-bottom p { font-size: .74rem !important; line-height: 1.8 !important; }
}

@media (max-width: 480px) {
  #site-footer .footer-links { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  #site-footer .footer-bottom { padding: 18px 0 24px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   16. 사업주 포털 (company/) 반응형
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .company-sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 200;
    position: fixed !important;
  }
  .company-sidebar.open { transform: translateX(0); }
  .company-main { margin-left: 0 !important; }
  .company-topbar { padding: 0 16px !important; }
  .company-content { padding: 16px !important; }

  .cp-mobile-toggle {
    display: inline-flex !important;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    background: none; border: 1px solid #e2e8f0;
    border-radius: 6px; cursor: pointer;
    font-size: 1.1rem; color: #475569;
    margin-right: 12px;
  }
  .cp-stat-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .cp-stat-card { padding: 14px !important; }
  .cp-stat-card .stat-value { font-size: 1.2rem !important; }
  .cp-table { font-size: .76rem !important; }
  .cp-table th, .cp-table td { padding: 8px !important; }
  .cp-filter-row { flex-direction: column !important; gap: 6px !important; }
  .cp-filter .form-input, .cp-filter .form-select { width: 100% !important; }
  .cp-filter .btn-search { width: 100% !important; }
}

@media (max-width: 480px) {
  .cp-stat-cards { grid-template-columns: 1fr 1fr !important; }
  .company-topbar .topbar-right span:first-child { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   17. 대리점 포털 (agency/) 반응형
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .agency-sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 200;
    position: fixed !important;
  }
  .agency-sidebar.open { transform: translateX(0); }
  .agency-main { margin-left: 0 !important; }
  .agency-topbar { padding: 0 16px !important; }
  .agency-content { padding: 16px !important; }

  .ag-mobile-toggle {
    display: inline-flex !important;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    background: none; border: 1px solid #e2e8f0;
    border-radius: 6px; cursor: pointer;
    font-size: 1.1rem; color: #475569;
    margin-right: 12px;
  }
  .ag-stat-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .ag-stat-card { padding: 14px !important; }
  .ag-stat-card .stat-value { font-size: 1.2rem !important; }
  .ag-table { font-size: .76rem !important; }
  .ag-table th, .ag-table td { padding: 8px !important; }
  .ag-filter-row { flex-direction: column !important; gap: 6px !important; }
  .ag-filter .form-input, .ag-filter .form-select { width: 100% !important; }
  .ag-filter .btn-search { width: 100% !important; }
}

@media (max-width: 480px) {
  .ag-stat-cards { grid-template-columns: 1fr 1fr !important; }
  .agency-topbar .topbar-right span:first-child { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   18. 강사 포털 (tutor/) 반응형
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .tutor-sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 200;
    position: fixed !important;
  }
  .tutor-sidebar.open { transform: translateX(0); }
  .tutor-main { margin-left: 0 !important; }
  .tutor-topbar { padding: 0 16px !important; }
  .tutor-content { padding: 16px !important; }

  .tt-mobile-toggle {
    display: inline-flex !important;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    background: none; border: 1px solid #e5e7eb;
    border-radius: 6px; cursor: pointer;
    font-size: 1.1rem; color: #4b5563;
    margin-right: 12px;
  }
  .tt-stat-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .tt-stat-card { padding: 14px !important; }
  .tt-stat-card .stat-value { font-size: 1.2rem !important; }
  .tt-table { font-size: .76rem !important; }
  .tt-table th, .tt-table td { padding: 8px !important; }
}

@media (max-width: 480px) {
  .tt-stat-cards { grid-template-columns: 1fr 1fr !important; }
  .tutor-topbar .topbar-right span:first-child { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   19. 공통 유틸리티
   ═══════════════════════════════════════════════════════════════ */

/* 사이드바 오버레이 */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.4);
  z-index: 199;
}
@media (max-width: 768px) {
  .sidebar-overlay.active { display: block; }
}

/* 데스크탑 전용 숨김 */
.cp-mobile-toggle,
.ag-mobile-toggle,
.tt-mobile-toggle { display: none; }

/* 모바일 badge */
@media (max-width: 480px) {
  .cp-badge, .ag-badge, .tt-badge {
    font-size: .68rem !important;
    padding: 2px 7px !important;
  }
  .user-page .badge { font-size: .68rem !important; padding: 2px 8px !important; }
}

/* 모바일 페이지네이션 (admin/portal 공통) */
@media (max-width: 480px) {
  .cp-pagination a, .cp-pagination span,
  .ag-pagination a, .ag-pagination span,
  .tt-pagination a, .tt-pagination span {
    padding: 5px 8px !important;
    font-size: .72rem !important;
  }
}

/* 모바일 숨김/표시 유틸 */
@media (max-width: 768px) {
  .hidden-mobile { display: none !important; }
  .visible-mobile { display: block !important; }
}
@media (min-width: 769px) {
  .hidden-desktop { display: none !important; }
  .visible-desktop { display: block !important; }
}

/* 모바일 텍스트 정렬 */
@media (max-width: 640px) {
  .text-center-mobile { text-align: center !important; }
  .text-left-mobile   { text-align: left !important; }
}

/* ═══════════════════════════════════════════════════════════════
   13. 가로 넘침 차단 — 반드시 파일 마지막에 둘 것
   ───────────────────────────────────────────────────────────────
   모바일에서 화면이 옆으로 밀리는 현상을 구조적으로 막는다.
   개별 페이지 CSS를 일일이 고치는 대신, 폭을 벌릴 수 있는 지점
   (격자·flex 항목의 min-width:auto, 안 잘리는 긴 문자열, 미디어)
   을 한 번에 봉한다. 새 페이지를 추가해도 자동으로 적용된다.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* ── (1) 최후 방어선 ──
     아래 규칙으로 못 잡는 원인이 남아 있어도 가로 스크롤은 생기지 않는다.
     html 이 overflow:visible 이므로 body 값이 뷰포트로 전파된다.
     이 구간에서 .mp-sidebar 는 position:static 이므로 sticky 를 깨지 않는다. */
  body.user-page { overflow-x: hidden !important; }

  /* ── (2) 격자/flex 항목의 자동 최소폭 해제 ──
     min-width:auto 는 "내용물보다 작아지지 않는다"는 뜻이라,
     내부에 가로 스크롤러나 nowrap 요소가 있으면 항목 자체가 넓어진다.
     .mp-layout > main 에만 있던 처리를 사이드바까지 확장한다. */
  .user-page .mp-layout > *,
  .user-page .mp-sidebar,
  .user-page .mypage-layout > * { min-width: 0 !important; }

  /* 가로 스크롤 탭(.mp-nav)이 사이드바를 밀어내지 않게 한다 */
  .user-page .mp-sidebar { max-width: 100% !important; }
  .user-page .mp-nav     { max-width: 100% !important; }

  /* ── (3) 주요 컨테이너가 뷰포트를 넘지 않게 ── */
  .user-page .site-wrap,
  .user-page .container,
  .user-page .card,
  .user-page .mp-page-header { max-width: 100% !important; }

  /* ── (4) 미디어·코드 블록 ── */
  .user-page img,
  .user-page video,
  .user-page iframe,
  .user-page embed,
  .user-page object,
  .user-page canvas,
  .user-page svg { max-width: 100% !important; }
  .user-page pre { overflow-x: auto !important; max-width: 100% !important; }

  /* ── (5) 안 끊기는 긴 문자열 ──
     과정명·이메일·URL 처럼 공백 없는 문자열은 컨테이너를 밀어낸다.
     한글은 keep-all 로 어절 단위를 유지하되, 넘칠 때는 강제로 끊는다. */
  .user-page .cl-title,
  .user-page .cl-info,
  .user-page .mp-page-header h2,
  .user-page .board-subject,
  .user-page td, .user-page th { word-break: keep-all; overflow-wrap: anywhere; }

  /* ── (6) 표는 스스로 스크롤 ──
     래퍼(.xxx-table-wrap)가 없는 표가 새로 생겨도 페이지를 밀지 않는다. */
  .user-page table { max-width: 100% !important; }
  .user-page .table-wrap,
  .user-page [class$="-table-wrap"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* 내 강의(course_list) — 좁은 화면에서 버튼·진도율 칸이 벌어지지 않게 */
@media (max-width: 768px) {
  .user-page .cl-action,
  .user-page .cl-prog,
  .user-page .cl-eval-cell { min-width: 0 !important; }
  .user-page .cl-btn { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   14. 반응형 격자 유틸 (.ug-*)
   ───────────────────────────────────────────────────────────────
   [2026-07-31] 여러 화면이 격자 열 수를 마크업의 인라인 style 에 박아두고
   있었다. 인라인은 미디어쿼리로 덮을 수 없어(!important 로만 가능)
   휴대폰에서도 2·4열이 유지되고, 칸이 100px 안팎으로 좁아지면서
   글자가 '수 / 강 / 중' 처럼 한 글자씩 끊겼다.
   인라인에서 grid-template-columns 만 걷어내 이 클래스로 옮긴다.
   auto 계열은 minmax(200px,..) 대신 minmax(min(200px,100%),..) 를 쓴다.
   전자는 컨테이너가 200px 보다 좁아지면 그대로 넘친다.
   ═══════════════════════════════════════════════════════════════ */
.ug-2      { grid-template-columns: 1fr 1fr; }
.ug-4      { grid-template-columns: repeat(4, 1fr); }
.ug-auto   { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.ug-auto-s { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }

@media (max-width: 860px) { .ug-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ug-2 { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .ug-4 { grid-template-columns: 1fr; } }