@charset "UTF-8";

/* ══════════════════════════════════════════════════════════════
   말씀 게시판

   이 파일 하나만 읽힙니다. 2026-10-25 에 bootstrap.css 를 뺐습니다.
   281KB 중에 실제로 쓰이던 것이 10KB(3.7%) 뿐이었고, 뷰에서 쓰는
   부트스트랩 클래스는 .btn · .form-control · .form-select ·
   .input-group 네 개가 전부였습니다. 그 네 개와 밑바탕(reboot)만
   아래 「밑바탕」 칸에 옮겨 담았습니다.

   옮긴 방법 — 눈으로 고른 것이 아닙니다. 크로미움의 CSS 커버리지로
   '실제로 쓰인 바이트'만 뽑아낸 뒤, 요소 7,566개의 계산값을
   빼기 전·후로 견주어 한 개도 달라지지 않은 것을 확인했습니다.

   ── 색 ──
   따뜻한 중성 회색에 벽돌빛 악센트 하나. 파랑은 검색어 하이라이트에만
   씁니다. 화면에서 유채색이 거기 하나뿐이라 눈이 바로 갑니다.

   ── 반응형 ──
   목록은 <table> 마크업 하나입니다.
   기본(PC)은 표, max-width:640px 에서 같은 마크업을 2행 카드로
   재배치합니다. 마크업이 하나이므로 서버는 화면 폭을 몰라도 됩니다.
   (컨트롤러의 perPage() 만 User-Agent 를 봅니다.)
══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   밑바탕 — 부트스트랩에서 쓰던 것만 옮겨 왔습니다

   ★ 이 칸을 아래 규칙들보다 뒤로 옮기지 마십시오. 부트스트랩이
     먼저 읽히고 그 다음에 이 파일이 덮어쓰던 순서를 그대로
     지켜야 합니다. 예를 들어 아래쪽 `.form-control{border-radius:.55rem}`
     은 이 칸의 기본 반지름을 덮어쓰기로 되어 있습니다.

   --bs-* 변수 이름을 그대로 둔 것은 일부러입니다. 아래 :root 에
   이미 그 이름으로 값을 맞춰 둔 규칙이 여럿이라, 이름을 바꾸면
   그쪽을 전부 같이 고쳐야 합니다. 이름만 옛것이고 값은 우리 것입니다.
══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}

/* 브라우저 기본 여백 지우기 */
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}
p{margin-top:0;margin-bottom:1rem}
b,strong{font-weight:bolder}
img,svg{vertical-align:middle}
table{border-collapse:collapse}
th{text-align:inherit}
/* ★ 이 한 줄을 빼지 마십시오. 칸의 테두리 기본값을 'solid 0' 로 맞춰 둡니다.
   브라우저 기본값은 style:none 이라, 나중에 어느 칸에 두께나 색만 따로
   주면 선이 안 보이는 함정이 생깁니다. 지금은 .board-list 가 shorthand 로
   한꺼번에 주고 있어 화면이 같지만, 기본값을 어긋나게 둘 이유가 없습니다. */
thead,tbody,tfoot,tr,td,th{border-color:inherit;border-style:solid;border-width:0}
label{display:inline-block}
a{color:var(--bs-link-color);text-decoration:underline}

/* 폼 요소는 글꼴을 물려받지 않습니다. 이 네 줄이 없으면 입력창만
   돋움체로 떨어집니다 — 브라우저 기본값이 그렇습니다. */
input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}
button,select{text-transform:none}
select{word-wrap:normal}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;border-radius:0}
button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}
/* 사파리에서 type=search 를 둥근 돋보기 칸으로 바꿔 버리는 것을 막습니다 */
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}

.btn{
  display:inline-block;
  padding:.375rem .75rem;
  font-family:inherit;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color:var(--bs-body-color);
  text-align:center;
  text-decoration:none;
  vertical-align:middle;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  border:var(--bs-border-width,1px) solid transparent;
  border-radius:var(--bs-border-radius);
  background-color:transparent;
}

.form-control,.form-select{
  display:block;
  width:100%;
  padding:.375rem .75rem;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color:var(--bs-body-color);
  appearance:none;
  background-color:var(--bs-body-bg);
  background-clip:padding-box;
  border:var(--bs-border-width,1px) solid var(--bs-border-color);
  border-radius:var(--bs-border-radius);
}
.form-select{padding-right:2.25rem}
.form-control::placeholder{color:var(--bs-secondary-color);opacity:1}

/* 검색 폼의 셀렉트·입력창·버튼을 한 덩어리로 붙입니다.
   가운데 테두리를 -1px 로 겹쳐 두 줄로 보이지 않게 합니다. */
.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}
.input-group > .form-control,
.input-group > .form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}
.input-group .btn{position:relative;z-index:2}
.input-group > :not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.input-group > :not(:first-child){
  margin-left:calc(var(--bs-border-width,1px) * -1);
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}

@media (prefers-reduced-motion:no-preference){
  :root{scroll-behavior:smooth}
}

/* ══════════════════════════════════════════════════════════════ */

