/* ===================================================================
   이광섭 목사의 설교신학 스케치

   캠페인 쪽과 일부러 다르게 입힌다. 저쪽은 남색 바탕에 서류철이지만
   여기는 읽는 자리다. 종이색을 깔고 글자를 크게 놓는다.

   읽는 사람 중에 예순이 넘은 분이 많다. 그래서 본문 17.5px, 줄간 1.95,
   글줄 폭 40rem(한글 예순여덟 자쯤)으로 잡았다. 흐린 회색은 쓰지 않는다 —
   가장 옅은 글자도 종이 위 대비 6.68 이다.

   선거 색을 넣지 않은 것은 예의가 아니라 셈이다. 홍보물로 보이는 순간
   「만들어낸 것」이 되고, 이 자료의 유일한 값어치인 「확인할 수 있음」이
   사라진다. 기호도, 구호도, 금색 띠도 여기엔 없다.
=================================================================== */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  --paper:#F5F2EA;
  --paper-2:#EFEBE0;
  --rule:#D6CEBE;
  --rule-2:#E3DCCC;
  --text:#1B1A17;      /* 종이 위 대비 15.56 */
  --text-2:#413C34;    /* 10.02 */
  --muted:#5C5446;     /* 6.68 — 이보다 옅게 쓰지 않는다 */
  --ink:#14213D;
  --gold:#8A6F35;      /* 종이 위에서는 #C9A96A 가 대비 2.4 로 안 읽힌다. 어둡게 쓴다 */
  --serif:"Noto Serif KR",serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
         system-ui,"Malgun Gothic",sans-serif;
  --wrap:760px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--text);
  font-family:var(--sans);
  line-height:1.7;
  word-break:keep-all;
}
a{color:inherit}
img{max-width:100%}
button,input{font:inherit;color:inherit}

.nt-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,32px)}

/* ── 머리 띠 ── */
/* 머리 띠는 붙어 따라온다. 낱쪽은 길어서(읽는 데 5분쯤) 그냥 두면
   돌아가는 단추가 저 위로 사라진다. 캠페인 쪽 머리 띠도 늘 떠 있으므로
   동작이 같아진다. sticky 라 자리를 차지해서, 본문이 가려지지 않는다. */
.nt-top{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--rule);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
/* color-mix 를 모르는 브라우저에는 그냥 종이색으로 준다. 반투명이 안 되면
   글자가 비쳐 읽기 어려워지므로 이쪽이 안전하다. */
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .nt-top{background:var(--paper)}
}
.nt-top .nt-wrap{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:60px}

/* 캠페인 쪽으로 돌아가는 단추. 왼쪽 위는 「나가는 곳」으로 굳어진 자리라
   여기 둔다. 화살표만으로는 어디로 가는지 모르므로 이름을 함께 적는다. */
