/* =====================================================================
   괴정제일교회 홈페이지 — 화면 스타일
   색·글자·간격·모서리·모션은 tokens.css + tokens-v2.css 변수만 사용
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--c-paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-paper);color:var(--c-ink);font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--f-body);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--c-leaf);text-underline-offset:.22em}
p,h1,h2,h3,h4,dl,dd,figure,ol,ul{margin:0}
ol,ul{padding:0}
h1,h2,h3{text-wrap:balance}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:var(--focus-w) solid var(--c-focus);outline-offset:var(--focus-offset);border-radius:var(--r-input)}
.on-deep :focus-visible{outline-color:var(--c-focus-on-dark)}
h1:focus{outline:none}
h1:focus-visible{outline:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.ic-fill{fill:currentColor;stroke:none}
.wrap{width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

.skip{position:fixed;left:var(--sp-4);top:-200px;z-index:var(--z-skip);display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-input);background:var(--c-deep);color:var(--c-on-deep);font-weight:var(--fw-bold);text-decoration:none}
.skip:focus{top:calc(var(--sp-3) + env(safe-area-inset-top,0px))}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:var(--tap);min-width:var(--tap);padding:var(--sp-2) 1.2em;border-radius:var(--r-pill);border:2px solid var(--c-leaf);background:var(--c-surface);color:var(--c-leaf);font-weight:var(--fw-bold);font-size:var(--fs-body);line-height:1.3;text-decoration:none;text-align:center;cursor:pointer;transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.btn--fill{background:var(--c-leaf);color:var(--c-surface)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.link{display:inline-flex;align-items:center;gap:.3em;min-height:var(--tap);color:var(--c-leaf);font-weight:var(--fw-bold);text-decoration:underline;text-underline-offset:.22em}
.link .ic{width:1em;height:1em}
.more{display:inline-flex;align-items:center;justify-content:center;gap:.25em;min-height:var(--tap);min-width:var(--tap);padding-inline:var(--sp-2);color:var(--c-leaf);font-weight:var(--fw-bold);font-size:var(--fs-small);text-decoration:none;border-radius:var(--r-input);white-space:nowrap}
.tag{display:inline-flex;align-items:center;padding:.05em .55em;border-radius:var(--r-tag);border:1.5px solid currentColor;color:var(--c-leaf);font-size:var(--fs-meta);font-weight:var(--fw-bold);line-height:1.5;white-space:nowrap}

/* ---------- 머리글 ---------- */
.util{background:var(--c-deep);color:var(--c-on-deep);font-size:var(--fs-small)}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:var(--util-h)}
.util a{display:inline-flex;align-items:center;gap:.35em;min-height:var(--tap);color:var(--c-on-deep);text-decoration:none;border-radius:var(--r-input)}
.util-r{display:flex;align-items:center;gap:var(--sp-5)}
.ts-ctl{display:inline-flex;align-items:center;gap:var(--sp-1)}
.ts-ctl span{margin-right:var(--sp-1)}
.ts-ctl button{min-width:var(--tap);min-height:var(--tap);border:0;border-radius:var(--r-pill);background:transparent;color:var(--c-on-deep);font-weight:var(--fw-bold);line-height:1;cursor:pointer}
.ts-ctl button:nth-of-type(1){font-size:16px}.ts-ctl button:nth-of-type(2){font-size:19px}.ts-ctl button:nth-of-type(3){font-size:22px}
.ts-ctl button{position:relative;isolation:isolate}
.ts-ctl button[aria-pressed="true"]{color:var(--c-deep);text-decoration:underline 2px;text-underline-offset:.2em}
.ts-ctl button[aria-pressed="true"]::before{content:"";position:absolute;inset:4px;z-index:-1;border-radius:50%;background:var(--c-blossom)}

.hdr{position:sticky;top:0;z-index:var(--z-header);background:var(--c-paper);border-bottom:1px solid var(--c-line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);color:var(--c-ink);text-decoration:none;border-radius:var(--r-input);min-width:0}
.brand .ic,.brand-leaf{width:30px;height:30px;color:var(--c-leaf)}
.brand-name{font-family:var(--f-display);font-weight:var(--fw-display);font-size:28px;letter-spacing:var(--ls-head);line-height:1.1;white-space:nowrap}
.nav ul{display:flex;gap:var(--sp-1);list-style:none}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;border-radius:var(--r-input);color:var(--c-ink);text-decoration:none;font-size:var(--fs-body);white-space:nowrap;box-shadow:inset 0 -3px 0 transparent}
.nav a[aria-current]{color:var(--c-leaf);font-weight:var(--fw-bold);box-shadow:inset 0 -4px 0 var(--c-leaf)}
.hdr-tools{display:none;align-items:center;gap:var(--sp-2)}
.icbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-width:var(--tap);min-height:var(--tap);padding:0 12px;border:1.5px solid var(--c-line-strong);border-radius:var(--r-input);background:var(--c-surface);color:var(--c-ink);font-weight:var(--fw-bold);font-size:17px;line-height:1;text-decoration:none;cursor:pointer}
.icbtn .ic{width:22px;height:22px}
.icbtn .sm{font-size:14px;font-weight:var(--fw-regular)}
.t-phone{display:none}

/* ---------- 본문 공통 ---------- */
main{display:block;min-height:calc(100svh - var(--header-h) - var(--util-h))}
main:focus{outline:none}
main > :last-child{padding-bottom:var(--sp-8)}
.page-head{padding-block:var(--sp-7) var(--sp-5)}
.crumb{margin-bottom:var(--sp-2)}
.h1{font-family:var(--f-display);font-weight:var(--fw-display);font-size:var(--fs-h1);line-height:var(--lh-head);letter-spacing:var(--ls-head)}
.lead{margin-top:var(--sp-3);max-width:var(--measure);font-size:var(--fs-lead);line-height:1.6}
.meta{color:var(--c-muted);font-size:var(--fs-small);font-weight:var(--fw-bold);font-variant-numeric:var(--num)}
.sec{padding-block:var(--section-y)}
.sec + .sec{border-top:1px solid var(--c-line)}
.sec--shade{background:var(--c-shade);border-top:0!important}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-2) var(--sp-5);margin-bottom:var(--sp-5)}
.h2{display:flex;align-items:center;gap:.4em;font-family:var(--f-display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--ls-head)}
.h2 .ic{width:.7em;height:.7em;color:var(--c-leaf)}
.h3{font-weight:var(--fw-bold);font-size:var(--fs-h4);line-height:1.4}
.prose{max-width:30em}
.small{font-size:var(--fs-small);color:var(--c-muted)}
.num,.nb{font-variant-numeric:var(--num)}
.nb{white-space:nowrap}
.src-links{display:flex;flex-wrap:wrap;gap:0 var(--sp-5);margin-top:var(--sp-5)}
.list-note{margin-bottom:var(--sp-3);font-size:var(--fs-small);color:var(--c-muted)}
.list-foot{margin-top:var(--sp-5);font-size:var(--fs-small);color:var(--c-muted)}
.act{margin-top:var(--sp-5)}
.rel{margin-top:var(--sp-4)}

/* 텍스트 링크 */
.tlink{display:inline-flex;align-items:center;gap:.3em;min-height:var(--tap);color:var(--c-leaf);font-weight:var(--fw-bold);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:.22em;transition:color var(--dur-1) var(--ease-out),text-decoration-color var(--dur-1) var(--ease-out)}
.tlink .ic{width:1em;height:1em}
.tlink--solo{text-decoration:none}
.tag{display:inline-flex;align-items:center;min-height:26px;padding:0 .55em;border-radius:var(--r-tag);border:1.5px solid var(--c-leaf);color:var(--c-leaf);font-size:var(--fs-meta);font-weight:var(--fw-bold);line-height:1.4;white-space:nowrap;vertical-align:middle}

/* ---------- 홈 ① 첫 화면: 뒤쪽 블록에서 정의 ---------- */
.ephoto{display:block;width:100%;max-width:min(100%,var(--photo-max));height:auto;border-radius:var(--r-photo);background:var(--c-shade)}

/* ② 말씀과 자료 */
.word{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-8);align-items:start}
.feature{border-top:2px solid var(--c-ink);padding-top:var(--sp-5)}
.f-date{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--c-muted)}
.f-title{margin-top:var(--sp-2);font-family:var(--f-display);font-weight:var(--fw-display);font-size:calc(36px * var(--ts));line-height:1.3;letter-spacing:var(--ls-head)}
.f-info{margin-top:var(--sp-2);color:var(--c-muted)}
.feature .tlink{margin-top:var(--sp-3)}
.res-more{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 var(--sp-5);margin-top:var(--sp-2)}