:root{
  --paper:#fbfaf9;
  --card:#ffffff;
  --sunken:#f5f3f1;
  --ink:#232022;
  --ink-2:#6d6763;
  --ink-3:#9b948f;
  --line:#e8e4e0;
  --line-2:#d8d2cc;
  --accent:#a8372a;
  --accent-soft:#f3e7e4;
  --accent-ink:#ffffff;
  --stone:#efe9e3;
  --stone-ink:#6b6158;
  --mark:#2d6e9e;
  --mark-ink:#ffffff;

  /* 시스템 UI 폰트. 맥은 Apple SD Gothic Neo, 윈도우는 맑은 고딕,
     안드로이드는 Noto Sans KR 로 각각 떨어집니다.
     웹폰트를 받지 않으므로 첫 화면에 글꼴 때문에 기다리는 일이 없습니다. */
  --f-body:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI Variable","Segoe UI","Malgun Gothic","Noto Sans KR","Helvetica Neue",sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* 검색 폼 폭 */
  --search-w:324px;

  /* 본문 글자 크기. 조작부가 <html data-size> 를 바꾸면 이 값만 갈린다.
     .post-body 는 이 토큰만 본다. 단계를 더하거나 빼려면 세 곳을 같이 고친다.
     ① 아래 :root[data-size=…] 와 모바일 블록의 같은 규칙
     ② logos.php 의 var SIZES
     ③ Logos::readSize() 의 흰 목록 */
  --read:18px;

  /* 부트스트랩 기본값 덮어쓰기 */
  --bs-body-font-family:var(--f-body);
  --bs-body-font-size:14px;
  --bs-body-bg:var(--paper);
  --bs-body-color:var(--ink);
  --bs-secondary-color:var(--ink-2);
  --bs-emphasis-color:var(--ink);
  --bs-border-color:var(--line);
  --bs-tertiary-bg:var(--sunken);
  --bs-secondary-bg:var(--sunken);
  --bs-border-radius:.625rem;
  --bs-border-radius-sm:.5rem;
  --bs-border-radius-lg:.875rem;
  --bs-border-radius-pill:999px;
  --bs-link-color:var(--ink);
  --bs-link-hover-color:var(--accent);
  --bs-focus-ring-color:rgba(168,55,42,.18);
  --bs-focus-ring-width:3px;
}

/* 다크 모드. 기기 설정을 따릅니다. 전환 버튼은 두지 않았습니다. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#161517;
    --card:#1d1c1f;
    --sunken:#232125;
    --ink:#ece9e6;
    --ink-2:#a8a19c;
    --ink-3:#7d766f;
    --line:#2e2b30;
    --line-2:#3b373d;
    --accent:#dd7d6c;
    --accent-soft:#2f2422;
    --accent-ink:#1a1719;
    --stone:#2b2729;
    --stone-ink:#bdb3aa;
    --mark:#3b8ac4;
    --mark-ink:#0f1216;
    --bs-focus-ring-color:rgba(221,125,108,.22);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#161517;
  --card:#1d1c1f;
  --sunken:#232125;
  --ink:#ece9e6;
  --ink-2:#a8a19c;
  --ink-3:#7d766f;
  --line:#2e2b30;
  --line-2:#3b373d;
  --accent:#dd7d6c;
  --accent-soft:#2f2422;
  --accent-ink:#1a1719;
  --stone:#2b2729;
  --stone-ink:#bdb3aa;
  --mark:#3b8ac4;
  --mark-ink:#0f1216;
  --bs-focus-ring-color:rgba(221,125,108,.22);
  color-scheme:dark;
}

/* 다섯 단계. 아래로 두 단계는 "한 화면에 많이 보려는" 쪽을 위한 것이다.
   12px 이 바닥이다. 그 아래는 본문 글꼴에서 한글 받침이 뭉개진다. */
:root[data-size="xxs"]{--read:12px}
:root[data-size="xs"] {--read:14px}
:root[data-size="s"]  {--read:16px}
:root[data-size="l"]  {--read:21px}

body{
  font-family:var(--f-body);
  font-size:14px;
  line-height:1.7;
  background:var(--paper);
  color:var(--ink);
  margin:0;
  /* 한국어는 어절 단위로 끊는 것이 읽기 좋습니다. */
  word-break:keep-all;
  -webkit-text-size-adjust:100%;
}

.wrap{
  max-width:1140px;
  margin:0 auto;
  padding:26px max(16px,env(safe-area-inset-left,0px)) 64px max(16px,env(safe-area-inset-right,0px));
}

::selection{background:var(--accent-soft);color:var(--ink)}

/* 포커스: 번지는 그림자를 쓰지 않습니다. 테두리 색만 한 톤 진해집니다. */
.form-control:focus,.form-select:focus,.btn:focus,.btn:focus-visible,
button:focus,button:focus-visible{
  border-color:var(--ink-3);
  box-shadow:none;
  outline:0;
}
.form-control,.form-select{
  background:var(--card);
  border-color:var(--line-2);
  color:var(--ink);
  border-radius:.55rem;
}
/* 화살표 아이콘을 직접 그립니다. 부트스트랩 기본값은 파란 계열입니다. */
.form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239b948f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  background-size:11px 11px;
  padding-right:24px;
}

