@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600&family=Newsreader:opsz,wght@6..72,300;6..72,400&display=swap');
/* 샘플교회 — Six Stone Jars look over the app's default theme (loaded after style.css).
   Paper ground + grain, Pretendard light, 18px tiles, pill buttons, one muted blue accent. */
:root {
  --ink: #262B2E;
  --ink-soft: #525A5F;
  --pine: #25343B;
  --pine-deep: #1B262B;
  --paper: #EEECE5;
  --paper-raised: #F7F6F2;
  --line: rgba(38,43,46,.14);
  --cream: #E3E1D9;
  --pine-tint-1: #E4E9EB;
  --pine-tint-2: #C9D3D8;
  --pine-tint-3: #6B8494;
  --pine-tint-4: #33454D;
  --mist: #6B8494;
  --radius: 18px;
  --sb-r: 18px;
}
html { background: var(--paper); }
body { background: var(--paper); font-weight: 300; }
/* paper grain over everything, like sixstonejars.com */
body::after { content: ""; position: fixed; inset: 0; background: url('/church/assets/img/grain.png'); opacity: .25; mix-blend-mode: multiply; pointer-events: none; z-index: 95; }

/* type: all Pretendard, light headings */
body, body h1, body h2, body h3, body h4, body button, body input, body select, body textarea,
.hero-slide__title, .album-card__title, .sermon-preview__date, #giving h2, #giving h3 {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif !important;
}
body h1, body h2 { font-weight: 300; letter-spacing: -0.01em; }
body h3 { font-weight: 400; }

