@charset "utf-8";

/* 폰 전용 — 손가락으로 누르는 칸을 44×44 이상으로 둔다.
   기존 CSS 는 한 줄도 고치지 않고 이 파일에서만 덮는다.
   반드시 mobile-layout.css 보다 «뒤»에 링크한다 — 같은 특이도에서 나중 것이 이긴다. */

@media all and (max-width: 1023px) {

  /* ── 게시판 쪽번호 ───────────────────────────────────────
     한 줄에 다 들어가지 않으면 줄을 바꾼다. 가로로 밀지 않는다. */
  .board nav .pagination,
  .pagination.pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .pagination .page-item.page-item {
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 auto;
  }

  .pagination .page-item .page-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 4px;
    white-space: nowrap;
  }

  /* ── 장비 탭 (진료실 장비 / 기공실 장비) ─────────────────
     탭 줄이 담긴 칸이 좁아 버튼이 세로로 눌려 있었다. 칸부터 넓힌다. */
  .d-flex.justify-content-between:has(.equipment-tabs) {
    flex-wrap: wrap;
  }

  .d-flex.justify-content-between > div:has(> .equipment-tabs) {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  ul.equipment-tabs.equipment-tabs {
    width: 100% !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  ul.equipment-tabs > li {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 44px !important;
  }

  ul.equipment-tabs .tab-btn {
    width: auto !important;
    min-width: 88px !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    white-space: nowrap;
  }

  
  .swiper-slide .equipment-detail,
  .equipment-detail.equipment-detail {
    flex-wrap: wrap;
  }

  .swiper-slide .equipment-detail button,
  .equipment-detail.equipment-detail button {
    min-width: 96px !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 12px !important;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* ── 남는 칸 없이 눌리게 ─────────────────────────────────
     위에서 칸을 넓혔는데도 부모가 좁아 잘리는 경우를 막는다. */
  .equipment-detail > div:has(> button) {
    width: auto !important;
    min-width: 96px !important;
    flex: 0 0 auto !important;
  }

}