/* ── 게시판 탭 ─────────────────────────────────────────────── */
/* 탭과 화면 설정이 한 줄에 선다. 밑줄은 바깥 줄이 그린다. */
.topbar{
  display:flex;
  align-items:flex-start;
  gap:16px;
  border-bottom:1px solid var(--line);
  margin-bottom:20px;
}
.boardnav{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  flex:1 1 auto;
  min-width:0;
}
.boardnav a{
  color:var(--ink-3);
  text-decoration:none;
  white-space:nowrap;
  font-size:13px;
  font-weight:500;
  padding:8px 15px 9px;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.boardnav a:hover{color:var(--ink-2)}
.boardnav a.active{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}

/* ── 화면 설정 (글자 크기 · 테마) ─────────────────────────────
   탭보다 한 단계 작게 둔다. 한 번 맞춰 두고 잊는 장치라 탭과 제목이
   먼저 읽히고 이것이 나중에 보이면 된다.

   ★ 바깥 상자에 높이를 못박는다.
     <button> 은 브라우저 기본값이 border-box 인데 <div> 는 그렇지
     않다. 섞여 있으면 같은 height 를 줘도 테두리 두께만큼 높이가
     어긋난다(시안에서 28px 대 26px 로 실측). 맨 위 「밑바탕」 칸이 전역
     box-sizing 을 깔아 주지만, 높이를 명시해 두면 그것과 무관하게 맞는다.
─────────────────────────────────────────────────────────── */
.prefs{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding-bottom:7px}
.prefs-row{display:flex;align-items:center;gap:6px}

/* 여닫는 체크박스는 화면에서 치우되 지우지는 않습니다.
   display:none 을 주면 키보드로 label 을 눌러도 상태가 바뀌지 않습니다. */
.prefs-open{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* 폰 전용. PC 에서는 패널이 늘 펴져 있어 이 단추가 필요 없습니다.
   보이는 동그라미는 20px, 누르는 자리는 36px 입니다. 손끝으로 누르는
   자리를 줄이지 않으면서 줄에 얹힌 크기만 줄이려고 둘을 갈라 둡니다. */
.btn-prefs{
  display:none;
  width:36px;
  height:36px;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  margin-right:-8px;   /* 보이는 동그라미를 오른쪽 끝선에 맞춘다 */
  cursor:pointer;
}
.btn-prefs svg{
  width:20px;
  height:20px;
  padding:3px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--card);
  color:var(--ink-2);
}
.prefs-open:checked ~ .topbar .btn-prefs svg{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}

/* 패널 안에서만 쓰는 이름표와 테마 단추 셋. PC 에서는 숨습니다. */
.prefs-cap,
.prefs-theme-group{display:none}

.prefs-size{
  display:inline-flex;
  height:26px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--card);
  overflow:hidden;
}
.prefs-size button{
  font-family:inherit;
  border:0;
  background:transparent;
  color:var(--ink-2);
  cursor:pointer;
  padding:0 10px;
  height:100%;
  font-size:11.5px;
  line-height:1;
}
.prefs-size button:first-child{border-right:1px solid var(--line)}
.prefs-size button span{font-size:9px;vertical-align:2px}
.prefs-size button:hover:not(:disabled){color:var(--ink)}
.prefs-size button:disabled{color:var(--line-2);cursor:default}

.prefs-theme{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:inherit;
  height:26px;
  padding:0 11px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--card);
  color:var(--ink-2);
  cursor:pointer;
  font-size:11.5px;
  font-weight:500;
  white-space:nowrap;
}
.prefs-theme:hover{color:var(--ink);border-color:var(--ink-3)}
.prefs-theme svg{width:12px;height:12px;flex:none}
/* PC 는 아이콘만 둡니다. 그림이 셋으로 갈려(빛살 든 해=기기 설정, 해=밝게,
   달=어둡게) 글자 없이도 지금 상태가 읽힙니다. 화면 낭독기에는 aria-label
   이 그대로 읽히므로 정보가 줄지 않습니다. */
.prefs-theme{padding:0;width:26px;justify-content:center;gap:0}
.prefs-theme .prefs-label{display:none}

/* 아이콘 셋을 다 넣어 두고 지금 상태의 것만 보여준다.
   누를 때 그림을 새로 그리지 않으므로 깜빡임이 없다. */
.prefs-theme .i-auto,
.prefs-theme .i-light,
.prefs-theme .i-dark{display:none}
:root:not([data-theme]) .prefs-theme .i-auto{display:block}
:root[data-theme="light"] .prefs-theme .i-light{display:block}
:root[data-theme="dark"] .prefs-theme .i-dark{display:block}

