/* Bulletin (주보). One page for screen and print — markup from bulletin/render-core.mjs.
   Screen: pages stacked 1 → 4. Print: A5 booklet on A4 landscape, sheet 1 = [4 | 1], sheet 2 = [2 | 3].
   The print rules hang on html.print, not @media print: the page script's bulletinFit() sets the class before
   printing, so the admin preview can show and measure the print layout on screen too. */
:root{
  --paper:#f3f6fc;--card:#fff;--ink:#0f1f3d;--ink-soft:#46546f;--blue:#2f6dd0;--blue-deep:#1a4ba0;
  --line:rgba(15,31,61,.14);
  --display:"Fraunces",Georgia,serif;--body:"Hanken Grotesk",-apple-system,"Segoe UI",sans-serif;
}
.lang-ko{--display:"Pretendard","Fraunces",sans-serif;--body:"Pretendard","Hanken Grotesk",-apple-system,"Malgun Gothic",sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
.lang-ko{word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--blue-deep)}
ul,ol{list-style:none}
.print-only{display:none}

/* ---------- screen ---------- */
.bar{display:flex;justify-content:space-between;align-items:center;max-width:680px;margin:0 auto;padding:14px 16px;font-weight:600;font-size:15px}
.bar a{text-decoration:none;color:var(--ink)}
.bar .switch{border:1px solid var(--line);border-radius:100px;padding:6px 14px;background:var(--card)}
.bul{display:flex;flex-direction:column;gap:14px;max-width:680px;margin:0 auto;padding:0 16px 24px}
.sheet{display:contents}
.p1{order:1}.p2{order:2}.p3{order:3}.p4{order:4}
.pg{background:var(--card);border-radius:18px;padding:24px 22px;box-shadow:0 1px 0 var(--line)}
h1{font-family:var(--display);font-weight:600;font-size:32px;line-height:1.1;letter-spacing:-.01em}
h2{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.2;color:var(--blue-deep);margin:22px 0 10px}
.pg>h2:first-child{margin-top:0}
h3{font-size:15px;font-weight:700;margin:16px 0 6px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.lang-ko h3{text-transform:none;letter-spacing:0}
.kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.cover{text-align:center}
.cover .motto{font-family:var(--display);font-style:italic;font-size:19px;margin-top:8px}
.lang-ko .cover .motto{font-style:normal;font-weight:600}
.cover .date{font-weight:700;font-size:17px;margin-top:6px}
.cover .photo{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;margin:16px 0}
.cover .pastor{font-weight:600}
.cover .service{font-size:18px;margin-top:6px}
.cover .address{margin-top:10px}
.cover .address a{color:var(--ink)}
.duty li{display:flex;align-items:baseline;gap:6px;padding:3px 0;font-size:16px}
.duty .role{font-weight:700}
.duty .dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px)}
.duty .who{text-align:right}
.duty .detail{color:var(--ink-soft);font-size:.92em;margin-left:4px}
h2 .leader{font-family:var(--body);font-size:.62em;font-weight:600;color:var(--ink-soft)}
.sermon{font-family:var(--display);font-weight:600;font-size:20px}
.lang-ko .sermon{font-family:var(--body);font-weight:700}
.ref{font-weight:700;color:var(--ink-soft);margin:2px 0 10px}
.ref a{font-weight:600;margin-left:6px}
.verses li{margin:0 0 6px;font-size:16px}
.verses sup{font-weight:700;color:var(--blue);margin-right:2px}
.credit{font-size:11px;color:var(--ink-soft);margin-top:10px;line-height:1.4}
.ann li,.prayer li{position:relative;padding:0 0 0 18px;margin:0 0 10px;font-size:16px}
.ann li::before,.prayer li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.prayer li::before{background:none;border:2px solid var(--blue);width:5px;height:5px}
.souls{background:var(--paper);border-radius:12px;padding:10px 14px;margin:6px 0 4px}
.souls h3{margin:0 0 2px}
.welcome{font-size:16px}
.newcomer{margin-top:8px;font-weight:600}
.newcomer a{display:block;margin-top:4px}
.tt li{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:15px}
.tt .nm{font-weight:700}
.tt .tm{text-align:right}
@media (max-width:520px){:where(html:not(.print)) .tt li{grid-template-columns:1fr auto;row-gap:0}:where(html:not(.print)) .tt .dy{grid-row:2;font-size:14px;color:var(--ink-soft)}:where(html:not(.print)) .tt .tm{grid-row:1/3;grid-column:2;align-self:center}}
.bank{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;font-size:16px}
.bank dt{color:var(--ink-soft)}
.bank dd{font-weight:700}
.count{color:var(--ink)}
.churches li{padding:5px 0;border-bottom:1px solid var(--line);font-size:15px}
.churches span{display:block;color:var(--ink-soft);font-size:14px}
.charity{margin-top:16px;font-size:13px;color:var(--ink-soft)}
.past{max-width:680px;margin:0 auto;padding:4px 16px 8px}
.past .now{font-weight:600;margin-bottom:6px}
.past .now a{text-decoration:none}
.past h2{font-size:19px;margin:10px 0 6px}
.past li{border-bottom:1px solid var(--line)}
.past li a{display:block;padding:8px 0;font-size:15px;text-decoration:none}
.foot{text-align:center;font-size:13px;color:var(--ink-soft);padding:8px 16px 32px}
.foot a{color:var(--ink-soft)}
[hidden]{display:none!important}

