/* ══════════════════════════════════════════════════════════════════════════
   좁은 화면 손질

   Velzon 은 관리자 대시보드용이라 폰에서 쓸 일을 별로 안 따졌고, 영웅 목록은
   원본 사이트의 위키식 <table> 을 그대로 가져온 것이라 더 그렇다.
   폰(412px)에서 필터만 585px 을 먹어 영웅이 한 명도 안 보이던 것을 고친다.

   다른 css 뒤에 실려 마지막에 덮는다 (partials/head-css.ejs).
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* ── 상단 바 ─────────────────────────────────────────────────────────
     · 로고가 숨겨져 있어 어느 사이트인지 알 수 없었다
     · 햄버거에 .open 이 붙은 채로 떠서 화살표(→)처럼 보였다 */
  .navbar-brand-box.horizontal-logo {
    display: inline-block !important;
    padding: 0 .25rem;
  }
  .navbar-brand-box.horizontal-logo .logo img { height: 26px; }

  /* .open 이 세 줄을 화살표로 접어 놓는다. 평범한 세 줄로 되돌린다.
     Velzon 이 자식마다 규칙을 따로 두어서 이쪽도 자식마다 맞받아야 이긴다. */
  .hamburger-icon.open { transform: none; }
  .hamburger-icon.open span:nth-child(1),
  .hamburger-icon.open span:nth-child(2),
  .hamburger-icon.open span:nth-child(3) {
    left: 0;
    width: 100%;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .hamburger-icon.open span:nth-child(1) { top: 0; }
  .hamburger-icon.open span:nth-child(2) { top: 6px; }
  .hamburger-icon.open span:nth-child(3) { top: 12px; }

  /* 메뉴를 열었을 때 항목이 손가락에 맞게 */
  .navbar-menu .navbar-nav .nav-link { padding: .7rem 1rem; }
  .navbar-menu .navbar-nav .nav-link img { width: 28px; height: 22px; }

  /* ── 페이지 여백 ─────────────────────────────────────────────────────
     좌우 60px 씩 떼어 놓아 폰에서는 내용이 들어갈 자리가 없었다 */
  /* 위아래로 비워 둬야 할 자리가 있다. 둘 다 흐름 밖에 떠 있는 요소라
     여백을 줄이면 내용이 그 아래로 깔린다.
       위  상단 바가 position:fixed · 71px
           (넓은 화면은 가로 메뉴 자리까지 88px 을 두지만 폰에선 햄버거 뒤로 숨는다)
       아래 꼬리말이 position:absolute · 60px
           — 여기를 1rem 으로 줄였다가 영웅 마지막 줄이 꼬리말에 덮였다 */
  .page-content { padding: 76px .25rem 72px !important; }
  .main-content > .page-content > .container-fluid { padding: 0 .5rem; }
  .game-bg { padding: 0 8px 20px; margin-bottom: 20px; }
  .card { margin-bottom: .75rem; }
  .card-header, .card-body { padding: .6rem .7rem; }

  /* ── 영웅 목록 필터 ──────────────────────────────────────────────────
     표(라벨 칸 90px + 내용 칸)를 위아래로 쌓고 아이콘을 촘촘히 붙인다.
     세로로 흩어져 있던 레어도·진영이 두 줄로 들어온다. */
  .filter-options,
  .filter-options > tbody,
  .filter-options > tbody > tr,
  .filter-options > tbody > tr > th,
  .filter-options > tbody > tr > td {
    display: block;
    width: auto !important;
    border: 0 !important;
  }
  .filter-options { border: 1px solid #a2a9b1 !important; margin: .5rem 0; }
  .filter-options > tbody > tr + tr { border-top: 1px solid #d8dbe0 !important; }
  .filter-options > tbody > tr > th {
    text-align: left !important;
    padding: .35rem .5rem .1rem !important;
    font-size: .75rem;
    font-weight: 600;
    background: transparent !important;
  }
  .filter-options > tbody > tr > td {
    padding: .1rem .35rem .45rem !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: .2rem;
    align-items: center;
  }
  .filter-options li.btn {
    margin: 0;
    padding: .1rem .3rem;
    font-size: .72rem;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
  }
  .filter-options li.btn img { height: 20px; width: auto; }
  /* 진영 아이콘은 원본이 31x22 라 그대로 두면 너무 크다 */
  .filter-options .Multi li.btn img { height: 18px; }

  /* 영웅 카드가 담긴 마지막 줄은 flex 로 만들지 않는다 */
  .filter-options > tbody > tr > td:has(#grid) { display: block !important; padding: 0 !important; }

  /* ── 영웅 카드 ───────────────────────────────────────────────────────── */
  .filter-container { justify-content: center; gap: 2px; }

  /* ── 영웅 상세 ───────────────────────────────────────────────────────── */
  .overlay {
    width: 100%;
    max-width: none;
    margin-top: .5rem;
    padding: 8px;
    border-radius: 6px;
  }
  /* 스킨 슬라이더가 500px 을 차지해 첫 화면을 다 먹었다 */
  .image-slider { height: 300px; }
  .image-caption { font-size: 1rem; padding: 6px 0; }
  /* 클래스 비교는 가로로 늘어서므로 옆으로 밀어 본다 */
  .stat-cols { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; }
  .stat-cols > [class*="col-"] { min-width: 15rem; }
  .soldier-list { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }

  /* ── 목록 화면 공통 (용병 · 장비 · 등록) ─────────────────────────────── */
  .card-header { flex-wrap: wrap; }
  /* 검색창이 ms-auto 로 오른쪽에 붙어 화면 밖으로 나가던 것 */
  .card-header .ms-auto { margin-left: 0 !important; width: 100%; }
  .card-header input[type="search"] { width: 100% !important; }

  .eq-grid { grid-template-columns: 1fr; }
  .soldier-grid { grid-template-columns: 1fr !important; }
  .pick-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }

  /* ── 등록 화면 ───────────────────────────────────────────────────────── */
  .ad-form { width: 100vw; }
  /* 좁은 화면에서는 폼을 한 줄에 하나씩 */
  .ad-form .row > [class^="col-"], .ad-form .row > [class*=" col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .ad-table { font-size: .78rem; }

  /* ── 스케줄 ──────────────────────────────────────────────────────────── */
  .ep-imgs-row img { max-width: 100%; }

  /* ── 맨 위로 가기 ────────────────────────────────────────────────────
     position:fixed 라 늘 무언가를 덮는다. 폰에서는 카드 한 장을 통째로
     가리므로 작게 줄이고 구석으로 붙인다. */
  #back-to-top {
    bottom: 76px;
    right: 10px;
    width: 34px;
    height: 34px;
    padding: 0;
    opacity: .75;
  }
  #back-to-top:hover, #back-to-top:active { opacity: 1; }
}

/* 아주 좁은 화면 (갤럭시 폴드 접었을 때 등) */
@media (max-width: 400px) {
  .filter-options li.btn img { height: 18px; }
  .filter-container { gap: 1px; }
}