/* 목록 행(내부·외부 공통) */
.rows{list-style:none;max-width:var(--list-max);border-top:1px solid var(--c-line)}
.rows li{border-bottom:1px solid var(--c-line)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-1) var(--sp-4);min-height:64px;padding:var(--sp-4) var(--sp-2);color:var(--c-ink);text-decoration:none;border-radius:var(--r-tag);transition:background-color var(--dur-1) var(--ease-out)}
.r-main{display:grid;gap:2px;min-width:0}
.r-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--c-muted);font-variant-numeric:var(--num)}
.r-title{font-family:var(--f-display);font-weight:var(--fw-display);font-size:var(--fs-h4);line-height:1.4;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.22em;transition:text-decoration-color var(--dur-1) var(--ease-out)}
.r-sub{font-size:var(--fs-small);color:var(--c-muted)}
.r-end{display:inline-flex;align-items:center;gap:.35em;color:var(--c-leaf);font-weight:var(--fw-bold);font-size:var(--fs-small);white-space:nowrap}
.r-end--ext{color:var(--c-muted);font-weight:var(--fw-regular)}
.r-end .ic{width:20px;height:20px}
.r-play{width:24px!important;height:24px!important}
.rows--res{border-top:0}
.rows--res .row{grid-template-columns:96px minmax(0,1fr) auto;min-height:72px}
.rows--res .r-main{display:contents}
.rows--res .r-meta{color:var(--c-leaf)}
.rows--res .r-title{font-family:var(--f-body);font-weight:var(--fw-regular);font-size:var(--fs-body)}
.row.is-back{background:var(--c-blossom-soft)}

/* 행사: 날짜 패 + 정보 */
.erow{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:var(--sp-5);padding-block:var(--sp-5);border-block:1px solid var(--c-line);color:var(--c-ink);text-decoration:none;max-width:var(--list-max);transition:background-color var(--dur-1) var(--ease-out)}
.erow--big{grid-template-columns:120px minmax(0,1fr);border-bottom:1px solid var(--c-line);margin-top:var(--sp-4)}
.etile{display:grid;place-items:center;align-content:center;gap:2px;width:96px;height:112px;border-radius:var(--r-photo);background:var(--c-deep);color:var(--c-on-deep);font-variant-numeric:var(--num)}
.erow--big .etile{width:120px;height:136px}
.et-m{font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--c-on-deep-2)}
.et-d{font-family:var(--f-display);font-weight:var(--fw-display);font-size:48px;line-height:1}
.erow--big .et-d{font-size:60px}
.et-w{font-size:var(--fs-meta)}
.einfo{display:grid;gap:2px;min-width:0}
.e-title{font-family:var(--f-display);font-weight:var(--fw-display);font-size:calc(28px * var(--ts));line-height:1.25;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.2em;transition:text-decoration-color var(--dur-1) var(--ease-out)}
.erow--big .e-title{font-size:calc(36px * var(--ts))}
.e-sub{font-weight:var(--fw-bold)}
.e-when b{font-variant-numeric:var(--num)}
.e-who{font-size:var(--fs-small);color:var(--c-muted)}
.erow .r-chev{width:20px;height:20px;color:var(--c-leaf)}
.ev-ask{margin-top:var(--sp-4);font-size:var(--fs-small)}

/* ④ 처음 오시는 분께 */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:start}
.visit .btn-row{margin-top:var(--sp-5)}
.kv{display:grid}
.kv > div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:var(--sp-3);align-items:baseline;min-height:56px;padding-block:var(--sp-3);border-bottom:1px solid var(--c-line)}
.kv > div:first-child{border-top:1px solid var(--c-line)}
.kv dt{font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--c-muted)}
.kv dd{font-weight:var(--fw-bold);min-width:0}
.kv .tlink{min-height:var(--tap)}
.kv-more{margin-top:var(--sp-2)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}

/* ---------- 상세 공통 ---------- */
.dgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
.read{min-width:0}
.read > *{max-width:var(--read-max)}
.subhead{font-size:calc(20px * var(--ts));font-weight:var(--fw-bold)}
.dmeta{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-4)}
.dmeta dt{color:var(--c-muted)}
.dmeta dd{font-weight:var(--fw-bold)}
.side{border-top:1px solid var(--c-line);padding-top:var(--sp-4)}
.side-dl{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-7)}
.side-dl dt{font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--c-muted)}
.side-dl dd{font-size:var(--fs-small);font-weight:var(--fw-bold);font-variant-numeric:var(--num)}
.side-dl .tlink{min-height:var(--tap);font-size:var(--fs-small)}
.postnav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:var(--sp-3);margin-top:var(--sp-7);border-block:1px solid var(--c-line)}
.postnav > a,.postnav > span{display:grid;align-content:center;gap:2px;min-height:64px;padding-block:var(--sp-2);min-width:0;color:var(--c-ink);text-decoration:none}
.pn-next{text-align:right;justify-items:end}
.pn-k{display:inline-flex;align-items:center;gap:.2em;font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--c-muted)}
.pn-k .ic{width:1em;height:1em}
.pn-t{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--c-leaf)}
.pn-list{place-items:center;min-width:var(--tap);padding-inline:var(--sp-4)!important;font-weight:var(--fw-bold);color:var(--c-leaf)!important;border-radius:var(--r-input)}
@media (min-width: 1200px){
  .dgrid{grid-template-columns:minmax(0,760px) 280px;gap:var(--sp-8);justify-content:space-between;align-items:start}
  .side{position:sticky;top:112px}
  .side-dl{flex-direction:column;gap:var(--sp-4)}
  .side-dl dd .sep{display:none}
  .side-dl dd > .nb{display:block}
}

/* 나눔지 */
.parts-h{margin-top:var(--sp-5)}
.parts{list-style:none;display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.parts li{display:flex;align-items:center;gap:var(--sp-3)}
.parts li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c-leaf)}
.note-guide{margin-top:var(--sp-5)}
.note-body{font-size:var(--fs-read);line-height:var(--lh-read);max-width:34em;margin-top:var(--sp-5)}
.note-body h2{margin:40px 0 12px;padding-top:var(--sp-5);border-top:1px solid var(--c-line);font-family:var(--f-display);font-weight:var(--fw-display);font-size:calc(26px * var(--ts));line-height:1.3}
.note-body section:first-child h2{border-top:0;padding-top:0;margin-top:0}
.note-body p + p{margin-top:var(--sp-3)}
.note-q{padding-left:1.6em;display:grid;gap:12px}
.note-q li::marker{font-family:var(--f-body);font-weight:var(--fw-bold);color:var(--c-leaf)}
.note-scripture{margin:0 0 var(--sp-3);padding-left:20px;border-left:3px solid var(--c-blossom)}
.origin{margin-top:var(--sp-7);padding-top:var(--sp-4);border-top:1px solid var(--c-line)}
.origin-h{font-size:var(--fs-body);font-weight:var(--fw-bold)}

/* 공식 이미지(설정에서 켠 파일만) */
.oimg{display:grid;gap:var(--sp-2);justify-items:start;margin-top:var(--sp-4)}
.oimg img{display:block;max-width:100%;height:auto;border-radius:var(--r-m)}
.oimg--thumb img{width:160px}
.oimg figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-meta);color:var(--c-muted)}