.nt-back{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:7px 14px 7px 11px;border:1px solid var(--rule);border-radius:99px;
  text-decoration:none;font-size:12.5px;font-weight:600;color:var(--text-2);
  white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.nt-back:hover{background:var(--paper-2);border-color:var(--muted)}
.nt-back:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nt-back svg{width:13px;height:13px;flex:none}

/* 오른쪽은 목록으로. 좁아지면 뒤에서부터 접는다 — 돌아가는 길이 먼저다. */
.nt-home{text-decoration:none;display:flex;align-items:baseline;gap:9px;
  min-width:0;justify-content:flex-end}
.nt-home b{font-family:var(--serif);font-weight:900;font-size:16px;letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-home span{font-size:12px;color:var(--muted);white-space:nowrap}
@media(max-width:620px){.nt-home span{display:none}}
@media(max-width:380px){.nt-home b{font-size:14.5px}}

.nt-main{padding:clamp(26px,4vw,42px) clamp(20px,5vw,32px) clamp(50px,8vw,90px)}

/* ── 낱쪽 ── */
.nt-when{font-size:13px;color:var(--muted);letter-spacing:.01em}
.nt-when i{font-style:normal;margin:0 6px;opacity:.5}
.nt-note h1{
  margin-top:10px;
  font-family:var(--serif);font-weight:900;
  font-size:clamp(25px,4.6vw,36px);line-height:1.35;letter-spacing:-.035em;
}
.nt-meta{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--rule-2);
  font-size:13.5px;color:var(--gold);font-weight:600;
}

/* 속회 순서. 원문에 있으니 지우지 않되 접어서 본문 뒤로 물린다. */
.nt-order{margin-top:clamp(26px,3.6vw,34px);border-top:1px solid var(--rule-2);padding-top:16px}
.nt-order summary{font-size:12.5px;color:var(--muted);cursor:pointer;list-style:none}
.nt-order summary::-webkit-details-marker{display:none}
.nt-order summary::before{content:'＋ ';color:var(--gold)}
.nt-order[open] summary::before{content:'－ '}
.nt-order ul{list-style:none;margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 16px}
.nt-order li{font-size:12.5px;color:var(--text-2);line-height:1.8}

/* ── 본문 ── */
.nt-text{margin-top:clamp(26px,4vw,38px)}
.nt-text h2{
  margin-top:clamp(30px,4vw,42px);
  font-family:var(--serif);font-weight:700;
  font-size:clamp(17.5px,2.2vw,20px);line-height:1.55;letter-spacing:-.02em;
  color:var(--ink);
}
.nt-text h2:first-child{margin-top:0}
.nt-text p{
  margin-top:clamp(16px,2vw,20px);
  font-size:17.5px;line-height:1.95;color:var(--text-2);
}
.nt-text h2 + p{margin-top:12px}

.nt-src{margin-top:clamp(34px,5vw,48px);padding-top:20px;border-top:1px solid var(--rule)}

/* ── 그날의 말 (/speech) ────────────────────────────────────────
   총회 스피치와 취임사를 한 쪽에 담는다. 쪽 제목이 이미 h1 이므로 각
   연설 제목은 h2 다 — 생김새는 낱쪽 제목(.nt-note h1)과 같게 두어야
   읽는 리듬이 끊기지 않는다. 크기만 한 단계 낮춘다. */
/* 쪽 머리(그날의 말 + 안내문)와 첫 연설 사이. 이걸 안 두면 안내문
   마지막 줄에 「2026년 9월 8일 · 투표 전」이 바로 붙어 한 덩이로 읽힌다. */
.nt-head + .nt-note{margin-top:clamp(34px,5vw,52px)}
.nt-note h2.sp-h{
  margin-top:10px;
  font-family:var(--serif);font-weight:900;
  font-size:clamp(23px,4.2vw,33px);line-height:1.35;letter-spacing:-.035em;
  color:var(--ink);
}
/* 두 연설 사이. 선 하나로 나눈다 — 스피치는 부탁이고 취임사는 감사라,
   붙여 두면 다른 자리에서 한 말이라는 것이 안 보인다. */
.nt-note.sp-gap{
  margin-top:clamp(48px,7vw,84px);
  padding-top:clamp(30px,4.4vw,44px);
  border-top:1px solid var(--rule);
}
/* 취임사는 원고 없이 한 말이다. 읽기 전에 그걸 알아야 문장이 짧고
   되풀이되는 이유가 이해된다. */
.sp-note{margin-top:12px;font-size:13.5px;line-height:1.75;color:var(--muted)}
.nt-src a{
  font-size:13.5px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--rule);padding-bottom:2px;text-decoration:none;
}
.nt-src a:hover{border-color:var(--ink)}

