/* 세움교회 정기영 목사 설교 — 네이비 · 금색, 글꼴은 Noto Sans KR 하나로 통일
   (글꼴을 못 받는 곳에서는 기기 글꼴로 똑같이 보이게 순서를 둠) */
:root {
  --zoom: 1;
  --navy: #0a1c40; --navy-2: #061229; --navy-3: #10295a; --ink: #0b1630;
  --gold: #a9823a; --gold-l: #d4b06a; --gold-soft: #f6efe1; --live: #d42a1e; --live-soft: #fdecea;
  --bg: #fff; --soft: #f4f6fa; --soft-2: #eaeef5; --line: #e1e6ef; --muted: #5d6a80; --muted-2: #8a95a8;
  --am: #10295a; --pm: #2f6f6a; --wed: #4f7a2d; --fri: #5b2a86; --event: #a9823a; --short: #8a95a8;
  --r: 18px; --max: 1240px; --shadow: 0 18px 48px -20px rgba(10, 28, 64, .28); --shadow-s: 0 6px 22px -12px rgba(10, 28, 64, .25);
  --sans: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --serif: var(--sans);
  --en: var(--sans);
  --tab-h: 66px;
  --head-h: 74px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: calc(17px * var(--zoom)); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (min-width: 900px) { html { font-size: calc(17.5px * var(--zoom)); } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { body { padding-bottom: 0; } }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { letter-spacing: -.025em; color: var(--navy); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 99; background: #fff; padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--gold-l); outline-offset: 2px; border-radius: 8px; }
.ic { width: 1.2em; height: 1.2em; flex: none; }
.kicker { font-family: var(--en); font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.kicker.light { color: var(--gold-l); }
mark { background: #ffe9a8; color: var(--ink); border-radius: 3px; padding: 0 2px; }

/* ── 위 띠 · 머리말 ── */
.util { background: var(--navy-2); color: rgba(255, 255, 255, .72); font-size: .78rem; }
.util-in { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: 12px; }
.util b { color: #fff; font-weight: 600; }
.util-r { display: flex; gap: 14px; align-items: center; }
.util a { text-decoration: none; color: rgba(255, 255, 255, .85); }
.util-live { display: inline-flex; align-items: center; gap: 6px; background: var(--live); color: #fff !important; padding: 3px 10px; border-radius: 99px; font-weight: 700; font-family: var(--en); font-size: .72rem; letter-spacing: .06em; }
@media (max-width: 560px) { .util-in > span:first-child { display: none; } .util-r { margin-left: auto; } }
.top { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 18px; min-height: 70px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-logo { height: 50px; width: auto; display: block; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand-txt small { font-family: var(--en); font-size: .6rem; font-weight: 700; letter-spacing: .2em; color: var(--gold); }
.brand-txt b { font-size: 1.12rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.brand-txt em { font-style: normal; font-weight: 500; color: var(--muted); font-size: .92rem; margin-left: 2px; }
.topnav { display: none; gap: 2px; }
.topnav a { text-decoration: none; padding: 10px 14px; font-weight: 600; font-size: .95rem; color: var(--ink); position: relative; border-radius: 10px; }
.topnav a:hover { background: var(--soft); }
.topnav a[aria-current]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--gold); border-radius: 2px; }
@media (min-width: 1024px) { .topnav { display: flex; } }
.top-tools { display: flex; gap: 6px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; text-decoration: none; }
.icon-btn .ic { width: 21px; height: 21px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: blink 1.4s infinite; flex: none; }
@keyframes blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } html { scroll-behavior: auto; } }

/* ── 아래 메뉴 (휴대폰) ── */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255, 255, 255, .98); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px -18px rgba(10, 28, 64, .4); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tab-h); text-decoration: none; color: var(--muted-2); font-size: .74rem; font-weight: 700; position: relative; }
.tabbar a .ic { width: 25px; height: 25px; }
.tabbar a[aria-current] { color: var(--navy); }
.tabbar a[aria-current]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
@media (min-width: 1024px) { .tabbar { display: none; } }

/* ── 단추 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--navy); color: #fff; text-decoration: none; font-weight: 700; border: 1.5px solid var(--navy); cursor: pointer; font-size: .98rem; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-s); }
.btn.ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.btn.gold { background: var(--gold-l); border-color: var(--gold-l); color: var(--navy-2); }
.btn.live { background: var(--live); border-color: var(--live); }
.btn.line-w { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn .ic { width: 20px; height: 20px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.more { display: inline-block; margin-top: 10px; color: var(--gold); font-weight: 700; text-decoration: none; }

/* ── 첫 화면 큰 사진 ── */
.hero { position: relative; color: #fff; background: var(--navy-2); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
/* 첫 화면 배경: 설교 장면 반복 영상 (소리 없음) — 첫 장면 그림이 먼저 보이고, 영상이 돌기 시작하면 부드럽게 바뀜
   휴대폰은 위쪽 400px 에 정사각 영상, 넓은 화면은 전체 · 데이터 절약/움직임 줄이기면 그림만 (app.js) */
.hero-poster, .hero-video { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 400px; object-fit: cover; object-position: center 22%; }
.hero-video { opacity: 0; transition: opacity 1.2s ease; }
.hero-video.on { opacity: 1; }
@media (min-width: 900px) { .hero-poster, .hero-video { height: 100%; bottom: 0; object-position: 70% 30%; } }.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 18, 41, .15) 0, rgba(6, 18, 41, .1) 200px, rgba(6, 18, 41, .85) 330px, var(--navy-2) 420px); }
@media (min-width: 900px) {
  .hero-bg::after { background: linear-gradient(0deg, rgba(6, 18, 41, .6) 0, rgba(6, 18, 41, 0) 38%), linear-gradient(90deg, var(--navy-2) 0%, rgba(6, 18, 41, .9) 32%, rgba(6, 18, 41, .45) 60%, rgba(6, 18, 41, .12) 100%); }
}
.hero-in { position: relative; z-index: 1; padding: 330px 0 44px; }
@media (min-width: 900px) { .hero-in { padding: 110px 0 96px; max-width: 640px; } }
.hero h1 { color: #fff; font-size: 2.05rem; line-height: 1.28; margin: 0 0 14px; font-weight: 800; letter-spacing: -.035em; }
@media (min-width: 900px) { .hero h1 { font-size: 3rem; } }
.hero h1 em { font-style: normal; color: var(--gold-l); }
.hero-lead { margin: 0 0 26px; color: rgba(255, 255, 255, .82); font-size: 1.02rem; }
.hero .kicker { color: var(--gold-l); }
.hero-card { margin-top: 26px; display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); text-decoration: none; color: #fff; max-width: 520px; }
.hero-card .ic { width: 30px; height: 30px; color: var(--gold-l); }
.hero-card small { display: block; font-family: var(--en); font-size: .66rem; letter-spacing: .2em; color: var(--gold-l); font-weight: 700; }
.hero-card b { font-size: 1.08rem; }
.hero-card span.go { margin-left: auto; font-weight: 700; color: var(--gold-l); white-space: nowrap; }
.push-note { margin: 10px 0 0; font-size: .86rem; color: rgba(255, 255, 255, .75); }

/* 생방송 상자 */
.livebox { margin-top: 24px; padding: 14px; border-radius: var(--r); background: rgba(212, 42, 30, .14); border: 1.5px solid rgba(255, 120, 110, .55); max-width: 760px; }
.livebox-h { display: flex; align-items: center; gap: 8px; font-family: var(--en); font-weight: 800; letter-spacing: .12em; color: #ff8a80; font-size: .82rem; margin: 2px 2px 12px; }
.livebox h2 { color: #fff; font-size: 1.15rem; margin: 12px 2px 6px; line-height: 1.4; }
.pg-live .livebox, .pg-sermons .livebox { background: var(--live-soft); border-color: var(--live); }
.pg-live .livebox h2 { color: var(--navy); }
.pg-live .livebox-h, .pg-sermons .livebox-h { color: var(--live); }

/* 영상 */
.player { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 14px; overflow: hidden; }
.player iframe, .player img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.player button.play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .45)); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.player button.play span { width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, .95); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .15s; }
.player button.play:hover span { transform: scale(1.06); }
.player button.play span::after { content: ""; border-left: 22px solid var(--navy); border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 6px; }
.player .player-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px 14px 10px; color: #fff; font-size: .82rem; pointer-events: none; }

/* ── 덩어리 ── */
.sec { padding: 52px 0; }
.sec.soft { background: var(--soft); }
.sec + .sec:not(.soft):not(.navy) { padding-top: 8px; }
@media (min-width: 900px) { .sec { padding: 80px 0; } }
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.sec-h h2 { font-size: 1.55rem; margin: 0; font-weight: 800; line-height: 1.3; }
@media (min-width: 900px) { .sec-h h2 { font-size: 2rem; } }
.sec-h > a { color: var(--gold); font-weight: 700; text-decoration: none; white-space: nowrap; }
.sec-h p.lead { margin: 6px 0 0; color: var(--muted); }
.page-hero { background: linear-gradient(135deg, var(--navy-2), var(--navy-3)); color: #fff; padding: 44px 0 40px; position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(212, 176, 106, .25); box-shadow: 0 0 0 40px rgba(212, 176, 106, .04), 0 0 0 80px rgba(212, 176, 106, .03); }
.page-hero h1 { color: #fff; font-size: 1.9rem; margin: 0 0 8px; line-height: 1.3; position: relative; z-index: 1; }
@media (min-width: 900px) { .page-hero { padding: 64px 0 56px; } .page-hero h1 { font-size: 2.6rem; } }
.page-hero p { margin: 0; color: rgba(255, 255, 255, .78); position: relative; z-index: 1; max-width: 760px; }
.page-hero .kicker { color: var(--gold-l); position: relative; z-index: 1; }
.page-hero.slim { padding: 34px 0 30px; }
.en-num { font-family: var(--en); font-weight: 800; color: var(--gold-l); }
/* 안쪽 화면 제목 — .wrap 안에 있어도 화면 끝까지 네이비 띠 */
html, body { overflow-x: clip; }
.page-h { position: relative; width: 100vw; left: 50%; margin: 0 0 26px -50vw; padding: 40px max(20px, calc((100vw - var(--max)) / 2 + 20px)) 34px;
  background: linear-gradient(135deg, var(--navy-2), var(--navy-3)); color: #fff; overflow: hidden; }
.page-h::before { content: "SEUM CHURCH"; display: block; font-family: var(--en); font-size: .68rem; font-weight: 700; letter-spacing: .22em; color: var(--gold-l); margin-bottom: 10px; }
.page-h::after { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(212, 176, 106, .25); box-shadow: 0 0 0 40px rgba(212, 176, 106, .04); }
.page-h h1 { color: #fff; font-size: 1.9rem; line-height: 1.3; margin: 0 0 8px; }
@media (min-width: 900px) { .page-h { padding-top: 60px; padding-bottom: 52px; } .page-h h1 { font-size: 2.5rem; } }
.page-h p { margin: 0; color: rgba(255, 255, 255, .78); max-width: 760px; }
.box { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-s); }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.note { padding: 14px 18px; border-radius: 14px; background: var(--gold-soft); color: var(--ink); margin: 0; }
.note b { color: var(--gold); }

/* ── 설교 카드 ── */
.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.card { display: flex; gap: 14px; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px; min-width: 0; transition: transform .18s, box-shadow .18s, border-color .18s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.thumb { position: relative; flex: none; width: 42%; max-width: 190px; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: var(--navy-3); color: #fff; }
.thumb[data-svc="pm"] { background: var(--pm); } .thumb[data-svc="wed"] { background: var(--wed); } .thumb[data-svc="fri"] { background: var(--fri); }
.thumb[data-svc="event"] { background: var(--event); } .thumb[data-svc="short"] { background: var(--short); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.thumb-fb { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-weight: 800; font-size: .88rem; padding: 6px; font-family: var(--serif); }
.dur { position: absolute; z-index: 2; right: 6px; bottom: 6px; background: rgba(6, 18, 41, .78); color: #fff; font-size: .7rem; padding: 2px 7px; border-radius: 6px; font-weight: 700; font-family: var(--en); }
.card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; justify-content: center; }
.card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--muted-2); font-family: var(--en); font-weight: 600; }
.card-title { font-weight: 700; font-size: 1.02rem; line-height: 1.45; color: var(--navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-sub { display: flex; gap: 8px; flex-wrap: wrap; font-size: .84rem; color: var(--muted); }
.ref { color: var(--gold); font-weight: 700; text-decoration: none; }
.card-noimg { padding: 16px 18px; }
@media (min-width: 1000px) {
  .grid > .card:not(.card-noimg) { flex-direction: column; padding: 0; overflow: hidden; gap: 0; }
  .grid > .card:not(.card-noimg) .thumb { width: 100%; max-width: none; border-radius: 0; }
  .grid > .card:not(.card-noimg) .card-body { padding: 16px 18px 18px; justify-content: flex-start; }
}
.badge { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: .72rem; padding: 3px 9px; border-radius: 99px; color: #fff; background: var(--am); white-space: nowrap; letter-spacing: 0; }
.b-pm { background: var(--pm); } .b-wed { background: var(--wed); } .b-fri { background: var(--fri); } .b-event { background: var(--event); } .b-short { background: var(--short); }

/* ── 처음 화면 ── */
.feature { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .feature { grid-template-columns: 1.35fr 1fr; gap: 40px; } }
.feature h3 { font-size: 1.5rem; line-height: 1.35; margin: 10px 0 8px; }
@media (min-width: 900px) { .feature h3 { font-size: 2rem; } }
.feature .card-meta { font-size: .86rem; }
.sched { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 900px) { .sched { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.sched a { display: flex; flex-direction: column; padding: 20px 18px; background: #fff; border-radius: var(--r); border: 1px solid var(--line); text-decoration: none; position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s; }
.sched a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sched a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--navy)); }
.sched small { font-family: var(--en); font-size: .64rem; letter-spacing: .2em; font-weight: 700; color: var(--muted-2); }
.sched b { font-family: var(--en); font-size: 2.1rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.15; margin: 6px 0 2px; }
@media (min-width: 900px) { .sched b { font-size: 2.6rem; } }
.sched span { font-weight: 700; color: var(--ink); }
.sched em { font-style: normal; color: var(--muted); font-size: .84rem; margin-top: 4px; }
.word-sec { background: radial-gradient(1200px 400px at 85% -10%, rgba(212, 176, 106, .18), transparent 60%), linear-gradient(135deg, var(--navy-2), var(--navy-3)); color: #fff; }
.word-sec h2 { color: #fff; }
.word-q { font-family: var(--serif); font-size: 1.45rem; line-height: 1.75; margin: 0 0 18px; font-weight: 500; color: #fff; max-width: 900px; }
@media (min-width: 900px) { .word-q { font-size: 2rem; } }
.word-q::before { content: "“"; display: block; font-size: 4rem; line-height: .6; color: var(--gold-l); margin-bottom: 14px; font-family: var(--serif); }
.word-ref { color: var(--gold-l); font-weight: 700; font-size: 1.05rem; margin: 0 0 22px; }
.word-from { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); text-decoration: none; color: #fff; max-width: 620px; margin-bottom: 18px; }
.word-from .ic { width: 28px; height: 28px; color: var(--gold-l); }
.word-from small { display: block; color: var(--gold-l); font-weight: 700; font-size: .8rem; }
.topics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 900px) { .topics { grid-template-columns: repeat(5, 1fr); gap: 14px; } }
.topics a { display: flex; flex-direction: column; justify-content: space-between; min-height: 92px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-decoration: none; font-weight: 700; color: var(--navy); line-height: 1.4; transition: transform .18s, box-shadow .18s; }
.topics a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.topics small { font-family: var(--en); color: var(--gold); font-weight: 700; font-size: .78rem; }
.split { display: grid; gap: 18px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 24px; } }
.promo { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 26px; border-radius: 22px; text-decoration: none; overflow: hidden; min-height: 230px; justify-content: flex-end; color: #fff; background: linear-gradient(135deg, var(--navy-3), var(--navy-2)); }
.promo.gold { background: linear-gradient(135deg, #3a2c12, #6b5122); }
.promo h3 { color: #fff; font-size: 1.5rem; margin: 0; }
.promo p { margin: 0; color: rgba(255, 255, 255, .8); }
.promo .kicker { color: var(--gold-l); }
.promo::after { content: ""; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(212, 176, 106, .3); box-shadow: 0 0 0 30px rgba(212, 176, 106, .05); }
.promo .go { font-weight: 700; color: var(--gold-l); }
.recent-box:empty { display: none; }

/* ── 고르기 칸 ── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 6px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 18px; border-radius: 22px; background: #fff; border: 1.5px solid var(--line); text-decoration: none; font-weight: 600; font-size: .94rem; max-width: 100%; line-height: 1.35; color: var(--ink); }
.chips.scroll .chip { white-space: nowrap; max-width: none; }
.chip small { color: var(--muted-2); font-weight: 600; font-family: var(--en); font-size: .76rem; }
.chip:hover { border-color: var(--navy); }
.chip[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip[aria-current] small { color: rgba(255, 255, 255, .7); }
.filters { display: grid; gap: 10px; margin: 6px 0 14px; }
.search { display: flex; gap: 8px; }
.search input { flex: 1; min-width: 0; min-height: 54px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; padding: 0 22px; font-size: 1rem; }
.search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(10, 28, 64, .08); }
.search .btn { min-width: 54px; padding: 0 18px; }
.hero-search { margin-top: 22px; max-width: 640px; position: relative; z-index: 1; }
.hero-search input { border-color: transparent; }
.selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.selects select { min-height: 50px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; padding: 0 14px; font-size: .95rem; width: 100%; }
.result-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0 14px; color: var(--muted); }
.result-h b { color: var(--navy); font-family: var(--en); }
.pager { display: flex; justify-content: center; gap: 10px; margin: 26px 0 10px; flex-wrap: wrap; align-items: center; }
.clear { color: var(--gold); font-weight: 700; }

/* ── 설교 보기 ── */
.watch { padding-top: 22px; padding-bottom: 40px; }
.watch-grid { display: grid; gap: 26px; }
@media (min-width: 1025px) { .watch-grid { align-items: start; } }
.watch h1 { font-size: 1.55rem; line-height: 1.4; margin: 18px 0 8px; }
@media (min-width: 900px) { .watch h1 { font-size: 2rem; } }
.watch .meta-line { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--muted); }
.watch .orig { font-size: .84rem; color: var(--muted-2); margin: 8px 0 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag { text-decoration: none; padding: 6px 13px; border-radius: 99px; background: var(--soft); color: var(--navy); font-weight: 600; font-size: .86rem; border: 1px solid var(--line); }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.prevnext a { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; text-decoration: none; min-width: 0; }
.prevnext a small { color: var(--muted-2); font-weight: 700; }
.prevnext a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--navy); }
.prevnext .nx { text-align: right; }
aside .sec-h h2 { font-size: 1.25rem; }

/* 받아쓴 글 · 찾기 · AI 요약 */
.hits { display: grid; gap: 14px; }
.hit { padding: 16px 18px; }
.hit-h { display: flex; flex-direction: column; gap: 4px; text-decoration: none; margin-bottom: 6px; }
.hit-h b { font-size: 1.08rem; line-height: 1.4; color: var(--navy); }
.hit-line { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; padding: 11px 10px; margin: 0 -10px; border-top: 1px dashed var(--line); line-height: 1.7; border-radius: 10px; cursor: pointer; }
.hit-line:hover { background: var(--soft); }
.hit-line.on { background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold-l); }
.hit-line .ts i, .tx-play i { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); flex: none; display: inline-grid; place-items: center; }
.hit-line .ts i::after, .tx-play i::after { content: ""; border-left: 7px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; margin-left: 2px; }
.hit-line.on .ts i { background: var(--gold-l); }
.hit-player { margin: 8px 0 10px; }
.hit-more { display: inline-block; margin-top: 8px; font-weight: 700; font-size: .92rem; color: var(--gold); text-decoration: none; }
.ts { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 800; color: var(--gold); font-family: var(--en); font-size: .86rem; min-width: 72px; }
.ts .ic { width: 16px; height: 16px; }
/* 받아쓴 글: 줄마다 ▶ 시간 · 지금 나오는 줄은 금색 띠 + 소리 막대 */
.tx { margin-top: 18px; padding: 0; overflow: hidden; }
.tx-h { padding: 16px 18px 10px; border-bottom: 1px solid var(--line); }
.tx-h h2 { font-size: 1.12rem; margin: 0 0 4px; color: var(--navy); }
.tx-h p { margin: 0; }
.tx-body { max-height: 62vh; overflow: auto; padding: 6px 8px 14px; overscroll-behavior: contain; scroll-behavior: smooth; }
.tx-line { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 7px 10px; border-radius: 12px; line-height: 1.75; transition: background .2s; }
.tx-line + .tx-line { margin-top: 1px; }
.tx-play { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; padding: 3px 4px 3px 0; min-height: 30px; color: var(--gold); font: 800 .84rem/1 var(--en); font-variant-numeric: tabular-nums; }
.tx-play time { min-width: 3.4em; text-align: left; }
.tx-play:hover i { background: var(--gold-l); }
.tx-line.on { background: var(--gold-soft); box-shadow: inset 4px 0 0 var(--gold-l); }
.tx-line.on > span { color: var(--navy); font-weight: 700; }
.tx-line.on .tx-play i { background: var(--gold-l); }
.tx-line.on .tx-play i::after { border: 0; margin: 0; width: 11px; height: 10px; background: linear-gradient(#fff, #fff) 0 100% / 3px 60% no-repeat, linear-gradient(#fff, #fff) 4px 100% / 3px 100% no-repeat, linear-gradient(#fff, #fff) 8px 100% / 3px 45% no-repeat; animation: txbars .9s ease-in-out infinite alternate; }
.tx.paused .tx-line.on .tx-play i::after, .tx-body.paused .tx-line.on .tx-play i::after { animation: none; }
@keyframes txbars { to { background-size: 3px 30%, 3px 55%, 3px 100%; } }
.tx-line.hit { background: var(--soft); }
.tx-line mark { background: #ffe58a; border-radius: 3px; padding: 0 1px; }
@media (prefers-reduced-motion: reduce) { .tx-line.on .tx-play i::after { animation: none; } .tx-body { scroll-behavior: auto; } }
.ai-box { margin-top: 18px; padding: 20px 22px; border-left: 4px solid var(--gold-l); }
.ai-box h2 { font-size: 1.12rem; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-tag { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--gold-soft); color: var(--gold); font-family: var(--sans); }
.ai-box ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; line-height: 1.7; }
.ai-box .q { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--soft); }
.zh-sum { margin-top: 12px; }
.zh-sum summary { cursor: pointer; font-weight: 800; color: var(--navy); }
[lang="zh-Hans"] { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif; }
.zh-cap { margin: 10px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); font-size: 1.1rem; line-height: 1.6; min-height: 3.2em; }
.adm-in { width: 100%; margin-top: 6px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; font-size: 1rem; line-height: 1.5; }


/* ── 성경 ── */
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.books a { display: flex; flex-direction: column; padding: 14px 14px 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.books a:hover { transform: translateY(-2px); box-shadow: var(--shadow-s); }
.books b { color: var(--navy); }
.books small { color: var(--gold); font-weight: 700; font-size: .76rem; }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.ch-grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; border-radius: 14px; border: 1px solid var(--line); background: #fff; text-decoration: none; }
.ch-grid b { font-family: var(--en); font-size: 1.1rem; color: var(--navy); }
.ch-grid small { font-size: .7rem; color: var(--gold); font-weight: 700; }
.ch-grid a.has { border-color: var(--gold-l); background: var(--gold-soft); }
.reader-wrap { padding-top: 22px; padding-bottom: 40px; }
.ch-nav { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 6px 0 18px; }
.reader-grid { display: grid; gap: 26px; }
@media (min-width: 1000px) { .reader-grid { grid-template-columns: 1fr 340px; align-items: start; } .reader-side { position: sticky; top: 92px; } }
.verses { list-style: none; margin: 0; padding: 0; }
.verses li { display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; padding: 14px 0; border-bottom: 1px solid var(--soft-2); scroll-margin-top: 90px; }
.verses li:target { background: var(--gold-soft); border-radius: 12px; padding-left: 8px; padding-right: 8px; }
.vn { font-family: var(--en); font-weight: 800; color: var(--gold); font-size: .86rem; padding-top: 5px; text-align: right; }
.vt { margin: 0; font-family: var(--serif); font-size: 1.15rem; line-height: 1.95; color: #1a2440; }
.vtools { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.vtools a, .vtools button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 5px 12px; font-size: .8rem; font-weight: 600; color: var(--muted); text-decoration: none; cursor: pointer; }
.vtools a:first-child { color: var(--navy); border-color: var(--navy); }
.vtools .ic { width: 15px; height: 15px; }
.found li { grid-template-columns: 1fr; }
.found .vref { font-weight: 800; color: var(--gold); text-decoration: none; font-family: var(--en); font-size: .9rem; }
.found .vtools { grid-column: 1; }
.side-box { padding: 22px; border-radius: var(--r); background: var(--soft); }
.side-box h2 { font-size: 1.2rem; margin: 0 0 14px; }
.mini-list { display: grid; gap: 10px; }
/* 열쇠 낱말 색 */
.kw { text-decoration: none; color: var(--kc); border-bottom: 2px solid color-mix(in srgb, var(--kc) 35%, transparent); font-weight: 600; }
.kw:hover { background: color-mix(in srgb, var(--kc) 10%, transparent); }
.kw-god { --kc: #3b3fb6; } .kw-spirit { --kc: #0b6bcb; } .kw-life { --kc: #1d7a46; } .kw-holy { --kc: #b4471c; }
.kw-fruit { --kc: #b02a5b; } .kw-word { --kc: #8a6a26; } .kw-kingdom { --kc: #6a3fc4; } .kw-dark { --kc: #4b5563; }
.chip.kwc { color: var(--kc); border-color: color-mix(in srgb, var(--kc) 30%, var(--line)); }

/* ── 마인드맵 ── */
.mm { position: relative; display: grid; gap: 18px; margin: 28px 0 10px; }
.mm-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.mm > div { position: relative; z-index: 1; }
.mm-center { order: -1; padding: 26px 24px; border-radius: 22px; background: linear-gradient(135deg, var(--navy-2), var(--navy-3)); color: #fff; box-shadow: var(--shadow); }
.mm-center h2 { color: #fff; margin: 0 0 10px; font-size: 1.35rem; }
.mm-center .kicker { color: var(--gold-l); }
.mm-verse { font-family: var(--serif); font-size: 1.22rem; line-height: 1.9; margin: 0 0 16px; }
.mm-center .kw { color: #ffe3a3; border-bottom-color: rgba(255, 227, 163, .45); }
.mm-center.word { text-align: center; }
.mm-center.word h2 { font-size: 2.4rem; font-family: var(--serif); }
.mm-count { margin: 0 0 16px; color: rgba(255, 255, 255, .8); }
.mm-count b { font-family: var(--en); font-size: 1.6rem; color: var(--gold-l); }
.mm-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: inherit; }
.mm-center.word .mm-tools { justify-content: center; }
.mm-tools a, .mm-tools button { border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 99px; padding: 6px 14px; font-size: .84rem; text-decoration: none; cursor: pointer; font-weight: 600; }
.mm-tools .card-btn { color: var(--gold-l); }
.mm-col { display: grid; gap: 14px; align-content: center; }
.mm-branch { display: grid; gap: 8px; padding-left: 18px; border-left: 2px solid color-mix(in srgb, var(--kc, var(--navy)) 35%, transparent); }
.mm-head { justify-self: start; display: inline-flex; gap: 6px; align-items: baseline; padding: 8px 16px; border-radius: 99px; background: var(--kc, var(--navy)); color: #fff; font-weight: 800; text-decoration: none; }
.mm-head small { font-family: var(--en); font-weight: 600; opacity: .8; font-size: .76rem; }
.b-near { --kc: #5d6a80; } .b-sermon { --kc: var(--gold); }
.mm-leaves { display: grid; gap: 8px; }
.mm-leaf { display: block; padding: 11px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-decoration: none; line-height: 1.55; transition: border-color .15s, box-shadow .15s; }
.mm-leaf:hover { border-color: var(--kc, var(--navy)); box-shadow: var(--shadow-s); }
.mm-leaf b { display: block; font-size: .78rem; color: var(--kc, var(--gold)); font-family: var(--en); }
.mm-leaf span { font-size: .92rem; color: var(--ink); }
@media (min-width: 1000px) {
  .mm { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 54px; align-items: center; }
  .mm-center { order: 0; }
  .mm-col { gap: 22px; }
  .mm-branch { border-left: 0; padding-left: 0; }
  .mm-branch.wide { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 34px; }
  .mm-left .mm-branch.wide { grid-template-columns: minmax(0, 1fr); justify-items: end; }
  .mm-left .mm-head { justify-self: end; }
  .mm-left .mm-leaves { width: 100%; }
}

/* ── 교회 · 생방송 ── */
.info-list { display: grid; gap: 12px; }
.info-list > div { display: flex; gap: 14px; padding: 18px 20px; align-items: flex-start; }
.info-list .ic { width: 26px; height: 26px; color: var(--gold); margin-top: 2px; }
.times { display: grid; margin: 0; padding: 0; list-style: none; }
.times li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.times li:last-child { border: 0; }
.live-strip { position: sticky; top: 70px; z-index: 29; display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--live); color: #fff; text-decoration: none; font-size: .94rem; }
.live-strip span:not(.dot):not(.go) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.live-strip .go { font-weight: 800; white-space: nowrap; }
.push-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.push-box .muted { flex-basis: 100%; margin: 0; }

/* ── 꼬리말 ── */
.foot { margin-top: 0; background: var(--navy-2); color: rgba(255, 255, 255, .7); font-size: .9rem; }
.foot-grid { display: grid; gap: 28px; padding-top: 48px; padding-bottom: 30px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.foot-name { color: #fff; font-size: 1.2rem; font-weight: 800; margin: 0 0 8px; }
.foot p { margin: 0; line-height: 1.8; }
.foot a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.foot-times { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-times li { display: flex; justify-content: space-between; max-width: 260px; }
.foot-times b { font-family: var(--en); color: #fff; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.foot-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 18px; padding-bottom: 24px; font-size: .78rem; color: rgba(255, 255, 255, .5); }

/* ── 작은 창 ── */
.zoom-pop { position: fixed; right: 14px; top: 116px; z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
.zoom-pop p { margin: 0 0 10px; font-weight: 800; color: var(--navy); }
.zoom-row { display: flex; gap: 8px; }
.zoom-row button { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 10px 16px; cursor: pointer; font-weight: 700; }
.zoom-row button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.card-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); cursor: pointer; font: inherit; font-weight: 600; font-size: .8rem; padding: 5px 12px; border-radius: 99px; background: #fff; color: var(--gold); }
.card-btn .ic { width: 15px; height: 15px; }
.card-pop { position: fixed; inset: 0; z-index: 80; background: rgba(6, 18, 41, .72); display: grid; place-items: center; padding: 16px; }
.card-pop-in { background: #fff; border-radius: 22px; padding: 16px; max-width: 420px; width: 100%; max-height: 92vh; overflow: auto; }
.card-pop-in img { width: 100%; border-radius: 12px; margin-bottom: 14px; }

/* ── 성경말씀(헤븐리큐브와 같은 게시판) — 이 사이트에서 더한 것: 절의 '설교' · 장 설교 목록 ── */
#bible-board { padding-top: 18px; }
#bible-board .bb-tools a.bb-sermon { background: #fff4e0; color: #9a5b00; border-color: #f0c98a; font-weight: 800; }
#bible-board .bb-sermons { margin-top: 18px; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 14px 16px; display: grid; gap: 6px; }
#bible-board .bb-sermons h4 { margin: 0 0 4px; font-size: 18px; font-weight: 900; }
#bible-board .bb-sermons h4 small { color: #86868b; font-size: 13px; margin-left: 6px; }
#bible-board .bb-sermons a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #f6f6f9; text-decoration: none; color: #1d1d1f; }
#bible-board .bb-sermons a span { font-size: 13px; color: #6e6e73; font-weight: 700; }
#bible-board .bb-sermons a b { font-size: 16px; }
#bible-board .bb-sermons a.more { background: none; color: #0071e3; font-weight: 800; }

/* ── 설교 화면: 설교 따라가는 마인드맵 (오른쪽 붙는 칸 / 휴대폰은 영상 아래 접는 칸) ── */
.mmf-aside { min-width: 0; }
/* 넓은 화면(1025px~): 이 화면만 전체 폭 — 왼쪽 영상·글(약 38%), 오른쪽 나머지 전부 마인드맵(머리글 아래 높이 꽉, 따라옴) */
@media (min-width: 1025px) {
  .wrap.watch { max-width: none; padding: 20px 28px 48px; }
  .watch-grid { grid-template-columns: clamp(480px, 38vw, 760px) minmax(0, 1fr); gap: 24px; }
  .mmf-aside { position: sticky; top: calc(var(--head-h) + 12px); }
  .mmf-box { padding: 4px; border-radius: 16px; box-shadow: none; }
  .mmf-bar { padding: 4px 8px 6px; }
  .mmf-bar b { display: inline; font-size: .92rem; margin-right: 10px; }
  .mmf-help { display: none; }
  #hnav-app#hnav-app.mm-mini .mm-stage { height: calc(100vh - var(--head-h) - 74px); min-height: 520px; border-radius: 12px; }
}
.mmf-box { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 10px; box-shadow: var(--shadow-s); }
.mmf-bar { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 2px 4px 8px; }
.mmf-bar b { display: block; font-size: 1rem; color: var(--navy); }
.mmf-now { font-size: .86rem; color: var(--gold); font-weight: 700; }
.mmf-resume { border: 0; border-radius: 99px; background: var(--navy); color: #fff; font: 700 .84rem/1 var(--sans); padding: 9px 14px; cursor: pointer; }
.mmf-resume small { font-weight: 500; opacity: .8; margin-left: 4px; }
.mmf-help { margin: 8px 4px 0; font-size: .78rem; color: var(--muted-2); line-height: 1.5; }
.mmf-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: .9rem; }
.mmf-mobile { margin: 12px 0 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.mmf-mobile > summary { list-style: none; cursor: pointer; padding: 13px 16px; display: flex; gap: 10px; align-items: center; justify-content: space-between; font-weight: 800; color: var(--navy); }
.mmf-mobile > summary::-webkit-details-marker { display: none; }
.mmf-mobile > summary::after { content: "열기 ›"; color: var(--gold); font-size: .86rem; }
.mmf-mobile[open] > summary::after { content: "접기"; }
.mmf-mobile .mmf-now { margin-left: auto; }
.mmf-mobile .mmf-box { border: 0; box-shadow: none; padding: 0 8px 10px; }
.mmf-mobile .mmf-box .mmf-bar b, .mmf-mobile .mmf-box .mmf-bar .mmf-now { display: none; }
@media (min-width: 1025px) { .mmf-mobile { display: none; } }
/* 받아쓴 글: 문단 + 소제목, 문장은 이어서 · 문장 앞 작은 ▶ 시간 */
.tx-para { padding: 6px 8px 10px; }
.tx-para + .tx-para { border-top: 1px solid var(--line); }
.tx-sub { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; font-size: 1.04rem; color: var(--navy); font-weight: 800; }
.tx-sub-go { flex: none; border: 0; border-radius: 99px; background: var(--gold-soft); color: var(--gold); font: 800 .78rem/1 var(--sans); padding: 6px 10px; cursor: pointer; font-variant-numeric: tabular-nums; }
.tx-flow { margin: 0; line-height: 2; }
.tx-flow .tx-line { display: inline; padding: 3px 2px; border-radius: 8px; box-shadow: none; }
.tx-flow .tx-line > span { transition: background .2s; }
.tx-flow .tx-play { display: inline-flex; min-height: 0; padding: 0 3px 0 0; gap: 3px; vertical-align: 1px; font-size: .72rem; color: var(--muted-2); font-weight: 700; }
.tx-flow .tx-play i { width: 16px; height: 16px; background: var(--muted-2); }
.tx-flow .tx-play i::after { border-left-width: 5px; border-top-width: 3.5px; border-bottom-width: 3.5px; margin-left: 1px; }
.tx-flow .tx-play time { min-width: 0; }
.tx-flow .tx-line.on { background: var(--gold-soft); box-shadow: 0 0 0 3px var(--gold-soft); }
.tx-flow .tx-line.on .tx-play { color: var(--gold); }
.tx-flow .tx-line.on .tx-play i { background: var(--gold-l); }
.tx-flow .tx-line.on > span { color: var(--navy); font-weight: 700; }
.tx-flow .tx-line.on .tx-play i::after { width: 8px; height: 7px; background-size: 2px 60%, 2px 100%, 2px 45%; background-position: 0 100%, 3px 100%, 6px 100%; }
@keyframes txbars2 { to { background-size: 2px 30%, 2px 55%, 2px 100%; } }
.tx-flow .tx-line.on .tx-play i::after { animation-name: txbars2; }
/* 중요한 단어 */
.kw-w { border: 0; background: none; padding: 0 1px; font: inherit; cursor: pointer; font-weight: 700; border-bottom: 2px solid currentColor; line-height: 1.2; }
.kw-w:hover { background: var(--soft); border-radius: 4px; }
.kw-person, .kw-legend .kw-person { color: #6d28d9; }
.kw-place, .kw-legend .kw-place { color: #0f766e; }
.kw-faith, .kw-legend .kw-faith { color: #b45309; }
.kw-legend span { font-weight: 800; margin-right: 2px; }
/* 함께 들으면 좋은 설교 (맨 아래 작게) */
.rel-small { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.rel-small h2 { font-size: 1rem; margin: 0 0 6px; color: var(--muted); }
.rel-small a { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; text-decoration: none; color: var(--ink); border-bottom: 1px dashed var(--line); font-size: .95rem; }
.rel-small a span { flex: none; color: var(--muted-2); font-size: .8rem; min-width: 9.5em; }
.mmf-mobile > summary { font-size: .95rem; gap: 8px; }
.mmf-mobile .mmf-t { white-space: nowrap; flex: none; }
.mmf-mobile > summary .mmf-now { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .84rem; }
.mmf-mobile > summary::after { white-space: nowrap; flex: none; }

/* ════════════════════════════════════════════════════════════════════
   디자인 시스템 v2 (2026-11-03) — 남색·금색 · Noto Sans KR · 매거진처럼 조용하고 넉넉하게
   글자 6단계: 48 / 36 / 28 / 22 / 17(본문) / 14(보조) · 줄간격 1.75 · 간격 4·8 배수
   섹션 위아래 112px (휴대폰 64px) · 최대 폭 1200 · 모서리 16(카드)·999(단추) · 그림자 2종
   ════════════════════════════════════════════════════════════════════ */
:root {
  --max: 1200px;
  --t1: clamp(32px, 2.2vw + 18px, 48px); --t2: clamp(26px, 1.4vw + 16px, 36px); --t3: clamp(22px, .8vw + 16px, 28px);
  --t4: clamp(19px, .4vw + 16px, 22px); --t5: 17px; --t6: 14px;
  --sp-sec: 112px; --r: 16px; --r-card: 16px;
  --sh-1: 0 1px 2px rgba(10, 28, 64, .05), 0 8px 24px -14px rgba(10, 28, 64, .22);
  --sh-2: 0 2px 4px rgba(10, 28, 64, .04), 0 22px 44px -18px rgba(10, 28, 64, .32);
  --shadow: var(--sh-2); --shadow-s: var(--sh-1);
  --line: #e4e8ef; --soft: #f5f6f9; --muted: #56627a; --muted-2: #7d889c;
}
@media (max-width: 899px) { :root { --sp-sec: 64px; } }
html { font-size: calc(17px * var(--zoom)); }
@media (min-width: 900px) { html { font-size: calc(17px * var(--zoom)); } }
body { line-height: 1.75; color: #16213a; }
h1, h2, h3, h4 { line-height: 1.3; letter-spacing: -.02em; }
.wrap { padding: 0 24px; }
@media (max-width: 599px) { .wrap { padding: 0 16px; } }
.small, .muted.small { font-size: var(--t6); }
.kicker { font-size: 12px; letter-spacing: .2em; margin-bottom: 12px; }

/* 섹션 · 섹션 제목 (라벨 + 제목 + 더보기) */
.sec, .sec-block { padding: var(--sp-sec) 0; }
.sec + .sec:not(.soft):not(.navy) { padding-top: 0; }
.sec-block + .sec-block { padding-top: 0; }
.sec-h, .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 32px; }
.sec-h h2, .sec-head h2 { font-size: var(--t2); margin: 0; font-weight: 800; }
.sec-h > a, .sec-head > a.more, .sec-head > a { margin: 0; color: var(--gold); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; padding: 8px 0; }
.sec-h p.lead { font-size: 15px; }

/* 단추 3종: 주(남색) · 보조(테두리) · 글자 */
.btn { min-height: 48px; padding: 0 24px; font-size: 16px; font-weight: 700; border-width: 1.5px; transition: background .15s, box-shadow .15s, transform .15s; }
.btn:hover { transform: none; box-shadow: var(--sh-1); }
.btn.ghost { background: #fff; border-color: #d6dce6; color: var(--navy); }
.btn.ghost:hover { border-color: var(--navy); }
.btn.text { background: none; border-color: transparent; color: var(--gold); padding: 0 8px; min-height: 44px; }
.btn.text:hover { box-shadow: none; text-decoration: underline; }
.btn-row { gap: 12px; }

/* 설교 카드: 썸네일 16:9 → 배지·날짜 → 제목 → 본문 (모든 화면 같은 순서) */
.grid { gap: 16px; }
@media (min-width: 640px) { .grid { gap: 24px; } }
@media (min-width: 1000px) { .grid { gap: 32px 24px; } }
.card { border-radius: var(--r-card); border-color: var(--line); box-shadow: none; transition: box-shadow .2s, transform .2s, border-color .2s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: transparent; }
.thumb { border-radius: 12px; }
.thumb img { transition: transform .4s; }
.card:hover .thumb img { transform: scale(1.03); }
.card-meta { font-size: 13px; gap: 8px; }
.card-title { font-size: 17px; line-height: 1.5; font-weight: 700; }
.card-sub { font-size: 14px; }
@media (min-width: 640px) {
  .grid > .card:not(.card-noimg) { flex-direction: column; padding: 0; overflow: hidden; gap: 0; }
  .grid > .card:not(.card-noimg) .thumb { width: 100%; max-width: none; border-radius: 0; }
  .grid > .card:not(.card-noimg) .card-body { padding: 16px 20px 20px; justify-content: flex-start; gap: 6px; }
}
.badge { font-size: 12px; padding: 3px 10px; }

/* 칩 · 입력칸 */
.chip { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid #d6dce6; font-size: 15px; font-weight: 600; background: #fff; }
.chip:hover { border-color: var(--navy); background: #fff; }
.search input, .selects select { min-height: 52px; border: 1px solid #d0d7e2; font-size: 16px; }
.box { border-radius: var(--r-card); box-shadow: var(--sh-1); }

/* 안쪽 화면 머리 (남색 띠) — 화면마다 같게 */
.page-h, .page-hero { padding-top: 72px; padding-bottom: 64px; }
.page-h h1, .page-hero h1 { font-size: var(--t1); margin-bottom: 12px; }
.page-h p, .page-hero p { font-size: 17px; color: rgba(255, 255, 255, .8); }
@media (max-width: 899px) { .page-h, .page-hero { padding-top: 48px; padding-bottom: 40px; } }
.page-h { margin-bottom: 0; }
.page-h + * { margin-top: 48px; }

/* 푸터 위 여백 */
main > .wrap:last-child, main > section:last-child { margin-bottom: 0; }
.foot { margin-top: 0; }
main { min-height: 420px; }

/* ── 설교 검색 ── */
.sx-hero { background: radial-gradient(900px 420px at 80% -20%, rgba(212, 176, 106, .16), transparent 60%), linear-gradient(160deg, var(--navy-2), var(--navy-3)); color: #fff; padding: 88px 0 56px; text-align: center; }
.sx-hero .kicker { justify-content: center; }
.sx-hero h1 { color: #fff; font-size: var(--t1); margin: 0 0 12px; }
.sx-lead { margin: 0 auto 32px; color: rgba(255, 255, 255, .78); font-size: 17px; max-width: 560px; }
.sx-form { position: relative; max-width: 720px; margin: 0 auto; }
.sx-form input { width: 100%; height: 64px; border-radius: 999px; border: 0; padding: 0 76px 0 28px; font-size: 17px; background: #fff; color: var(--ink); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5); }
.sx-form input:focus { outline: 3px solid var(--gold-l); outline-offset: 2px; }
.sx-form input::placeholder { color: #8a94a8; }
.sx-form button { position: absolute; right: 8px; top: 8px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; display: grid; place-items: center; cursor: pointer; }
.sx-form button .ic { width: 22px; height: 22px; }
.sx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px auto 0; max-width: 720px; }
.sx-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .88); text-decoration: none; font-size: 15px; font-weight: 600; }
.sx-chips a:hover, .sx-chips a[aria-current] { background: rgba(212, 176, 106, .2); border-color: var(--gold-l); color: #fff; }
.sx-chips.light { justify-content: flex-start; margin: 12px 0 0; }
.sx-chips.light a { background: #fff; border-color: #d6dce6; color: var(--navy); }
@media (max-width: 599px) { .sx-hero { padding: 56px 0 40px; } .sx-form input { height: 56px; padding: 0 64px 0 20px; font-size: 16px; } .sx-form button { width: 44px; height: 44px; top: 6px; right: 6px; } }
.sx-body { padding-bottom: 96px; }
.sx-body > .sec-block:first-child { padding-top: 72px; }
.sx-count { padding: 40px 0 20px; font-size: 17px; color: var(--muted); }
.sx-count b { color: var(--navy); }
.vchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.vchip { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-radius: var(--r-card); border: 1px solid var(--line); background: #fff; text-decoration: none; transition: box-shadow .2s, border-color .2s; }
.vchip:hover { box-shadow: var(--sh-1); border-color: var(--gold-l); }
.vchip b { color: var(--navy); font-size: 17px; }
.vchip small { color: var(--gold); font-weight: 700; font-size: 14px; }
.howto { display: grid; gap: 16px; }
@media (min-width: 800px) { .howto { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.howto a { display: block; padding: 28px; border-radius: var(--r-card); background: var(--soft); text-decoration: none; color: var(--ink); transition: background .2s; }
.howto a:hover { background: #eef1f6; }
.ht-k { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--gold); margin-bottom: 8px; }
.howto b { display: block; font-size: var(--t4); color: var(--navy); margin-bottom: 8px; }
.howto p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.hits { gap: 20px; }
.hit { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.hit-h { flex-direction: row; align-items: center; gap: 16px; margin-bottom: 8px; }
.hit-thumb { flex: none; width: 128px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: var(--navy-3); }
.hit-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hit-title { display: block; font-size: var(--t4); font-weight: 800; color: var(--navy); text-decoration: none; line-height: 1.4; margin-top: 4px; }
.hit-title:hover { text-decoration: underline; }
.hit-line { margin: 0 -12px; padding: 12px; font-size: 16px; }
.hit-text .ctx { color: var(--muted-2); }
.hit-text mark { background: #ffe58a; padding: 1px 3px; border-radius: 4px; font-weight: 700; }
@media (max-width: 599px) { .hit { padding: 16px; } .hit-thumb { width: 96px; } .hit-title { font-size: 17px; } }
.sx-empty { padding: 8px 0 24px; color: var(--muted); }
.sx-sug-h { margin: 16px 0 0; font-weight: 800; color: var(--navy); }
.sx-note { margin: 48px 0 0; color: var(--muted-2); font-size: 14px; }

/* ── 설교 화면 왼쪽: 영상 고정 + 바로 아래 받아쓴 글 (2026-11-03 개편) ── */
:root { --head-h: 72px; }
.wl { min-width: 0; }
.wl-stick { background: #fff; }
.wl-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 2px 12px; }
.wl-title { min-width: 0; }
.wl-title h1 { font-size: 20px; line-height: 1.4; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-title .meta-line { font-size: 14px; gap: 4px 10px; color: var(--muted); }
.wl-title .livebox-h { margin: 0 0 4px; }
.wl-acts { display: flex; gap: 8px; flex: none; }
.cap-strip { margin: 8px 0 0; padding: 10px 16px; border-radius: 12px; background: var(--navy-2); color: #fff; font-size: 17px; line-height: 1.55; font-weight: 600; min-height: 3.3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tx { margin-top: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: none; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.tx-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--line); }
.tx-h h2 { font-size: 16px; margin: 0; color: var(--navy); }
.tx-h h2 small { color: var(--muted-2); font-weight: 600; margin-left: 6px; font-size: 14px; }
.tx-tools { display: flex; align-items: center; gap: 8px; }
.tx-now { border: 0; background: var(--gold-l); color: var(--navy-2); font: 700 14px/1 var(--sans); padding: 0 14px; border-radius: 999px; cursor: pointer; min-height: 36px; }
.tx-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); cursor: pointer; min-height: 40px; padding: 0 4px; }
.tx-switch input { width: 18px; height: 18px; accent-color: var(--navy); }
.tx-i { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font: italic 700 15px/1 Georgia, serif; color: var(--navy); cursor: pointer; }
.tx-i[aria-expanded="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.tx-info { padding: 12px 16px; background: var(--soft); font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line); line-height: 1.65; }
.tx-info p { margin: 0 0 4px; }
.tx-info p:last-child { margin: 0; }
.tx .tx-body { max-height: none; overflow: visible; padding: 4px 6px 20px; }
/* 문장마다의 시간 글자는 숨김 (작은 ▶ 만, 마우스를 올리면 시간) · 문단 소제목 옆 시간은 그대로 */
.tx-flow .tx-play time { display: none; }
.tx-flow .tx-line:hover .tx-play time, .tx-flow .tx-play:focus-visible time { display: inline; }
.tx-flow .tx-play i { width: 14px; height: 14px; opacity: .45; }
.tx-flow .tx-line:hover .tx-play i, .tx-flow .tx-line.on .tx-play i { opacity: 1; }
.watch-more .ai-box:first-child { margin-top: 0; }
@media (min-width: 1025px) {
  .watch { padding-top: 16px; }
  .wl { position: sticky; top: calc(var(--head-h) + 12px); height: calc(100vh - var(--head-h) - 24px); display: flex; flex-direction: column; }
  .wl-stick, .wl-head { flex: none; }
  .tx { flex: 1; }
  .tx .tx-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .mmf-aside { top: calc(var(--head-h) + 12px); }
  #hnav-app#hnav-app.mm-mini .mm-stage { height: calc(100vh - var(--head-h) - 24px - 48px); min-height: 480px; }
  .watch-more { max-width: 920px; padding-top: 64px; }
}
/* 1024 이하 (휴대폰 포함): 영상 칸을 머리말 바로 아래에 붙여 둠 → 스크롤해도 영상 + 자막 + 글을 같이 봄 */
@media (max-width: 1024px) {
  .wl-stick { position: sticky; top: var(--head-h); z-index: 25; margin: 0 -24px; padding: 8px 24px 8px; box-shadow: 0 8px 16px -14px rgba(10, 28, 64, .4); }
  .watch-more { padding-top: 40px; }
}
@media (max-width: 599px) { .wl-stick { margin: 0 -16px; padding: 0 0 8px; } .wl-stick .player { border-radius: 0; } .cap-strip { margin: 8px 16px 0; font-size: 16px; } .wl-title h1 { font-size: 18px; } }
.tx-h { flex-wrap: wrap; row-gap: 4px; }
.tx-h h2, .tx-now, .tx-switch { white-space: nowrap; }
@media (max-width: 599px) { .tx-h { padding: 6px 8px 6px 14px; } .tx-h h2 small { display: none; } .tx-tools { gap: 4px; } .tx-now { padding: 0 12px; } }

/* ════ 디자인 2차 (검토 1회 반영) ════ */
body { overflow-wrap: break-word; word-break: keep-all; }
/* 섹션 리듬: 모든 섹션 위아래 같게 (예전 '앞 섹션 다음은 위 여백 0' 규칙 없앰) */
.sec + .sec:not(.soft):not(.navy) { padding-top: var(--sp-sec); }
.sec.soft + .sec:not(.soft), .sec:not(.soft) + .sec.soft { padding-top: var(--sp-sec); }
/* 안쪽 화면 머리: 화면마다 맞는 영문 라벨 · 글 시작선을 본문과 같게 */
.page-h { padding-left: max(24px, calc((100vw - var(--max)) / 2 + 24px)); padding-right: max(24px, calc((100vw - var(--max)) / 2 + 24px)); }
@media (max-width: 599px) { .page-h { padding-left: 16px; padding-right: 16px; } }
.page-h::before { content: attr(data-kicker); font-size: 12px; letter-spacing: .2em; margin-bottom: 12px; }
.page-h:not([data-kicker])::before { content: "GODBUILT"; }
/* 푸터 */
.foot-grid { padding-top: 72px; padding-bottom: 48px; gap: 40px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 5fr 4fr 3fr; } }
.foot .kicker { margin-bottom: 16px; }
.foot-bottom { padding: 24px 0 40px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: rgba(255, 255, 255, .55); }
.foot-links { gap: 10px 20px; }
.foot-links a { min-height: 32px; display: inline-flex; align-items: center; }
/* 예배 배지 · 예배별 카드 띠: 남색·금색 계열만 */
.badge { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.b-pm { background: #fff; color: var(--navy); }
.b-wed { background: var(--gold); border-color: var(--gold); color: #fff; }
.b-fri { background: #fff; color: #8a6420; border-color: var(--gold); }
.b-event { background: var(--gold-soft); color: #7a5a1c; border-color: var(--gold-soft); }
.b-short { background: var(--soft); color: var(--muted); border-color: var(--line); }
:root { --am: var(--navy); --pm: var(--navy-3); --wed: var(--gold); --fri: #8a6420; --event: var(--gold-l); --short: var(--muted-2); }
/* 썸네일: 유튜브 그림 위아래의 검은 띠를 잘라 냄 */
.thumb img, .hit-thumb img, .player > img { transform: scale(1.08); }
.card:hover .thumb img { transform: scale(1.11); }
@media (max-width: 639px) { .thumb img { object-position: 22% center; } }
/* 휴대폰 머리: 위 남색 띠는 숨김 (머리 높이 줄임) */
@media (max-width: 599px) { .util { display: none; } }
/* 첫 화면: 다음 생방송 카드 안에 알림 받기 */
.hero-card { gap: 16px; padding: 16px 16px 16px 20px; }
.hc-main { display: flex; flex-direction: column; text-decoration: none; color: #fff; min-width: 0; flex: 1; }
.hc-main span { color: rgba(255, 255, 255, .8); font-size: 15px; }
.hc-push { flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); color: #fff; font: 700 15px/1 var(--sans); cursor: pointer; }
.hc-push:hover { background: rgba(255, 255, 255, .14); }
.push-note:empty { display: none; }
/* 첫 화면: 최신 설교 */
@media (min-width: 900px) { .feature { grid-template-columns: 7fr 5fr; gap: 56px; } }
.feature h3 { font-size: var(--t2); margin: 12px 0 8px; }
.feat-meta { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.feat-flow { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--line); }
.feat-flow li a { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 16px; line-height: 1.5; }
.feat-flow li a:hover { color: var(--navy); }
.feat-flow time { flex: none; min-width: 3.4em; color: var(--gold); font-weight: 700; font-size: 14px; padding-top: 1px; font-variant-numeric: tabular-nums; }
.feature .player button.play { background: linear-gradient(rgba(5, 15, 40, .28), rgba(5, 15, 40, .28)); }
/* 예배별 카드 · 주제 카드 */
.sched a::before { background: var(--gold-l); }
.sched em { display: flex; flex-direction: column; line-height: 1.5; }
.topics a { min-height: 112px; padding: 20px; gap: 12px; }
.topics a span { line-height: 1.45; }
.topics small { margin-top: auto; font-size: 14px; }
@media (max-width: 899px) { .topics a:nth-child(n+7) { display: none; } }
/* 첫 화면 맨 아래: 처음 오신 분 */
.visit-band { background: var(--soft); }
.visit-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.visit-in h2 { font-size: var(--t2); margin: 0 0 8px; }
.visit-in p { margin: 0; color: var(--muted); max-width: 560px; }
/* 설교 목록: 걸러 보기 칸 */
.filter-panel { padding-top: 40px; display: grid; gap: 16px; }
@media (max-width: 599px) { .filter-panel { padding-top: 24px; } }
.filters { margin: 0; gap: 16px; }
@media (min-width: 1000px) { .filters { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
.selects { gap: 12px; }
.selects select, .bb-search select { appearance: none; -webkit-appearance: none; padding-right: 40px; border-radius: 999px; color: var(--ink); cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230a1c40' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center; }
.result-h { margin: 32px 0 20px; font-size: 15px; }
/* 시리즈: 설교 많은 12개 + 전체 보기 (휴대폰은 목록) */
.series-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.series-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.4; }
.series-list a:hover { border-color: var(--navy); }
.series-list a[aria-current] { background: var(--navy); color: #fff; border-color: var(--navy); }
.series-list small { flex: none; color: var(--gold); font-weight: 700; }
.series-more { margin-top: 8px; }
.series-more > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--gold); list-style: none; }
.series-more > summary::-webkit-details-marker { display: none; }
.series-more[open] > summary { margin-bottom: 8px; }
/* 휴대폰 설교 목록: 썸네일 크기 고정 · 배지와 날짜 한 줄 */
@media (max-width: 639px) {
  .card { align-items: flex-start; }
  .card .thumb { width: 128px; max-width: none; height: 72px; aspect-ratio: auto; }
  .card .card-meta { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  .card .card-meta > span:not(.badge) { overflow: hidden; text-overflow: ellipsis; }
}
/* 설교 검색 2차 */
.sx-form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(212, 176, 106, .45), 0 18px 40px -18px rgba(0, 0, 0, .5); }
.sx-hero.compact { padding: 40px 0 32px; }
.sx-hero.compact h1, .sx-hero.compact .sx-lead, .sx-hero.compact .kicker { display: none; }
.sx-hero.compact .sx-chips { margin-top: 16px; }
.sx-count { padding: 40px 0 24px; }
.sx-count p { margin: 0; }
.sx-count .sx-note { margin: 4px 0 0; font-size: 14px; }
.hit-text { max-width: 760px; }
.hit-text .ctx { color: #5b6680; }
.hit-thumb { width: 176px; }
.ht-k { font-size: 13px; color: #7a5a1c; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.topic-chips a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--navy); font-weight: 600; font-size: 15px; }
.topic-chips a:hover { border-color: var(--navy); }
@media (max-width: 599px) {
  .vchips { grid-template-columns: 1fr 1fr; gap: 8px; }
  .vchip { padding: 12px 14px; }
  .vchip b { font-size: 16px; }
  .hit-line { flex-direction: column; gap: 4px; }
  .hit-thumb { width: 112px; }
  .sx-hero.compact { padding: 24px 0 20px; }
}
/* 생방송: 상태 카드 (영상 자리 모양 + 다음 방송 + 알림 단추) */
.live-sec { padding-bottom: 0; }
.live-poster { position: relative; display: grid; border-radius: 20px; overflow: hidden; background: var(--navy-2); color: #fff; min-height: 360px; }
.lp-img { position: absolute; inset: 0; }
.lp-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) brightness(.45); transform: scale(1.08); }
.lp-body { position: relative; padding: 48px; max-width: 640px; align-self: end; }
.lp-body h2 { color: #fff; font-size: var(--t2); margin: 0 0 4px; }
.lp-when { font-size: var(--t4); font-weight: 700; color: var(--gold-l); margin: 0 0 12px; }
.lp-note { color: rgba(255, 255, 255, .78); margin: 0 0 24px; font-size: 15px; }
.live-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 18, 41, .92), rgba(6, 18, 41, .3)); pointer-events: none; }
.live-poster .lp-body { z-index: 1; }
@media (max-width: 599px) { .lp-body { padding: 28px 20px; } .live-poster { min-height: 420px; } }
/* 예배 시간 카드 */
.wcards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .wcards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .wcards { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.wcard { display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.wc-name { font-weight: 800; color: var(--navy); font-size: 17px; }
.wc-time { font-size: var(--t3); color: var(--navy); font-weight: 800; letter-spacing: -.02em; }
.wc-live { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.wc-live .ic { width: 16px; height: 16px; color: var(--gold); }
/* 교회 안내 */
.greet { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .greet { grid-template-columns: 6fr 5fr; gap: 64px; } }
.greet-img { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 16/10; background: var(--soft); }
.greet-img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.greet-body h2 { font-size: var(--t2); margin: 0 0 16px; }
.greet-body p { color: var(--muted); margin: 0 0 28px; }
.info-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .info-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.info-card { display: flex; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.info-card b { font-size: 17px; color: var(--navy); }
.info-card p { margin: 4px 0 16px; color: var(--muted); }
.info-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; }
.info-ic .ic { width: 22px; height: 22px; }
.info-card .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.guide { display: grid; gap: 16px; }
@media (min-width: 700px) { .guide { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .guide { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.guide > * { display: block; padding: 24px; border-radius: var(--r-card); background: var(--soft); text-decoration: none; color: var(--ink); }
.guide > a:hover { background: #eef1f6; }
.guide b { display: block; color: var(--navy); font-size: 18px; margin-bottom: 6px; }
.guide p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.m-br { display: none; }
@media (max-width: 599px) { .m-br { display: inline; } }

/* ════ 디자인 3차 (검토 2회 반영) ════ */
/* 섹션 리듬: 같은 바탕이 이어지면 사이는 한 번만 (112/64), 바탕이 바뀌면 위아래 모두 */
.sec + .sec:not(.soft):not(.navy) { padding-top: var(--sp-sec); }
.sec:not(.soft):not(.word-sec):not(.visit-band):not(.recent-box) + .sec:not(.soft):not(.word-sec):not(.visit-band) { padding-top: 0; }
.recent-box:empty + .sec { padding-top: var(--sp-sec); }
.page-h + .sec { padding-top: 72px; }
.page-h + * { margin-top: 0; }
@media (max-width: 599px) { .page-h + .sec { padding-top: 48px; } }
.wrap > .sec:last-child { padding-bottom: var(--sp-sec); }
/* 썸네일: 자르지 않음 (채널 그림의 글씨가 잘리지 않게) · 작은 카드에서는 길이 표시 숨김 */
.thumb img, .hit-thumb img, .player > img { transform: none !important; }
@media (max-width: 639px) { .thumb img { object-position: center; } .card .dur { display: none; } }
/* 대비 · 줄바꿈 */
:root { --muted-2: #66718a; }
.hit-text .ctx, .hit-text { color: #3d475c; }
.howto p, .guide p, .info-card p { color: #4a5468; }
.foot-bottom { color: rgba(255, 255, 255, .7); }
h1, h2, h3, .page-h p, .sx-lead, .hero-lead, .lp-note, .greet-body p { text-wrap: balance; }
.nw { white-space: nowrap; }
a.badge, .meta-line a.badge { text-decoration: none; }
/* 오늘의 말씀 띠: 가운데로 모음 */
.word-sec .wrap { max-width: 900px; text-align: center; }
.word-sec .kicker { justify-content: center; }
.word-q { margin-left: auto; margin-right: auto; }
.word-q::before { margin: 24px auto 16px; }
.word-from { margin-left: auto; margin-right: auto; text-align: left; }
.word-sec .btn-row { justify-content: center; }
@media (max-width: 599px) { .word-sec .btn-row { display: grid; grid-template-columns: 1fr 1fr; } .word-sec .btn-row > :first-child { grid-column: 1 / -1; } }
/* 첫 화면 기능 카드의 장식 원이 글씨를 지나지 않게 */
.promo::after { right: -120px; top: -120px; opacity: .5; }
/* 휴대폰 첫 화면: 다음 생방송 카드는 단추를 아래로 */
@media (max-width: 599px) { .hero-card { flex-wrap: wrap; } .hc-push { width: 100%; } }
/* 주제 카드 높이 고정 */
.topics a { min-height: 120px; }
/* 푸터 메뉴 2열 */
.foot-links { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 24px; }
/* 설교 목록 쪽 넘기기 */
.pager { gap: 6px; margin: 48px 0 0; }
.pg-num, .pg-step { min-width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--navy); font-weight: 700; font-size: 15px; padding: 0 12px; }
.pg-num[aria-current] { background: var(--navy); color: #fff; border-color: var(--navy); }
.pg-step.off { opacity: .35; }
.pg-step .ic { width: 18px; height: 18px; }
.pg-gap { color: var(--muted-2); padding: 0 4px; }
.filter-panel .chips.scroll { margin: 0; padding: 2px 0 6px; }
/* 설교 화면 */
.wl-title h1 { font-size: 22px; }
.tx-flow .tx-play { vertical-align: -2px; }
.mmf-box { border: 0; padding: 0; background: none; }
#hnav-app#hnav-app.mm-mini .mm-stage { border: 1px solid var(--line); }
@media (max-width: 1024px) { .mmf-mobile { margin: 12px 0 16px; } }
@media (max-width: 599px) { .wl-stick { box-shadow: none; } }
/* 검색 */
.sx-chips { justify-content: center; }
@media (max-width: 599px) {
  .sx-hero .sx-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .sx-hero .sx-chips a { flex: none; }
  .vchips .vchip:nth-child(n+7) { display: none; }
  .hit-thumb { display: none; }
}
.topic-chips { justify-content: flex-start; }
.hit-line { border-top: 1px solid #eef0f4; }
.hit-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1000px) { .hit-text { max-width: 880px; } }
/* 생방송 · 교회 안내 */
.wc-time { font-size: 32px; line-height: 1.1; }
.wc-day { color: var(--muted); font-size: 14px; }
.greet-body p.kicker { color: var(--gold); margin-bottom: 12px; }
.greet-img img { object-position: 64% 30%; }
@media (max-width: 599px) { .greet-img { aspect-ratio: 4 / 3; } .live-poster::after { background: rgba(6, 18, 41, .88); } .lp-body .btn { width: 100%; } }
.page-h[data-kicker="HOLY BIBLE"] { padding-top: 48px; padding-bottom: 40px; }

/* ════ 디자인 4차 (검토 3회 반영) ════ */
/* 머리말: 설교 화면·마인드맵은 본문처럼 화면 전체 폭 */
body.wide .top-in, body.wide .util-in { max-width: none; padding-left: 28px; padding-right: 28px; }
/* 예배 배지: 한 가지 모양(옅은 바탕) · 색만 다르게 */
.badge, .b-pm, .b-wed, .b-fri, .b-event, .b-short { border: 0; font-weight: 700; }
.badge { background: #e7ebf3; color: var(--navy); }
.b-pm { background: #e3eef0; color: #1f5257; }
.b-wed { background: #f4ecdb; color: #7a5a1c; }
.b-fri { background: #efe7f3; color: #4f2f66; }
.b-event { background: #f6efe1; color: #7a5a1c; }
.b-short { background: #eef0f4; color: #56627a; }
/* 굵은 글씨 줄이기: 보조 글은 보통 굵기 · 옅은 색 */
.card-meta { font-weight: 500; }
.sched em, .sched em span { font-weight: 400; color: var(--muted); }
.sched small { font-weight: 600; }
.bb-legend, .lp-note, .sx-note, .tx-info { font-weight: 400; }
/* 예배 카드: 왼쪽 띠 대신 위쪽 작은 금색 점 */
.sched a::before { content: none; }
.sched small::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-l); margin-right: 8px; vertical-align: 2px; }
.sched a { padding: 24px 22px; }
.sec-h > a { align-self: center; }
/* 첫 화면 주제: 낮은 카드 · 수는 오른쪽 */
.topics a { flex-direction: row; align-items: center; justify-content: space-between; min-height: 72px; padding: 16px 20px; }
.topics small { margin-top: 0; flex: none; }
/* 휴대폰 최신 설교: 제목이 먼저 */
@media (max-width: 899px) { .feature > div:last-child { order: -1; } }
/* 옆으로 넘기는 칩 줄: 오른쪽 끝을 흐리게 (더 있다는 표시) */
@media (max-width: 899px) { .chips.scroll, .sx-hero .sx-chips { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 32px; } }
/* 설교 목록: 주제·시리즈는 옅은 바탕 띠 · 간격 통일 */
.pg-sermons #topics, .pg-sermons #topics + .sec { background: var(--soft); box-shadow: 0 0 0 100vmax var(--soft); clip-path: inset(0 -100vmax); }
.pg-sermons #topics { margin-top: var(--sp-sec); }
.series-list { gap: 16px; }
.series-more > summary { margin-top: 8px; }
@media (max-width: 639px) { .card { align-items: center; } }
/* 검색 */
.sx-body > .sec-block:last-child { padding-bottom: 0; }
.vchips { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.vchip { flex-direction: row; justify-content: space-between; align-items: center; padding: 14px 18px; }
.sx-chips a[aria-current] { background: var(--gold-l); border-color: var(--gold-l); color: var(--navy-2); }
.hit-text mark { padding: 0; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hit-line { margin: 0; padding: 12px 0; }
.hit-text { max-width: none !important; }
.howto p { color: #3d475c; }
/* 설교 화면 */
.wl-head { align-items: center; }
/* 생방송: 섹션 간격 · 사진은 글 쪽만 어둡게 */
.live-sec { padding-bottom: var(--sp-sec); }
.lp-img img { filter: brightness(.82) saturate(.95); object-position: 70% 30%; }
.live-poster::after { background: linear-gradient(90deg, rgba(6, 18, 41, .94) 0%, rgba(6, 18, 41, .78) 42%, rgba(6, 18, 41, .1) 75%); }
/* 교회 안내 */
.info-card > div { display: flex; flex-direction: column; flex: 1; }
.info-card .btn-row { margin-top: auto; }
.greet-body p { max-width: none; }

/* ════ 디자인 5차 (검토 4회 반영) ════ */
/* 안쪽 화면 머리 띠: 낮게 · 잘린 장식 원 없앰 */
.page-h, .page-hero { padding-top: 56px; padding-bottom: 48px; }
.page-h::after, .page-hero::after, .sx-hero::after { content: none; }
@media (max-width: 899px) { .page-h, .page-hero { padding-top: 40px; padding-bottom: 32px; } }
.pg-live .page-h { padding-bottom: 40px; }
/* 첫 화면 큰 영상: 글 쪽으로 더 어둡게 (사진의 부드러움이 질감처럼 보이게) */
@media (min-width: 900px) { .hero-poster, .hero-video { filter: brightness(.82) saturate(.92); } }
/* 재생 단추: 작게, 왼쪽 아래 (채널 그림의 제목을 가리지 않게) */
.player button.play { place-items: end start; padding: 20px; background: linear-gradient(rgba(5, 15, 40, 0) 50%, rgba(5, 15, 40, .45)); }
.player button.play span { width: 64px; height: 64px; }
.player button.play span::after { border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; margin-left: 5px; }
.feature .player button.play { background: linear-gradient(rgba(5, 15, 40, 0) 50%, rgba(5, 15, 40, .45)); }
/* 최신 설교: 두 칸 위를 맞춤 · 휴대폰은 영상 먼저 */
.feature { align-items: start; }
@media (max-width: 899px) { .feature > div:last-child { order: 0; } }
.feature h3 { margin-top: 0; }
/* 주제 카드: 같은 폭 · 두 줄 이름 (점에서 끊기지 않음) · 수는 오른쪽 */
@media (min-width: 900px) { .topics { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tp-l { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.tp-l b { font-weight: 700; color: var(--navy); }
.tp-l em { font-style: normal; font-weight: 500; font-size: 14px; color: var(--muted); margin-top: 2px; }
.topics a { gap: 12px; }
.topics a[aria-current] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
/* 설교 목록: 시리즈 더 보기는 단추 · 휴대폰 시리즈는 2열 */
.series-more > summary { display: inline-flex; min-height: 44px; padding: 0 20px; border: 1px solid #d6dce6; border-radius: 999px; color: var(--navy); font-size: 15px; margin-top: 16px; }
@media (max-width: 639px) { .series-list { grid-template-columns: 1fr 1fr; gap: 8px; } .series-list a { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; font-size: 14px; } }
/* 설교 화면: 지도 칸은 카드 하나 (머리 + 도구 줄 + 지도) */
@media (min-width: 1025px) {
  .mmf-box { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; padding: 0; }
  .mmf-bar { padding: 10px 16px; border-bottom: 1px solid var(--line); }
  #hnav-app#hnav-app.mm-mini .mm-stage { border: 0; border-radius: 0; height: calc(100vh - var(--head-h) - 24px - 50px); }
}
.tx-flow .tx-play { vertical-align: -0.15em; margin-right: 2px; }
.tx-flow .tx-play i { opacity: .6; }
/* 설교 화면 제목 줄: 제목 + 단추 / 그 아래 정보 한 줄 */
.wl-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.wl-title { display: contents; }
.wl-title h1 { grid-column: 1; grid-row: 1; margin: 0; }
.wl-title .meta-line { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
.wl-title .livebox-h { grid-column: 1 / -1; }
.wl-acts { grid-column: 2; grid-row: 1; }
/* 검색 */
.vchip { flex-direction: column; align-items: flex-start; gap: 2px; }
.vchip small { color: var(--muted); font-weight: 500; }
.ht-go { display: inline-block; margin-top: 12px; color: var(--gold); font-weight: 700; font-size: 14px; }
.sx-res-h { margin: 48px 0 0; }
.sx-count { padding-top: 12px; }
.h-sm { font-size: var(--t3) !important; }
.hit-text { -webkit-line-clamp: 3; }
/* 생방송: 휴대폰은 사진 위 · 글 아래 */
@media (max-width: 599px) {
  .live-poster { display: block; min-height: 0; }
  .lp-img { position: relative; height: 200px; }
  .live-poster::after { content: none; }
  .lp-body { padding: 24px 20px 28px; }
}
.lp-img img { object-position: 62% 18%; }
/* 교회 안내 */
.greet-img img { object-position: 64% 12%; }
.g-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--gold); margin-bottom: 12px; }
.g-ic .ic { width: 20px; height: 20px; }
.m-only { display: none; }
@media (max-width: 699px) { .m-only { display: inline; } }

/* ════ 디자인 6차 (검토 5회 반영) ════ */
/* 섹션 제목: 오른쪽 링크는 늘 제목 줄 아래선에 */
.sec-h, .sec-head { align-items: flex-end; }
.sec-h > a, .sec-head > a, .sec-head > a.more { align-self: flex-end; padding: 0 0 6px; }
/* 안쪽 머리 라벨: 섹션 라벨처럼 금색 줄 */
.page-h::before { display: inline-block; padding-left: 32px; background: linear-gradient(var(--gold-l), var(--gold-l)) left center / 22px 2px no-repeat; }
.visit-in p.kicker { color: var(--gold); }
/* 주제 카드: 부제 줄을 늘 두어 높이를 맞춤 · 휴대폰은 수를 아래로 */
.tp-l em { min-height: 1.35em; }
@media (max-width: 639px) { .topics a { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; } .topics { gap: 8px; } }
/* 푸터 예배 시간 */
.foot-times li { max-width: 300px; gap: 16px; }
/* 휴대폰 아래 메뉴: 뒤 글이 비치지 않게 */
.tabbar { background: #fff; }
/* 설교 목록: 휴대폰은 '필터' 를 눌러야 고르기 칸 · 넓은 화면은 늘 펼침 */
.filters-more > summary { display: none; }
@media (max-width: 999px) {
  .filters-more > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid #d6dce6; border-radius: 999px; font-weight: 700; color: var(--navy); cursor: pointer; list-style: none; }
  .filters-more > summary::-webkit-details-marker { display: none; }
  .filters-more[open] > summary { margin-bottom: 12px; }
}
@media (min-width: 1000px) { .filters-more:not([open]) > .selects { display: grid; } }
@media (max-width: 639px) { .series-list { grid-template-columns: 1fr; gap: 8px; } .series-list a { flex-direction: row; align-items: center; } }
/* 설교 화면 */
.tx-flow .tx-play { vertical-align: middle; }
.tx-flow .tx-play i { width: 12px; height: 12px; opacity: .4; }
.tx-switch input { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; border-radius: 999px; background: #d6dce6; position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.tx-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.tx-switch input:checked { background: var(--navy); }
.tx-switch input:checked::after { transform: translateX(16px); }
/* 검색 */
.pg-search .sec-block { padding: 96px 0; }
.pg-search .sx-body > .sec-block:first-child { padding-top: 72px; }
.sx-chips a { border-color: rgba(255, 255, 255, .3); color: #fff; }
@media (max-width: 599px) { .vchips { grid-template-columns: 1fr 1fr; } .vchips .vchip:nth-child(n+7) { display: none; } }
.sx-res-h { margin: 56px 0 0; }
.sx-count { padding: 8px 0 32px; }
.sx-count .sx-note { margin-top: 8px; }
.hit-text { max-width: 760px !important; -webkit-line-clamp: 2; }
.thumb img[src*="ytimg"], .hit-thumb img[src*="ytimg"] { transform: scale(1.1) !important; }
/* 생방송 · 교회 안내 사진 */
.lp-img img { object-position: 66% 28%; }
.greet-img img { object-position: 62% 26%; transform: scale(1.12); transform-origin: 62% 30%; }
@media (max-width: 599px) { .guide { gap: 8px; } .guide > * { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; padding: 16px; } .guide > * .g-ic { grid-row: span 2; margin: 0; } .guide b { margin: 0; font-size: 17px; } }

/* ════ 디자인 7차 (검토 6회 반영) ════ */
/* 안쪽 머리 띠: 낮고 은은한 결 (빈 남색 판이 아니게) */
.page-h { padding-top: 44px !important; padding-bottom: 40px !important; background: radial-gradient(700px 260px at 88% 0%, rgba(212, 176, 106, .16), transparent 70%), linear-gradient(135deg, var(--navy-2), var(--navy-3)); }
.page-h h1 { margin-bottom: 8px; }
@media (max-width: 899px) { .page-h { padding-top: 32px !important; padding-bottom: 28px !important; } }
/* 카드: 길이는 정보 줄에 (그림의 글씨를 가리지 않게) */
.c-dur::before { content: "·"; margin-right: 8px; color: var(--muted-2); }
.grid { row-gap: 32px; column-gap: 24px; }
/* 주제 카드: 모두 같은 높이 · 제목·부제 위 왼쪽, 수는 아래 왼쪽 */
.topics a { flex-direction: column !important; align-items: flex-start !important; justify-content: space-between !important; min-height: 108px; height: 100%; gap: 10px; }
.topics a .tp-l b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* 받아쓴 글 속 단어: 밑줄 없이 색만 */
.kw-w { border-bottom: 0; font-weight: 600; }
/* 푸터: 시간은 칸 끝에 맞춤 · 메뉴는 세로 두 줄 · 아래 글 더 또렷하게 */
.foot-times li { max-width: none; }
.foot-links { grid-template-columns: repeat(2, max-content); gap: 4px 32px; }
.foot-bottom { color: rgba(255, 255, 255, .8); font-size: 14px; }
/* 검색 */
.sx-q { margin: 0 0 4px; color: #fff; font-weight: 800; font-size: 20px; }
.sx-hero:not(.compact) .sx-q { display: none; }
@media (max-width: 599px) { .pg-search .sec-block { padding: 64px 0; } .pg-search .sx-body > .sec-block:first-child { padding-top: 48px; } }
.pg-search .howto-band { background: var(--soft); box-shadow: 0 0 0 100vmax var(--soft); clip-path: inset(0 -100vmax); }
.topic-chips { justify-content: flex-start; }
.hit-text { max-width: none !important; }
/* 생방송: 머리 띠를 얇게 (아래 생방송 카드가 머리 역할) */
.pg-live .page-h { padding-top: 28px !important; padding-bottom: 24px !important; }
.pg-live .page-h p { display: none; }
.pg-search .sx-body > .howto-band:last-child { padding-bottom: 96px; }
.pg-search .sx-body:has(> .howto-band:last-child) { padding-bottom: 0; }
@media (max-width: 639px) { .card .c-dur { display: none; } .card .card-meta { flex-wrap: wrap; white-space: normal; overflow: visible; } .card .card-meta > span:not(.badge) { overflow: visible; text-overflow: clip; } }

/* ══ 디자인 8차 — 로고 SVG · 글씨 대비 4.5:1 · 쪽 머리 높이 하나로 · 찾는 법 카드 ══ */
:root { --muted-2: #626e85; --gold: #8c6a2a; }
/* 로고: 원본 그림을 다시 그린 SVG (머리말 남색 · 바닥글 흰색) */
.brand-logo { height: 52px; width: auto; display: block; color: #090027; }
@media (max-width: 599px) { .brand-logo { height: 44px; } }
.foot-logo { display: block; height: 72px; width: auto; color: #fff; margin: 0 0 20px; }
.foot-name.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* 쪽 머리: 모든 쪽 같은 높이 (라벨 · 제목 · 한 줄 설명) */
.page-h { min-height: 216px; display: flex; flex-direction: column; justify-content: center; padding-top: 40px !important; padding-bottom: 40px !important; }
.pg-live .page-h { padding-top: 40px !important; padding-bottom: 40px !important; }
.pg-live .page-h p { display: block; }
.page-h p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.page-h[data-kicker="HOLY BIBLE"] { padding-top: 40px !important; padding-bottom: 40px !important; }
@media (max-width: 899px) { .page-h { min-height: 156px; padding-top: 28px !important; padding-bottom: 28px !important; } .pg-live .page-h, .page-h[data-kicker="HOLY BIBLE"] { padding-top: 28px !important; padding-bottom: 28px !important; } .page-h p { font-size: 15px; } }
/* 찾는 법: 회색 띠 위 흰 카드 */
.pg-search .howto a { background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(10, 28, 64, .05), 0 8px 24px -16px rgba(10, 28, 64, .18); }
.pg-search .howto a:hover { background: #fff; border-color: #cfd6e3; transform: translateY(-2px); }
.howto a { transition: transform .18s, border-color .18s; }
.ht-k { color: var(--gold); }
/* 작은 회색 글씨: 연한 바탕에서도 4.5:1 */
.card-meta, .sched small, .chip small, .prevnext a small, .mmf-help, .watch .orig { color: var(--muted-2); }
.sched em, .card-sub, .result-h, .vtools a, .vtools button { color: var(--muted); }
/* 사진: 선명한 장면 + 같은 처리(듀오톤·그레인, tools/make_photos.py) · 늘리지 않음 · 작게 씀 */
@media (min-width: 900px) { .greet { grid-template-columns: 4fr 7fr; gap: 72px; } }
.greet-img { aspect-ratio: 4 / 5; max-width: 420px; box-shadow: var(--shadow-s); }
.greet-img img { object-position: 50% 30%; transform: none; }
@media (max-width: 899px) { .greet-img { aspect-ratio: 4 / 3; max-width: none; } .greet-img img { object-position: 50% 22%; } }
.lp-img img { transform: none; filter: none; object-position: 50% 30%; }
/* ══ 디자인 9차 (검토자 2명이 같이 짚은 것) ══ */
/* 머리말은 모든 쪽 같은 폭 (설교 보기·지도도 본문만 넓게) */
body.wide .top-in, body.wide .util-in { max-width: var(--max); padding-left: 24px; padding-right: 24px; }
@media (max-width: 599px) { body.wide .top-in, body.wide .util-in { padding-left: 16px; padding-right: 16px; } }
/* 설교 보기(넓은 화면 · 오른쪽 지도까지 다 열림)만은 머리말도 본문과 같은 전체 폭 — 왼쪽 끝이 어긋나지 않게 */
body.wide.pg-sermons .top-in, body.wide.pg-sermons .util-in { max-width: none; padding-left: 28px; padding-right: 28px; }
@media (max-width: 599px) { body.wide.pg-sermons .top-in, body.wide.pg-sermons .util-in { padding-left: 16px; padding-right: 16px; } }
/* 첫 화면 영상: 영상 속 얼굴 자리(가로 2/3·세로 1/3, 휴대폰은 가운데·1/3)와 같은 점을 기준으로 잘라서 화면 비율이 바뀌어도 그 자리에 (tools/make_hero_video.py) */
.hero-poster, .hero-video { object-position: 50% 33%; }
@media (min-width: 900px) { .hero-poster, .hero-video { object-position: 66% 33%; } }
/* ══ 휴대폰 아래 메뉴 '더보기' ══ */
.tabbar .tab-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tab-h); background: none; border: 0; font: inherit; color: var(--muted-2); font-size: .74rem; font-weight: 700; cursor: pointer; position: relative; }
.tabbar .tab-more[aria-current], .tabbar .tab-more[aria-expanded="true"] { color: var(--navy); }
.more-pop { position: fixed; right: 12px; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px); z-index: 45; width: min(300px, calc(100vw - 24px)); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 8px; display: grid; gap: 2px; }
.more-pop[hidden] { display: none; }
.more-pop > a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 700; }
.more-pop > a[aria-current] { background: var(--gold-soft); color: var(--navy); }
.more-pop .more-lang { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 2px; padding: 10px 8px 4px; border-top: 1px solid var(--line); }
.more-pop .more-lang .ic { color: var(--muted); margin-right: 2px; }
.more-pop .more-lang a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; }
.more-pop .more-lang a[aria-current] { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (min-width: 900px) { .more-pop { display: none !important; } }
/* ══ 말씀지도: 위 고르기 띠 + 아래 전체 폭 지도 ══ */
.mapq { background: #fff; border-bottom: 1px solid var(--line); padding: 14px 24px 12px; }
.mapq-in { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; max-width: none; }
.mapq-pick, .mapq-find { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.mapq select { min-height: 44px; border: 1.5px solid var(--line); border-radius: 999px; padding: 0 36px 0 16px; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); background: #fff; }
.mapq-pick .btn { min-height: 44px; }
.mapq-find { position: relative; flex: 0 1 380px; }
.mapq-find input { width: 100%; min-height: 44px; border: 1.5px solid var(--line); border-radius: 999px; padding: 0 52px 0 18px; font-size: 16px; }
.mapq-find button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; display: grid; place-items: center; cursor: pointer; }
.mapq-today { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.mapq-today span { color: var(--gold); font-weight: 800; margin-right: 6px; }
@media (max-width: 899px) { .mapq { padding: 12px 16px; } .mapq-in { flex-direction: column; align-items: stretch; } .mapq-pick select { flex: 1 1 0; min-width: 0; padding: 0 28px 0 12px; } .mapq-pick select:first-child { flex: 1 1 100%; } .mapq-pick .btn { flex: 1 1 100%; justify-content: center; } .mapq-find { flex: 1 1 auto; } }
/* ══ 언어 · 로그인 (머리말 오른쪽) ══ */
.top-tools { gap: 8px; }
.icon-btn.wide { width: auto; padding: 0 14px; gap: 6px; display: inline-flex; align-items: center; font-weight: 700; font-size: 14px; white-space: nowrap; }
.icon-btn.wide span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.pick { position: relative; }
.pick > summary { list-style: none; cursor: pointer; }
.pick > summary::-webkit-details-marker { display: none; }
.pick-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 8px; z-index: 60; display: grid; gap: 2px; }
.pick-pop a, .pick-pop button { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; text-decoration: none; color: var(--ink); font: inherit; font-weight: 600; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
.pick-pop a:hover, .pick-pop button:hover { background: var(--soft); }
.pick-pop a[aria-current] { color: var(--navy); font-weight: 800; background: var(--gold-soft); }
@media (max-width: 899px) { .icon-btn.wide { width: 44px; padding: 0; justify-content: center; } .icon-btn.wide span { display: none; } .top-tools { gap: 6px; } }
@media (max-width: 380px) { .top-tools .icon-btn { width: 40px; height: 40px; } }
/* 로그인 · 가입 */
.auth { display: grid; place-items: center; padding: 64px 0 96px; }
.auth-card { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 40px 36px; box-shadow: var(--shadow-s); }
.auth-card h1 { font-size: var(--t2, 32px); margin: 0 0 12px; color: var(--navy); }
.auth-lead { color: var(--muted); margin: 0 0 24px; font-size: 16px; }
.auth-err { background: #fdecea; color: #a1261b; border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; font-weight: 600; }
.auth-form { display: grid; gap: 16px; }
.fld { display: grid; gap: 6px; }
.fld > span { font-weight: 700; font-size: 15px; color: var(--ink); }
.fld small { font-weight: 500; color: var(--muted); margin-left: 6px; }
.fld input { min-height: 52px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 16px; font-size: 16px; background: #fff; }
.fld input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(10, 28, 64, .12); }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--muted); line-height: 1.6; }
.agree input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--navy); }
.auth-go { width: 100%; min-height: 52px; justify-content: center; font-size: 16px; }
.btn.kakao { width: 100%; min-height: 52px; justify-content: center; margin-top: 12px; background: #fee500; color: #191600; border-color: #fee500; }
.btn.kakao span { font-size: 10px; }
.auth-alt { margin: 24px 0 0; text-align: center; color: var(--muted); }
.auth-alt a { color: var(--navy); font-weight: 800; }
.auth-fine { margin: 12px 0 0; text-align: center; font-size: 14px; }
.auth-fine a { color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 599px) { .auth { padding: 32px 0 72px; } .auth-card { padding: 28px 20px; border: 0; box-shadow: none; } }
.prose { max-width: 760px; }
.prose h2 { font-size: 20px; margin: 32px 0 8px; color: var(--navy); }
.prose p { color: #3d475c; margin: 0 0 12px; }
/* 내 메뉴 */
.me-list { display: grid; gap: 8px; }
.me-row { display: grid; gap: 10px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-decoration: none; color: var(--ink); }
.me-row:hover { border-color: #cfd6e3; }
.me-t { display: grid; gap: 4px; }
.me-t b { font-size: 17px; color: var(--navy); }
.me-t small { color: var(--muted); font-size: 15px; }
.me-bar { height: 4px; border-radius: 999px; background: var(--soft-2); overflow: hidden; }
.me-bar i { display: block; height: 100%; background: var(--gold-l); }
.me-empty { color: var(--muted); background: var(--soft); border-radius: 16px; padding: 20px 24px; margin: 0; }
.me-account form.inline { display: inline; }
.me-del { margin-top: 24px; }
.me-del summary { cursor: pointer; color: var(--muted); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.me-del form { margin-top: 12px; padding: 20px; border: 1px solid #f3c4bf; border-radius: 16px; background: #fff8f7; display: grid; gap: 12px; justify-items: start; }
.btn.danger { background: #b42318; border-color: #b42318; color: #fff; }
/* 설교 화면: 즐겨찾기 · 이어 듣기 */
.fav-btn[aria-pressed="true"] { color: #b7791f; border-color: #e6d3a8; background: #fbf6ea; }
.fav-btn[aria-pressed="true"] .ic path { fill: currentColor; }
.resume-pill { display: inline-flex; align-items: center; min-height: 36px; margin-top: 8px; padding: 0 14px; border-radius: 999px; background: var(--gold-soft); color: #6b4f17; font-weight: 700; font-size: 14px; text-decoration: none; }
/* 성경: 내 메모 */
#bible-board .bb-memo[data-has] { border-color: #e6d3a8; background: #fbf6ea; color: #6b4f17; }
#bible-board .bb-mine { grid-column: 2 / -1; margin: 8px 0 0; padding: 10px 14px; border-left: 3px solid var(--gold-l); background: #fbf6ea; border-radius: 0 12px 12px 0; color: #3d3320; font-size: 15px; white-space: pre-line; }
#bible-board .bb-memo-box { grid-column: 2 / -1; margin-top: 8px; display: grid; gap: 8px; }
#bible-board .bb-memo-box textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 16px; resize: vertical; }
#bible-board .bb-memo-act { display: flex; gap: 8px; }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 14px; }
/* 휴대폰 로고 조금 크게 */
@media (max-width: 599px) { .brand-logo { height: 48px; } }
/* 검색 머리: 다른 쪽보다 조금만 높게 · 결과 머리는 입력칸과 제목 사이를 띄움 */
.sx-hero { padding: 64px 0 48px; }
@media (max-width: 599px) { .sx-hero { padding: 40px 0 32px; } .sx-hero .sx-lead { display: none; } }
.sx-hero.compact { padding: 40px 0 36px; }
.sx-hero.compact .sx-q { margin: 20px 0 0; }
@media (max-width: 599px) { .sx-hero.compact { padding: 28px 0 24px; } .sx-hero.compact .sx-q { margin-top: 16px; font-size: 18px; } }
/* 같은 흰 바탕 구역이 이어질 때 간격이 두 배가 되지 않게 */
.pg-search .sx-body > .sec-block + .sec-block:not(.howto-band) { padding-top: 0; }
/* 휴대폰 목록: 줄 사이 16px (카드 안쪽 여백보다 좁게) */
@media (max-width: 639px) { .grid { row-gap: 16px; } }
/* 교회 안내 '이 사이트 쓰는 법'도 다른 카드처럼 흰 바탕 + 테두리 */
.guide > * { background: #fff; border: 1px solid var(--line); }
.guide > a:hover { background: #fff; border-color: #cfd6e3; }
/* 누르는 곳 44px: 바닥글 메뉴 · '전체 보기' */
.foot-links a { min-height: 44px; }
.sec-h > a, .sec-head > a, .sec-head > a.more { min-height: 44px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
@media (min-width: 600px) {
  .live-poster .lp-img { left: auto; right: 0; width: 46%; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 30%, #000 62%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 30%, #000 62%); }
  .live-poster::after { background: linear-gradient(90deg, rgba(6, 18, 41, .0) 60%, rgba(6, 18, 41, .18)); }
}
/* 다른 언어: 받아쓴 글 줄 아래 번역 · 소제목 번역 */
.tx-line .tx-tr { display: block; margin: 2px 0 6px; color: #2b3446; font-size: .96em; line-height: 1.7; }
.tx-line .tx-tr:lang(zh-Hans) { letter-spacing: .02em; }
html[lang="zh-Hans"] .mmf-mobile > summary::after { content: "展开 ›"; } html[lang="zh-Hans"] .mmf-mobile[open] > summary::after { content: "收起"; }
html[lang="en"] .mmf-mobile > summary::after { content: "Open ›"; } html[lang="en"] .mmf-mobile[open] > summary::after { content: "Close"; }
/* 말씀지도 쪽: 위 고르기 띠가 찾기를 맡음 · 지도는 남은 화면 높이 */
.pg-map #hnav-app .mm-search { display: none !important; }
.pg-map #hnav-app#hnav-app.compact .mm-stage { height: calc(100vh - 128px - 92px); min-height: 560px; }
@media (max-width: 899px) { .pg-map #hnav-app#hnav-app.compact .mm-stage { height: calc(100vh - 150px - 150px); min-height: 480px; } }
.mmf-mobile > summary::after, html[lang] .mmf-mobile > summary::after, html[lang] .mmf-mobile[open] > summary::after { content: none !important; }
.mmf-mobile .mmf-oc { margin-left: auto; color: var(--gold); font-size: .86rem; font-weight: 700; }
.mmf-mobile .mmf-oc::after { content: attr(data-shut); } .mmf-mobile[open] .mmf-oc::after { content: attr(data-open); }
.lang-pick .pick-pop { grid-template-columns: 1fr 1fr; min-width: 340px; max-height: min(70vh, 560px); overflow: auto; }
/* 다른 언어: 메뉴 글자가 길어도 한 줄로 */
.topnav a { white-space: nowrap; }
html:not([lang="ko"]) .topnav a { padding-left: 10px; padding-right: 10px; font-size: 15px; }
html:not([lang="ko"]) .topnav { gap: 0; }
@media (max-width: 1279px) { html:not([lang="ko"]) .top-login span, html:not([lang="ko"]) .me-pick summary span { display: none; } html:not([lang="ko"]) .top-login, html:not([lang="ko"]) .me-pick summary { width: 44px; padding: 0; justify-content: center; } }
.tr-wait { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--soft); color: var(--muted); font-size: 15px; }
/* 받아쓴 글: 확인 필요(점선 밑줄) · 틀린 글자 알려주기 */
.tx-unsure { text-decoration: underline dotted #b7791f; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: help; }
.tx-fixmode { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tx-fixmode .ic { width: 16px; height: 16px; }
.tx-fixmode[aria-pressed="true"] { background: var(--gold-soft); color: #6b4f17; border-color: #e6d3a8; }
.tx-body.fixing .tx-line { cursor: text; outline: 1px dashed transparent; border-radius: 6px; }
.tx-body.fixing .tx-line:hover { outline-color: #e6d3a8; background: #fffdf6; }
.fix-box { display: grid; gap: 8px; margin: 8px 0 12px; padding: 14px 16px; border: 1px solid #e6d3a8; border-radius: 12px; background: #fffdf6; }
.fix-box .fix-line { margin: 0; color: var(--muted); font-size: 14px; }
.fix-box label { display: grid; gap: 4px; font-size: 14px; font-weight: 700; }
.fix-box input { min-height: 40px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 16px; }
.fix-box .fix-act { display: flex; gap: 8px; }
.fix-box .fix-msg { margin: 0; font-size: 14px; color: #6b4f17; }
/* 관리자: 받아쓴 글 신고 · 바로 고치기 */
.adm-fix { border-top: 1px solid var(--line); padding: 12px 0; display: grid; gap: 6px; }
.adm-fix-h { margin: 0; font-weight: 700; }
.adm-fix-line { margin: 0; font-size: 16px; line-height: 1.8; }
.adm-fix-line del, .adm-corr del { background: #fdecea; color: #a1261b; }
.adm-fix-line ins, .adm-corr ins { background: #dff3e4; color: #1f7a3a; text-decoration: none; }
.adm-tx-list { display: grid; gap: 4px; max-height: 70vh; overflow: auto; }
.adm-tx-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; }
.adm-tx-row time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.adm-tx-row input { min-height: 38px; border: 1px solid transparent; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 15px; background: transparent; }
.adm-tx-row input:hover, .adm-tx-row input:focus { border-color: var(--line); background: #fff; outline: none; }
.adm-tx-row.edited input { background: #fff8e1; }