/* ============================================================
 * mobile-overrides.css
 *
 * 목적: 모바일 환경(<= 991.98px) 전용 오버라이드 / 유틸 클래스 모음.
 * 정책: 본 파일의 모든 규칙은 반드시 @media (max-width: 991.98px) 안에 두어
 *       데스크톱(992px 이상) 환경에는 어떠한 영향도 주지 않는다.
 *
 * 로드 순서: base.html에서 가장 마지막에 로드되어 다른 CSS를 자연스럽게 오버라이드.
 * 변경 금지: 기존 style.css / custom.css / layout.css는 본 작업에서 수정하지 않는다.
 *
 * 관련 문서: docs/모바일_최적화_및_UI_중복_정리.md
 * ============================================================ */

/* -------------------------------------------------------------
 * 0. 모바일 전용 변수 (필요 시 확장)
 * ------------------------------------------------------------- */
:root {
  /* 모바일 권장 터치 타깃 최소 크기 (WCAG 2.5.5 / iOS HIG 권장) */
  --m-touch-min: 44px;

  /* 모바일 카드 리스트 기본 간격 */
  --m-card-gap: 12px;
  --m-card-radius: 8px;
  --m-card-padding: 12px;
}

/* -------------------------------------------------------------
 * 1. 모바일 한정 오버라이드 (<= 991.98px)
 * ------------------------------------------------------------- */
