/* 휴대폰 화면 정리 (2026-10-10) — 모든 페이지에서 가장 마지막에 읽는다. 640px 이하에서만 적용 */
@media (max-width: 640px) {
  /* 바깥 여백 */
  .wrap { padding-left: 14px; padding-right: 14px; }

  /* 맨 윗줄: 데이터 출처는 숨김 */
  .util-inner { height: 34px; justify-content: flex-end; }
  .util-links { gap: 12px; font-size: 12.5px; }
  .util-links a[href$="#data"] { display: none; }

  /* 머리: 로고 + 넓은 검색창 (검색 범위 선택은 숨김 — AI 추천은 첫 화면 입력 칸에서) */
  .header-inner { flex-wrap: nowrap; gap: 12px; padding: 12px 14px; }
  .logo-text b { font-size: 22px; }
  .topsearch { flex: 1; min-width: 0; height: 40px; }
  .topsearch select, .topsearch label[for="mode"] { display: none; }
  .topsearch input { min-width: 0; font-size: 14px; padding-left: 14px; }
  .topsearch button { padding: 0 14px; font-size: 13.5px; }

  /* 메뉴: 손가락으로 넘기기 쉬운 크기 */
  .gnb a { font-size: 14px; padding: 12px 10px; }
  .gnb-group:first-child a:first-child { padding-left: 0; }
  .gnb-member, .gnb-pro { margin-left: 4px; padding-left: 8px; }
  .gnb-inner { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }

  /* 소식 줄 */
  .ticker-inner { height: 36px; gap: 10px; }
  .ticker strong, .ticker li { font-size: 12.5px; }

  /* 구역 판 (안쪽 가로 넘기기 줄이 바깥 폭을 늘리지 않도록 min-width: 0) */
  .layout { gap: 14px; padding-top: 12px; grid-template-columns: minmax(0, 1fr) !important; }
  .content, .side, .content > .block, .content > section.block { min-width: 0; max-width: 100%; }
  .content > .block, .content > section.block { padding: 18px 16px; border-radius: 16px; margin-bottom: 14px; }
  .block-head { flex-wrap: wrap; gap: 6px 10px; }
  .block-head h2 { font-size: 18px; flex: 1 1 auto; min-width: 60%; }
  .block-head h2 em { display: block; width: 100%; margin: 2px 0 0; }
  .block-desc { font-size: 13.5px; }

  /* 첫 화면 추천 칸 */
  #global { padding: 22px 16px 20px !important; }
  #global h1, #global .hero-title { font-size: 26px; line-height: 1.3; }

  /* 도서관 비교표: 항목 이름은 한 줄 위에, 두 값은 나란히 */
  table.compare { font-size: 13px; }
  table.compare thead tr, table.compare tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  table.compare thead th:first-child { display: none; }
  table.compare tbody th { grid-column: 1 / -1; background: none; padding: 10px 2px 2px; border: 0; font-size: 12.5px; color: var(--text-3); }
  table.compare td, table.compare thead th { padding: 7px 8px; word-break: keep-all; }

  /* 학술지 카드: 2열 간단형 */
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .jcard { min-height: 0; padding: 10px 10px 9px; border-radius: 10px; }
  .jcard-head { gap: 6px; margin-bottom: 6px; }
  .jcard-head .mono { width: 22px; height: 22px; font-size: 12px; }
  .jcard-pub { font-size: 11.5px; -webkit-line-clamp: 1; }
  .jcard-name { font-size: 14px; }
  .jcard-en { display: none; }
  .jcard-foot { gap: 4px 6px; padding-top: 6px; font-size: 11px; }
  .jcard-foot .issn, .jcard-foot span:not(.grade):not(.if-badge):not(.dl-badge) { display: none; }
  .jcard-links { font-size: 11px; margin-top: 4px; }

  /* 우수등재: 옆으로 넘기기 */
  #featured .card-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; scrollbar-width: none; }
  #featured .card-grid::-webkit-scrollbar { display: none; }
  #featured .jcard { flex: 0 0 72%; scroll-snap-align: start; }

  /* 탭·정렬 */
  .tabs, .idx-tabs, .sub-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs button, .idx-tabs button, .sub-tabs button { white-space: nowrap; }
  .legend { font-size: 12px; gap: 4px 10px; }
  .kci-sort { margin-left: 0; width: 100%; }
  .more button { width: 100%; }

  /* 오른쪽 칸(휴대폰에서는 아래): 현황 상자는 숨김 */
  .side-box:has(#stats) { display: none; }
  .side-pro { border-radius: 16px; }

  /* 요금제 */
  .plan { padding: 16px; }

  /* 아래 띠 */
  .footer { padding: 18px 0 26px; }
  .footer p { font-size: 12px; line-height: 1.7; }
}

/* 개인정보처리방침 표: 휴대폰에서는 한 항목씩 카드로 */
@media (max-width: 640px) {
  .legal-table { display: block; overflow: visible; border: 0; }
  .legal-table thead { display: none; }
  .legal-table tbody, .legal-table tr { display: block; }
  .legal-table tr { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
  .legal-table td { display: block; border: 0; padding: 4px 0; }
  .legal-table td::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
  .legal-table td:first-child { font-weight: 700; color: var(--text); }
  .legal { font-size: 14px; }
}