/* 좁은 화면 보정(2026-10-06) — 폴드 접은 화면(약 340px)·큰 글꼴에서 찌그러지던 것.
   소스(index.html)와 운영에 같은 파일을 건다. 화면 컴포넌트는 손대지 않고 여기서만 맞춘다. */

/* 한국어는 단어 중간에서 끊지 않는다(「안에/서」) — 넘칠 때만 끊는다 */
h1, h2, h3, h4, p { word-break: keep-all; overflow-wrap: break-word; }
/* 상단 ☰ 단추가 로고에 밀려 줄어들지 않게 */
header button { flex-shrink: 0; }
img, video, iframe { max-width: 100%; }

/* 관리자 화면: 왼쪽 메뉴(240px 고정)를 좁은 화면에서는 서랍으로 — ☰ 로 연다 */
.admin-nav-toggle, .admin-nav-backdrop { display: none; }
@media (max-width: 900px) {
  html.admin-route aside[style*="position: fixed"] {
    width: min(280px, 85vw) !important; z-index: 60 !important;
    transform: translateX(-105%); transition: transform .2s ease; box-shadow: 4px 0 24px rgba(0, 0, 0, .25);
  }
  html.admin-route.admin-nav-open aside[style*="position: fixed"] { transform: none; }
  html.admin-route main[style*="margin-left: 240px"] { margin-left: 0 !important; min-width: 0; max-width: 100vw; }
  html.admin-route main > div[style*="position: sticky"] { padding: 10px 12px 10px 60px !important; }
  html.admin-route main * { min-width: 0; }
  html.admin-route main table { display: block; overflow-x: auto; }
  html.admin-route .admin-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 8px; left: 8px; z-index: 70;
    width: 44px; height: 44px; border: 0; border-radius: 10px; background: #0f2040; color: #fff; font-size: 22px; cursor: pointer;
  }
  html.admin-route.admin-nav-open .admin-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(15, 32, 64, .45); }
}
@media (max-width: 420px) {
  html.admin-route main > div:not([style*="position: sticky"]) { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (max-width: 900px) {
  /* 서랍이 열리면 단추는 서랍 오른쪽의 ✕ 로 — 로고를 가리지 않게 */
  html.admin-route.admin-nav-open .admin-nav-toggle { left: calc(min(280px, 85vw) + 8px); background: #fff; color: #0f2040; }
}

/* 첫 화면: 좁으면 바로가기 카드가 2열로 길어져 제목·「예배 안내」를 덮는다 → 카드를 그림 아래로 내린다 */
@media (max-width: 640px) {
  div:has(> .layer-grid) { position: relative !important; transform: none !important; margin-top: -28px; }
}
/* 관리자 위쪽 줄: 좁으면 줄을 바꾸고, 단추 글자는 세로로 쪼개지지 않게 */
@media (max-width: 900px) {
  html.admin-route main > div[style*="position: sticky"] { flex-wrap: wrap; gap: 8px; }
  html.admin-route main > div[style*="position: sticky"] a,
  html.admin-route main > div[style*="position: sticky"] button { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 900px) {
  /* 좁으면 위쪽 줄이 높아져 화면을 많이 가린다 — 고정하지 않고 함께 스크롤 */
  html.admin-route main > div[style*="position: sticky"] { position: static !important; }
}