/* =========================================================
   말씀 페이지 (sermon/, sermon/<날짜>/) — style.css · footer.css 위에 얹는다
   원칙: 긴 스크롤 금지 — 장면·영상은 한 칸에서 넘기고, 탭을 바꿔도 칸 높이는 같다
   퀴즈 칸의 색은 그 릴스의 색(--q-bg/--q-ink/--q-mute)을 그대로 쓴다
   ========================================================= */
body.sm{background:var(--ivory)}
.sm button{font-family:inherit;-webkit-tap-highlight-color:transparent}

/* ---------- 머리 ---------- */
.sm-head{background:var(--night);color:var(--ivory);padding:28px 0 38px;position:relative;overflow:hidden}
.sm-head::after{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(43,169,183,.32),rgba(149,158,37,.12) 55%,transparent 72%);pointer-events:none}
.sm-head .wrap{position:relative;z-index:1}
.sm-crumb{display:flex;gap:8px;align-items:center;font-size:12.5px;color:#98C0C0;margin-bottom:18px}
.sm-crumb a{color:#C8DEDF;text-decoration:none}
.sm-tag{font-size:13px;color:#A6DBE0;margin-bottom:14px}
.sm-kicker{font-size:13px;letter-spacing:.06em;color:var(--gold-l);font-weight:600}
.sm-head h1{font-family:var(--serif);font-weight:800;font-size:clamp(32px,5.2vw,52px);line-height:1.16;letter-spacing:-.02em;margin-top:8px;text-wrap:balance}
.sm-meta{font-size:15px;color:#B6D2D2;margin-top:10px}
.sm-q{font-family:var(--serif);font-weight:700;font-size:clamp(17px,2.2vw,21px);line-height:1.6;color:var(--ivory);margin-top:20px;max-width:32em;opacity:.94;text-wrap:pretty}
.sm-q::before{content:"Q.";color:var(--gold-l);margin-right:8px}
.sm-head-idx h1{font-size:clamp(34px,5.6vw,54px)}

/* ---------- 한 칸 무대 (탭 + 고정 높이) ---------- */
.sm-stage{padding:30px 0 36px}
.sm-stage .wrap{max-width:1040px}
.st-tabs{display:flex;gap:4px;background:var(--night);border-radius:999px;padding:5px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;margin-bottom:14px}
.st-tabs::-webkit-scrollbar{display:none}
.st-tabs button{-webkit-appearance:none;appearance:none;border:0;background:transparent;color:#C8DEDF;font-size:14px;font-weight:600;padding:10px 18px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.st-tabs button[aria-selected="true"]{background:var(--ivory);color:var(--night)}
.st-frame{display:grid}
.st-p{grid-area:1/1;min-width:0;border-radius:24px;padding:34px 38px;position:relative;overflow:hidden}
html.js .st-p:not(.on){visibility:hidden;pointer-events:none}
html.js .st-p.on{animation:riseIn .4s ease both}
html:not(.js) .st-frame{gap:18px}
html:not(.js) .st-p{grid-area:auto}
.st-kicker{font-size:12px;font-weight:700;letter-spacing:.14em;opacity:.72;margin-bottom:12px}

/* 넘김(1분 영상·목록·질문 카드) */
.cz{display:flex;flex-direction:column;justify-content:center}
.cz-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.cz-track::-webkit-scrollbar{display:none}
.cz-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.cz-bar{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
.cz-arrow{-webkit-appearance:none;appearance:none;width:40px;height:40px;border-radius:50%;border:2px solid currentColor;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:opacity .2s}
.cz-arrow svg{width:18px;height:18px}
.cz-arrow:disabled{opacity:.25;cursor:default}
.cz-dots{display:flex;gap:8px}
.cz-dots i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.25;transition:opacity .2s,width .2s}
.cz-dots i.on{opacity:.9;width:22px;border-radius:4px}
.cz-num{gap:4px}
.cz-num i{width:auto;height:auto;min-width:28px;padding:5px 8px;border-radius:999px;background:transparent;opacity:.5;font-style:normal;font-size:13px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.cz-num i.on{opacity:1;width:auto;background:var(--night);color:var(--ivory)}
html:not(.js) .cz-bar{display:none}

/* ---------- 퀴즈 칸: 질문 화면 ↔ 결과(이야기) 화면이 같은 자리에서 바뀜 ---------- */
.qz{background:var(--q-bg);color:var(--q-ink);display:grid;padding:0}
.qz-view{grid-area:1/1;min-width:0;padding:34px 38px;transition:opacity .45s ease,transform .45s ease}
html.js .qz:not(.open) .qz-story,html.js .qz.open .qz-ask{opacity:0;transform:scale(.98);visibility:hidden;pointer-events:none}
.qz-ask{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.qz h2{font-weight:800;font-size:clamp(28px,4vw,40px);line-height:1.22;letter-spacing:-.02em;text-wrap:balance}
.qz-sub{font-size:16px;font-weight:600;margin-top:10px;color:var(--q-mute)}
.qz-hint{font-size:15.5px;font-weight:700;margin-top:18px;color:var(--q-ink);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.qz.picked .qz-hint,html:not(.js) .qz-hint{opacity:1;transform:none}

/* 체크리스트 — 메모지, 체크할 때마다 도장 + 게이지 */
.qz-note{list-style:none;background:#FBF8F1;color:#1C1814;padding:6px 24px;box-shadow:0 2px 0 rgba(0,0,0,.06),0 18px 36px -18px rgba(0,0,0,.35);transform:rotate(-1.2deg)}
.qz-note li+li{border-top:1px dashed rgba(28,24,20,.18)}
.qz-note label{display:flex;align-items:center;gap:15px;padding:13px 0;font-size:17px;font-weight:600;cursor:pointer;color:#1C1814;user-select:none}
.qz-note input{position:absolute;opacity:0;width:1px;height:1px}
.qz-note .box{flex:none;width:25px;height:25px;border:2.5px solid #1C1814;position:relative;background:#fff;transition:transform .15s}
.qz-note .box::after{content:"";position:absolute;left:5px;top:-7px;width:11px;height:22px;border:solid #B23A22;border-width:0 4px 4px 0;transform:rotate(42deg) scale(0);transform-origin:60% 70%;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.qz-note input:checked+.box{animation:stamp .32s ease}
.qz-note input:checked+.box::after{transform:rotate(42deg) scale(1)}
.qz-note input:checked~.qz-it{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--q-bg) 70%,transparent) 58%)}
.qz-note input:focus-visible+.box{outline:3px solid #1C7682;outline-offset:3px}
@keyframes stamp{0%{transform:scale(1)}40%{transform:scale(1.28) rotate(-6deg)}100%{transform:scale(1)}}
.qz-go{display:flex;align-items:center;gap:18px;margin-top:22px}
.qz-meter{flex:1;display:flex;align-items:center;gap:14px}
/* 다음으로: 글 없이 화살표만. 하나라도 체크하면 숨 쉬듯 커졌다 작아진다 */
.qz-next{-webkit-appearance:none;appearance:none;flex:none;width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;background:var(--q-ink);color:var(--q-bg);
  display:flex;align-items:center;justify-content:center;padding:0;position:relative;transition:transform .15s}
.qz-next svg{width:26px;height:26px}
.qz-next::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--q-ink);opacity:0}
.qz.ready .qz-next{animation:breathe 1.8s ease-in-out infinite}
.qz.ready .qz-next::after{animation:ring 1.8s ease-out infinite}
.qz-next:active{transform:scale(.94)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes ring{0%{opacity:.6;transform:scale(.9)}80%,100%{opacity:0;transform:scale(1.25)}}
.qm-track{position:relative;flex:1;height:8px;border-radius:4px;background:color-mix(in srgb,var(--q-ink) 16%,transparent)}
.qm-track i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:var(--q-ink);transition:width .35s cubic-bezier(.3,1.3,.5,1)}
.qm-track b{position:absolute;top:-5px;width:2px;height:18px;background:var(--q-ink);opacity:.5}
.qm-txt{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.qm-txt em{font-style:normal;display:inline-block}
.qz-meter.hit .qm-txt em{animation:stamp .4s ease}
.qz .btn{background:var(--q-ink);color:var(--q-bg);border:0;margin-top:20px;font-size:16px;padding:15px 28px;-webkit-appearance:none;appearance:none;transition:transform .15s,opacity .2s}
.qz .btn:active{transform:scale(.97)}

/* 고르기 — A·B·C 종이 카드 */
.qz-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.qz-card{-webkit-appearance:none;appearance:none;border:0;background:#FBF8F1;color:#1C1814;border-radius:6px;padding:22px 10px 20px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:0 2px 0 rgba(0,0,0,.06),0 14px 28px -16px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.3,1.4,.5,1),opacity .3s,box-shadow .25s}
.qz-card:nth-child(1){transform:rotate(-2deg)}.qz-card:nth-child(3){transform:rotate(2deg)}
.qc-l{font-weight:900;font-size:40px;line-height:1}
.qz-card:nth-child(1) .qc-l{color:#964A2C}.qz-card:nth-child(2) .qc-l{color:#1E5C58}.qz-card:nth-child(3) .qc-l{color:#343C78}
.qc-t{font-size:15.5px;font-weight:700;text-align:center;line-height:1.35}
@media(hover:hover){.qz-card:hover{transform:translateY(-6px) rotate(0)}}
.qz.picked .qz-card{opacity:.4;transform:scale(.94)}
.qz.nudge .qz-card{animation:nudge .45s ease}
@keyframes nudge{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.qz-go-c{justify-content:flex-end}
/* B형(한 문장) — 강조 낱말에 형광펜, 고를 것 없이 화살표로 */
.qz-lead{font-size:17px;font-weight:600;margin-top:14px;color:var(--q-mute)}
.qz-b h2 mark{background:none;color:inherit;position:relative;z-index:0;white-space:nowrap}
.qz-b h2 mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.08em;height:.38em;background:color-mix(in srgb,#FBF8F1 75%,transparent);z-index:-1}
.qz-b h2{position:relative;z-index:0}
.qz.picked .qz-card.on{opacity:1;transform:translateY(-8px) scale(1.06) rotate(0);box-shadow:0 22px 40px -18px rgba(0,0,0,.5)}

/* 결과 = 이야기(스토리)처럼: 위 진행 막대, 좌우 눌러 넘김, 장면마다 그림이 천천히 다가옴 */
.qz-story{display:flex;flex-direction:column;position:relative}
.qs-bars{display:flex;gap:5px}
.qs-bars i{flex:1;height:3px;border-radius:2px;background:color-mix(in srgb,var(--q-ink) 20%,transparent);overflow:hidden}
.qs-bars b{display:block;height:100%;width:0;background:var(--q-ink)}
.qs-bars i.done b{width:100%}
.qs-bars i.run b{animation:fillbar var(--dur,5s) linear forwards}
.qz.paused .qs-bars i.run b{animation-play-state:paused}
@keyframes fillbar{to{width:100%}}
.qs-stage{flex:1;display:grid;margin-top:14px}
.qs-s{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.qs-s.on{opacity:1;visibility:inherit}
html:not(.js) .qs-s{opacity:1;visibility:inherit;grid-area:auto}
.qs-art{width:100%;max-width:380px;height:auto;aspect-ratio:540/452;justify-self:center;display:block;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 62%,transparent 100%)}
.qs-s.on .qs-art{animation:kenburns var(--dur,5s) ease-out both}
@keyframes kenburns{from{transform:scale(1.08) translateY(6px)}to{transform:scale(1) translateY(0)}}
.qs-txt h3{font-weight:800;font-size:clamp(24px,3.2vw,32px);line-height:1.28;letter-spacing:-.015em;text-wrap:balance}
.qs-txt p{font-size:17px;margin-top:10px;color:var(--q-mute);font-weight:500}
.qs-s.on .qs-txt h3{animation:riseIn .6s .1s cubic-bezier(.2,.7,.2,1) both}
.qs-s.on .qs-txt p{animation:riseIn .6s .3s cubic-bezier(.2,.7,.2,1) both}
.qs-txt mark{background:none;color:inherit;position:relative;white-space:nowrap}
.qs-txt mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.08em;height:.38em;background:color-mix(in srgb,#FBF8F1 75%,transparent);z-index:-1;transform:scaleX(0);transform-origin:left}
.qs-txt h3{position:relative;z-index:0}
.qs-s.on mark::after{animation:hl .6s .7s ease forwards}
@keyframes hl{to{transform:scaleX(1)}}
.qs-end{grid-template-columns:.8fr 1.2fr;grid-template-areas:"h card";gap:18px 40px;align-items:stretch}
.qe-h{grid-area:h;align-self:center;font-weight:800;font-size:clamp(26px,3.6vw,36px);line-height:1.25;text-wrap:balance}
/* 마지막 장: 이 질문과 짝지어진 설교가 오른쪽(폰은 가운데)을 꽉 채운다 */
.qe-sermon{grid-area:card;position:relative;z-index:3;display:flex;flex-direction:column;background:#fff;color:var(--ink);border-radius:18px;padding:12px;
  box-shadow:0 18px 36px -20px rgba(0,0,0,.45);min-height:0}
.qe-yt,.yt-frame.qe-yt{flex:1;min-height:150px;border-radius:12px;height:auto}
.qe-yt img{position:absolute;inset:0}
.qe-body{display:block;padding:12px 6px 4px;text-decoration:none;color:var(--ink)}
.qe-k{display:block;font-size:12.5px;font-weight:600;color:var(--teal-d)}
.qe-title{display:block;font-family:var(--serif);font-weight:800;font-size:22px;line-height:1.3;margin-top:3px}
.qe-ref{display:block;font-size:13.5px;color:var(--soft);margin-top:2px}
.qs-s.on .qe-sermon{animation:riseIn .6s .25s cubic-bezier(.2,.7,.2,1) both}
@media(hover:hover){.qe-body:hover .qe-title{color:var(--teal-d)}}
.qs-btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:8px;border:2px solid var(--q-ink);background:transparent;color:var(--q-ink);font-size:15px;font-weight:700;padding:12px 20px;border-radius:999px;cursor:pointer;text-decoration:none}
.qs-btn svg{width:16px;height:16px}
.qs-zone{position:absolute;top:40px;bottom:0;z-index:2;border:0;background:transparent;cursor:pointer;padding:0}
.qs-zone.prev{left:0;width:30%}.qs-zone.next{right:0;width:70%}
.qz.ended .qs-zone{display:none}
html:not(.js) .qs-zone,html:not(.js) .qs-bars{display:none}
/* ---------- 1분 영상 칸 ---------- */
.sh-p{background:var(--night);color:var(--ivory)}
.sh{display:grid;grid-template-columns:190px 1fr;gap:40px;align-items:center;padding:2px}
.sh-txt h2{font-family:var(--serif);font-weight:800;font-size:clamp(24px,3.2vw,32px);line-height:1.28;text-wrap:balance}
.sh-txt p:not(.st-kicker){font-size:16px;line-height:1.7;color:#C8DEDF;margin-top:12px;max-width:30em}
.sh-more{display:inline-block;margin-top:20px;font-weight:700;font-size:15px;color:var(--gold-l);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:3px}

/* ---------- 영상 틀 (눌렀을 때 재생) ---------- */
.yt{-webkit-appearance:none;appearance:none;display:block;position:relative;border:0;padding:0;background:#000;cursor:pointer;overflow:hidden;border-radius:16px;width:100%;color:var(--night)}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.95;transition:transform .5s}
.yt-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--gold);color:var(--night);display:flex;align-items:center;justify-content:center;transition:transform .2s;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.yt-play svg{width:28px;height:28px;margin-left:3px}
.yt-wide,.yt-frame.yt-wide{aspect-ratio:16/9}
.yt-tall,.yt-frame.yt-tall{aspect-ratio:9/16;border-radius:14px}
.yt-tall .yt-play{width:48px;height:48px;margin:-24px 0 0 -24px}.yt-tall .yt-play svg{width:22px;height:22px}
.yt-frame{display:block;border:0;width:100%;background:#000;border-radius:16px}
@media(hover:hover){.yt:hover img{transform:scale(1.03)}.yt:hover .yt-play{transform:scale(1.08)}}

/* ---------- 설교 전체 + 정보 ---------- */
.sm-watch{padding:6px 0 40px}
.sm-watch .wrap{max-width:1040px;display:grid;grid-template-columns:1.55fr 1fr;gap:18px 40px;align-items:center}
.sw-info div{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.sw-info div:last-child{border-bottom:0}
.sw-info dt{font-size:12.5px;font-weight:600;color:var(--soft);padding-top:2px}
.sw-info dd{font-size:15px;line-height:1.5;color:var(--ink)}
.sw-links{grid-column:1/-1;display:flex;gap:22px;font-size:14px;font-weight:600}
.sw-links a{color:var(--teal-d);text-decoration:none}

/* ---------- 예배 안내 한 줄 ---------- */
.sm-visit{background:var(--mid);color:var(--ivory);padding:20px 0}
.sm-visit .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.sm-visit p{font-size:14px;line-height:1.6;color:#DCEBE9}
.sm-visit b{display:block;color:var(--ivory);font-weight:700;font-size:15px}
.sm-visit .btn{flex:none;padding:11px 20px;font-size:14px}

/* ---------- 이전·다음 ---------- */
.sm-pager{background:var(--ivory);padding:18px 0;border-top:1px solid var(--line)}
.sm-pager .wrap{display:flex;justify-content:space-between;gap:20px}
.sm-pager a{text-decoration:none;font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink)}
.sm-pager a span{display:block;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--soft);margin-bottom:3px}
.sm-pager .nx{text-align:right}

/* ---------- 말씀 모음: 질문으로 만나는 설교(퀴즈 + 그 설교 묶음) ---------- */
.sm-weekly{padding-bottom:6px}
.wk-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.pr-stack{display:grid}
.pr{grid-area:1/1;min-width:0}
html.js .pr:not(.on){visibility:hidden;pointer-events:none}
html.js .pr.on{animation:riseIn .4s ease both}
html:not(.js) .pr-stack{gap:28px}
html:not(.js) .pr{grid-area:auto}
.pr-top:empty{display:none}

.wk-k{font-family:var(--serif);font-weight:800;font-size:clamp(22px,3vw,28px);color:var(--ink)}
.wk-s{font-size:14px;color:var(--soft)}
.wk-s a{color:var(--teal-d);font-weight:600;text-decoration:none}

/* ---------- 말씀 모음: 설교 목록 · 최근 질문 · 교재 ---------- */
.ix-p{background:#fff}
.ix-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}
.ix-latest{display:block;color:var(--ink)}
.ix-media{position:relative}
.ix-yt,.yt-frame.ix-yt{aspect-ratio:16/9;border-radius:16px}
.ix-link{display:block;text-decoration:none;color:var(--ink)}
.ix-media:has(iframe) .ix-badge{display:none}
.ix-badge{position:absolute;z-index:2;pointer-events:none;right:14px;top:14px;background:var(--gold);color:var(--night);font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px}
.ix-date{display:block;font-size:13px;font-weight:600;color:var(--teal-d);margin-top:16px}
.ix-title{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(22px,2.8vw,28px);line-height:1.3;margin-top:6px}
.ix-ref{display:block;font-size:14px;color:var(--soft);margin-top:4px}
.ix-q{font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.6;margin-top:12px;opacity:.86;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ix-q::before{content:"Q. ";color:var(--gold)}
@media(hover:hover){.ix-link:hover .ix-title{color:var(--teal-d)}.sx:hover .sx-title{color:var(--teal-d)}.qx:hover{transform:translateY(-4px)}}
.sx-h{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--soft);margin-bottom:6px}
.sx-side{color:var(--ink);justify-content:flex-start}
.sx-page{display:grid;align-content:start}
.sx{display:grid;grid-template-columns:78px 1fr;column-gap:14px;row-gap:2px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.sx-date{grid-row:span 2;font-size:13px;font-weight:600;color:var(--teal-d);padding-top:3px;font-variant-numeric:tabular-nums}
.sx-title{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.35}
.sx-ref{font-size:13px;color:var(--soft)}
.sx-side .cz-bar,.qx-p .cz-bar{justify-content:flex-start;margin-top:14px;color:var(--night)}
.qx-p{justify-content:flex-start}
.qx-page{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-content:start;padding:4px 2px}
.qx{display:flex;flex-direction:column;background:var(--q-bg);color:var(--q-ink);border-radius:18px;padding:18px 18px 20px;text-decoration:none;transition:transform .25s}
.qx img{width:100%;aspect-ratio:540/452;object-fit:cover;border-radius:10px;margin-bottom:14px}
.qx-q{font-weight:800;font-size:19px;line-height:1.3}
.qx-s{font-size:12.5px;font-weight:600;color:var(--q-mute);margin-top:8px}

.bk{display:grid;grid-template-columns:160px 1fr;gap:36px;align-items:start}
.bk-cover{width:160px;border-radius:10px;box-shadow:0 14px 30px rgba(15,58,64,.2)}
.bk h2{font-family:var(--serif);font-weight:800;font-size:clamp(22px,3vw,28px);line-height:1.3}
.bk-sub{font-size:14px;color:var(--soft);margin-top:6px}
.bk-lessons{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:30px;margin-top:10px}
.bk-lessons li{border-bottom:1px solid var(--line)}
.ls{-webkit-appearance:none;appearance:none;display:block;width:100%;text-align:left;background:none;border:0;color:inherit;padding:12px 0;cursor:pointer;position:relative}
.ls-n{display:block;font-size:12.5px;font-weight:600;color:var(--teal-d)}
.ls-q{display:block;font-family:var(--serif);font-weight:700;font-size:15.5px;line-height:1.45;margin-top:3px;padding-right:62px;transition:color .2s}
.ls-go{position:absolute;right:0;top:12px;font-size:12px;font-weight:600;color:var(--soft);letter-spacing:.02em;transition:color .2s}
.ls-go::after{content:"";display:inline-block;width:5px;height:5px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg);margin-left:5px;vertical-align:1px;transition:transform .2s}
.ls:hover .ls-q{color:var(--teal-d)}
.ls:hover .ls-go{color:var(--gold)}
.ls:hover .ls-go::after{transform:translateX(2px) rotate(45deg)}
.ls:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---------- 교재 맛보기 (과마다 한 장 — 인쇄된 교재 한 쪽처럼) ---------- */
.lp{--pp:#FCFBF7;--rule:rgba(20,50,48,.16);border:0;padding:0;margin:auto;width:min(600px,calc(100vw - 32px));max-width:none;max-height:min(88vh,860px);
  background:var(--pp);color:var(--ink);border-radius:4px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 80px -20px rgba(8,30,34,.55),0 2px 6px rgba(8,30,34,.12);overflow:hidden}
.lp[open]{display:flex;flex-direction:column;animation:lpIn .38s cubic-bezier(.2,.8,.2,1)}
.lp.sw[open]{animation:lpSw .28s ease-out}
.lp::backdrop{background:rgba(12,40,44,.58);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:lpFade .3s ease-out}
.lp.out{animation:lpOut .2s ease-in forwards}
.lp.out::backdrop{animation:lpFade .2s ease-in reverse forwards}
@keyframes lpIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes lpSw{from{opacity:.4}to{opacity:1}}
@keyframes lpOut{to{opacity:0;transform:translateY(10px) scale(.99)}}
@keyframes lpFade{from{opacity:0}to{opacity:1}}
html:has(.lp[open]){overflow:hidden}

.lp-bar{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 26px;border-bottom:1px solid var(--rule);flex:none}
.lp-book{font-family:var(--serif);font-weight:800;font-size:14px;letter-spacing:.02em;margin-right:auto;white-space:nowrap}
.lp-book i{font-style:normal;font-family:var(--sans);font-weight:500;font-size:12px;color:var(--soft);margin-left:8px;letter-spacing:.04em}
.lp-pg{display:flex;align-items:center;gap:2px;font-size:13px;color:var(--soft);font-variant-numeric:tabular-nums}
.lp-pg b{color:var(--ink);font-weight:700;margin-left:4px}
.lp-pg>span{margin:0 4px 0 3px}
.lp-bar button{-webkit-appearance:none;appearance:none;border:0;background:none;color:var(--ink);width:34px;height:34px;display:grid;place-items:center;border-radius:50%;cursor:pointer;transition:background .15s,color .15s}
.lp-bar button:hover:not(:disabled){background:rgba(20,50,48,.07)}
.lp-bar button:disabled{color:var(--rule);cursor:default}
.lp-x{margin-left:6px}

.lp-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:30px 40px 0;-webkit-overflow-scrolling:touch}
.lp-head{padding-bottom:22px;border-bottom:2px solid var(--ink)}
.lp-no{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--gold)}
.lp-head h3{font-family:var(--serif);font-weight:800;font-size:clamp(26px,5vw,34px);line-height:1.2;letter-spacing:-.02em;margin-top:4px;text-wrap:balance}
.lp-ref{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:14px;margin-top:14px;color:var(--ink)}
.lp-ref span{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--pp);background:var(--ink);padding:2px 7px 1px;border-radius:2px;margin-right:4px}
.lp-ref em{font-style:normal;white-space:nowrap}
.lp-ref em+em::before{content:"·";color:var(--soft);margin-right:8px}

.lp-sec{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--teal-d);margin:26px 0 6px}
.lp-sec::after{content:"";flex:1;border-top:1px solid var(--rule)}
.lp-qs{list-style:none;counter-reset:lq}
.lp-qs li{counter-increment:lq;display:grid;grid-template-columns:30px 1fr;padding-top:14px}
.lp-qs li::before{content:counter(lq);font-family:var(--serif);font-weight:800;font-size:20px;line-height:1.3;color:var(--teal-d)}
.lp-qs p{font-size:15.5px;line-height:1.62;font-weight:500;text-wrap:pretty}
.lp-lines{grid-column:2;display:block;height:56px;background:repeating-linear-gradient(to bottom,transparent 0 27px,var(--rule) 27px 28px)}

.lp-share{margin:22px -40px 0;padding:22px 40px 24px;background:#EEF3F0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lp-share h4{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gold)}
.lp-share p{font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.6;margin-top:8px;text-wrap:pretty}

.lp-more{display:grid;grid-template-columns:66px 1fr;gap:20px;align-items:start;padding:26px 0 30px}
.lp-more img{width:66px;height:auto;border-radius:2px;box-shadow:0 8px 18px -6px rgba(15,58,64,.45),0 0 0 1px rgba(20,50,48,.08)}
.lp-count{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--soft);font-variant-numeric:tabular-nums}
.lp-ticks{display:flex;gap:3px}
.lp-ticks i{width:10px;height:3px;background:var(--rule)}
.lp-ticks i.on{background:var(--gold)}
.lp-more-h{font-family:var(--serif);font-weight:800;font-size:18px;margin-top:10px}
.lp-more-p{font-size:14px;line-height:1.65;color:#3E5654;margin-top:4px;text-wrap:pretty}
.lp-dl{display:inline-flex;align-items:baseline;gap:10px;margin-top:16px;background:var(--night);color:var(--ivory);text-decoration:none;font-weight:700;font-size:15px;padding:13px 20px;border-radius:3px;transition:background .2s}
.lp-dl small{font-size:12px;font-weight:500;color:#9FC4C4}
.lp-dl:hover{background:var(--mid)}
.lp-dl::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translate(-2px,-2px);align-self:center;margin-left:2px}
.bk-dl{font-size:13.5px;color:var(--soft);margin-top:16px}
.bk-dl a{color:var(--teal-d);font-weight:700}

/* ---------- 반응형 ---------- */
@media(max-width:760px){
  .sm-head{padding:20px 0 28px}
  .sm-crumb{margin-bottom:12px}
  .sm-tag{font-size:12.5px;margin-bottom:10px}
  .sm-q{margin-top:14px}
  .sm-stage{padding:20px 0 24px}
  .st-tabs{width:100%}
  .st-tabs button{flex:1 0 auto;font-size:13.5px;padding:10px 14px}
  .st-p{padding:24px 20px;border-radius:20px}
  .qz{padding:0}
  .qz-view{padding:24px 20px}
  .qz-ask{grid-template-columns:1fr;gap:18px;align-content:start}
  .qz-note{padding:2px 18px;transform:rotate(-.8deg)}
  .qz-note label{font-size:16px;padding:11px 0}
  .qz-cards{gap:8px}
  .qc-l{font-size:32px}.qc-t{font-size:14px}
  .qz-card{padding:16px 6px 14px}
  .qs-s{grid-template-columns:1fr;gap:14px;align-content:start}
  .qs-art{max-width:240px}
  .sh{grid-template-columns:118px 1fr;gap:18px;align-items:start}
  .sh-txt h2{font-size:21px}
  .sh-txt p:not(.st-kicker){font-size:14.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .sh-more{font-size:14px}
  .sm-watch .wrap{grid-template-columns:1fr;gap:14px}
  .sm-visit .wrap{flex-direction:column;align-items:stretch;gap:12px}
  .qs-end{grid-template-columns:1fr;grid-template-areas:"h" "card";grid-template-rows:auto 1fr;gap:14px}
  .qe-h{font-size:23px;align-self:start}
  .qe-yt,.yt-frame.qe-yt{flex:none;aspect-ratio:16/9;min-height:0}
  .qe-sermon{align-self:start}
  .qe-body{padding:10px 4px 2px}
  .qe-title{font-size:18px}
  .sm-visit .btn{justify-content:center}
  .ix-grid{grid-template-columns:1fr;gap:26px}
  .qx-page{grid-template-columns:1fr;gap:12px}
  .qx{flex-direction:row;align-items:center;gap:14px;padding:12px}
  .qx img{width:92px;margin:0;flex:none}
  .qx-q{font-size:16px}
  .bk{grid-template-columns:90px 1fr;gap:16px}
  .bk-cover{width:90px}
  .bk-body{display:contents}
  .bk-body h2{align-self:center;font-size:20px}
  .bk-sub,.bk-lessons,.bk-dl{grid-column:1/-1}
  .bk-lessons{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;margin:6px -20px 0;padding:0 20px;scroll-padding:0 20px}
  .bk-lessons::-webkit-scrollbar{display:none}
  .bk-lessons li{flex:0 0 78%;scroll-snap-align:start;background:var(--ivory);border:0;border-radius:14px}
  .ls{padding:16px 18px 44px;height:100%}
  .ls-q{padding-right:0}
  .ls-go{top:auto;bottom:16px;left:18px;right:auto;color:var(--teal-d)}
  .lp{width:100%;max-height:92dvh;margin:auto 0 0;border-radius:14px 14px 0 0}
  .lp[open]{animation:lpUp .36s cubic-bezier(.2,.8,.2,1)}
  .lp.sw[open]{animation:lpSw .28s ease-out}
  .lp.out{animation:lpDown .22s ease-in forwards}
  @keyframes lpUp{from{transform:translateY(40%);opacity:.3}to{transform:none;opacity:1}}
  @keyframes lpDown{to{transform:translateY(30%);opacity:0}}
  .lp-bar{padding:10px 8px 10px 20px;position:relative}
  .lp-bar::before{content:"";position:absolute;left:50%;top:5px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--rule)}
  .lp-book i{display:none}
  .lp-body{padding:22px 22px 0}
  .lp-share{margin:20px -22px 0;padding:20px 22px 22px}
  .lp-share p{font-size:17px}
  .lp-qs p{font-size:15px}
  .lp-lines{height:40px;background:repeating-linear-gradient(to bottom,transparent 0 19px,var(--rule) 19px 20px)}
  .lp-more{grid-template-columns:52px 1fr;gap:16px;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
  .lp-more img{width:52px}
  .lp-dl{display:flex;justify-content:center}
}
@media(hover:none){.st-tabs button[aria-selected="true"]{background:var(--ivory);color:var(--night)}.qz-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){
  .lp[open],.lp.out,.lp::backdrop{animation:none}
  html.js .st-p.on,html.js .pr.on,.qs-s.on .qs-art,.qs-s.on .qs-txt h3,.qs-s.on .qs-txt p,.qs-s.on .qe-sermon{animation:none}
  .qz.ready .qz-next,.qz.ready .qz-next::after{animation:none}
  .qs-s.on mark::after{animation:none;transform:scaleX(1)}
}