/* 설교 플레이어 */
.player{position:relative;width:100%;max-width:var(--read-max);aspect-ratio:16/9;margin-top:var(--sp-5);border-radius:var(--r-photo);overflow:hidden;background:var(--c-panel)}
.player-cover{appearance:none;position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-5);border:0;background:var(--c-panel);color:var(--c-panel-ink);text-align:center;cursor:pointer}
.player-cover .pc-leaf{position:absolute;left:var(--sp-5);top:var(--sp-5);width:28px;height:28px;color:var(--c-panel-accent)}
.player-cover .pc-b{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--c-blossom);color:var(--c-deep);transition:background-color var(--dur-1) var(--ease-out)}
.player-cover .pc-b .ic{width:36px;height:36px}
.player-cover .pc-t{font-family:var(--f-display);font-weight:var(--fw-display);font-size:calc(24px * var(--ts));color:var(--c-on-deep-2)}
.player-cover:focus-visible{outline-color:var(--c-focus-on-dark);outline-offset:-6px}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 소개·새가족·예배 */
.timeline{list-style:none;max-width:var(--read-max);border-left:2px solid var(--c-line);margin-left:var(--sp-2)}
.timeline li{position:relative;display:grid;grid-template-columns:minmax(8.5em,auto) minmax(0,1fr);gap:var(--sp-1) var(--sp-5);padding:var(--sp-3) 0 var(--sp-3) var(--sp-5)}
.timeline li::before{content:"";position:absolute;left:-7px;top:1.15em;width:12px;height:12px;border-radius:50%;background:var(--c-leaf)}
.timeline .y{font-family:var(--f-display);font-weight:var(--fw-display);font-variant-numeric:var(--num);white-space:nowrap}
.steps{list-style:none;counter-reset:s;max-width:var(--read-max);border-top:1px solid var(--c-line)}
.steps li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:var(--sp-4);align-items:center;min-height:64px;padding-block:var(--sp-3);border-bottom:1px solid var(--c-line)}
.steps li::before{counter-increment:s;content:counter(s);grid-row:span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c-leaf);color:var(--c-surface);font-weight:var(--fw-bold);font-variant-numeric:var(--num)}
.steps b{font-size:var(--fs-body)}
.steps span{grid-column:2;font-size:var(--fs-small);color:var(--c-muted)}
.topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);list-style:none;max-width:var(--read-max)}
.topics li{display:grid;place-items:center;min-height:88px;padding:var(--sp-3);border-top:2px solid var(--c-leaf);font-family:var(--f-display);font-weight:var(--fw-display);font-size:var(--fs-h4);text-align:center}
.after{margin-top:var(--sp-4)}
.ask{display:grid;grid-template-columns:minmax(0,1fr) 335px;gap:var(--sp-7);align-items:start}
.wtable{width:100%;max-width:var(--read-max);border-collapse:collapse;font-variant-numeric:var(--num)}
.wtable th,.wtable td{text-align:left;padding:var(--sp-3) var(--sp-2);border-bottom:1px solid var(--c-line);vertical-align:baseline}
.wtable thead th{font-size:var(--fs-small);color:var(--c-muted);font-weight:var(--fw-regular)}
.wtable tbody th{font-weight:var(--fw-bold)}
.wtable .t{font-weight:var(--fw-bold);font-size:calc(20px * var(--ts));white-space:nowrap}
.goal-box{display:grid;gap:var(--sp-2);max-width:var(--read-max);padding-left:var(--sp-5);border-left:4px solid var(--c-blossom)}
.goal-t{font-family:var(--f-display);font-weight:var(--fw-display);font-size:var(--fs-h3);line-height:1.4}
.goal-v{font-size:var(--fs-small);color:var(--c-muted)}

/* 사진(사진첩·새가족) */
.pgrid{display:grid;gap:var(--sp-5);align-items:start}
.pgrid--albums{grid-template-columns:repeat(5,minmax(0,1fr))}
.pgrid--album{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),335px))}
.pfig{display:grid;align-content:start;min-width:0;max-width:var(--photo-max);color:var(--c-ink);text-decoration:none;border-radius:var(--r-photo)}
.pfig .pt{margin-top:10px;font-weight:var(--fw-bold);font-size:var(--fs-small);line-height:1.4;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.2em;transition:text-decoration-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.pfig .ps{font-size:var(--fs-meta);color:var(--c-muted)}
.pframe{display:grid;place-items:center;aspect-ratio:3/2;width:100%;max-width:var(--photo-max);border-radius:var(--r-photo);background:var(--c-shade);overflow:hidden}
.pframe .ephoto{width:100%;height:100%;object-fit:contain;border-radius:0;background:transparent}

/* 오시는 길: 도착 정보 */
.loc-one{max-width:var(--read-max)}
.locgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:start}
.arrive{display:grid}
.arrive > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--sp-1) var(--sp-4);align-items:baseline;padding-block:var(--sp-4);border-top:1px solid var(--c-line)}
.arrive > div:last-child{border-bottom:1px solid var(--c-line)}
.arrive dt{font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--c-muted)}
.arrive dd{font-size:calc(20px * var(--ts));font-weight:var(--fw-bold);min-width:0}
.arrive dd.dd-plain{font-size:var(--fs-body);font-weight:var(--fw-regular)}
.dd-act{display:block;margin-top:var(--sp-2)}

/* 탭(주보·소식) */
.tabs{display:flex;gap:var(--sp-2);margin-top:var(--sp-5);border-bottom:1px solid var(--c-line);max-width:var(--list-max)}
.tabs a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-4);color:var(--c-muted);font-weight:var(--fw-bold);text-decoration:none;border-bottom:4px solid transparent;margin-bottom:-1px;transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.tabs a[aria-current]{color:var(--c-ink);border-bottom-color:var(--c-leaf)}

/* =====================================================================
   상호작용 — hover 는 포인터 기기에서만, 이동·확대 없음
   ===================================================================== */
.nav a{transition:color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
.nav a:hover{background:transparent}
.btn{transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.btn:hover{background:var(--c-surface)}
.btn--fill:hover{background:var(--c-leaf)}
@media (hover: hover) and (pointer: fine){
  .nav a:not([aria-current]):hover{color:var(--c-leaf);box-shadow:inset 0 -1px 0 var(--c-line-strong)}
  .more:hover{text-decoration:underline;text-decoration-thickness:2px}
  .sheet nav a:hover{background:var(--c-shade)}
  .tlink:hover{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:currentColor}
  .row:hover{background:rgba(238,242,234,.6)}
  .row:hover .r-title{text-decoration-color:currentColor}
  .erow:hover .e-title{text-decoration-color:currentColor}
  a.pfig:hover .pt{text-decoration-color:var(--c-leaf)}
  .btn:hover{background:var(--c-shade)}
  .btn--fill:hover{background:var(--c-leaf-hover)}
  .player-cover:hover .pc-b{background:#F3E9B4}
  .postnav a:hover .pn-t,.postnav a.pn-list:hover{text-decoration:underline;text-decoration-thickness:2px}
  .tabs a:not([aria-current]):hover{color:var(--c-leaf);border-bottom-color:var(--c-line)}
  .util a:hover,.foot a:hover{text-decoration-thickness:2px}
}
.nav a:active{background:var(--c-shade)}
.sheet nav a:active{background:var(--c-line)}
.tabbar a:active{background:var(--c-shade)}
.tlink:active{color:var(--c-leaf-hover)}
.row:active,.erow:active{background:var(--c-shade)}
a.pfig:active .pt{color:var(--c-leaf)}
.btn:active{background:var(--c-line)}
.btn--fill:active{background:var(--c-deep)}
.player-cover:active .pc-b{background:var(--c-blossom-soft)}
.row:focus-visible,.erow:focus-visible{outline-offset:-3px;border-radius:var(--r-tag)}
a.pfig:focus-visible{outline-offset:4px;border-radius:var(--r-photo)}
.sheet nav a:focus-visible,.tabbar a:focus-visible{outline-offset:-3px}
@media (prefers-reduced-motion: reduce){
  .nav a,.btn,.tlink,.row,.r-title,.erow,.e-title,.pfig .pt,.tabs a,.player-cover .pc-b{transition:none}
}

/* ---------- 바닥글 ---------- */
.foot{background:var(--c-deep);color:var(--c-on-deep);font-size:var(--fs-small)}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--sp-6);padding-block:var(--sp-8) var(--sp-6)}
.foot .brand-name{font-size:30px}
.foot-info{display:grid;gap:var(--sp-1);margin-top:var(--sp-3);line-height:1.7}
.foot a{color:var(--c-on-deep);display:inline-flex;align-items:center;gap:.3em;min-height:var(--tap);min-width:var(--tap);text-decoration:underline;text-underline-offset:.22em;border-radius:var(--r-input)}
.foot h2{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--c-on-deep-2);margin-bottom:var(--sp-2)}
.foot ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.18)}
.foot-bottom .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-2);padding-block:var(--sp-3);font-size:var(--fs-meta);grid-template-columns:none}
.foot-bottom a{font-size:var(--fs-meta)}

/* ---------- 하단 빠른 메뉴 ---------- */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tabbar);background:var(--c-surface);border-top:1px solid var(--c-line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tabbar-h);color:var(--c-muted);font-size:15px;line-height:1.2;text-decoration:none;white-space:nowrap}
.tabbar a .ic{width:24px;height:24px}
.tabbar a[aria-current]{color:var(--c-leaf);font-weight:var(--fw-bold)}
.tabbar a[aria-current]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:4px;border-radius:0 0 4px 4px;background:var(--c-leaf)}

