/* 교회 페이지 모양 5가지 — [data-theme] 하나로 색이 바뀐다. 글자/바탕 대비는 시험(_test/ui2_test.js)이 4.5:1 이상인지 잰다.
   navy 차분한 남색 · warm 따뜻한 · neat 단정한 · photo 사진 위주(어두운 바탕) · bright 밝은 */
[data-theme] { --c-bg: #f6f7fb; --c-card: #ffffff; --c-ink: #1d2433; --c-sub: #4a5568; --c-line: #e2e5ee; --c-soft: #eef1f8; --c-acc: #1f3a6b; --c-acc-ink: #ffffff; --c-acc2: #8a5a00; --c-hero1: #1f3a6b; --c-hero2: #34528a; --c-tag-bg: #e8edf8; --c-tag: #1f3a6b; --c-radius: 18px; --c-head: inherit; }
[data-theme="warm"] { --c-bg: #fbf5ec; --c-card: #fffdf9; --c-ink: #3a2a1f; --c-sub: #66503f; --c-line: #eadbc8; --c-soft: #f6ebdc; --c-acc: #8a4b22; --c-acc-ink: #ffffff; --c-acc2: #8a4b22; --c-hero1: #7a4a2a; --c-hero2: #b2713f; --c-tag-bg: #f5e3cf; --c-tag: #6e3b19; --c-radius: 22px; }
[data-theme="neat"] { --c-bg: #ffffff; --c-card: #ffffff; --c-ink: #1f2328; --c-sub: #555d66; --c-line: #d8dce1; --c-soft: #f3f4f6; --c-acc: #2b2f36; --c-acc-ink: #ffffff; --c-acc2: #2b2f36; --c-hero1: #2b2f36; --c-hero2: #4a515b; --c-tag-bg: #eef0f2; --c-tag: #2b2f36; --c-radius: 6px; }
[data-theme="photo"] { --c-bg: #121419; --c-card: #1c1f27; --c-ink: #f3f4f6; --c-sub: #bfc4cf; --c-line: #303541; --c-soft: #252a34; --c-acc: #f2c46d; --c-acc-ink: #1d1a12; --c-acc2: #f2c46d; --c-hero1: #0d0f13; --c-hero2: #2a2f3a; --c-tag-bg: #2c3240; --c-tag: #f2d9a6; --c-radius: 14px; }
[data-theme="bright"] { --c-bg: #f2f8ff; --c-card: #ffffff; --c-ink: #10243e; --c-sub: #3f526a; --c-line: #d6e4f5; --c-soft: #e6f1fd; --c-acc: #1259a8; --c-acc-ink: #ffffff; --c-acc2: #1d6b34; --c-hero1: #1565c0; --c-hero2: #3d8be0; --c-tag-bg: #e2f0e5; --c-tag: #1d5a2e; --c-radius: 20px; }

body.cpage { background: var(--c-bg); color: var(--c-ink); }
body.cpage .top { background: var(--c-card); border-bottom-color: var(--c-line); }
body.cpage .top .btn { background: var(--c-card); color: var(--c-ink); border-color: var(--c-line); }
body.cpage .sec { background: var(--c-card); border-color: var(--c-line); border-radius: var(--c-radius); color: var(--c-ink); }
body.cpage .muted, body.cpage .sub-line, body.cpage .tiny.muted { color: var(--c-sub); }
body.cpage a { color: var(--c-acc); }
body.cpage[data-theme="photo"] a { color: #f2d9a6; }
body.cpage .btn { background: var(--c-card); color: var(--c-ink); border-color: var(--c-line); }
body.cpage .btn.primary { background: var(--c-acc); border-color: var(--c-acc); color: var(--c-acc-ink); }
body.cpage .btn.primary:hover { filter: brightness(1.08); }
body.cpage .tag { background: var(--c-tag-bg); color: var(--c-tag); }
body.cpage .wtable th { color: var(--c-sub); }
body.cpage .wtable td { border-top-color: var(--c-line); }
body.cpage .post, body.cpage .ev { border-top-color: var(--c-line); }
body.cpage .post .d, body.cpage .ev p { color: var(--c-sub); }
body.cpage .foot, body.cpage .foot a { color: var(--c-sub); }
body.cpage .links a { color: var(--c-ink); border-color: var(--c-line); background: var(--c-card); }
body.cpage .dt { background: var(--c-soft); color: var(--c-ink); }
body.cpage .minimap { background: var(--c-soft); }
body.cpage .acts4 .btn.amen.done { background: var(--c-soft); border-color: var(--c-acc2); color: var(--c-ink); }
body.cpage .err { color: #c0362c; }
body.cpage[data-theme="photo"] .err { color: #ff9b91; }
body.cpage .modal { background: var(--c-card); color: var(--c-ink); }
body.cpage .modal .fl input, body.cpage .modal .fl textarea, body.cpage .modal .fl select { background: var(--c-card); color: var(--c-ink); border-color: var(--c-line); }
body.cpage .chip { background: var(--c-card); color: var(--c-ink); border-color: var(--c-line); }
body.cpage .chip[aria-pressed="true"] { background: var(--c-acc); border-color: var(--c-acc); color: var(--c-acc-ink); }

/* 머리(표지) */
.c-hero { margin: 0 -16px; position: relative; background: linear-gradient(135deg, var(--c-hero1), var(--c-hero2)); overflow: hidden; color: #fff; }
@media (min-width: 792px) { .c-hero { margin: 16px 0 0; border-radius: var(--c-radius); } }
.c-hero .slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.c-hero .slides::-webkit-scrollbar { display: none; }
.c-hero .slides img { flex: 0 0 100%; width: 100%; height: 280px; object-fit: cover; scroll-snap-align: center; cursor: zoom-in; display: block; }
.c-hero .noimg { height: 150px; display: flex; align-items: center; justify-content: center; }
.c-hero .dots { position: absolute; bottom: 8px; right: 12px; color: #fff; font-size: 13px; background: rgba(0, 0, 0, .45); border-radius: 99px; padding: 2px 10px; }
body.cpage[data-theme="photo"] .c-hero .slides img { height: min(68vh, 560px); }
body.cpage[data-theme="photo"] .c-hero .over { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 18px 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); pointer-events: none; }
body.cpage[data-theme="photo"] .c-hero .over h1 { color: #fff; margin: 0; font-size: 30px; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
body.cpage[data-theme="photo"] .c-hero .over p { color: #f1f1f1; margin: 4px 0 0; font-size: 16px; }
.c-hero .over { display: none; }
body.cpage[data-theme="photo"] .c-hero.has-img .over { display: block; }
body.cpage[data-theme="photo"] .c-hero.has-img ~ .c-tagline { display: none; }
body.cpage[data-theme="photo"] .c-hero.has-img + .c-title h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.c-title h1 { font-size: 28px; line-height: 1.3; margin: 18px 0 4px; letter-spacing: -.5px; }
body.cpage[data-theme="neat"] .c-title h1 { font-weight: 700; letter-spacing: 0; border-bottom: 2px solid var(--c-ink); padding-bottom: 8px; }
body.cpage[data-theme="warm"] .c-title h1 { color: var(--c-hero1); }
.c-tagline { font-size: 18px; font-weight: 600; margin: 2px 0 6px; color: var(--c-ink); }
body.cpage[data-theme="warm"] .c-tagline { color: var(--c-acc); }

/* 이번 주일에 가 볼게요 */
.visit-cta { display: flex; flex-direction: column; width: 100%; align-items: center; text-align: center; justify-content: center; gap: 2px; min-height: 66px; padding: 8px 12px; margin: 14px 0 6px; border-radius: calc(var(--c-radius) * .8); border: 0; background: var(--c-acc); color: var(--c-acc-ink); font: 800 19px/1.3 var(--font); cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
.visit-cta small { display: block; font-weight: 500; font-size: 13.5px; opacity: .92; }
.visit-cta:hover { filter: brightness(1.07); }
.sun-line { text-align: center; color: var(--c-sub); font-size: 15px; margin: 0 0 6px; }

/* 담임목사님·섬기는 분들 */
.lead { display: flex; gap: 16px; align-items: flex-start; }
.lead .face { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--c-soft); cursor: zoom-in; border: 3px solid var(--c-card); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.lead .who { font-weight: 800; font-size: 19px; margin: 6px 0 4px; }
.lead .who small { font-weight: 600; color: var(--c-sub); font-size: 15px; margin-left: 4px; }
.lead p { margin: 6px 0 0; }
@media (max-width: 480px) { .lead { flex-direction: column; align-items: center; text-align: center; } .lead .face { width: 128px; height: 128px; } }
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.team .m { text-align: center; padding: 10px 6px; border: 1px solid var(--c-line); border-radius: calc(var(--c-radius) * .7); }
.team .m img, .team .m .ph0 { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 6px; background: var(--c-soft); cursor: zoom-in; }
.team .m .ph0 { display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--c-sub); cursor: default; }
.team .m b { display: block; font-size: 16px; }
.team .m span { font-size: 14px; color: var(--c-sub); }
.team .m p { font-size: 13.5px; color: var(--c-sub); margin: 4px 0 0; }

/* 앨범 */
.albums { display: grid; gap: 16px; }
.album h3 { margin: 0; font-size: 17px; }
.album .meta { font-size: 13.5px; color: var(--c-sub); margin: 2px 0 8px; }
.album .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.album .grid button { padding: 0; border: 0; background: var(--c-soft); border-radius: 8px; overflow: hidden; cursor: zoom-in; aspect-ratio: 1; }
.album .grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album .more { grid-column: 1 / -1; }

/* 설교 영상 */
.yt { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.yt .v { border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; background: var(--c-card); }
.yt .v button { display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; position: relative; aspect-ratio: 16/9; }
.yt .v button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt .v button::after { content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 40px; border-radius: 10px; background: rgba(204, 0, 0, .9); color: #fff; font-size: 18px; line-height: 40px; text-align: center; }
.yt .v iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }
.yt .v .t { padding: 8px 10px 10px; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.yt .v .t span { display: block; font-weight: 400; font-size: 13px; color: var(--c-sub); }

/* 이웃 섬김 */
.svc { display: grid; gap: 10px; }
.svc .s { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--c-line); border-radius: calc(var(--c-radius) * .7); background: var(--c-soft); }
.svc .s .ic { font-size: 26px; line-height: 1; }
.svc .s b { display: block; font-size: 16px; }
.svc .s span { font-size: 14px; color: var(--c-sub); }
.svc .s p { margin: 4px 0 0; font-size: 14.5px; }

/* 칭찬 게시판 */
.bd-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.bd-write { margin: 0 0 12px; }
.bd-list { display: grid; gap: 10px; }
.bd-post { border: 1px solid var(--c-line); border-radius: calc(var(--c-radius) * .7); padding: 12px 14px; background: var(--c-card); }
.bd-post.pinned { border-color: var(--c-acc2); box-shadow: 0 0 0 1px var(--c-acc2) inset; }
.bd-post .h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; color: var(--c-sub); }
.bd-post .h b { color: var(--c-ink); font-size: 15px; }
.bd-post .cat { background: var(--c-tag-bg); color: var(--c-tag); border-radius: 99px; padding: 1px 9px; font-weight: 700; font-size: 12.5px; }
.bd-post .tx { margin: 8px 0; white-space: normal; font-size: 16px; }
.bd-post img.bp { max-width: 100%; max-height: 320px; border-radius: 10px; cursor: zoom-in; display: block; }
.bd-post .f { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.bd-post .f .btn { min-height: 38px; padding: 4px 12px; font-size: 14px; }
.bd-post .f .sp { flex: 1; }
.bd-post .amen.done { border-color: var(--c-acc2); }
.bd-empty { text-align: center; color: var(--c-sub); padding: 18px 8px; }
.code-box { background: var(--c-soft); border-radius: 12px; padding: 12px; text-align: center; margin: 10px 0; }
.code-box b { font-size: 28px; letter-spacing: 6px; display: block; }

/* 큰 사진 보기(넘기기) */
.lightbox .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); text-align: center; font-size: 15px; }
.lightbox .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #fff; font-size: 26px; cursor: pointer; }
.lightbox .nav.p { left: 8px; right: auto; } .lightbox .nav.n { right: 8px; left: auto; top: 50%; }
.lightbox .cnt { position: absolute; top: 18px; left: 16px; color: #fff; font-size: 14px; }

/* 미리보기 틀 안(첫 화면) */
body.embed .top { display: none; }
body.embed .foot { display: none; }

/* 모양 고르기 작은 그림 (편집·만들기 화면) */
.theme-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.theme-pick button { border: 2.5px solid var(--line); border-radius: 16px; padding: 0; background: #fff; cursor: pointer; overflow: hidden; text-align: left; font: inherit; }
.theme-pick button[aria-pressed="true"] { border-color: #f0b429; box-shadow: 0 0 0 3px rgba(240, 180, 41, .35); }
.theme-pick .mini { background: var(--c-bg); color: var(--c-ink); padding: 0 0 10px; }
.theme-pick .mini .mh { height: 54px; background: linear-gradient(135deg, var(--c-hero1), var(--c-hero2)); }
.theme-pick .mini .mt { font-weight: 800; font-size: 15px; padding: 8px 10px 0; color: var(--c-ink); }
.theme-pick .mini .ms { font-size: 12px; color: var(--c-sub); padding: 0 10px; }
.theme-pick .mini .mb { margin: 8px 10px 0; background: var(--c-acc); color: var(--c-acc-ink); border-radius: 8px; font-size: 12.5px; font-weight: 700; text-align: center; padding: 5px; }
.theme-pick .nm { display: block; padding: 8px 10px; font-weight: 700; font-size: 15px; background: #fff; color: #1d2433; border-top: 1px solid var(--line); }

/* ── 주보 (교회 페이지) ── */
.jb-when { margin: -4px 0 10px; font-size: 16px; }
.jb-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jb-pages.one { grid-template-columns: 1fr; max-width: 520px; }
.jb-page { position: relative; display: block; padding: 0; border: 1px solid var(--c-line, #e2e5ee); border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.jb-page img { display: block; width: 100%; height: auto; }
.jb-page .n, .jb-pv .n { position: absolute; left: 6px; bottom: 6px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 12.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.jb-tip { margin: 8px 0 0; }
.jb-oldh { font-size: 16px; margin: 16px 0 6px; }
.jb-old { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jb-old button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 1px solid var(--c-line, #e2e5ee); border-radius: 12px; background: var(--c-card, #fff); color: var(--c-ink, #1d2433); font: inherit; text-align: left; cursor: pointer; min-height: 64px; }
.jb-old img { width: 48px; height: 64px; object-fit: cover; object-position: top; border-radius: 6px; background: #fff; flex: none; border: 1px solid var(--c-line, #e2e5ee); }
.jb-old span { display: flex; flex-direction: column; gap: 1px; font-size: 14.5px; min-width: 0; }
.jb-old b { font-size: 16px; }
.jb-old small { color: var(--c-sub, #4a5568); }
.jb-rep { margin: 10px 0 0; text-align: right; }
.jb-rep a { color: var(--c-sub, #4a5568); }

/* ── 주보 올리기 (교회 관리) ── */
.etiles .et-jubo { grid-column: 1 / -1; min-height: 76px; border-color: #e9b44c; background: var(--gold-bg, #fff6e2); font-size: 19px; }
.etiles .et-jubo .ic { font-size: 30px; }
.etiles .et-jubo small { display: block; font-size: 13.5px; font-weight: 600; color: var(--sub, #4f5a6e); }
.jb-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 10px; }
.jb-big { min-height: 72px; font-size: 18.5px; font-weight: 800; border-radius: 16px; }
.jb-hint { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--gold-bg, #fff6e2); color: #5e4206; font-weight: 700; font-size: 15px; }
.jb-pages-edit { display: grid; gap: 8px; margin: 10px 0 4px; }
.jb-pe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px; border: 1.5px solid var(--line, #e4e1d8); border-radius: 14px; background: #fff; }
.jb-pv { position: relative; padding: 0; border: 1px solid var(--line, #e4e1d8); border-radius: 8px; overflow: hidden; background: #fff; cursor: zoom-in; flex: none; }
.jb-pv img { display: block; width: 84px; height: 112px; object-fit: cover; object-position: top; }
.jb-pa { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.jb-pa .btn { min-height: 40px; padding: 4px 10px; }
.jb-go { min-height: 62px; font-size: 19px; margin-top: 8px; }
.jb-mine { display: grid; gap: 8px; }
.jb-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px; border: 1.5px solid var(--line, #e4e1d8); border-radius: 14px; background: #fff; }
.jb-th { display: flex; gap: 4px; }
.jb-th button { padding: 0; border: 1px solid var(--line, #e4e1d8); border-radius: 6px; overflow: hidden; background: #fff; cursor: zoom-in; }
.jb-th img { display: block; width: 48px; height: 64px; object-fit: cover; object-position: top; }
.jb-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 150px; }
.jb-log li { padding: 6px 12px; font-size: 14px; }

/* ── 페이지 언어 바꾸기 (교회 페이지) ── */
.lang-sw { display: flex; justify-content: center; gap: 0; margin: 4px auto 8px; width: max-content; max-width: 100%; border: 1.5px solid var(--c-line, #e2e5ee); border-radius: 999px; overflow: hidden; background: var(--c-card, #fff); }
.lang-sw button { min-height: 40px; padding: 4px 16px; border: 0; background: transparent; color: var(--c-ink, #1d2433); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.lang-sw button[aria-pressed="true"] { background: var(--c-acc, #1f3a6b); color: var(--c-acc-ink, #fff); }
[dir="rtl"] .wtable th { text-align: right; }
.l2-box { margin-top: 8px; padding: 10px 12px; border: 1.5px dashed var(--line, #e4e1d8); border-radius: 12px; background: #fcfbf7; }