@media (max-width: 991.98px) {

  /* ----- 1.1 .m-touch : 터치 타깃 최소 크기 보장 ----- */
  .m-touch {
    min-width: var(--m-touch-min);
    min-height: var(--m-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 아이콘 전용 작은 버튼/링크에 .m-touch만 추가하면 자동 확장되도록 */
  a.m-touch,
  button.m-touch {
    line-height: 1;
  }

  /* ----- 1.2 .m-card-list : PC 테이블을 모바일에서 카드 리스트로 ----- */
  .m-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--m-card-gap);
  }

  .m-card-list > .m-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: var(--m-card-radius);
    padding: var(--m-card-padding);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .m-card-list > .m-card .m-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 14px;
  }

  .m-card-list > .m-card .m-card-row .m-card-label {
    color: #6c757d;
    flex-shrink: 0;
  }

  .m-card-list > .m-card .m-card-row .m-card-value {
    text-align: right;
    color: #212529;
    word-break: break-all;
  }

  .m-card-list > .m-card .m-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #212529;
  }

  /* ----- 1.3 .m-table-scroll : 어쩔 수 없이 가로 스크롤로 둘 표 ----- */
  .m-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .m-table-scroll > table {
    min-width: max-content;
  }

  /* ----- 1.4 .m-stack : 모바일에서 가로 정렬을 세로 정렬로 ----- */
  .m-stack {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  /* ----- 1.5 .m-full : 모바일에서 폭 100% ----- */
  .m-full {
    width: 100% !important;
  }

  /* ----- 1.6 .m-hide / .m-show : 모바일 한정 표시 토글 ----- */
  .m-hide {
    display: none !important;
  }

  .m-show {
    display: block !important;
  }

  .m-show-flex {
    display: flex !important;
  }

  .m-show-inline-flex {
    display: inline-flex !important;
  }

  /* ----- 1.7 폼 입력 영역 터치 타깃 보정 -----
   * iOS Safari 자동 줌 방지를 위해 입력 필드 폰트 크기 16px 이상.
   * 단, 사이트 전반의 입력 폰트가 작을 수 있어 .m-input 명시 옵트인 방식. */
  .m-input,
  .m-input.form-control,
  .m-input.form-select {
    min-height: var(--m-touch-min);
    font-size: 16px;
  }

  /* ----- 1.8 햄버거로 열리는 모바일 사이드바 z-index 보강 -----
   * .sidebartoggler 클릭 시 .left-sidebar가 슬라이드 인 됨.
   * 본문 위에 충분히 떠 있어야 하며, 모달(z-index 1055)보다는 낮아야 한다. */
  #main-wrapper.show-sidebar .left-sidebar {
    z-index: 1040;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    width: 78% !important;
    max-width: 320px;
  }

  /* ----- 1.9 알림 모달 z-index 및 정중앙 배치 보정 -----
   * Bootstrap fade 애니메이션이 transform을 덮어씌우므로,
   * 높은 specificity(ID)로 fade/show 모두에서 centering transform을 강제한다. */
  #mobileNotificationsModal {
    z-index: 1060 !important;
  }

  #mobileNotificationsModal .modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    width: min(92vw, 720px);
    max-width: min(92vw, 720px);
    min-height: auto;
  }

  #mobileNotificationsModal.modal.fade .modal-dialog {
    transform: translate(-50%, calc(-50% + 30px));
  }

  #mobileNotificationsModal.modal.show .modal-dialog {
    transform: translate(-50%, -50%);
  }

  /* ----- 1.10 모바일 모달 오픈 시 본문이 밀리는 현상 방지 -----
   * Bootstrap 모달이 열릴 때 ScrollBarHelper가 body에
   *   overflow: hidden + padding-right: Xpx (인라인)
   * 를 추가하여 스크롤바 폭만큼 콘텐츠가 좌측으로 밀린다.
   * 모바일/태블릿에서는 오버레이 스크롤바이므로 보정이 불필요하다.
   * → overflow-y: scroll 로 스크롤바를 유지시켜 레이아웃 시프트 원천 차단.
   * → 모든 고정 요소에도 padding-right 무력화. */
  body.modal-open,
  html.modal-open {
    padding-right: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }

  body.modal-open .fixed-top,
  body.modal-open .fixed-bottom,
  body.modal-open .is-fixed,
  body.modal-open .sticky-top,
  body.modal-open .app-header,
  body.modal-open .left-sidebar,
  body.modal-open #main-wrapper,
  body.modal-open .page-wrapper,
  body.modal-open .body-wrapper {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  /* ----- 1.11 모바일 수평 오버플로 차단 -----
   * 일부 페이지(교육관리자 메인 등)에서 콘텐츠가 뷰포트보다 넓어
   * body.scrollWidth > viewport 가 되면:
   *   - .modal(position:fixed, width:100%) 이 scrollWidth 기준으로 확장
   *   - .modal-backdrop 은 viewport 기준 → 오버레이가 전체를 덮지 못함
   *   - dialog 의 left:50% 계산이 틀어져 정중앙에서 벗어남
   * → html 에 overflow-x:hidden 을 걸어 수평 오버플로를 원천 차단한다. */
  html {
    overflow-x: hidden !important;
  }

  /* ----- 1.28 모바일 배경색 통일 -----
   * body 배경이 흰색이라 모바일 헤더와 콘텐츠 영역 사이에
   * 흰색 틈이 보임 → body 배경을 콘텐츠 배경과 동일하게 통일 */
  body {
    background-color: #f2f6fa !important;
  }

  /* ----- 1.12 페이지 하단 콘텐츠 잘림 방지 + 콘텐츠 영역 패딩 -----
   * (#container-fluid는 layout.js에서 모바일에서 .p-0 클래스를 추가하므로
   *  !important로 우선순위 확보 필요) */
  #container-fluid {
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 16px !important;
    background-color: #f2f6fa;
  }

  /* 개별 페이지 스크립트가 .p-0을 추가해도 좌우 패딩 보존 */
  #container-fluid.p-0 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ----- 1.13 카드 본문 과도한 패딩 보정 -----
   * 다수의 페이지가 .card .card-body.p-4 (24px) 패딩을 사용하는데
   * 모바일에서는 좁은 화면 폭을 잡아먹어 콘텐츠가 우측으로 밀리고 잘리는
   * 현상이 발생한다. 모바일에서만 패딩을 1rem(16px)로 축소.
   * PC(992px 이상)는 영향 없음. */
  .card > .card-body.p-4 {
    padding: 1rem !important;
  }

  /* ----- 1.14 데스크톱 위주 테이블의 모바일 가로 스크롤 -----
   * 본 프로젝트의 .customize-table 은 컬럼별로 fixed width / min-width 가
   * 박혀있어 모바일에서 그대로 두면 우측 컬럼이 화면 밖으로 잘려 나간다.
   * (예: 교육관리자/법인 홈의 #today-educations, recruitments 등)
   *
   * 별도의 모바일 카드 마크업이 함께 존재하는 페이지는
   *   <table class="d-none d-lg-table">
   * 처럼 이미 PC에서만 보이도록 분기되어 있어 본 규칙은 영향이 없다.
   *
   * .m-table-scroll-auto 는 표를 감싸는 옵트인 wrapper.
   * 카드 외부에 직접 노출된 표나, 카드 내부에서 가로 스크롤이 필요한
   * 표 모두 같은 패턴으로 감싸 사용한다. */
  .m-table-scroll-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .m-table-scroll-auto > table {
    min-width: max-content;
  }

  /* ----- 1.15 .m-fab : 모바일 플로팅 액션 버튼 (생성 등) -----
   * 일부 페이지에서 .position-absolute + bottom:150px / right:25px 인라인
   * 좌표를 박아 두어, 부모 .body-wrapper 의 contentHeight 위치를 기준으로
   * 본문 한가운데에 떠 있는 것처럼 보여 컨텐츠를 가린다.
   * → .m-fab 는 항상 뷰포트 우하단에 고정되도록 표준화. */
  .m-fab {
    position: fixed !important;
    right: 16px !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    left: auto !important;
    z-index: 1030;
  }
  .m-fab > a,
  .m-fab > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .m-fab img {
    width: 56px;
    height: 56px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
  }

  /* ----- 1.16 .m-card-row-wrap : 모바일 카드 row flex-wrap 허용 -----
   * 길이가 가변적인 라벨/뱃지가 같은 행에 있을 때, nowrap 이면 우측 요소가
   * 화면 밖으로 밀려난다. wrap 허용 + gap 확보. */
  .m-card-row-wrap {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }

  /* ----- 1.17 검색 폼 / 페이지네이션 모바일 보정 ----- */
  /* PC 한정 검색 막대 안의 .searchbar-item 이 모바일에서 노출될 경우
   * width:22% 같은 PC용 % 폭을 잡아 한 줄에 5개가 욱여넣어지는 현상 방지. */
  .searchbar-item {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 페이지네이션 a/span 의 가로 padding 9px 16px 은 모바일에선 너무 커서
   * 페이지 번호 5~6 개만 노출돼도 줄바꿈됨 → 좀 더 컴팩트하게. */
  .pagination a,
  .pagination span {
    padding: 7px 10px !important;
    margin: 0 2px !important;
    font-size: 13px;
  }

  /* ----- 1.18 게시판 검색바 + CTA 버튼 줄바꿈 -----
   * help_questions, questions 등 boards 목록 페이지에서
   *   <div class="d-flex justify-content-between">
   *     <검색 행> <CTA 버튼 style="width:250px">
   * 가 한 줄에 있어 모바일에서 버튼이 화면 밖으로 밀림.
   * → 카드 내부 d-flex 행을 모바일에서 세로 스택 + 아이템 100% 로 바꾼다. */
  .card > .card-body .d-flex.justify-content-between {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* 고정 폭 250px CTA 버튼을 모바일에서 폭 100% 로 풀어줌 */
  .card > .card-body .d-flex.justify-content-between > div > .btn[style*="width:250px"],
  .card > .card-body .d-flex.justify-content-between > div > a.btn[style*="width:250px"] {
    width: 100% !important;
  }

  /* 검색 컨트롤 그룹도 flex-wrap 허용 → 셀렉트/입력/버튼이 좁은 폭에서 스택됨 */
  .card > .card-body .d-flex.justify-content-start.align-items-center.gap-2 {
    flex-wrap: wrap !important;
  }

  /* .w-40(검색 input) 이 40%면 모바일에서 너무 좁음 → 100%로 */
  .card > .card-body .w-40 {
    width: 100% !important;
  }

  /* ----- 1.19 .customize-table 자동 가로 스크롤 -----
   * 많은 페이지에서 .customize-table이 .card-body 안에 직접 있는데
   * .m-table-scroll-auto 래퍼 없이도 가로 스크롤이 되도록
   * .card-body 자체에 overflow-x:auto를 부여한다.
   * 이미 .m-table-scroll-auto 래퍼가 있는 경우에도 해가 없다. */
  .card > .card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .card > .card-body > .customize-table,
  .card > .card-body > table.customize-table {
    min-width: max-content;
  }

  /* ----- 1.20 다음글/이전글 네비게이션 -----
   * 상세 페이지의 다음글/이전글 + 수정/삭제/목록이 한 줄에 있어
   * 375px에서 버튼이 밀려남. flex-wrap + gap 부여. */
  .card-body > .d-flex.justify-content-between.align-items-center.border-top,
  .d-flex.justify-content-between.align-items-center.border-top {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* 다음글/이전글 제목 링크가 넘칠 경우 truncate. ps-5 여백도 축소 */
  .d-flex.justify-content-start.align-items-center.py-4.gap-2 a[class*="ps-5"],
  .d-flex.justify-content-start.align-items-center.py-4.gap-2 div[class*="ps-5"] {
    padding-left: 0.5rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100vw - 120px);
  }

  /* ----- 1.21 강의 상세 메타 정보 flex-wrap -----
   * lecture-video-play*.html 의 게시일/교육고유번호/작성자/부서/조회수가
   * 한 줄 d-flex에 있어 모바일에서 크게 넘침. → wrap 허용 + gap */
  .d-flex.justify-content-between.align-items-center.mb-9 {
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
  }

  /* ----- 1.22 폼 페이지 하단 버튼 영역 보정 -----
   * requests-create/modify, SMS 발송 등 폼 하단 버튼 행에서
   * width:25% + w-100 충돌, 또는 고정 폭 버튼이 잘리는 문제.
   * → 모바일에서 버튼 행을 세로 스택. */
  .d-flex.justify-content-center.gap-2 > .btn,
  .d-flex.justify-content-center.gap-3 > .btn,
  .d-flex.justify-content-end.gap-2 > .btn,
  .d-flex.justify-content-end.gap-3 > .btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* 인라인 width:25% 등이 박힌 버튼 → 모바일에서 무시 */
  .btn[style*="width:25%"] {
    width: auto !important;
    flex: 1 1 0 !important;
  }

  /* ----- 1.23 페이지 헤더(제목+설명) 줄바꿈 -----
   * help_questions 등에서 <제목> <설명> 이 한 줄 d-flex 에 있어
   * 모바일에서 제목과 설명이 가로로 붙어 잘림 발생. */
  .d-flex.justify-content-start.align-items-center.gap-2.mt-4 {
    flex-wrap: wrap !important;
  }

  /* ----- 1.24 vr(구분선) 숨김 -----
   * 검색바 사이의 세로 구분선이 모바일에서 줄바꿈 후 어색함 */
  .vr {
    display: none !important;
  }

  /* ----- 1.25 administrator-players 모바일 카드 info-container 줄바꿈 -----
   * 날짜·시간·주소가 한 줄 d-flex → 긴 주소는 가로 넘침 */
  .info-container.d-flex {
    flex-wrap: wrap !important;
  }

  /* ----- 1.26 고정 폭 input/select (width:400px 등) 100% 전환 -----
   * 데스크톱용 고정 폭 검색 input이 모바일에서 넘침 */
  input[style*="width:400px"],
  input[style*="width:350px"],
  select[style*="width:400px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ----- 1.27 progress-container step 라벨 스크롤 -----
   * lecture-video-play의 진행 단계 줄이 모바일에서 넘침 */
  .progress-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ----- 1.30 게시글 작성 페이지 카드 상단 패딩 보정 -----
   * 작성/수정 페이지의 #card-body-wrapper 카드 바디가 모바일에서
   * 제목 영역 바로 아래에 붙어 상단 여백이 부족하게 보임.
   * 기본 30px(--bs-card-spacer-y)가 1rem 등으로 축소될 수 있어
   * 모바일에서만 상단 패딩을 명시 보강. */
  #card-body-wrapper {
    padding-top: 1.5rem !important;
  }

  /* ----- 1.29 마이페이지 회원정보 행 – 버튼 우측 정렬 유지 -----
   * 1.18 규칙(.card > .card-body .d-flex.justify-content-between)이
   * flex-wrap:wrap 을 걸어 w-100 텍스트가 한 줄을 차지하고 버튼이
   * 아래로 밀려나는 문제를 마이페이지 탭에서만 되돌린다. */
  #pills-personal-info .d-flex.justify-content-between.align-items-center {
    flex-wrap: nowrap !important;
  }

  #pills-personal-info .d-flex.justify-content-between.align-items-center > div.w-100 {
    width: auto !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  /* ----- 1.31 모바일 검색 조건 모달 – 센터 팝업 보정 ----- */
  #scroll-long-inner-modal .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 1rem !important;
  }

  /* form-select 는 Bootstrap 배경 화살표 1개만 유지 (appearance:menulist 는 네이티브 화살표와 겹쳐 이중 표시됨) */

  /* ----- 1.33 모달 내 flatpickr altInput 100% 너비 보장 ----- */
  #scroll-long-inner-modal .flatpickr-input,
  #scroll-long-inner-modal .flatpickr-input + .form-control {
    width: 100% !important;
  }

  /* ----- 1.34 Bootstrap Dropdown (mo-dropdown) ----- */
  .mo-dropdown .dropdown-menu {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 4px 0;
    max-height: 200px;
    overflow-y: auto;
    inset: auto !important;
    transform: none !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 4px !important;
  }
  .mo-dropdown .dropdown-item {
    padding: 10px 16px;
    font-size: 15px;
  }
  .mo-dropdown .dropdown-item.active {
    background-color: #f0f4ff;
    color: #4a6cf7;
    font-weight: 600;
  }
  .mo-dropdown .dropdown-item:active {
    background-color: #e8ecf4;
    color: #333;
  }

  /* ----- 1.32 모바일 사이드바 로그아웃 버튼 높이 고정 -----
   * flex/줄바꿈 등으로 높이가 줄어드는 간헐 현상 방지 */
  .left-sidebar .logout-button.d-lg-none,
  #main-wrapper.show-sidebar .logout-button.d-lg-none {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  /* ----- 1.28 빈 app-header 숨김 -----
   * 모바일에서는 별도의 모바일 헤더를 사용하므로
   * body-wrapper 안의 빈 .app-header가 불필요한 흰 여백을 만듦 */
  .app-header {
    display: none !important;
  }

}