/* ---------- 메뉴 시트 · 라이트박스 · 알림 ---------- */
.scrim{position:fixed;inset:0;z-index:var(--z-sheet);display:flex;justify-content:flex-end;background:var(--c-scrim)}
.sheet{width:min(100%,var(--sheet-max));height:100%;overflow-y:auto;background:var(--c-paper);padding-bottom:calc(var(--sp-6) + env(safe-area-inset-bottom,0px))}
.sheet-top{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:env(safe-area-inset-top,0px) var(--sp-3) 0 var(--sp-5);border-bottom:1px solid var(--c-line)}
.sheet-top h2{font-family:var(--f-display);font-weight:var(--fw-display);font-size:var(--fs-h4)}
.sheet ul{list-style:none}
.sheet nav a{display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:0 var(--sp-5);border-bottom:1px solid var(--c-line);color:var(--c-ink);text-decoration:none;font-size:var(--fs-h4);font-weight:var(--fw-bold)}
.sheet nav a[aria-current]{color:var(--c-leaf);box-shadow:inset 4px 0 0 var(--c-leaf)}
.sheet .sheet-extra{display:grid;gap:var(--sp-2);padding:var(--sp-5)}
.lb{position:fixed;inset:0;z-index:var(--z-dialog);display:flex;flex-direction:column;background:var(--c-scrim)}
.lb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);padding:calc(var(--sp-3) + env(safe-area-inset-top,0px)) var(--sp-4) var(--sp-3);background:var(--c-paper)}
.lb-bar h2{flex:1 1 12em;font-size:var(--fs-body);font-weight:var(--fw-bold)}
.lb-bar .count{font-variant-numeric:var(--num);color:var(--c-muted);font-size:var(--fs-small)}
.lb-view{flex:1;overflow:auto;padding:var(--lb-pad);display:flex}
.lb-view img{margin:auto;display:block;background:var(--c-surface)}
.lb.is-fit .lb-view img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb:not(.is-fit) .lb-view img{max-width:none;max-height:none}
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--sp-5) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:var(--z-dialog);max-width:calc(100vw - 32px);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-input);background:var(--c-ink);color:var(--c-paper);font-size:var(--fs-small);box-shadow:var(--sh-2)}

/* ---------- 관리 데모 ---------- */
.mgr-bar{background:var(--c-deep);color:var(--c-on-deep)}
.mgr-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:64px}
.mgr-bar b{font-family:var(--f-display);font-weight:var(--fw-display);font-size:var(--fs-h4)}
.mgr-bar a{color:var(--c-on-deep);display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:underline;text-underline-offset:.22em}
.mgr-notice{background:var(--c-demo-bg);color:var(--c-demo-ink);border-bottom:2px solid var(--c-blossom)}
.mgr-notice p{padding-block:var(--sp-4);font-weight:var(--fw-bold)}
.mgr-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--sp-6);padding-block:var(--sp-6)}
.mgr-grid > *{min-width:0}
.mgr-list{list-style:none;display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.mgr-list li{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-input);background:var(--c-surface);border:1px solid var(--c-line)}
.mgr-list b{display:block}
.mgr-list span{font-size:var(--fs-small);color:var(--c-muted)}
.mgr-form{display:grid;gap:var(--sp-4);padding:var(--sp-5);border-radius:var(--r-card);background:var(--c-surface);border:1px solid var(--c-line)}
.mgr-fld{display:grid;gap:6px}
.mgr-fld label{font-size:var(--fs-small);font-weight:var(--fw-bold)}
.mgr-fld input,.mgr-fld textarea{width:100%;min-height:var(--tap);padding:var(--sp-2) var(--sp-3);border:1.5px solid var(--c-line-strong);border-radius:var(--r-input);background:var(--c-surface);font-size:var(--fs-body)}
.mgr-fld textarea{min-height:200px;line-height:1.7;resize:vertical}
.mgr-fld input:focus,.mgr-fld textarea:focus{outline:var(--focus-w) solid var(--c-focus);outline-offset:var(--focus-offset);border-color:var(--c-leaf)}
.mgr-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--sp-4)}
.mgr-status{font-size:var(--fs-small);color:var(--c-muted);font-weight:var(--fw-bold)}
.mgr-dlg-box{position:fixed;inset:0;z-index:var(--z-dialog);display:grid;place-items:center;padding:var(--sp-4);background:var(--c-scrim)}
.mgr-dlg{width:min(100%,640px);max-height:calc(100% - 32px);overflow:auto;padding:var(--sp-6);border-radius:var(--r-sheet);background:var(--c-paper);box-shadow:var(--sh-2)}
.mgr-dlg .btn-row{margin-top:var(--sp-5)}
body.is-mgr .util,body.is-mgr .hdr,body.is-mgr .tabbar,body.is-mgr .foot{display:none!important}

/* =====================================================================
   반응형
   ===================================================================== */