/* ── 이전 / 다음 ── */
.nt-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-top:clamp(30px,4vw,44px);
}
.nt-nav a{
  display:block;padding:14px 16px;text-decoration:none;
  border:1px solid var(--rule);border-radius:3px;
  transition:background .2s var(--ease);
}
.nt-nav a:hover{background:var(--paper-2)}
.nt-nav a.n{text-align:right}
.nt-nav span{display:block;font-size:11.5px;color:var(--muted)}
.nt-nav b{
  display:block;margin-top:5px;font-family:var(--serif);font-weight:700;
  font-size:14px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media(max-width:520px){.nt-nav{grid-template-columns:1fr}.nt-nav a.n{text-align:left}}

/* ── 목록 쪽 머리 ── */
.nt-head{padding-bottom:0}
.nt-head h1{
  margin-top:18px;font-family:var(--serif);font-weight:900;
  font-size:clamp(28px,5vw,44px);line-height:1.2;letter-spacing:-.045em;
}
.nt-lede{margin-top:14px;font-size:15.5px;line-height:1.85;color:var(--text-2)}
.nt-lede b{color:var(--text);font-weight:700}

.nt-sec{margin-top:clamp(30px,4.4vw,44px)}
/* 화면에 들어올 때 살짝 떠오른다. 스크립트가 .on 을 붙인다. */
.nt-sec{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.nt-sec.on{opacity:1;transform:none}
/* 스크립트가 막히면 아무것도 안 보이면 안 된다 */
.no-js .nt-sec{opacity:1;transform:none}
.nt-k{font-family:var(--serif);font-weight:900;font-size:clamp(18px,2.4vw,22px);letter-spacing:-.03em}
.nt-d{margin-top:9px;font-size:13.5px;line-height:1.8;color:var(--muted)}

/* ── 무엇을 말해왔나 ──
   크기순으로 줄 세웠더니 표가 됐고, 표는 읽히지 않았다. 이제 잦은 말을
   가운데 크게 두고 둘레에 흩는다. 자리는 buildnotes.py 가 미리 정해
   SVG 로 내보낸다 — 브라우저에서 재면 글꼴 뜨는 동안 글자가 튄다.

   좁은 화면에서는 16:10 안에 든 글자가 너무 작아지므로 흐르는 목록으로
   바꿔 단다. 같은 자료를 두 가지 모양으로 내보내는 셈이다. */
.nt-cloud{
  display:block;width:100%;margin-top:16px;
  font-family:var(--serif);font-weight:700;
}
.nt-cloud text{text-anchor:middle;dominant-baseline:middle;letter-spacing:-.03em}
.nt-cloud .n{fill:var(--muted);font-family:var(--sans);font-weight:500;opacity:.75}
.nt-cloud .nt-w{cursor:pointer}
.nt-cloud .nt-w text{
  transform-box:fill-box;transform-origin:center;
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.nt-cloud .nt-w:hover text{opacity:1;transform:scale(1.12)}
/* 낱말이 가운데부터 차례로 피어난다. 스물다섯 번째까지만 늦추고 나머지는
   함께 뜬다 — 예순일곱 개를 끝까지 늦추면 마지막이 3초 뒤에 나타난다. */
.nt-sec .nt-cloud .nt-w{opacity:0;animation:nt-pop .5s var(--ease) forwards;
  animation-play-state:paused}
.nt-sec.on .nt-cloud .nt-w{animation-play-state:running;
  animation-delay:calc(min(var(--i),25) * 34ms)}
@keyframes nt-pop{from{opacity:0;transform:translateY(8px) scale(.9)}
  to{opacity:1;transform:none}}
.nt-cloud .nt-w:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 십자가는 두 벌이다. 가로판을 좁은 화면에 그냥 줄이면 제일 작은 글자가
   5.6px 이 되어 아무도 못 읽는다. 그래서 세로판을 따로 만들어 바꿔 단다.
   카톡으로 들어오는 사람 대부분이 좁은 화면이라 이쪽이 오히려 본판이다. */
.nt-cloud.tall{display:none;max-width:520px;margin-left:auto;margin-right:auto}
@media(max-width:640px){
  .nt-cloud.wide{display:none}
  .nt-cloud.tall{display:block}
}

/* 가벼운 단추. 「아무거나 한 편」처럼 곁다리 동작에 쓴다.
   인용 블록을 걷어낼 때 이 규칙이 딸려 지워져, 단추가 브라우저 기본 모양으로
   나온 적이 있다. 인용 블록과 상관없는 곳에서도 쓰므로 따로 둔다. */
/* 공유 단추 두 개. 리드 바로 아래라 눈에 띄되, 알약 모양이 가벼워
   제목을 누르지 않는다. 좁은 화면에서 줄이 바뀌어도 괜찮게 접힌다. */
.nt-share{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.nt-share .nt-lite{display:inline-flex;align-items:center;gap:7px;padding:9px 16px 9px 13px}
.nt-share svg{width:14px;height:14px;flex:none}
.nt-share .nt-lite[hidden]{display:none}   /* [hidden] 은 display:inline-flex 에 진다 */

/* 「베꼈습니다」를 알리는 쪽지. 캠페인 쪽 것과 같은 모양이되 종이 바탕이라
   색을 뒤집는다 — 어두운 바탕에 밝은 글씨여야 눈에 든다. */
.nt-toast{
  position:fixed;left:50%;bottom:26px;z-index:200;
  transform:translateX(-50%) translateY(14px);
  background:var(--ink);color:var(--paper);
  padding:12px 22px;border-radius:99px;
  font-family:var(--sans);font-weight:500;font-size:13.5px;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
  box-shadow:0 12px 32px rgba(20,33,61,.28);
  max-width:calc(100vw - 36px);text-align:center;
}
.nt-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(prefers-reduced-motion:reduce){.nt-toast{transition:opacity .2s}}

.nt-lite{
  background:none;border:1px solid var(--rule);border-radius:99px;
  padding:7px 15px;font-size:12.5px;color:var(--text-2);
  cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.nt-lite:hover{background:var(--paper-2);border-color:var(--muted)}
.nt-lite:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.nt-btn{
  margin-top:14px;display:inline-flex;align-items:center;
  padding:11px 20px;cursor:pointer;
  font-weight:600;font-size:13.5px;letter-spacing:.02em;
  border:1px solid var(--ink);color:var(--ink);background:transparent;border-radius:3px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nt-btn:hover{background:var(--ink);color:var(--paper)}

/* ── 찾기 ── */
.nt-search{margin-top:16px;display:flex;gap:8px}
.nt-search input{
  flex:1;min-width:0;padding:12px 14px;font-size:16px;   /* 16px 아래면 아이폰이 확대한다 */
  background:var(--paper);border:1px solid var(--rule);border-radius:3px;
}
.nt-search input:focus{outline:2px solid var(--ink);outline-offset:-1px}
.nt-search .nt-btn{margin-top:0;flex:0 0 auto}
.nt-chips{margin-top:11px;display:flex;flex-wrap:wrap;gap:7px}
.nt-chips button{
  padding:6px 12px;font-size:12.5px;cursor:pointer;
  background:var(--paper-2);border:1px solid var(--rule-2);border-radius:99px;color:var(--text-2);
}
.nt-chips button:hover{background:var(--paper);border-color:var(--rule)}

.nt-result{margin-top:18px}
.nt-hit{padding:18px 0;border-top:1px solid var(--rule-2)}
.nt-hit:first-child{border-top:1px solid var(--rule)}
.nt-hit .h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.nt-hit .h a{font-family:var(--serif);font-weight:700;font-size:16px;text-decoration:none;
  border-bottom:1px solid var(--rule)}
.nt-hit .h time{font-size:12px;color:var(--muted)}
.nt-hit .q{
  margin-top:10px;padding-left:14px;border-left:3px solid var(--rule);
  font-size:15.5px;line-height:1.9;color:var(--text-2);
}
.nt-hit mark{background:#F0E2B8;color:var(--text);padding:0 2px;border-radius:2px}
.nt-hit .s{margin-top:9px;font-size:12px;color:var(--muted)}
.nt-none{padding:22px 0;font-size:15px;line-height:1.85;color:var(--text-2)}
.nt-none b{display:block;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--text);
  margin-bottom:7px}
.nt-said{margin-top:12px;font-size:12.5px;color:var(--muted)}

/* ── 목록 ── */
.nt-tabs{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.nt-tab{
  padding:7px 13px;font-size:12.5px;cursor:pointer;border-radius:99px;
  background:transparent;border:1px solid var(--rule);color:var(--text-2);
}
.nt-tab.on{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}

.nt-list{margin-top:16px;display:grid;gap:1px;background:var(--rule-2);
  border:1px solid var(--rule-2)}
.nt-card{animation:nt-in .42s var(--ease) both;animation-delay:calc(var(--i,0) * 26ms);
  display:block;background:var(--paper);padding:13px 15px;text-decoration:none;
  transition:background .18s var(--ease)}
.nt-card:hover{background:var(--paper-2)}
/* span 들이라 display:block 을 주지 않으면 날짜·제목·성경이 한 줄에 붙는다 */
.nt-card .d,.nt-card .t,.nt-card .s,.nt-card .x{display:block}
.nt-card .d{font-size:11.5px;color:var(--muted)}
.nt-card .t{margin-top:3px;font-family:var(--serif);font-weight:700;
  font-size:16px;line-height:1.5}
.nt-card .s{margin-top:4px;font-size:12px;color:var(--gold);font-weight:600}
.nt-card .x{margin-top:6px;font-size:13px;line-height:1.75;color:var(--text-2);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.nt-more{margin-top:18px;text-align:center}
.nt-more[hidden]{display:none}

/* ── 꼬리 ── */
.nt-foot{margin-top:clamp(40px,6vw,70px);padding:clamp(26px,4vw,38px) 0;
  border-top:1px solid var(--rule);background:var(--paper-2)}
/* 꼬리말의 작은 글씨. 이름이 본문 <article class="nt-note"> 와 겹쳐
   본문이 387px 로 쪼그라들어 있었다(52ch × 12.5px). 이름을 갈랐다. */
.nt-fine{font-size:12.5px;line-height:1.85;color:var(--muted);max-width:52ch}
.nt-links{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap}
.nt-links a{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule)}

/* ── 인쇄 ──
   설교를 종이로 뽑아 나누는 분이 있다. 화면용 장치는 다 걷어낸다. */
@media print{
  .nt-top,.nt-nav,.nt-foot,.nt-order,.nt-src{display:none}
  body{background:#fff}
  .nt-main{padding:0}
  .nt-text p{font-size:11.5pt;line-height:1.7;color:#000}
  .nt-text h2{font-size:12.5pt;color:#000}
  .nt-note h1{font-size:19pt}
}

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

@keyframes nt-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* 목록 머리 — 제목과 「아무거나 한 편」을 한 줄에 */
.nt-listhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media(prefers-reduced-motion:reduce){
  .nt-sec{opacity:1;transform:none;transition:none}
  .nt-card{animation:none}
  .nt-sec .nt-cloud .nt-w{opacity:1;animation:none}
  .nt-cloud .nt-w:hover text{transform:none}
}