/* ---------- print: A5 booklet on A4 landscape ---------- */
@page{size:A4 landscape;margin:0}
/* :where() adds no specificity, so these win exactly as the old @media print block did (by coming later).
   Sizes are em of .pg (9.6pt). bulletinFit() steps a page's font-size down if it overflows. */
:where(html.print),:where(html.print) body{background:#fff}
:where(html.print) body{line-height:1.42}
:where(html.print) .screen-only{display:none!important}
:where(html.print) .print-only{display:block}
:where(html.print) .bul{display:block;max-width:none;margin:0;padding:0;gap:0}
:where(html.print) .sheet{display:flex;width:297mm;height:210mm;break-after:page;page-break-after:always;overflow:hidden}
:where(html.print) .sheet:last-child{break-after:auto;page-break-after:auto}
:where(html.print) .pg{width:148.5mm;height:210mm;flex:none;order:0;border-radius:0;box-shadow:none;padding:10mm 11mm 9mm;overflow:hidden;background:#fff;font-size:9.6pt}
:where(html.print) h1{font-size:2.19em}
:where(html.print) h2{font-size:1.3em;margin:4.2mm 0 1.8mm;padding-bottom:1mm;border-bottom:.5pt solid var(--blue)}
:where(html.print) h3{font-size:.9em;margin:3mm 0 1mm}
:where(html.print) .duty li,:where(html.print) .verses li,:where(html.print) .ann li,:where(html.print) .prayer li,:where(html.print) .welcome,:where(html.print) .bank,:where(html.print) .tt li,:where(html.print) .churches li{font-size:1em}
:where(html.print) .duty li{padding:.5mm 0}
:where(html.print) .verses li{margin-bottom:1.4mm}
:where(html.print) .ann li,:where(html.print) .prayer li{margin-bottom:1.8mm;padding-left:4mm}
:where(html.print) .ann li::before{width:1.6mm;height:1.6mm}
:where(html.print) .sermon{font-size:1.3em}
:where(html.print) .credit{font-size:.67em}
:where(html.print) .souls{padding:2mm 3mm;margin:1mm 0}
:where(html.print) .tt li{padding:.9mm 0;grid-template-columns:1.6fr 1fr 1.25fr}
:where(html.print) .bank{gap:.3mm 4mm}
:where(html.print) .charity{margin-top:3mm;font-size:.83em}
:where(html.print) .branches-note{font-size:.94em}
:where(html.print) .cover{display:flex;flex-direction:column;align-items:center}
:where(html.print) .cover .motto{font-size:1.3em;margin-top:2mm}
:where(html.print) .cover .date{font-size:1.2em;margin-top:1.5mm}
:where(html.print) .cover .photo{height:62mm;aspect-ratio:auto;border-radius:3mm;margin:5mm 0}
:where(html.print) .cover .service{font-size:1.25em;margin-top:2mm}
:where(html.print) .cover .address{margin-top:3mm;font-size:1.15em;font-weight:600}
:where(html.print) .cover .address a{text-decoration:none}
:where(html.print) .qr{margin-top:auto;display:flex;align-items:center;gap:3.5mm;text-align:left}
:where(html.print) .qr img{width:24mm;height:24mm}
:where(html.print) .qr figcaption{font-size:.875em;color:var(--ink-soft);line-height:1.35}
:where(html.print) a{color:inherit;text-decoration:none}