.tl-short{display:none}
@media (max-width: 1179px){
  .nav{display:none}
  .hdr-tools{display:flex}
}
@media (max-width: 1199px){ .pgrid--albums{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width: 1023px){
  .util{display:none}
  main{min-height:calc(100svh - var(--header-h-t))}
  .t-phone{display:inline-flex}
  .hdr .wrap{min-height:var(--header-h-t)}
  .word,.visit,.ask,.locgrid{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
  .mgr-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 767px){
  main{min-height:calc(100svh - var(--header-h-m) - var(--tabbar-h))}
  .hdr .wrap{min-height:var(--header-h-m)}
  .brand-name{font-size:21px}
  .brand .ic{width:24px;height:24px}
  .t-phone{display:none}
  .tabbar{display:block}
  .foot-bottom .wrap{padding-bottom:calc(var(--sp-3) + var(--tabbar-h) + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(var(--tabbar-h) + var(--sp-4) + env(safe-area-inset-bottom,0px))}
  .page-head{padding-block:var(--sp-6) var(--sp-4)}
  .h1{font-size:clamp(30px, 8.6vw, 40px)}
  .vision-line{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vision-line li{min-height:44px;padding:var(--sp-2) var(--sp-3);font-size:calc(18px * var(--ts));border-left:0}
  .vision-line li:nth-child(2n){border-left:1px solid var(--c-line)}
  .vision-line li:nth-child(n+3){border-top:1px solid var(--c-line)}
  .vision-line li:first-child{padding-left:var(--sp-3)}
  .vision-line li:nth-child(odd){padding-left:0}
  .vision-line--big li{min-height:56px;font-size:calc(20px * var(--ts))}
  .f-title{font-size:calc(28px * var(--ts))}
  .rows--res .row{grid-template-columns:minmax(0,1fr) auto}
  .rows--res .r-main{display:grid}
  .row{min-height:72px;padding-inline:0}
  .res-more{justify-content:flex-start}
  .erow{grid-template-columns:72px minmax(0,1fr) auto;gap:var(--sp-4)}
  .etile{width:72px;height:88px}
  .et-d{font-size:36px}
  .erow--big{grid-template-columns:96px minmax(0,1fr)}
  .erow--big .etile{width:96px;height:112px}
  .erow--big .et-d{font-size:48px}
  .e-title{font-size:calc(22px * var(--ts))}
  .erow--big .e-title{font-size:calc(26px * var(--ts))}
  .btn-row--pair{flex-wrap:wrap}
  .btn-row--pair .btn{flex:1 1 auto;white-space:nowrap;padding-inline:var(--sp-3)}
  .kv > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .arrive > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .postnav .pn-t{display:none}
  .postnav > a,.postnav > span{min-height:var(--tap)}
  .pgrid,.pgrid--albums{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
  .pgrid--album{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline li{grid-template-columns:minmax(0,1fr)}
  .wtable thead{display:none}
  .wtable tr{display:grid;grid-template-columns:minmax(0,1fr);padding-block:var(--sp-3);border-bottom:1px solid var(--c-line)}
  .wtable th,.wtable td{border:0;padding:0 var(--sp-1)}
  .mgr-two{grid-template-columns:minmax(0,1fr)}
  .ask{grid-template-columns:minmax(0,1fr)}
  .foot .wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 389px){
  .brand-name{font-size:19px}
  .vision-line li{font-size:calc(16px * var(--ts))}
  .tl-long{display:none}
  .tl-short{display:inline}
  .btn-row--pair{display:grid;grid-template-columns:minmax(0,1fr)}
  .erow .r-chev{display:none}
  .erow{grid-template-columns:72px minmax(0,1fr)}
}
@media (max-width: 300px){
  .hdr .wrap{flex-wrap:wrap;padding-block:var(--sp-2)}
  .brand .ic{display:none}
  .brand-name{font-size:18px}
  .tabbar ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-bottom .wrap{padding-bottom:calc(var(--sp-3) + 2 * var(--tabbar-h) + env(safe-area-inset-bottom,0px))}
  .h2{font-size:var(--fs-h3)}
  .h1,.h2,.r-title,.f-title,.e-title,.pt,.goal-t,.mast,.lede,.vision-line li,.arrive dd,.kv dd,.tlink,.e-when,.btn{overflow-wrap:anywhere}
  .nb{white-space:normal}
  .pgrid,.pgrid--albums,.pgrid--album,.topics,.vision-line{grid-template-columns:minmax(0,1fr)}
  .vision-line li{border-left:0!important;padding-left:0!important}
  .vision-line li + li{border-top:1px solid var(--c-line)}
  .btn,.tag,.tabbar a,.r-end{white-space:normal}
  .tt-t,.wtable .t,.timeline .y{white-space:normal}
  .erow,.erow--big{grid-template-columns:minmax(0,1fr)}
  .rows--res .row,.row{grid-template-columns:minmax(0,1fr)}
  .dmeta{grid-template-columns:minmax(0,1fr)}
  .tabs{flex-wrap:wrap}
  .tabs a{padding-inline:var(--sp-2)}
  .postnav{grid-template-columns:minmax(0,1fr)}
  .pn-next{text-align:left;justify-items:start}
  .mgr-form{padding:var(--sp-3)}
  .mgr-bar .wrap{padding-block:var(--sp-2)}
  .event > *,.mgr-form > *,.mgr-two > *,.mgr-fld > *{min-width:0}
  .mgr-fld label{overflow-wrap:anywhere}
  .foot ul{grid-template-columns:minmax(0,1fr)}
  .foot a{overflow-wrap:anywhere}
}
@media (max-height: 500px){ .tabbar{display:none!important} .foot-bottom .wrap{padding-bottom:var(--sp-3)!important} }

/* ---------- 공식 자료 반영(2026-10-07) ---------- */
/* 나눔지 본문: 큰 글씨, 원문 번호를 글자로 표시 */
.note-body{font-size:calc(21px * var(--ts));line-height:1.9;max-width:34em;margin-top:var(--sp-5)}
.nt-item + .nt-item{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--c-line)}
.note-body .nt-q{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 .5em;font-family:var(--f-body);font-weight:var(--fw-bold);font-size:1em;line-height:1.7;margin:0;padding:0;border:0}
.nt-n{color:var(--c-leaf);font-variant-numeric:var(--num)}
.nt-group{margin-top:var(--sp-5)}
.note-body .nt-gl{font-family:var(--f-display);font-weight:var(--fw-display);font-size:1.05em;line-height:1.4;color:var(--c-ink);margin:0 0 var(--sp-3);padding:0;border:0}
.nt-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4)}
.nt-list li{display:grid;grid-template-columns:1.6em minmax(0,1fr);gap:0 .35em}
.nt-mark{color:var(--c-leaf);font-weight:var(--fw-bold)}
.note-body section:first-child h2{margin-top:0}
.origin p + p{margin-top:var(--sp-1)}
.origin{font-size:var(--fs-small);color:var(--c-muted)}
/* 약도(원본 793×272 이하) */
.locgrid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.map-col .oimg{margin-top:0}
.map-col .oimg img{width:100%;max-width:min(100%,793px)}
.map-note{margin-top:var(--sp-3);font-size:var(--fs-small);color:var(--c-muted)}
@media (max-width: 1023px){
  .locgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 767px){
  .note-body{font-size:calc(20px * var(--ts));line-height:1.85}
  .nt-list li{grid-template-columns:1.5em minmax(0,1fr)}
}
@media (max-width: 300px){
  .note-body .nt-q,.nt-list li{grid-template-columns:minmax(0,1fr)}
  .nt-t{overflow-wrap:anywhere}
}

/* =====================================================================
   대문 정리 · 디테일 · 하나의 모션 체계 (tokens-v3.css)
   ===================================================================== */
:root{ --r-photo: var(--r-m); --r-card: var(--r-m); --r-sheet: var(--r-m); --r-input: var(--r-m); }
html{ scrollbar-gutter: stable; }
html.is-locked{ overflow: hidden; }
a,button{ -webkit-tap-highlight-color: transparent; }

/* ---------- 글꼴: Google Fonts(display=optional) + 같은 행간의 대체 글꼴 ----------
   행간을 숫자로 고정해 글꼴이 바뀌어도 줄 높이가 같고, 한글 글자 폭은 두 글꼴 모두 1em 이라
   늦게 받은 글꼴로 바뀌어도 줄바꿈이 거의 같습니다. optional 이라 첫 표시 뒤에는 바꿔 끼우지 않습니다. */
@font-face{ font-family:"Hahmlet Fallback"; font-weight:600; src: local("Noto Serif CJK KR Bold"), local("NotoSerifCJKkr-Bold"), local("Noto Serif KR SemiBold"), local("AppleMyungjo"), local("Batang");
  size-adjust:100%; ascent-override:88%; descent-override:12%; line-gap-override:0%; }
@font-face{ font-family:"Noto Sans KR Fallback"; font-weight:400; src: local("Noto Sans CJK KR"), local("NotoSansCJKkr-Regular"), local("Apple SD Gothic Neo"), local("Malgun Gothic");
  size-adjust:100%; ascent-override:88%; descent-override:12%; line-gap-override:0%; }
@font-face{ font-family:"Noto Sans KR Fallback"; font-weight:700; src: local("Noto Sans CJK KR Bold"), local("NotoSansCJKkr-Bold"), local("Apple SD Gothic Neo Bold"), local("Malgun Gothic Bold");
  size-adjust:100%; ascent-override:88%; descent-override:12%; line-gap-override:0%; }
:root{
  --f-display: "Hahmlet", "Hahmlet Fallback", "Noto Serif KR", "Noto Serif CJK KR", "AppleMyungjo", serif;
  --f-body: "Noto Sans KR", "Noto Sans KR Fallback", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* ---------- 글자 단계 ---------- */
body{ text-wrap: pretty; }
.h1{ font-size: calc(var(--t-h1) * var(--ts)); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-ls); }
.h1-sub{ margin-top: var(--s-1); font-size: calc(20px * var(--ts)); font-weight: var(--fw-bold); line-height: 1.4; }
.page-head{ padding-block: var(--s-6) var(--s-3); }
.lead{ font-size: calc(var(--t-body) * var(--ts)); line-height: var(--t-body-lh); margin-top: var(--s-2); }
.h2{ display: block; font-size: calc(var(--t-h2) * var(--ts)); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); }
.h3{ line-height: var(--t-h3-lh); }
.lbl{ font-family: var(--f-body); font-size: calc(var(--t-meta) * var(--ts)); font-weight: var(--fw-bold); line-height: var(--t-meta-lh); letter-spacing: var(--t-meta-ls); color: var(--c-muted); }

/* ---------- 구역 리듬: 구역 사이 96(768: 72, 390: 56), 사이에는 1px 선만 ---------- */
.sec{ padding-block: max(32px, calc(var(--section-y) / 2)); }
.sec-head{ align-items: baseline; margin-bottom: var(--s-3); }
main > :last-child{ padding-bottom: var(--section-y); }
.sec--shade{ background: var(--c-shade); }

/* ---------- 대문: 사진 없는 타이포 대문 (12열 · 기준선) ---------- */
.hero{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); padding-block: var(--s-7) max(32px, calc(var(--section-y) / 2)); }
.hero-l{ grid-column: 1 / 9; grid-row: 1; display: flex; flex-direction: column; min-width: 0; }
.hero-r{ grid-column: 9 / 13; grid-row: 1; min-width: 0; padding-top: 8px; }
.hero-v{ grid-column: 1 / -1; grid-row: 2; margin-top: var(--s-6); padding-top: var(--s-2); border-top: var(--rule-hair); min-width: 0; }
.mast{ font-family: var(--f-display); font-weight: var(--fw-display); font-size: clamp(88px, 10.1vw, var(--t-mast)); line-height: var(--t-mast-lh);
  letter-spacing: var(--t-mast-ls); margin-left: -0.04em; white-space: nowrap; font-feature-settings: "palt"; text-rendering: optimizeLegibility; }
.lede{ margin-top: var(--s-5); max-width: none; font-family: var(--f-display); font-weight: var(--fw-display); font-size: calc(var(--t-lede) * var(--ts));
  line-height: var(--t-lede-lh); letter-spacing: var(--t-lede-ls); text-wrap: balance; /* 제호 바로 아래 48px — 제호와 한 덩어리 */ }
@media (min-width: 1200px){ .lede{ white-space: nowrap; } }
.lede br.m{ display: none; }
.tt{ list-style: none; margin-top: var(--s-1); border-top: var(--rule-lead); }
.tt li{ display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); min-height: 64px; padding-block: 14px; border-bottom: var(--rule-hair); }
.tt-k{ flex: 0 0 5em; font-size: calc(18px * var(--ts)); }
.tt-t{ flex: 1 0 auto; font-weight: var(--fw-bold); font-size: calc(var(--t-time) * var(--ts)); line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--c-ink); }
.tt-p{ margin-left: auto; font-size: calc(16px * var(--ts)); color: var(--c-muted); }
.hero .also{ display: flex; flex-wrap: wrap; gap: 0 var(--s-1); margin: var(--s-2) 0 0; font-size: calc(16px * var(--ts)); color: var(--c-muted); }
.hero-act{ margin-top: var(--s-3); }
.lbl-row{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-3); }
.lbl-row .more{ padding-inline: 0; font-size: calc(16px * var(--ts)); }
.hero .vision-line{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap); margin-top: var(--s-1); list-style: none; }
.hero .vision-line li{ position: relative; display: flex; align-items: center; min-height: 56px; padding: 0; border: 0; font-family: var(--f-display); font-weight: var(--fw-display);
  font-size: calc(var(--t-h3) * var(--ts)); line-height: 1.3; letter-spacing: var(--t-h3-ls); }