/* ── 제목 + 구분 필터 + 검색 버튼 ─────────────────────────────
   한 줄에 세 덩어리가 들어갑니다. order 로 자리를 잡습니다.
     1 제목   2 구분 필터   3 검색 버튼(오른쪽 끝)
   ★ 세 요소 모두 order 를 지정해야 합니다. 하나라도 빠뜨리면 그
     요소는 order:0 이 되어 제목보다 앞으로 튀어 나갑니다.
─────────────────────────────────────────────────────────────── */
.board-head{
  display:flex;
  align-items:center;
  gap:10px 16px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.board-head h1{
  font-weight:700;
  font-size:25px;
  margin:0;
  letter-spacing:-.02em;
  line-height:1.25;
  flex:none;
  order:1;
}
.filters{display:flex;gap:6px 16px;align-items:center;flex-wrap:wrap;order:2}

.pills{display:inline-flex;background:var(--sunken);border-radius:999px;padding:2px;gap:1px}
.pills a{
  color:var(--ink-2);
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  padding:5px 15px;
  white-space:nowrap;
  text-decoration:none;
  display:inline-block;
  line-height:1.5;
  transition:background .14s ease,color .14s ease;
}
.pills a:hover{color:var(--ink)}
.pills a.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* 폰 전용 구분 선택 상자. PC 에서는 숨고 640px 이하에서 알약과 자리를 바꿉니다.
   알약은 구분이 늘어날수록 가로로 길어지는데, 폰에서는 그 줄이 통째로 밀려
   납니다. 선택 상자는 몇 개가 되든 폭이 그대로입니다. */
.catform{display:none;align-items:center;gap:6px}
.fsel{
  font-size:13px;
  line-height:1.6;
  /* ★ min-width 를 주지 않습니다. '전체' 처럼 짧은 값일 때 남는 자리가
     글자와 화살표 사이로 벌어집니다. 폭은 글자에 맞추고, 화살표는
     부트스트랩이 오른쪽에서 9px 자리에 그립니다. */
  padding:5px 24px 5px 12px;
  background-position:right 9px center;
  width:auto;
  min-width:0;
  max-width:none;
  border-radius:999px;
  background-color:var(--sunken);
  border-color:transparent;
  color:var(--ink);
  font-weight:500;
}
.fsel:focus{border-color:var(--line-2)}
/* 자바스크립트가 꺼졌을 때만 나오는 버튼입니다. 켜져 있으면 고르는 즉시 넘어갑니다. */
.catgo{
  border:1px solid var(--line-2);
  background:var(--card);
  color:var(--ink-2);
  border-radius:999px;
  font:inherit;
  font-size:12.5px;
  padding:5px 13px;
  cursor:pointer;
}

/* 검색 버튼. 실제로는 숨은 체크박스의 <label> 입니다. */
.btn-search{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  margin-left:auto;
  order:3;
  font-size:12.5px;
  font-weight:500;
  padding:5px 15px;
  border-radius:999px;
  background:var(--card);
  color:var(--ink-2);
  border:1px solid var(--line-2);
  cursor:pointer;
  user-select:none;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.btn-search:hover{color:var(--ink);border-color:var(--ink-3)}
.btn-search svg{width:13px;height:13px}

/* ── 상단 검색 접기 ───────────────────────────────────────────
   체크박스는 화면에서 숨기지만 키보드 포커스는 살려 둡니다.
   display:none 으로 지우면 Tab 으로 닿을 수 없습니다.
─────────────────────────────────────────────────────────────── */
.search-open{
  position:absolute;
  width:1px;height:1px;
  margin:0;padding:0;border:0;
  opacity:0;
  pointer-events:none;
}
#searchpanel_top{display:none}
.search-open:checked ~ #searchpanel_top{display:block}
/* 열려 있으면 버튼이 눌린 모양이 됩니다. */
.search-open:checked ~ .board-head .btn-search{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
/* 체크박스가 포커스를 받으면 라벨에 표시가 나야 합니다. */
.search-open:focus-visible ~ .board-head .btn-search{
  border-color:var(--ink-3);
  box-shadow:0 0 0 3px var(--bs-focus-ring-color);
}

/* ── 검색 폼 ───────────────────────────────────────────────── */
.searchpanel{
  background:var(--sunken);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 15px 12px;
  margin:0 0 16px;
}
/* 목록 아래 폼은 항상 펼쳐져 있습니다. 옛 게시판과 같은 자리입니다. */
.searchpanel.bottom{margin:26px 0 0}
.searchpanel .input-group{max-width:var(--search-w);flex-wrap:nowrap}
/* ★ 부트스트랩은 .input-group 안의 폼 요소에 width:1% 를 줍니다.
     이 줄을 빼면 선택 상자가 화살표만 남고 글자가 사라집니다. */
.searchpanel .form-select{
  width:auto;
  flex:0 0 auto;
  min-width:0;
  font-size:13px;
  line-height:1.6;
  padding:7px 24px 7px 10px;
  border-radius:.6rem 0 0 .6rem;
  border-right-color:transparent;
}
.searchpanel .form-control{font-size:13.5px;border-radius:0;min-width:0;padding:7px 12px}
.searchpanel .btn-go{
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  flex:0 0 auto;
  font-size:13px;
  font-weight:500;
  padding:7px 14px;
  border-radius:0 .6rem .6rem 0;
}
.searchpanel .btn-go:hover{background:var(--accent);border-color:var(--accent);color:#fff}

.search-hint{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  align-items:center;
  font-size:11.5px;
  color:var(--ink-3);
  margin:10px 0 0;
  line-height:1.5;
}
/* ★ 시안 그대로입니다. 예시('하나님 예수님', '모세||엘리야')를 고정폭으로
   보여줘서 입력란에 칠 모양과 똑같이 보이게 하는 것이 요지입니다.
   font-family 를 빼면 예시가 본문 글꼴로 바뀌어 의도가 흐려집니다. */
.search-hint .k{
  font-family:var(--f-mono);
  font-size:11px;
  background:var(--card);
  border:1px solid var(--line);
  padding:3px 9px;
  border-radius:6px;
  color:var(--ink-2);
  white-space:nowrap;
  display:inline-block;
}
.search-hint .k em{
  font-family:var(--f-body);
  font-style:normal;
  font-weight:700;
  color:var(--ink);
  margin-right:6px;
  letter-spacing:.03em;
}

/* ── 검색 결과 안내 ────────────────────────────────────────── */
.searchnote{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--ink-2);
  background:var(--accent-soft);
  border-radius:10px;
  padding:8px 13px;
  margin:0 0 14px;
}
/* 안내줄의 검색어 알약도 본문과 같은 색으로 칠한다.
   어느 단어가 무슨 색인지 여기서 한 번에 보여야, 본문에서 색만 보고
   단어를 알아볼 수 있다. */
.searchnote .term{
  background:var(--card);
  border-radius:5px;
  padding:1px 7px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
.searchnote .term.hl1{background:var(--hl1);color:var(--hl-ink)}
.searchnote .term.hl2{background:var(--hl2);color:var(--hl-ink)}
.searchnote .term.hl3{background:var(--hl3);color:var(--hl-ink)}
.searchnote .term.hl4{background:var(--hl4);color:var(--hl-ink)}
.searchnote .term.hl5{background:var(--hl5);color:var(--hl-ink)}
.searchnote .term.hl6{background:var(--hl6);color:var(--hl-ink)}
.searchnote .term.hl7{background:var(--hl7);color:var(--hl-ink)}
.searchnote .term.hl8{background:var(--hl8);color:var(--hl-ink)}
.searchnote .term.hl9{background:var(--hl9);color:var(--hl-ink)}
.searchnote .term.hl10{background:var(--hl10);color:var(--hl-ink)}
.searchnote b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.searchnote .note-sub{margin-left:auto;font-size:11px;color:var(--ink-3)}
.linkish{color:var(--accent);font-size:11.5px;text-decoration:underline}

/* 제목 앞머리의 성경 구절. LogosModel::renderTitle() 이 감싼다. */
.t-ref{color:var(--accent);font-weight:500;white-space:nowrap}

/* ── 건수 줄 ───────────────────────────────────────────────── */
.countbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--ink-2);
  margin:0 0 8px;
  letter-spacing:.01em;
}
.countbar b{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.toppager{display:inline-flex;align-items:center;gap:2px}
.toppager b{
  font-size:11.5px;
  font-weight:600;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
  padding:0 6px;
}
.toppager a,.toppager .off{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line-2);
  background:var(--card);
  color:var(--ink-2);
  width:26px;height:26px;
  line-height:1;
  border-radius:7px;
  font-size:15px;
  text-decoration:none;
}
.toppager .off{opacity:.3}
.toppager a:hover{border-color:var(--ink-3);color:var(--ink)}

/* ── 목록 ──────────────────────────────────────────────────── */
/* ★ table-layout:fixed 를 빼지 마십시오.
   기본값(auto)은 칸 너비를 내용에서 계산합니다. 그러면 구분에 '수요설교'
   처럼 긴 값이 섞인 목록과 '성경' 하나뿐인 목록에서 구분 칸 너비가 달라져
   (66px / 54px) 제목이 12px 옆으로 밀립니다. 구분 알약을 눌러 걸러 볼 때마다
   제목 시작 위치가 흔들립니다(실측).
   fixed 로 두면 아래 선언한 폭이 그대로 쓰여 어느 목록에서나 같은 자리입니다. */
.board-list{width:100%;margin:0;border-collapse:collapse;table-layout:fixed}
.board-list thead th{
  font-size:10.5px;
  font-weight:500;
  color:var(--ink-2);
  letter-spacing:.06em;
  padding:0 10px 8px;
  border-bottom:1px solid var(--line-2);
  white-space:nowrap;
  text-align:left;
}
/* 행 전체를 누를 수 있게 합니다. 제목의 <a> 를 행 크기로 늘려 덮는 방식이라
   JavaScript 가 필요 없습니다. position:relative 는 그 기준점입니다. */
.board-list tbody tr{
  position:relative;
  border-bottom:1px solid var(--line);
  transition:background .12s ease;
}
.board-list tbody tr:hover{background:var(--sunken)}
/* ★ vertical-align 을 middle 로 되돌리지 마십시오.
   제목이 두 줄이 되는 줄에서 번호·구분·분류·날짜가 두 줄의 '가운데'로
   내려가, 제목 첫 줄과 단이 어긋나 보입니다(실측 13px).
   top 으로 두면 어느 줄에서나 제목 첫 줄에 맞습니다. */
.board-list td{padding:12px 10px;vertical-align:top}
/* 작은 글씨 칸의 한 줄 높이를 제목 첫 줄(14px × 1.5 = 21px)과 같게 맞춘다.
   글자 크기가 달라도 첫 줄 기준선이 나란히 선다. */
.board-list .c-no,
.board-list .c-cat,
.board-list .c-book,
.board-list .c-author,
.board-list .c-date{line-height:21px}
.board-list .c-no,.board-list .c-date{font-variant-numeric:tabular-nums}
/* ★ 색을 --ink-3 에서 --ink-2 로 올렸습니다.
   --ink-3(#9b948f)은 바탕(#fbfaf9) 대비 2.9:1 로 WCAG 기준 4.5:1 에
   못 미칩니다. 11.5px 작은 글씨라 더 읽기 어렵습니다.
   --ink-2(#6d6763)는 5.4:1 입니다. 되돌리지 마십시오. */
.board-list .c-no,
.board-list .c-cat,
.board-list .c-date,
.board-list .c-author{font-size:11.5px;color:var(--ink-2)}
.board-list .c-book{font-size:12px;color:var(--stone-ink)}
.board-list .c-title{
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.board-list .c-title a{color:inherit;text-decoration:none}
.board-list .c-title a:hover{color:var(--accent)}
.board-list .c-title a::after{content:"";position:absolute;inset:0}
/* PC 목록에는 작성자를 두지 않습니다. 네 분 다 글쓴이가 한 명이라
   줄마다 같은 이름이 반복되어 정보가 되지 않습니다. */
.board-list .c-author{display:none}
/* 고정 폭. 합이 표 너비를 넘지 않게 두면 제목이 나머지를 가져간다.
   구분 86px 는 한글 6자까지 들어간다. 그보다 긴 구분 이름을 쓰실 거면
   이 값만 키우십시오 — 칸 순서나 다른 폭은 건드릴 필요가 없습니다. */
.board-list .c-no{width:58px}
.board-list .c-cat{width:86px}
.board-list .c-book{width:112px}
.board-list .c-date{width:92px}

/* ★ 표의 첫 칸과 끝 칸은 좌우 여백을 뗍니다.
   칸마다 10px 을 두면 '번호' 가 제목(h1)·건수 줄보다 10px 안으로 들어가고,
   '날짜' 는 검색 버튼의 오른쪽 끝선에 못 닿습니다. 표만 혼자 안쪽으로
   들어가 보입니다. 날짜를 오른쪽 맞춤으로 두는 것은 자릿수가 모두 같아
   (20-02-10) 끝선이 한 줄로 떨어지기 때문입니다. */
.board-list .c-no{padding-left:0}
.board-list .c-date{text-align:right;padding-right:0}
/* 폭을 넘는 값이 들어와도 줄을 바꾸지 않고 … 로 자른다.
   fixed 레이아웃에서는 칸이 늘어나지 않으므로, 이게 없으면 두 줄이 되어
   그 줄만 키가 커진다. */
.board-list .c-cat,
.board-list .c-book{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

tr.is-open{background:var(--accent-soft)}
tr.is-open:hover{background:var(--accent-soft)}
tr.is-open .c-no{color:var(--accent);font-weight:600}
.openmark{display:inline-flex;gap:3px;align-items:center;white-space:nowrap;font-size:11px}

.empty-row td{padding:44px 10px;text-align:center;color:var(--ink-3);font-size:13px}
.empty-row::after{content:none}

/* 검색어 하이라이트. 화면에서 유일한 파랑입니다. */
/* ── 검색어 하이라이트 ──────────────────────────────────────
   단어마다 색이 다릅니다. '예수 성경' 으로 찾으면 예수는 파랑,
   성경은 초록. 본문을 훑을 때 어느 단어인지 바로 보입니다.
   첫 번째 색(--hl1)은 예전 단색 시절의 파랑 그대로라, 한 단어만
   찾았을 때는 전과 똑같아 보입니다.

   색 고르는 기준
     · 흰 글자 대비 4.5:1 이상 (10색 전부 4.86 ~ 7.25 확인)
     · 색상각이 서로 벌어져 있을 것 (가장 가까운 쌍이 24도)
     · 10번째는 채도를 낮춘 회색 계열. 열 가지를 색상만으로
       가르는 건 무리라, 마지막 하나는 '무채색'으로 구분한다
   되돌릴 때는 --hl1 ~ --hl10 값만 바꾸면 됩니다.
─────────────────────────────────────────────────────────── */
:root{
  --hl1:#2d6e9e;  --hl2:#2d7a52;  --hl3:#8a4ea8;  --hl4:#b05a16;  --hl5:#0f6f6a;
  --hl6:#a33a6b;  --hl7:#4557b0;  --hl8:#6f6b1a;  --hl9:#4a7a1f;  --hl10:#525c6b;
  --hl-ink:#ffffff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --hl1:#7fb3d9;  --hl2:#79c79c;  --hl3:#c79be0;  --hl4:#e8a76a;  --hl5:#6fc9c2;
    --hl6:#e394bb;  --hl7:#9aa7ef;  --hl8:#c6c070;  --hl9:#a9cf7e;  --hl10:#aeb8c6;
    --hl-ink:#0f1216;
  }
}
:root[data-theme="dark"]{
  --hl1:#7fb3d9;  --hl2:#79c79c;  --hl3:#c79be0;  --hl4:#e8a76a;  --hl5:#6fc9c2;
  --hl6:#e394bb;  --hl7:#9aa7ef;  --hl8:#c6c070;  --hl9:#a9cf7e;  --hl10:#aeb8c6;
  --hl-ink:#0f1216;
}

mark{background:var(--mark);color:var(--mark-ink);border-radius:4px;padding:0 4px;font-weight:500}
mark.hl1{background:var(--hl1);color:var(--hl-ink)}
mark.hl2{background:var(--hl2);color:var(--hl-ink)}
mark.hl3{background:var(--hl3);color:var(--hl-ink)}
mark.hl4{background:var(--hl4);color:var(--hl-ink)}
mark.hl5{background:var(--hl5);color:var(--hl-ink)}
mark.hl6{background:var(--hl6);color:var(--hl-ink)}
mark.hl7{background:var(--hl7);color:var(--hl-ink)}
mark.hl8{background:var(--hl8);color:var(--hl-ink)}
mark.hl9{background:var(--hl9);color:var(--hl-ink)}
mark.hl10{background:var(--hl10);color:var(--hl-ink)}

/* ── 페이징 ────────────────────────────────────────────────── */
/* 숫자는 라운드 사각 박스. 현재 페이지만 채웁니다. */
.pager{display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:wrap;margin:24px 0 0}
.pager a,.pager .on{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  padding:0;
  text-decoration:none;
  border:1px solid var(--line-2);
  background:var(--card);
  color:var(--ink-2);
  border-radius:8px;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.pager a:hover{border-color:var(--ink-3);color:var(--ink)}
.pager .on{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.pager .gap{
  width:22px;
  text-align:center;
  color:var(--ink-3);
  font-size:13px;
  user-select:none;
  line-height:34px;
}

/* ── 글 보기 ───────────────────────────────────────────────── */
.post-head{background:var(--sunken);border-radius:14px;padding:18px 20px 14px}
.post-title{
  font-weight:700;
  font-size:22px;
  margin:0 0 10px;
  line-height:1.4;
  letter-spacing:-.01em;
  word-break:keep-all;
}
.tag{
  display:inline-block;
  font-size:10.5px;
  font-weight:600;
  line-height:1.9;
  border-radius:999px;
  padding:0 10px;
  margin:0 0 2px 6px;
  vertical-align:middle;
  white-space:nowrap;
  letter-spacing:.02em;
}
.tag-cat{background:var(--accent);color:var(--accent-ink)}
.tag-book{background:var(--stone);color:var(--stone-ink)}
.post-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  font-size:11.5px;
  color:var(--ink-2);
  border-top:1px solid var(--line);
  padding-top:10px;
}
.post-meta span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.post-meta svg{width:12px;height:12px;opacity:.8}

/* 본문 블록 안, 마지막 줄 다음. 오른쪽 끝에 붙습니다.
   본문 글자 크기를 키워도 단추는 그대로 두려고 font-size 를 되돌립니다 —
   .post-body 가 var(--read) 를 쓰므로 그냥 두면 단추까지 같이 커집니다. */
/* margin-right 의 -2px 는 .post-body 의 좌우 안쪽 여백을 되돌리는 값입니다.
   그래야 단추 오른쪽 끝이 날짜·검색 버튼과 같은 세로선에 섭니다. */
.post-tools{display:flex;justify-content:flex-end;margin:14px -2px 0 0;font-size:14px;line-height:1.5}
.btn-list{
  background:var(--ink);
  color:var(--paper);
  border-radius:999px;
  font-size:12.5px;
  font-weight:500;
  padding:6px 20px;
  text-decoration:none;
  display:inline-block;
}
.btn-list:hover{background:var(--accent);color:#fff}

/* 설교 본문. 한 번에 길게 읽는 글이라 목록보다 크게 잡는다.
   max-width 는 한 줄에 한글 40자 안팎이 되도록 한 것이다. 줄이 길면
   눈이 다음 줄 첫머리를 찾기 어려워진다. 창을 넓혀도 더 늘어나지 않는다. */
.post-body{
  padding:18px 2px 0;
  font-size:var(--read);
  line-height:1.9;
  /* 폭을 따로 묶지 않는다. 바깥 .wrap(최대 1140px)이 이미 상한이다.
     한때 40em(한글 40자)으로 좁혔더니 읽기에는 좋았지만 화면이 휑했다.
     줄이 너무 길게 느껴지면 여기에 max-width 를 다시 주면 된다. */
  word-break:keep-all;
  overflow-wrap:break-word;
}
.post-body p{margin:0 0 1.35em}
.list-label{font-size:11px;color:var(--ink-3);margin:32px 0 8px;letter-spacing:.02em}

/* ══════════════════════════════════════════════════════════════
   모바일 — 같은 표를 2행 카드로 재배치
   1행  제목 (전체 폭)
   2행  번호 · 구분 · 작성자 · 날짜
   분류(성경 책)는 숨깁니다. 좁은 화면에서 두 줄이 되어 버립니다.
══════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .wrap{padding-top:18px;padding-bottom:40px}
  .board-head h1{font-size:20px}

  /* 손가락으로 누르는 자리라 조금 키운다. 테마는 글자를 빼고 아이콘만. */
  .prefs{gap:5px;padding-bottom:5px}
  .prefs-size{height:32px}
  .prefs-size button{width:34px;padding:0}
  .prefs-theme{height:32px;width:32px;padding:0;justify-content:center}
  .prefs-theme .prefs-label{display:none}
  .prefs-theme svg{width:14px;height:14px}

  /* ★ 구분 필터는 목사 이름 바로 옆에 붙습니다 (시안 확정안).
     제 줄을 쓰던 것을 여기로 올렸습니다. 폰에서는 머리말 한 줄이
     곧 목록 한 줄입니다 — 한 줄을 줄이면 글이 한 건 더 보입니다.
     order 는 기본값(제목 1 · 구분 2 · 검색 3)을 그대로 씁니다. */
  .filters{flex:0 0 auto;gap:8px}
  .board-head h1{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ★ 알약을 선택 상자로 바꿉니다. 두 벌 다 찍혀 있고 자리만 바꿉니다.
     알약은 구분이 늘수록 가로로 길어져 그 줄이 통째로 밀려 납니다. */
  .pills{display:none}
  .catform{display:inline-flex}

  /* ── 화면 설정 — 톱니바퀴를 눌렀을 때만 ──────────────────
     자바스크립트가 아니라 체크박스 하나로 엽니다. 멈춰 있는 동안
     지켜보는 코드가 없습니다. */
  .btn-prefs{display:inline-flex}
  .prefs{display:none}
  /* ★ 이 줄을 빼지 마십시오.
     설정 패널은 flex:0 0 100% 로 제 줄을 차지합니다. 그런데 .topbar 가
     줄을 바꾸지 못하면 패널이 탭 줄에 그대로 끼어듭니다. 그러면
       · 게시판 탭이 0px 로 찌그러져 사라지고
       · 패널이 화면 밖으로 44px 밀려 나가 가로 스크롤이 생깁니다 (실측). */
  .topbar{flex-wrap:wrap}
  .prefs-open:checked ~ .topbar .prefs{
    display:flex;
    flex:0 0 100%;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin:0 0 12px;
    padding:12px 14px;
    background:var(--sunken);
    border:1px solid var(--line);
    border-radius:14px;
  }
  .prefs-cap{display:inline;flex:0 0 52px;font-size:11.5px;color:var(--ink-2)}
  .prefs-row{gap:10px}

  /* 패널 안은 자리가 넉넉하다. 손끝으로 누르는 단추는 크게 둔다. */
  .prefs-size{height:38px}
  .prefs-size button{width:44px;padding:0;font-size:13.5px}

  /* 돌리는 아이콘 대신 셋을 나란히. 무엇이 있는지 보이는 편이 낫다. */
  .prefs-theme{display:none}
  .prefs-theme-group{display:flex;gap:6px;flex-wrap:wrap}
  .prefs-theme-opt{
    font-family:inherit;
    font-size:12px;
    font-weight:500;
    padding:7px 13px;
    border:1px solid var(--line-2);
    border-radius:999px;
    background:var(--card);
    color:var(--ink-2);
    white-space:nowrap;
    cursor:pointer;
  }
  .prefs-theme-opt[aria-pressed="true"]{
    background:var(--ink);
    border-color:var(--ink);
    color:var(--paper);
    font-weight:600;
  }

  /* ★ 탭 줄은 한 줄로 고정합니다. 게시판이 넷이 되면 접히면서
     목록을 한 줄 더 밀어내는데, 띠 안에서만 옆으로 밀면 그 일이 없습니다.
     쪽 전체가 가로로 움직이는 것이 아닙니다. */
  /* ★ flex-basis 를 0 으로 두는 것이 핵심입니다. 빼지 마십시오.
       .topbar 가 flex-wrap:wrap 인데, 플렉스는 '줄을 가르는 일'을
       '줄이는 일'보다 먼저 합니다. basis 가 auto 면 탭 줄의 기준 너비가
       제 내용 폭(320px 화면에서 288px)이 되어 한 줄을 혼자 다 차지하고,
       톱니 단추가 둘째 줄 왼쪽으로 밀려납니다. flex-shrink 는 줄을 가른
       뒤에 동작하므로 손쓸 기회가 없습니다.
       basis 를 0 으로 두면 줄을 가를 때 탭 줄을 0px 로 보므로 톱니가
       늘 같은 줄에 남고, 그 뒤 남은 자리를 탭 줄이 채웁니다. 넘치는
       탭은 아래 overflow-x 로 옆으로 밀어 봅니다.
       320px 에서 실제로 밀려났던 것을 2026-10-25 에 고쳤습니다. */
  .boardnav{flex:1 1 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .boardnav::-webkit-scrollbar{display:none}
  .boardnav a{flex:0 0 auto;padding:8px 10px}

  .searchpanel .input-group{max-width:none}

  /* ── 목록: 제목 한 줄 + 날짜 ──────────────────────────────
     한 줄에 제목과 날짜만 둡니다. 번호·구분·분류·작성자는 숨깁니다.
     한 줄 높이가 38px 로 고정되어 한 화면에 약 17건이 들어갑니다.
     (메타를 한 줄 더 두던 이전 배치는 66px, 약 9건이었습니다.)

     무엇을 왜 숨기는가
       작성자  네 게시판 모두 글쓴이가 한 명이라 줄마다 같은 이름이 반복된다
       구분    지금은 '설교' 하나뿐이라 역시 반복이다
       번호    평범한 목록에서는 내림차순 카운터일 뿐이다
       분류    성경 책 이름. 대개 제목 앞머리에 이미 들어 있다
     셋 다 PC 표에서는 그대로 보입니다. 숨기는 건 이 화면폭에서만입니다.
  ─────────────────────────────────────────────────────────── */
  /* ★ 표를 블록으로 풀어야 합니다.
     tr 을 flex 로 바꾸면 표에 table-row 가 하나도 남지 않는데, 표는
     내용의 최소 너비 아래로는 줄지 않습니다. 그래서 width:100% 를 줘도
     표가 786px 로 벌어져 가로 스크롤이 생깁니다(실측).
     table 과 tbody 를 블록으로 두면 아래 min-width:0 이 비로소 듣습니다. */
  .board-list{display:block;border-top:1px solid var(--line-2)}
  .board-list tbody{display:block}
  .board-list thead{display:none}
  .board-list tbody tr{
    display:flex;
    /* 제목이 날짜 바로 앞까지 가도록 좁게 둡니다. */
    gap:8px;
    align-items:center;
    /* ★ 좌우 여백 0. 제목이 목사 이름(h1)·건수 줄과 같은 세로선에서
       시작하고, 날짜가 검색 버튼과 같은 세로선에서 끝납니다. */
    padding:9px 0;
  }
  .board-list tbody tr > td{display:block;padding:0;width:auto;white-space:nowrap}

  /* 제목 한 줄. 넘치면 … 로 자릅니다.
     ★ min-width:0 이 없으면 flex 항목이 내용 너비 아래로 줄지 않아
       말줄임이 걸리지 않고 날짜를 밀어냅니다. */
  .board-list td.c-title{
    flex:1 1 auto;
    min-width:0;
    font-size:14px;
    line-height:1.4;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* 날짜는 tabular-nums 라 폭이 고정입니다. 그래서 모든 줄에서
     제목이 잘리는 끝선이 똑같이 맞습니다. */
  /* 줄높이를 되돌린다. PC 쪽에서 단 맞추려고 21px 로 고정해 둔 값이
     그대로 오면 줄이 1px 높아진다. */
  /* ★ width:auto 를 빼지 마십시오.
     PC 용 `.board-list .c-date{width:92px}` 은 클래스가 둘이라 위쪽
     `tr > td{width:auto}` 보다 무거워서 폰에서도 이깁니다. 그대로 두면
     날짜 칸이 92px 인데 글자는 57px 이라 안쪽에 35px 이 비고, 줄 간격까지
     더해 제목과 날짜 사이가 43px 벌어집니다(실측). 제목이 그만큼 일찍
     잘립니다. 여기서는 클래스 둘 + 요소 하나라 이 줄이 이깁니다. */
  .board-list td.c-date{width:auto;flex:0 0 auto;font-size:11px;line-height:1.4}

  .board-list td.c-no,
  .board-list td.c-cat,
  .board-list td.c-book,
  .board-list td.c-author{display:none}

  /* 글을 보는 중인 줄은 '열람 ➜' 대신 바탕색으로만 표시합니다
     (번호 칸을 숨겼으므로). */
  .board-list tbody tr{border-radius:6px}

  .empty-row td{flex:1 1 100%;white-space:normal;text-align:center}

  /* 컨트롤러가 숫자 개수를 줄여 보내지만, 기기 판별이 빗나가거나 화면이
     아주 좁으면 그래도 넘칠 수 있습니다. 그때는 가로로 밀지 말고 줄을
     바꿉니다. 가로 스크롤은 어떤 화면에서도 생기지 않아야 합니다. */
  /* 폰에서 칸을 줄입니다. 38px 은 PC(34px)보다 오히려 커서 좁은 화면에서
     줄이 접혔습니다.
     ★ 폭을 못 박지 않고 min-width 로 둡니다. 글이 2,000쪽을 넘는 게시판은
     마지막 숫자가 네 자리(1009)인데, 고정 폭이면 글자가 칸에 눌립니다.
     한두 자리는 정사각형, 긴 숫자만 그만큼 늘어납니다. */
  .pager{gap:3px;margin-top:26px;flex-wrap:wrap}
  .pager a,.pager .on{width:auto;min-width:32px;height:32px;padding:0 6px;font-size:13px;border-radius:7px}
  .pager .gap{width:10px;line-height:32px}

  .post-title{font-size:18.5px}
  .post-title .tags{display:block;margin-top:9px}
  .post-title .tag{margin-left:0;margin-right:6px}
  /* 좁은 화면은 한 줄에 들어가는 글자가 적어 한 호씩 줄인다.
     속성이 아니라 토큰을 덮어써야 다섯 단계가 그대로 따라온다.
     맨 아래 칸만 12px 로 PC 와 같다. 더 줄이면 읽을 수 없다. */
  :root{--read:17px}
  :root[data-size="xxs"]{--read:12px}
  :root[data-size="xs"] {--read:13px}
  :root[data-size="s"]  {--read:15px}
  :root[data-size="l"]  {--read:20px}
  .post-body{line-height:1.85}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 인쇄: 설교 본문을 그대로 뽑을 수 있게 군더더기를 지웁니다. */
@media print{
  .boardnav,.filters,.btn-search,.searchpanel,.search-hint,
  .post-tools,.pager,.countbar,.board-list,.list-label,.searchnote{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .post-head{background:none;padding:0;border-bottom:1px solid #000}
  .post-body{max-width:none;font-size:11pt;line-height:1.7}
  mark{background:none;color:#000;font-weight:700;padding:0}
}