/* 이용약관 · 개인정보처리방침 — 폰(600px 아래) 적용안. 2026-10-23 대표 요청.
   넓은 화면은 legal.css 그대로다(낱말 단위 줄넘김 한 줄만 모든 폭 — 아래 ★). legal-m.js 와 한 짝.

   ① 낱말 단위로 줄을 넘긴다 — 「비밀번 / 호」 「기 / 록」처럼 낱말 가운데서 꺾였다.
   ② 문장마다 줄을 바꾼다(대표 규칙: 한 문장 한 줄) — legal-m.js 가 「다.」 뒤에 <br class="sb"> 를 넣는다.
      글자는 한 자도 안 바뀐다.
   ③ 칸이 셋 이상인 표는 줄마다 카드로 세운다 — 네 칸을 폰 폭에 나란히 두면 칸이 80px 남짓이라
      한 칸이 대여섯 줄로 꺾여 표가 600px 넘게 길어졌다. 칸 이름은 머리줄(th)에서 가져와 앞에 붙인다.
   ④ 바깥 여백 22 → 16px. */

/* ★ 낱말 단위 줄넘김만은 모든 폭에(10/24 대표 결정) — 노트북 절반 · PC 에서도 「시장 전 / 체가」
   「소 / 중히」처럼 낱말 가운데서 꺾였다(앱은 처음부터 모든 폭이 낱말 단위다). 글자 크기 · 배치는 그대로 */
p, li, td, th { word-break: keep-all; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .wrap { padding-left: 16px; padding-right: 16px; }

  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  table.stack td { border: none; padding: 2px 0; }
  /* 칸 이름은 내용과 같은 줄 앞에 작게(따로 한 줄을 쓰면 표가 되레 길어졌다). 첫 칸은 카드 제목이라 이름 없이 굵게 */
  table.stack td::before {
    content: attr(data-label); margin-right: 8px;
    font-size: 12px; font-weight: 600; color: var(--muted);
  }
  table.stack td:first-child { color: var(--ink); font-weight: 600; padding-bottom: 3px; }
  table.stack td:first-child::before { content: none; }
}