.hero .vision-line li + li::before{ content: ""; position: absolute; left: calc(var(--grid-gap) / -2); top: 8px; bottom: 8px; border-left: var(--rule-hair); }
.hero .goal-line{ margin-top: var(--s-3); font-size: calc(16px * var(--ts)); line-height: 1.6; color: var(--c-ink); text-wrap: balance; }
.goal-line .g-k{ font-weight: var(--fw-bold); color: var(--c-muted); margin-right: .5em; }

/* ---------- 말씀과 자료: 2px 선이 양쪽 열을 가로지름 ---------- */
.sec--word .word{ border-top: var(--rule-lead); padding-top: var(--s-3); }
.feature{ border-top: 0; padding-top: 0; }
.rows--res .row:first-child{ padding-top: 0; }

/* ---------- 홈 행사: 그림(372) + 날짜 패, 위쪽 맞춤 · 하나의 링크 ---------- */
.ev-link{ display: grid; grid-template-columns: minmax(0, 372px) minmax(0, 1fr); gap: var(--s-5); align-items: start; color: var(--c-ink); text-decoration: none; border-radius: var(--r-m); }
.ev-link:not(.has-visual){ grid-template-columns: minmax(0, 1fr); }
.ev-visual--home{ display: block; }
.ev-visual--home img{ display: block; width: 100%; max-width: min(100%, 372px); height: auto; border-radius: var(--r-m); transition: opacity var(--m-quick) var(--ease-touch); }
.ev-link .erow{ display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: 0; border: 0; max-width: none; }
.ev-link .einfo{ gap: var(--s-0); }
.e-when{ font-size: calc(18px * var(--ts)); line-height: 1.6; }
.e-go{ display: inline-flex; align-items: center; gap: .2em; min-height: 44px; margin-top: var(--s-1); color: var(--c-leaf); font-weight: var(--fw-bold); font-size: calc(17px * var(--ts)); }
.e-go .ic{ width: 1em; height: 1em; }
.ev-link:focus-visible{ outline-offset: 4px; }

/* ---------- 행사 상세: 제목 1번, 그림, 정의 목록 ---------- */
.ev-visual .oimg{ margin-top: 0; justify-items: stretch; max-width: 560px; }
.ev-visual .oimg + .oimg{ margin-top: var(--s-3); }
.ev-visual .oimg img{ width: 100%; max-width: min(100%, 560px); }
.ev-visual .oimg figcaption{ justify-content: flex-end; }
.ev-facts{ display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-3); align-items: start; margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--rule-hair); }
.etile--big{ width: 120px; height: 136px; }
.etile--big .et-d{ font-size: 60px; }
.efacts{ display: grid; }
.efacts > div{ display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: var(--s-2); align-items: baseline; min-height: 44px; padding-block: var(--s-1); }
.efacts dt{ font-size: calc(var(--t-meta) * var(--ts)); font-weight: var(--fw-bold); color: var(--c-muted); }
.efacts dd{ font-size: calc(18px * var(--ts)); min-width: 0; }
.efacts dd b{ font-variant-numeric: tabular-nums; }
.efacts .tlink{ display: inline-flex; align-items: center; min-height: 48px; }

/* ---------- 오시는 길 ---------- */
.map-col .oimg img{ border-radius: var(--r-m); }

/* ---------- 목록 안내 띠 · 글 내비 ---------- */
.infoband{ margin-top: var(--s-5); padding-top: var(--s-2); border-top: var(--rule-hair); max-width: var(--list-max); }
.infoband .side-dl{ gap: var(--s-1) var(--s-5); }
.postnav{ margin-top: var(--s-5); }
.postnav--noprev{ grid-template-columns: auto minmax(0, 1fr); }
.postnav--noprev > span.pn-prev{ display: none; }
.postnav--noprev .pn-list{ justify-self: start; padding-inline: 0 var(--s-2) !important; }

/* ---------- 나눔지 ---------- */
.nt-list{ gap: 20px; }

/* ---------- 선 세 종류 · 장식 정리 ---------- */
.topics li{ border-top: var(--rule-hair); }
.timeline{ border-left: var(--rule-hair); }
.goal-box{ padding-left: 0; border-left: 0; }
.tabs a{ border-bottom-width: 3px; }
.sheet nav a[aria-current]{ box-shadow: inset 3px 0 0 var(--c-leaf); }
.tabbar a[aria-current]::before{ height: 3px; }
.toast{ box-shadow: none; }
.sheet{ box-shadow: var(--sh-2); }

/* ---------- 버튼 한 가지 문법 ---------- */
.btn{ min-height: var(--btn-h); height: auto; max-width: 100%; padding: 12px var(--btn-px); gap: 8px; border: var(--btn-border) solid var(--c-leaf);
  font-size: calc(var(--btn-fs) * var(--ts)); line-height: 1.3; white-space: normal; text-align: center; }
.btn .ic{ width: 20px; height: 20px; }
.btn--fill{ border-color: var(--c-leaf); }
.btn-row{ gap: var(--s-2); container-type: inline-size; }
@container (max-width: 359px){ .btn-row > .btn{ flex: 1 1 100%; } }
html[data-text="3"] .btn-row > .btn, html[data-text="4"] .btn-row > .btn{ flex: 1 1 100%; }
.btn-row--pair .btn{ white-space: normal; }

/* ---------- 사진(사진첩·앨범): 테두리·그림자 없음, 모서리 8, 캡션 12 ---------- */
.pfig .pt{ margin-top: 12px; font-size: calc(16px * var(--ts)); color: var(--c-ink); }
.pfig .ps{ margin-top: var(--s-0); }
.pgrid--album{ grid-template-columns: repeat(2, minmax(0, 335px)); gap: 32px var(--grid-gap); }
.ephoto{ outline: 0; transition: opacity var(--m-quick) var(--ease-touch); }

/* ---------- 글씨 크기 선택 원: 깊은 잎 위 흰 테두리 원 ---------- */
.ts-ctl button[aria-pressed="true"]{ color: var(--c-on-deep); text-decoration: none; }
.ts-ctl button[aria-pressed="true"]::before{ background: transparent; border: 1.5px solid var(--c-on-deep); }
.ts-ctl button.ts-4{ font-size: 25px; }
html:not(.is-reading) .ts-4{ display: none; }

/* ---------- 현재 메뉴 밑줄: 하나의 요소가 미끄러짐 ---------- */
.nav ul{ position: relative; }
.nav a[aria-current]{ box-shadow: none; }
.nav-ind{ position: absolute; left: 0; bottom: 0; width: 1px; height: 3px; background: var(--c-leaf); transform-origin: 0 0; opacity: 0; pointer-events: none;
  transition: transform var(--m-enter) var(--ease-glide), opacity var(--m-quick) var(--ease-touch), background-color var(--m-quick) var(--ease-touch); }

/* ---------- 요소 상태: hover(포인터 기기만) · focus-visible · 누름 ---------- */
.nav a, .tlink, .more, .tabs a, .r-title, .e-title, .pfig .pt{ transition: color var(--m-quick) var(--ease-touch), text-decoration-color var(--m-quick) var(--ease-touch), box-shadow var(--m-quick) var(--ease-touch), border-color var(--m-quick) var(--ease-touch); }
.btn, .icbtn, .row, .erow, .pn-list, .tabbar a .ic, .player-cover .pc-b{
  transition: background-color var(--m-quick) var(--ease-touch), color var(--m-quick) var(--ease-touch), border-color var(--m-quick) var(--ease-touch), transform var(--m-quick) var(--ease-glide); }
.btn:active, .icbtn:active, .player-cover:active .pc-b{ transform: scale(var(--press-scale)); transition-duration: var(--m-press); transition-timing-function: var(--ease-touch); }
.row:active{ transform: scale(.99); background: var(--c-shade); transition-duration: var(--m-press); transition-timing-function: var(--ease-touch); }
.tabbar a:active .ic{ transform: scale(.92); transition-duration: var(--m-press); transition-timing-function: var(--ease-touch); }
a.pfig:active .ephoto{ opacity: .88; transition-duration: var(--m-press); }
.ev-link:active .ev-visual--home img{ opacity: .92; transition-duration: var(--m-press); }
.ev-link:active .erow{ background: transparent; }
.btn:active{ background: var(--c-shade); }
.btn--fill:active{ background: var(--c-leaf-hover); border-color: var(--c-leaf-hover); }
@media (hover: hover) and (pointer: fine){
  .nav ul:has(a[aria-current]:hover) .nav-ind{ background: var(--c-leaf-hover); }
  .ev-link:hover .e-title{ text-decoration-color: currentColor; }
  .btn--fill:hover{ border-color: var(--c-leaf-hover); }
  .lbl-row .more:hover{ text-decoration: underline; text-decoration-thickness: 2px; }
}
a.pfig:focus-visible{ outline-offset: 4px; border-radius: var(--r-m); }