/* nav: light bar, small type, pill utility links */
.nav { background: rgba(238,236,229,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.nav__item, .nav__dropdown-link { font-weight: 500; font-size: .92rem; letter-spacing: .02em; }
.nav__utility-item { font-weight: 400; font-size: .85rem; border-radius: 999px; }
.nav__utility-item--highlight { color: var(--ink); }
@media (min-width: 900px) {
  .nav__utility-item { padding: 6px 14px; border: 1px solid var(--line); background: transparent; }
  .nav__utility-item--highlight { background: var(--pine); border-color: var(--pine); color: #fff; }
  .nav__dropdown-panel { border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(22,23,25,.35); }
}

/* buttons */
.btn { border-radius: 999px; font-weight: 500; }
.btn--primary { background: var(--pine); color: #fff; }
.btn--muted { background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 999px; }

/* sub pages: tabs as pills, sections and cards rounded */
.about-tabs { border-bottom: none; gap: 8px; flex-wrap: wrap; }
.about-tabs__item { border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; }
.about-tabs__item:hover { border-color: var(--pine); color: var(--pine); }
.mission-box { border-radius: var(--sb-r); background: rgba(255,255,255,.35); border: 1px solid var(--line); }
.ministry-band__visual { border-radius: var(--sb-r); overflow: hidden; }
.ministry-item__duration { border-radius: 999px; }
.sermon-card__thumb, .sermon-featured__thumb, .album-card { border-radius: 14px; }
.staff-row { border-radius: 14px; }

/* footer: light, quiet (SSJ avoids heavy black footers) */
.footer { background: #E3E1D9; color: var(--ink); }
.footer a, .footer__address-name, .footer__block h3 { color: var(--ink); }
.footer__row svg { color: var(--mist); }
.footer__address { border-bottom-color: var(--line); }

/* sermons without video */
.sermon-card__thumb:not(:has(img)) { background: #DCE2E3; }
.sermon-card__verse { color: #25343B; font-size: 1rem; font-weight: 400; }
.sermon-featured__thumb:not(:has(img)) { background: #DCE2E3 url('/church/assets/img/wash-mist.webp') center / cover; }
.sermon-featured__title { color: #25343B; font-weight: 300; }

/* ---------- home (church/pages/index.php) ---------- */
.sb { max-width: 1140px; margin: 0 auto; padding: 0 40px 96px; }
.sb-label { margin: 0 0 14px; font: 500 12px/1 'Pretendard Variable', Pretendard, sans-serif; letter-spacing: .1em; color: var(--ink-soft); }
.sb-hero { text-align: center; padding: 96px 0 72px; max-width: 860px; margin: 0 auto; }
.sb-hero h1 { margin: 0; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.18; font-weight: 200; color: var(--ink); }
.sb-hero h1 span { color: var(--mist); }
.sb-lead { margin: 24px auto 0; max-width: 600px; word-break: keep-all; font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: var(--ink-soft); }
.sb-actions { margin-top: 36px; display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; }
.sb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 30px; border-radius: 999px; font: 500 14px/1 'Pretendard Variable', Pretendard, sans-serif; text-decoration: none; border: 1px solid var(--line); color: var(--ink); transition: transform .2s, background .2s; }
.sb-btn--dark { background: var(--pine); border-color: var(--pine); color: #fff; }
.sb-btn:hover { transform: translateY(-1px); }
.sb-btn:active { transform: translateY(1px); }
.sb-btn svg, .sb-link svg, .sb-more svg { width: 14px; height: 14px; }
.sb-link { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 'Pretendard Variable', Pretendard, sans-serif; letter-spacing: .04em; color: var(--ink); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid currentColor; }

.sb-bento { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
.sb-tile { border-radius: var(--sb-r); padding: 34px; position: relative; overflow: hidden; color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 8px; min-height: 230px; }
.sb-tile h2 { margin: 0; font-size: 28px; line-height: 1.3; font-weight: 300; }
.sb-tile h3 { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 400; }
.sb-tile p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.sb-tile--photo { grid-row: span 2; background-position: center; background-size: cover; min-height: 480px; }
.sb-tile--line { border: 1px solid var(--line); background: rgba(255,255,255,.25); }
.sb-tile--dark { background: var(--pine); color: #fff; }
.sb-tile--dark .sb-label, .sb-tile--dark p { color: #C9D3D8; }
.sb-tile--mist { background: #DCE2E3 url('/church/assets/img/wash-mist.webp') center / cover; }
.sb-tile--mist .sb-btn { margin-top: auto; align-self: flex-start; }
.sb-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #fff; }
.sb-times { list-style: none; margin: 4px 0 0; padding: 0; }
.sb-times li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15px; }
.sb-times li + li { border-top: 1px solid var(--line); }
.sb-times span { color: var(--ink-soft); }
.sb-times b { font-weight: 500; white-space: nowrap; }

.sb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding-top: 96px; }
.sb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.sb-head h2, .sb-life h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 300; }
.sb-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sb-list li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.sb-list li:has(> a) { padding: 0; }
.sb-list li > a { flex: 1; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; color: var(--ink); text-decoration: none; }
.sb-list time { color: var(--ink-soft); font-size: 14px; white-space: nowrap; }

.sb-life { padding-top: 96px; }
.sb-life h2 { margin-bottom: 24px; }
.sb-cards { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
.sb-cards a { display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; }
.sb-cards img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--sb-r); margin-bottom: 10px; transition: transform .25s, box-shadow .25s; }
.sb-cards a:hover img { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(22,23,25,.35); }
.sb-cards b { font-weight: 500; font-size: 17px; }
.sb-cards span { color: var(--ink-soft); font-size: 14px; }

@media (max-width: 900px) {
  .sb { padding: 0 20px 72px; }
  .sb-hero { padding: 56px 0 48px; }
  .sb-bento, .sb-two, .sb-cards { grid-template-columns: 1fr; }
  .sb-tile--photo { grid-row: auto; min-height: 260px; }
  .sb-cards img { height: 220px; }
  .sb-two, .sb-life { padding-top: 64px; }
  .sb-two { gap: 48px; }
}
@media (prefers-reduced-motion: reduce) { .sb-btn, .sb-cards img { transition: none; } }

/* login page: demo accounts */
.demo-login { margin-top: 28px; padding: 24px; border-radius: var(--sb-r); background: #DCE2E3 url('/church/assets/img/wash-mist.webp') center / cover; }
.demo-login__title { margin: 0 0 6px; font-size: 18px; font-weight: 500; color: var(--ink); }
.demo-login__sub { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.demo-login__list { display: grid; gap: 10px; }
.demo-login button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.7); cursor: pointer; text-align: left; font-size: 15px; color: var(--ink); }
.demo-login button:hover { background: #fff; border-color: var(--pine); }
.demo-login button span { font-size: 13px; color: var(--ink-soft); }

/* demo notice */
.demo-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: #25343B; color: #fff; text-align: center; font-size: .85rem; padding: 8px 16px; line-height: 1.5; }
body { padding-bottom: 64px; }
.demo-bar a { color: #C9D3D8; text-decoration: underline; }
.demo-bar__short { display: none; }
@media (max-width: 700px) { .demo-bar__long { display: none; } .demo-bar__short { display: inline; } .demo-bar { font-size: .8rem; padding: 6px 10px; } body { padding-bottom: 48px; } }

/* hero: centered text, shorter (Kay 2026-10-10) */
.hero--slider { min-height: 60vh; }
.hero-slide { padding-top: 110px; padding-bottom: 48px; }
.hero-slide .hero__content { margin: 0 auto; text-align: center; max-width: 820px; }
.hero-slide .hero__actions { justify-content: center; }
.hero-slide--sermon .hero__content { transform: none; }
@media (max-width: 899px) { .hero--slider { min-height: 70vh; } }
.hero-slide--white .hero__content { text-shadow: 0 1px 14px rgba(20,28,32,.45); }

/* home sermons: 주일 big on the left, 새벽 / 수요 / 금요 / 특별 as a 2x2 on the right (Kay 2026-10-10) */
@media (min-width: 900px) {
  .sermon-preview { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px 32px; align-items: start; }
  .sermon-preview > .resource-head { grid-column: 1 / -1; }
  .sermon-preview .sermon-featured { margin: 0; padding: 0; border: 0; }
  .sermon-preview .sermon-featured__thumb { max-width: none; }
  .sermon-preview .sermon-preview__grid { grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; }
  .sermon-preview .sermon-card__head { margin-bottom: 6px; }
}

/* menu stays at the top while scrolling, on every page incl. home (Kay 2026-10-10) */
.nav, .has-hero .nav { position: sticky; top: var(--banner-h, 0px); z-index: 90; background: rgba(238,236,229,.94); border-bottom: 1px solid var(--line); }
.has-hero .nav__logo-img--default { display: block; }
.has-hero .nav__logo-img--hero { display: none; }
.has-hero .nav__toggle { color: var(--ink); }
@media (min-width: 900px) {
  .has-hero .nav__item, .has-hero .nav__dropdown-link { color: var(--ink); }
  .has-hero .nav__utility-item:not(.nav__utility-item--highlight) { color: var(--ink); border-color: var(--line); background: transparent; }
}
.hero-slide { padding-top: 48px; }

/* 공지사항 under the hero */
.notice-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.notice-list li { border-bottom: 1px solid var(--line); }
.notice-list a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 4px; color: var(--ink); text-decoration: none; }
.notice-list a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.notice-list time { color: var(--ink-soft); font-size: .9rem; white-space: nowrap; }

/* 예배안내 left, 교회 일정 right */
.home-row { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: var(--page-w); margin: 0 auto; }
.home-row > .section { margin: 0; max-width: none; width: 100%; }
@media (min-width: 900px) {
  .home-row { grid-template-columns: 1fr 1.4fr; align-items: start; padding: 0 var(--space-2); }
  .home-row > .section { padding-left: 0; padding-right: 0; }
}
.service-section { background: rgba(255,255,255,.35); border: 1px solid var(--line); border-radius: var(--sb-r); }
/* 예배안내 box keeps its inner space inside the row (Kay: text too close to the frame) */
.home-row > .service-section { padding: 36px 40px; }
@media (max-width: 899px) { .home-row > .service-section { padding: 28px 24px; } }

/* 한/영: install snippets carry both languages, the page language picks one */
html[lang="en"] .i-ko, html:not([lang="en"]) .i-en { display: none !important; }
.nav__utility-item--lang { font-weight: 600 !important; }

/* 공지사항 + 예배안내 row, 달력 + 다가오는 일정 row */
.home-row > .notice-section { padding: 36px 0; }
.upcoming-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.upcoming-list li { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.upcoming-list__date { color: var(--ink-soft); font-size: .85rem; }
.upcoming-list__date b { font-size: 1.35rem; font-weight: 300; color: var(--ink); margin-right: 6px; }
.upcoming-list__time { color: var(--ink-soft); font-size: .85rem; white-space: nowrap; }
@media (min-width: 900px) { .home-row:has(.calendar-preview) { grid-template-columns: 1.6fr 1fr; } }
@media (min-width: 900px) { .home-row:has(.notice-section) { grid-template-columns: 1.3fr 1fr; } }

/* 샘플교회 photo for the "이번 주 설교" slide (the app default is 한소망's own photo) */
.hero-slide--sermon::before {
  background: linear-gradient(90deg, rgba(20,28,32,0.55) 0%, rgba(20,28,32,0.35) 50%, rgba(20,28,32,0.25) 100%),
              url('/church/assets/img/hero-meadow.jpg') center / cover no-repeat;
}
/* fallback hero background (app default photo) never shows 한소망's picture either */
.hero { background-image: url('/church/assets/img/hero-church.jpg'); }

/* breathing room: hero → first row, and between side-by-side parts (Kay: 너무 붙어있음) */
.home-row { gap: 56px; margin-top: 64px; margin-bottom: 24px; }
.hero--slider + .home-row { margin-top: 72px; }
@media (max-width: 899px) { .home-row { gap: 40px; margin-top: 40px; } }

/* ---- SSJ spacing (sixstonejars.com: 1140px content, 40px sides, ~100px between sections) ----
   The app default is 한소망's 1400px / 16px edges, which reads cramped in this style. */
:root { --page-w: 1140px; }
.section, .home-row { box-sizing: content-box; padding-left: 40px; padding-right: 40px; }
.section { padding-top: 88px; padding-bottom: 0; }
main.page, .about-page, .sermons-page { padding-left: 40px; padding-right: 40px; }
.resource-head { margin-bottom: 24px; }
.home-row { max-width: var(--page-w); margin: 88px auto 0; gap: 64px; }
.hero--slider + .home-row { margin-top: 88px; }
.home-row > .section { padding: 0; margin: 0; max-width: none; box-sizing: border-box; }
.home-row > .service-section { padding: 40px 44px; }
.sermon-preview { gap: 24px 40px !important; }
.sermon-preview .sermon-preview__grid { gap: 28px 24px !important; }
.footer { margin-top: 120px; }
@media (max-width: 899px) {
  .section, .home-row, main.page, .about-page, .sermons-page { padding-left: 20px; padding-right: 20px; }
  .section { padding-top: 64px; }
  .home-row { margin-top: 64px; gap: 56px; }
  .home-row > .service-section { padding: 28px 24px; }
  .footer { margin-top: 88px; }
}

/* hero titles appear in place, centered (no 한소망 letter-spacing sweep) */
.hero-slide .hero__title, .hero-slide.is-active .hero__title { letter-spacing: -0.01em !important; transition: none !important; }
.hero-slide .hero__content { transform: none !important; }
.hero-slide--ink .hero__verse { color: var(--ink-soft); }
/* 예배안내 left (narrower), 공지사항 right */
@media (min-width: 900px) { .home-row:has(> .service-section:first-child) { grid-template-columns: 1fr 1.3fr; } }
/* 공지사항 title on the same line as 예배안내 (box top padding 40px + 1px border) */
.home-row > .notice-section { padding-top: 41px; }
@media (max-width: 899px) { .home-row > .notice-section { padding-top: 0; } }

/* 공지 배너 under the hero */
.home-banner { max-width: var(--page-w); margin: 56px auto 0; padding: 0 40px; box-sizing: content-box; }
.home-banner .banner { position: static; border-radius: var(--sb-r); padding: 20px 28px; text-align: center; font-size: 1.02rem; line-height: 1.6;
  background: #DCE2E3 url('/church/assets/img/wash-mist.webp') center / cover; color: var(--ink); font-weight: 400; }
.home-banner .banner--urgent { background: #D7191C; color: #fff; }
.hero--slider + .home-banner + .home-row { margin-top: 56px; }
@media (max-width: 899px) { .home-banner { padding: 0 20px; margin-top: 40px; } }

/* 주일 video + caption */
.sermon-featured__caption { max-width: none; margin-top: 16px; }
.sermon-featured__caption-title { font-size: 1.25rem; font-weight: 400; }
.sermon-featured__caption-meta { margin-top: 4px; }
.sermon-featured__video { border-radius: 14px; }

/* 다가오는 일정 in the same box as 예배안내; calendar title level with the box title */
.home-row > .upcoming-section { padding: 40px 44px; background: rgba(255,255,255,.35); border: 1px solid var(--line); border-radius: var(--sb-r); }
.home-row > .calendar-preview { padding-top: 41px; }
.upcoming-list li:last-child { border-bottom: 0; }
@media (max-width: 899px) { .home-row > .upcoming-section { padding: 28px 24px; } .home-row > .calendar-preview { padding-top: 0; } }

/* ---- calmer home: SSJ-style bands instead of boxes (Kay: 하는 일 섹션처럼 색을 나눠서) ----
   paper: 배너 + 예배안내|공지사항 · wash: 주일예배 · paper: 달력|다가오는 일정 · wash: 행사 */
body { overflow-x: clip; }
.home-row > .service-section, .home-row > .upcoming-section { background: none; border: 0; border-radius: 0; padding: 0; }
.home-row > .notice-section, .home-row > .calendar-preview { padding-top: 0; }
.sermon-preview, .event-slider { position: relative; isolation: isolate; margin-top: 96px; padding-top: 88px !important; padding-bottom: 88px !important; }
.sermon-preview::before, .event-slider::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: #E3E1D9 url('/church/assets/img/wash-mist.webp') 50% 50% / cover;
}
.sermon-preview + .home-row, .sermon-preview + * { margin-top: 96px; }
.sermon-preview .sermon-card__thumb:not(:has(img)) { background: rgba(255,255,255,.55); }
.event-slider + .home-row, .footer { margin-top: 0; }
.home-row:last-of-type { margin-bottom: 96px; }
@media (max-width: 899px) {
  .sermon-preview, .event-slider { margin-top: 64px; padding-top: 56px !important; padding-bottom: 56px !important; }
  .sermon-preview + * { margin-top: 64px; }
}
.upcoming-list li:nth-child(n+7) { display: none; }   /* 6 is enough next to the calendar */
/* more air between the 주일 video and the four services */
@media (min-width: 900px) { .sermon-preview { column-gap: 72px !important; grid-template-columns: 1.35fr 1fr; } }

/* English: Six Stone Jars English type (Newsreader headings, Karla text) */
html[lang="en"] body, html[lang="en"] body button, html[lang="en"] body input, html[lang="en"] body select, html[lang="en"] body textarea,
html[lang="en"] .nav__item, html[lang="en"] .nav__dropdown-link, html[lang="en"] .nav__utility-item, html[lang="en"] .btn, html[lang="en"] .section-link {
  font-family: 'Karla', 'Pretendard Variable', Pretendard, sans-serif !important;
}
html[lang="en"] body h1, html[lang="en"] body h2, html[lang="en"] .hero__title, html[lang="en"] .hero-slide__title, html[lang="en"] .sermon-featured__title, html[lang="en"] .sermon-featured__caption-title {
  font-family: 'Newsreader', Georgia, serif !important; font-weight: 300 !important; letter-spacing: -0.01em;
}
html[lang="en"] body h3 { font-family: 'Karla', sans-serif !important; font-weight: 500; }

/* login: form left, demo accounts right on desktop */
@media (min-width: 900px) {
  main:has(> .demo-login) { max-width: 900px !important; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: start; }
  main:has(> .demo-login) > *:not(.demo-login):not(script) { grid-column: 1; }
  main:has(> .demo-login) > .demo-login { grid-column: 2; grid-row: 1 / span 8; margin-top: 0; }
}

/* English logo */
html[lang="en"] .nav__logo-img--default { content: url('/church/assets/logo-en.png'); }
html[lang="en"] .nav__logo-img--hero { content: url('/church/assets/logo-en-white.png'); }

/* thin vertical line between side-by-side parts on the home page (Kay) */
@media (min-width: 900px) {
  .home-row { column-gap: 0 !important; }
  .home-row > * + * { border-left: 1px solid var(--line); padding-left: 56px !important; margin-left: 56px !important; }
  .home-row > *:first-child { padding-right: 0; }
  .sermon-preview { column-gap: 0 !important; }
  .sermon-preview .sermon-preview__grid { border-left: 1px solid rgba(38,43,46,.18); padding-left: 40px; margin-left: 40px; }
}

/* 공지 배너 at the very top (sticky), SSJ tone */
.banner { padding: 10px 16px; font-size: .9rem; font-weight: 400; background: #25343B; color: #fff; }
.banner.banner--urgent { background: #D7191C; color: #fff; padding: 14px 16px; font-size: 1.05rem; font-weight: 700; }   /* 긴급 공지: clearly red, bigger (Kay) */

/* 다가오는 일정: no title, a simple list centered against the calendar (Kay) */
@media (min-width: 900px) {
  .home-row:has(> .calendar-preview) { align-items: stretch; }
  .home-row > .upcoming-section { display: flex; flex-direction: column; justify-content: center; }
}
.upcoming-section > .resource-head { display: none; }
.upcoming-list { border-top: 0; }
.upcoming-list li { padding: 12px 4px; }
/* calendar grid in calmer greys */
.calendar-widget [style*="background:#DDDDDB"] { background: #E3E1D9 !important; }