/* ══════════════════════════════════════════════════════════════════════
   비스크로 모바일 가시성·조작성 보정 (2026-08-11)

   감사에서 확인된 실제 결함만 좁게 고친다. 데스크탑 디자인은 건드리지 않는다.

   1) iOS 자동 확대
      입력 요소의 font-size 가 16px 미만이면 Safari 가 포커스 시 페이지를 확대한다.
      확대된 뒤 스스로 원복되지 않아 레이아웃이 깨진 것처럼 보인다.
      → 모바일 폭에서만 16px 로 올린다(데스크탑은 기존 크기 유지).

   2) 너무 작은 글씨
      9~11px 텍스트가 다수 있었다. 모바일에서 하한을 보장한다.
      (배지·카운트까지 크게 키우면 줄이 밀리므로 하한만 둔다)

   3) 터치 타겟
      16~24px 짜리 아이콘 버튼이 있었다. 모바일에서 최소 32px 확보.

   4) 가로 넘침 방어
      긴 지갑주소/해시/URL 이 컨테이너를 밀어내지 않도록 한다.

   [캐스케이드 주의 — 중요]
      이 파일은 <head> 에서 로드되지만 각 페이지의 인라인 <style> 은 그보다 뒤에 온다.
      미디어쿼리는 명시도를 올려주지 않으므로, 같은 명시도면 뒤에 오는 인라인이 이긴다.
      그래서 모든 셀렉터 앞에 html 을 붙여 명시도를 한 단계(태그 1) 올린다.
      !important 는 이후 디버깅을 어렵게 하므로 쓰지 않는다.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── 1) iOS 포커스 자동 확대 방지 ── */
    html input[type="text"],
    html input[type="search"],
    html input[type="number"],
    html input[type="email"],
    html input[type="tel"],
    html input[type="password"],
    html input[type="url"],
    html textarea,
    html select,
    html .form-control,
    html .form-input,
    html .mt-select,
    html .search-input-group input[type="text"],
    html .category-search-box input,
    html .hero-search-input,
    html .scam-check-input {
        font-size: 16px;
    }

    /* ── 2) 최소 글씨 크기 ── */
    html body,
    html p,
    html li,
    html td,
    html th,
    html .webzine-excerpt p,
    html .category-name,
    html .seller-nick,
    html .post-date {
        font-size: max(1em, 12px);
    }

    /* 장식 요소는 하한만 (11px) — 더 키우면 배지가 줄을 밀어낸다 */
    html .category-tag,
    html .category-count,
    html .hashtag-small,
    html .post-type,
    html .post-state,
    html .trade-count,
    html .quantity-info,
    html .price-label,
    html .compact-chips .post-type {
        font-size: max(1em, 11px);
    }

    /* ── 3) 터치 타겟 ── */
    html .filter-tag button,
    html .rk-page-btn,
    html .category-search-box button,
    html .btn-icon {
        min-width: 32px;
        min-height: 32px;
    }

    /* ── 4) 가로 넘침 방어 ── */
    html body {
        overflow-x: hidden;   /* 죽은 CSS(그누보드 기본테마 잔재)의 고정폭 대비 */
    }

    html .webzine-title,
    html .webzine-excerpt p,
    html .seller-nick,
    html .category-name,
    html .message-content,
    html .key-display code {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* ── 아주 좁은 화면(380px 이하) ── */
@media (max-width: 380px) {
    html .market-toolbar .mt-left,
    html .market-toolbar .mt-right {
        gap: 6px;
    }

    html .market-toolbar .mt-label {
        font-size: 11px;
    }

    html .view-toggle .vt-btn {
        padding: 6px 8px;
        font-size: 12px;
    }
}