/* ---------- 메뉴 시트 · 확대 보기 ---------- */
#lbImg{ transform-origin: 0 0; }
.lb-view{ overscroll-behavior: contain; }

/* ---------- 화면 전환: View Transitions (JS가 data-nav 를 붙임) ----------
   머리글·유틸 줄·빠른 메뉴는 제자리(움직임 없음). 본문(root)만 방향 있게 바뀜 */
.util{ view-transition-name: util; }
.hdr{ view-transition-name: site-header; }
.tabbar{ view-transition-name: tabbar; }
.scrim{ view-transition-name: overlay-sheet; }
.lb{ view-transition-name: overlay-lb; }
body.is-mgr .util, body.is-mgr .hdr{ view-transition-name: none; }
/* 겹침 방지: 옛 화면은 120ms 안에 빠르게 사라지고(이동 12px), 새 화면은 90ms 뒤에 들어옴 → 두 층이 함께 0.3을 넘는 구간 없음 */
:root{ --m-leave-vt: 120ms; --vt-overlap: 70ms; --ease-fade-out: cubic-bezier(0.2, 0, 0, 1); --vt-in: var(--shift-route); --vt-out: 12px; }
@media (prefers-reduced-motion: reduce){ :root{ --m-leave-vt: 0ms; --vt-overlap: 0ms; } }
:root[data-shared]{ --vt-in: calc(var(--shift-route) / 2); --vt-out: 6px; }
/* (::view-transition 바탕색 지정 삭제: 스냅샷이 아직 안 그려진 프레임에 머리글까지 빈 종이로 보이던 원인) */
::view-transition-group(tabbar), ::view-transition-group(root){ animation: none; }
/* 머리글(고정 위치)은 대개 제자리. 스크롤된 화면에서 맨 위 화면으로 바뀔 때만 유틸 줄이 다시 보이며
   머리글이 48px 내려오는데, 이때 튀지 않고 본문과 같은 곡선으로 미끄러지게 함(위치만 보간) */
/* 머리글은 본문과 같은 시점(--vt-overlap)에 한 곡선으로만 움직임 */
::view-transition-group(util), ::view-transition-group(site-header){ animation-duration: var(--m-enter); animation-timing-function: var(--ease-glide); animation-delay: var(--vt-overlap); }
/* 이전 스냅샷을 숨기지 않고 밑에 깔아 둠: 새 스냅샷이 한 프레임 늦게 그려져도 머리글 자리가 비지 않음(새 것이 위에 덮임) */
::view-transition-old(util), ::view-transition-old(site-header), ::view-transition-old(tabbar){ animation: none; opacity: 1; mix-blend-mode: normal; }
::view-transition-new(util), ::view-transition-new(site-header), ::view-transition-new(tabbar){ animation: none; opacity: 1; mix-blend-mode: normal; }
::view-transition-image-pair(util), ::view-transition-image-pair(site-header), ::view-transition-image-pair(tabbar){ isolation: auto; }
/* 스크롤로 화면 밖에 있던 유틸 줄은 이전 이름을 빼므로(JS) 새로 나타남: 제자리에서 본문과 함께 페이드 */
::view-transition-new(util):only-child{ animation: vt-fade-in var(--m-enter) var(--ease-glide) var(--vt-overlap) both; }
::view-transition-old(overlay-sheet), ::view-transition-old(overlay-lb){ animation: vt-fade-out var(--m-leave) var(--ease-leave) both; }
::view-transition-group(overlay-sheet), ::view-transition-group(overlay-lb){ animation: none; }
html[data-nav="forward"]::view-transition-old(root){ animation: vt-out-l var(--m-leave-vt) var(--ease-fade-out) both; }
html[data-nav="forward"]::view-transition-new(root){ animation: vt-in-r var(--m-enter) var(--ease-glide) var(--vt-overlap) both; }
html[data-nav="back"]::view-transition-old(root){ animation: vt-out-r var(--m-leave-vt) var(--ease-fade-out) both; }
html[data-nav="back"]::view-transition-new(root){ animation: vt-in-l var(--m-enter) var(--ease-glide) var(--vt-overlap) both; }
html[data-nav="lateral"]::view-transition-old(root){ animation: vt-fade-out 100ms var(--ease-fade-out) both; }
html[data-nav="lateral"]::view-transition-new(root){ animation: vt-fade-in var(--m-enter) var(--ease-glide) 70ms both; }
::view-transition-group(vt-title){ animation-duration: var(--m-enter); animation-timing-function: var(--ease-glide); }
::view-transition-old(vt-title), ::view-transition-new(vt-title){ height: 100%; object-fit: none; object-position: left center; overflow: clip; }
/* 교차 페이드를 엇갈리게: 작은 제목은 앞쪽에서 빠지고, 큰 제목은 자리에 거의 왔을 때 나타남(글자 겹침 최소) */
::view-transition-old(vt-title){ animation: vt-fade-out var(--m-leave-vt) var(--ease-fade-out) both; }
::view-transition-new(vt-title){ animation: vt-fade-in calc(var(--m-enter) * .6) var(--ease-glide) var(--vt-overlap) both; }
@keyframes vt-out-l{ to{ opacity: 0; transform: translateX(calc(var(--vt-out) * -1)); } }
@keyframes vt-out-r{ to{ opacity: 0; transform: translateX(var(--vt-out)); } }
@keyframes vt-in-r{ from{ opacity: 0; transform: translateX(var(--vt-in)); } }
@keyframes vt-in-l{ from{ opacity: 0; transform: translateX(calc(var(--vt-in) * -1)); } }
@keyframes vt-fade-out{ to{ opacity: 0; } }
@keyframes vt-fade-in{ from{ opacity: 0; } }

