/* 소개 페이지 — 폰(600px 아래) 적용안. 2026-10-22 대표 요청 · 10/23 본 페이지(about.html) 반영.
   넓은 화면은 about.css 그대로다(낱말 단위 줄넘김 한 줄만 모든 폭 — 아래 ★).

   ① 문장마다 줄을 바꾼다(대표 규칙: 한 문장 한 줄). 문장 사이에 <br class="sb"> 를 넣어 두고
      넓은 화면에서는 감춘다.
   ② (뺌) 캡처 「누르면 크게」 — 그림이 이미 화면 폭을 거의 다 써서 필요 없다(10/23 대표).
   ③ 맨 위 「둘러보기」를 지나면 맨 아래 「시작하기」까지 4,250px 동안 시작 단추가 없다 —
      위 · 아래 단추가 둘 다 화면 밖일 때만 아래에 붙는 띠(about-m.js).
   ④ 낱말 단위로 줄을 넘긴다.
   ⑤ 바닥 면책 — 글자 한 단 작게, 꺾일 때는 「~며,」 뒤에서.
   ⑥ 바닥 사업자 정보 — 항목마다 한 줄. */

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

br.sb { display: none; }
.mbar { display: none; }

@media (max-width: 600px) {
  br.sb { display: inline; }

  .mbar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--card); border-top: 1px solid var(--rule);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .28);
    transform: translateY(110%); transition: transform .2s ease;
  }
  .mbar.on { transform: none; }
  .mbar-t { font-size: 14px; color: var(--ink2); }
  .mbar .btn { margin-left: auto; padding: 10px 22px; font-size: 16px; }
  /* ⑤ 바닥 면책 — 글자를 한 단 줄여(12.5 → 10.5px) 애매하게 꺾이던 문장을 한 줄에 넣고(대표 지시),
     그래도 긴 문장은 「~며,」 뒤에서만 꺾인다(마디마다 inline-block — 로그인 화면과 같은 방식) */
  footer .disc { font-size: 10.5px; letter-spacing: -0.035em; line-height: 1.8; }
  footer .disc .cl { display: inline-block; }
  /* ⑥ 바닥 사업자 정보 — 항목마다 한 줄(10/24 폰 전체 점검: 「2026-서울동 / 대문-0886」처럼 번호가 꺾였다) */
  footer .biz .bz { display: block; }
  footer .biz .bz-sep, footer .biz br { display: none; }
  /* 띠가 마지막 글을 가리지 않게 바닥에 띠 높이만큼 비워 둔다 */
  .wrap { padding-bottom: 96px; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) { .mbar { transition: none; } }