/* ---------- 반응형 ---------- */
@media (max-width: 1023px){
  .hero{ grid-template-columns: minmax(0, 1fr); padding-top: var(--s-6); }
  .hero-l, .hero-r, .hero-v{ grid-column: 1; grid-row: auto; }
  .hero-r{ padding-top: 0; margin-top: var(--s-5); max-width: 640px; }
  .mast{ font-size: var(--t-mast-t); }
  .lede{ margin-top: var(--s-3); margin-bottom: 0; padding-top: 0; font-size: calc(24px * var(--ts)); max-width: none; }
  .hero-v{ margin-top: var(--s-6); }
  .hero .vision-line li{ font-size: calc(20px * var(--ts)); }
  .ev-link{ grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}
@media (max-width: 767px){
  .page-head{ padding-block: var(--s-5) var(--s-2); }
  .hero{ padding-top: var(--s-4); }
  .mast{ font-size: min(var(--t-mast-m), 13.1vw); line-height: 1.04; letter-spacing: var(--t-mast-m-ls); }
  .lede{ margin-top: 12px; font-size: calc(var(--t-lede) * var(--ts)); }
  .lede br.m{ display: inline; }
  .hero-r{ margin-top: 28px; max-width: none; }
  .tt li{ min-height: 52px; padding-block: 10px; }
  .hero .also{ font-size: calc(15px * var(--ts)); }
  .hero-act{ margin-top: var(--s-2); }
  .hero-act .btn{ width: 100%; }
  .hero-v{ margin-top: 40px; }
  .hero .vision-line{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  .hero .vision-line li{ min-height: 44px; padding-inline: var(--s-2); font-size: calc(18px * var(--ts)); }
  .hero .vision-line li:nth-child(odd){ padding-left: 0; }
  .hero .vision-line li + li::before{ display: none; }
  .hero .vision-line li:nth-child(even){ border-left: var(--rule-hair); }
  .hero .vision-line li:nth-child(n+3){ border-top: var(--rule-hair); }
  .hero .goal-line{ font-size: calc(15px * var(--ts)); }
  .ev-facts{ grid-template-columns: 96px minmax(0, 1fr); }
  .etile--big{ width: 96px; height: 112px; }
  .etile--big .et-d{ font-size: 48px; }
  .efacts > div{ grid-template-columns: minmax(0, 1fr); gap: 0; }
  .map-col .oimg figcaption{ order: -1; justify-content: space-between; }
  .pgrid--album{ grid-template-columns: minmax(0, min(100%, 335px)); }
  .ev-visual .oimg figcaption{ justify-content: flex-end; }
}
@media (max-width: 389px){
  .ev-link .erow{ grid-template-columns: 72px minmax(0, 1fr); }
  /* 글씨 3·4단계: 날짜 패 옆 칸이 좁아 날짜가 넘치므로 정의 목록을 패 아래로 */
  html[data-text="2"] .ev-facts, html[data-text="3"] .ev-facts, html[data-text="4"] .ev-facts{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 300px){
  .hero .vision-line{ grid-template-columns: minmax(0, 1fr); }
  .hero .vision-line li{ border-left: 0 !important; padding-left: 0; }
  .hero .vision-line li + li{ border-top: var(--rule-hair); }
  .mast{ white-space: normal; overflow-wrap: anywhere; }
  .tt-k{ flex-basis: 100%; }
  .tt-p{ margin-left: 0; }
  .ev-facts, .ev-link .erow{ grid-template-columns: minmax(0, 1fr); }
  .postnav--noprev{ grid-template-columns: minmax(0, 1fr); }
  .btn-row > .btn{ flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce){
  .nav-ind{ transition: none; }
}
/* 본문 스냅샷은 종이 바탕으로 불투명 → 기본 plus-lighter 합성(격리 패스)이 필요 없음. 일반 합성으로 같은 모습, 합성 비용↓ */
::view-transition-image-pair(root){ isolation: auto; }
::view-transition-old(root), ::view-transition-new(root){ mix-blend-mode: normal; }
.nav a:active{ color: var(--c-leaf); background: transparent; }

/* 글씨 3·4단계 + 좁은 화면(≤389): 제목 속 날짜 묶음(nb)이 한 줄로 넘치지 않게 줄바꿈 허용 */
@media (max-width: 389px){ html[data-text="3"] .nb, html[data-text="4"] .nb{ white-space: normal; } }
/* 대체 경로(WAAPI) 전환 중: #view 가로 이동이 문서 폭을 넓혀 모바일 화면이 축소되며 빠른 메뉴가 밀려나지 않게 가로만 자름 */
html.is-moving, html.is-moving body{ overflow-x: clip; }

/* =====================================================================
   첫 화면 · 설교 상세 순서 · 스크롤 등장 (tokens-v4.css)
   ===================================================================== */

/* ---------- 첫 화면: 글자 1–7열 · 액자 사진 8열부터 ---------- */
.hero-w{ background: linear-gradient(180deg, var(--c-blossom-soft) 0, var(--c-paper) 100%); }
.welcome{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start;
  padding-block: var(--s-6) var(--s-6); }
.wl-text{ grid-column: 1 / 8; min-width: 0; max-width: 594px; }
.wl-name{ font-family: var(--f-display); font-weight: var(--fw-display); font-size: calc(52px * var(--ts)); line-height: 1.15; letter-spacing: -0.03em; color: var(--c-ink); }
.wl-hist{ margin-top: 12px; font-size: calc(18px * var(--ts)); line-height: 1.6; color: var(--c-muted); }
.wl-hist .tlink{ margin-left: var(--s-1); font-size: calc(16px * var(--ts)); }
.wl-goal{ margin-top: var(--s-3); font-size: calc(18px * var(--ts)); line-height: 1.65; color: var(--c-ink); text-wrap: balance; }
.wl-goal .g-k{ display: block; font-size: calc(15px * var(--ts)); font-weight: var(--fw-bold); color: var(--c-apricot-ink); letter-spacing: .01em; }
.wl-times{ margin-top: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-2); border-radius: var(--r-m); background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-line); }
.wl-lbl{ display: flex; align-items: baseline; gap: var(--s-1); font-family: var(--f-body); font-size: calc(16px * var(--ts)); font-weight: var(--fw-bold); line-height: 1.4; color: var(--c-ink); }
.wl-place{ font-size: calc(15px * var(--ts)); font-weight: 400; color: var(--c-muted); }
.wl-tt{ list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-2); padding: 0; }
.wl-tt li{ display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: var(--s-2); border-left: 3px solid var(--c-blossom); }
.wl-tt .k{ font-size: calc(15px * var(--ts)); color: var(--c-muted); }
.wl-tt .t{ font-size: calc(24px * var(--ts)); font-weight: var(--fw-bold); line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--c-ink); }
.wl-also{ display: flex; flex-wrap: wrap; gap: 0 var(--s-1); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--c-line); font-size: calc(15px * var(--ts)); color: var(--c-muted); }
.wl-act{ margin-top: var(--s-3); gap: var(--s-1) var(--s-2); }
/* 액자: 살구 면 패딩 16 · 모서리 16, 사진 폭 335 이하(원본 비율) */
.wl-photo{ grid-column: 8 / 13; align-self: start; justify-self: start; margin: 6px 0 0; box-sizing: border-box; width: 100%; max-width: 367px; padding: 16px; border-radius: 16px; background: var(--c-blossom-soft); }
.wl-photo img{ display: block; width: 100%; max-width: 335px; height: auto; margin-inline: auto; border-radius: 10px; background: var(--c-shade); }
.wl-photo figcaption{ display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-2); }
.wl-q{ font-family: var(--f-display); font-weight: var(--fw-display); font-size: calc(20px * var(--ts)); line-height: 1.5; color: var(--c-ink); }
.wl-src{ font-size: calc(14px * var(--ts)); line-height: 1.6; color: var(--c-muted); }
.wl-more{ font-size: calc(14px * var(--ts)); }

/* 비전 한 줄 */
.vis-strip{ padding-block: 0 var(--s-2); }
.vis-strip .vision-line{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap); margin-top: var(--s-1); padding: 0; list-style: none; border-top: var(--rule-hair); }
.vis-strip .vision-line li{ display: flex; align-items: center; min-height: 56px; font-family: var(--f-display); font-weight: var(--fw-display); font-size: calc(22px * var(--ts)); color: var(--c-ink); }

@media (max-width: 1023px){
  .welcome{ grid-template-columns: minmax(0, 1fr); padding-block: var(--s-5); }
  .wl-text, .wl-photo{ grid-column: 1; }
  .wl-text{ max-width: 640px; }
  .wl-photo{ margin-top: var(--s-5); }
  .vis-strip .vision-line{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .welcome{ padding-block: var(--s-4) var(--s-5); }
  .wl-name{ font-size: calc(36px * var(--ts)); }
  .wl-times{ margin-top: var(--s-3); padding: var(--s-2); }
  .wl-tt{ gap: var(--s-1); }
  .wl-tt li{ padding-left: 10px; }
  .wl-tt .t{ font-size: calc(20px * var(--ts)); }
  .wl-act .btn{ width: 100%; }
  .wl-photo{ justify-self: center; max-width: 358px; padding: 11px; }
  .vis-strip .vision-line li{ min-height: 48px; font-size: calc(18px * var(--ts)); }
}
@media (max-width: 359px){
  .wl-tt{ grid-template-columns: minmax(0, 1fr); }
  .wl-tt li{ flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--s-1); }
  .wl-tt .t{ white-space: normal; }
  .vis-strip .vision-line{ grid-template-columns: minmax(0, 1fr); }
  .wl-name{ overflow-wrap: anywhere; }
}

/* 좁은 폭(520 미만): 예배 시각을 한 줄씩(이름 왼쪽 · 시각 오른쪽) — 글꼴 폭에 덜 민감 */
@media (max-width: 519px){
  .wl-tt{ grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wl-tt li{ flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding: 8px 0 8px 12px; }
  .wl-tt li + li{ border-top: 1px solid var(--c-line); }
  .wl-tt .k{ font-size: calc(16px * var(--ts)); }
  .wl-tt .t{ font-size: calc(22px * var(--ts)); }
}
/* 머리글 좁은 폭: 교회명과 도구 버튼 사이 여유 확보 */
@media (max-width: 379px){
  .hdr .wrap{ gap: var(--s-1); }
  .brand{ gap: var(--s-1); }
  .brand-name{ font-size: 18px; }
  .hdr-tools{ gap: var(--s-1); }
  .hdr-tools .icbtn{ padding: 0 8px; }
}

/* ---------- 설교 상세: 영상이 주인공 / 읽기 흐름 ---------- */
.player--lead{ margin-top: 0; }
.src-links--lead{ margin-top: var(--s-2); margin-bottom: var(--s-4); }
.rows--rel{ margin-top: var(--s-4); }

/* ---------- 사진 캡션 링크 · 행 · 버튼: 같은 반응 ---------- */
.wl-more:active, .tlink:active{ opacity: .72; transition: opacity var(--m-press) var(--ease-touch); }
@media (hover: hover) and (pointer: fine){
  .btn:not(.btn--fill):hover{ background: var(--c-shade); }
}

/* ---------- 스크롤 등장: JS가 화면 아래 구획에만 .rv 를 붙임 ---------- */
.rv{ opacity: 0; transform: translateY(12px); }
.rv.rv-in{ opacity: 1; transform: none; transition: opacity 300ms var(--ease-glide), transform 300ms var(--ease-glide); }
@media (prefers-reduced-motion: reduce){
  .rv, .rv.rv-in{ opacity: 1; transform: none; transition: none; }
}