/*
Theme Name: 주팁처치
Theme URI: https://github.com/
Author: 주팁처치
Description: 주팁처치 홈페이지 테마. 큰 글씨, 높은 대비, 손가락 크기 버튼. 흰 바탕에 주황 포인트, 넓은 화면과 휴대폰 화면을 따로 배치하는 블록 테마.
Version: 0.3.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jutip
*/

/*
 * 색, 글꼴, 모서리 같은 값은 모두 --j-* 변수 (기본값은 jutip-core 플러그인 front.css).
 * 화면 폭: 휴대폰 ~767px, 태블릿 768~1023px, 컴퓨터 1024px~
 */
:root {
	--j-font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
	--j-font-head: var(--j-font-body);
	--j-font-verse: var(--j-font-body);
	--j-head-weight: 800;
	--j-head-tracking: -0.02em;
	--j-gutter: clamp(1rem, 4vw, 2rem);
	--j-wide: 1200px;
	--j-header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--j-font-body); background: var(--j-bg); color: var(--j-text); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main, .wp-site-blocks > .jutip-main { flex: 1 0 auto; }
.wp-site-blocks > * + * { margin-block-start: 0; }
img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- 머리글 */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
@media (min-width: 783px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; } }
@media (min-width: 601px) and (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } }

.jutip-header { position: relative; isolation: isolate; color: var(--j-header-text); border-bottom: 1px solid var(--j-header-line); }
/* 흐림 배경은 뒤 장식 층에만. 머리글 자체에 backdrop-filter 를 걸면 휴대폰 전체 화면 메뉴(position: fixed)가 머리글 높이에 갇힘 */
.jutip-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--j-header-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
.jutip-header-inner { max-width: calc(var(--j-wide) + var(--j-gutter) * 2); min-height: var(--j-header-h); margin: 0 auto; padding: 0 var(--j-gutter); gap: 1rem; }
.jutip-header .jutip-brand { margin: 0; flex: 0 0 auto; font-family: var(--j-font-head); font-size: 1.5rem; font-weight: var(--j-head-weight); letter-spacing: -0.03em; line-height: 1; }
.jutip-header .jutip-brand a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--j-brand, var(--j-primary)); text-decoration: none; }
/* 교회 로고 (scripts/brand/render.sh 로 만든 그림) */
.jutip-header .jutip-brand a::before { content: ""; flex: 0 0 auto; width: 40px; height: 40px; background: url(assets/img/logo.png) center / contain no-repeat; }

/* 메뉴: 컴퓨터에서는 가운데 한 줄 */
.jutip-header .jutip-nav { flex: 1 1 auto; font-size: 1.05rem; font-weight: 600; }
.jutip-header .jutip-nav .wp-block-navigation__container { gap: 0.25rem; }
.jutip-header .jutip-nav .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; padding: 0.35em 0.85em; border-radius: var(--j-radius-pill, 999px); color: var(--j-header-text); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; }
.jutip-header .jutip-nav .wp-block-navigation-item__content:hover,
.jutip-header .jutip-nav .wp-block-navigation-item__content:focus-visible { background: var(--j-nav-hover); color: var(--j-header-text); }
.jutip-header .jutip-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--j-nav-current); background: var(--j-nav-current-bg); }

/* 묶음 메뉴 (컴퓨터): 마우스를 올리면 아래로 펼침, 키보드는 화살표 단추로. 강조 배경은 글자와 화살표를 함께 감쌈 */
@media (min-width: 1024px) {
	.jutip-header .jutip-nav .wp-block-navigation__container > .has-child { padding-right: 0.75em; border-radius: var(--j-radius-pill, 999px); transition: background-color 0.15s ease; }
	.jutip-header .jutip-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content { padding-right: 0.3em; background: none; }
	.jutip-header .jutip-nav .wp-block-navigation__container > .has-child:hover { background: var(--j-nav-hover); }
	.jutip-header .jutip-nav .wp-block-navigation__container > .has-child.current-menu-ancestor { background: var(--j-nav-current-bg); }
	.jutip-header .jutip-nav .current-menu-ancestor > .wp-block-navigation-item__content,
	.jutip-header .jutip-nav .current-menu-ancestor > .wp-block-navigation-submenu__toggle { color: var(--j-nav-current); }
}
.jutip-header .jutip-nav .wp-block-navigation-submenu__toggle { width: 1.1em; height: 1.1em; padding: 0; color: inherit; }
.jutip-header .jutip-nav .wp-block-navigation__submenu-icon svg { width: 12px; height: 12px; stroke-width: 2; }
@media (min-width: 1024px) {
	.jutip-header .jutip-nav .wp-block-navigation__submenu-container { min-width: 200px !important; padding: 0.5rem !important; border: 1px solid var(--j-line) !important; border-radius: var(--j-radius-sm, 14px); background: var(--j-surface, #fff) !important; box-shadow: 0 14px 36px rgba(30, 20, 10, 0.14); color: var(--j-text) !important; }
	.jutip-header .jutip-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: flex; width: 100%; min-height: 48px; padding: 0.4em 0.9em; border-radius: 10px; font-size: 1.05rem; }
	/* 묶음 제목과 펼친 칸 사이 빈틈에서 마우스가 빠져도 닫히지 않게 */
	.jutip-header .jutip-nav .has-child > .wp-block-navigation__submenu-container { top: 100% !important; margin-top: 0 !important; }
	.jutip-header .jutip-nav .has-child > .wp-block-navigation__submenu-container::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
}

/* 메뉴는 어디를 눌러도 손가락 모양 (묶음 화살표 단추 포함) */
.jutip-header .jutip-nav .wp-block-navigation-item__content, .jutip-header .jutip-nav .wp-block-navigation-submenu__toggle, .jutip-header .jutip-nav .has-child, .jutip-header .wp-block-navigation__responsive-container-open, .jutip-header .wp-block-navigation__responsive-container-close { cursor: pointer; }

/* 메뉴 열기 버튼 (휴대폰, 태블릿) */
.jutip-header .wp-block-navigation__responsive-container-open { gap: 0.35rem; min-height: 44px; padding: 0 0.9rem; border-radius: var(--j-radius-pill, 999px); border: 1.5px solid var(--j-header-line-strong, var(--j-line)); color: var(--j-header-text); font-size: 1rem; font-weight: 700; align-items: center; }
.jutip-header .wp-block-navigation__responsive-container-open::after { content: "메뉴"; }
.jutip-header .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }

/* 태블릿까지는 메뉴 버튼, 1024px 부터 한 줄 메뉴 (워드프레스 기본은 600px) */
@media (min-width: 600px) and (max-width: 1023px) {
	.jutip-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.jutip-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 1023px) {
	.jutip-header .jutip-nav { flex: 0 0 auto; order: 3; }
	.jutip-header .jutip-member-link { order: 2; margin-left: auto; }
}

/* 펼친 메뉴: 화면 전체, 큰 글씨 */
.jutip-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--j-bg) !important; color: var(--j-text) !important; padding: 0.5rem var(--j-gutter) 2rem; }
.jutip-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px; align-items: stretch; }
.jutip-header .wp-block-navigation__responsive-dialog::before { content: "메뉴"; position: absolute; top: 0; left: 0; display: flex; align-items: center; height: 48px; font-size: 1rem; font-weight: 700; color: var(--j-muted); }
.jutip-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog::before { content: none; }
.jutip-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; align-items: stretch; }
.jutip-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--j-line); }
.jutip-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { width: 100%; min-height: 64px; padding: 0 0.25rem; font-size: 1.45rem; font-weight: 700; color: var(--j-text); border-radius: 0; }
.jutip-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--j-primary); background: none; }
/* 펼친 메뉴의 묶음: 작은 묶음 제목 아래로 큰 글씨 항목을 모두 보여 줌 */
.jutip-header .wp-block-navigation__responsive-container.is-menu-open .has-child { border-bottom: 0; padding-top: 0.9rem; align-items: stretch !important; }
.jutip-header .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content { min-height: 32px; font-size: 1rem; font-weight: 700; color: var(--j-primary); }
.jutip-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle { display: none; }
.jutip-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; gap: 0; border: 0 !important; border-top: 1px solid var(--j-line) !important; box-shadow: none; background: none !important; }
.jutip-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { min-height: 60px; padding: 0 0.25rem; font-size: 1.4rem; }
.jutip-header .wp-block-navigation__responsive-container-close { top: 0; right: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--j-band); color: var(--j-text); }
.admin-bar .jutip-header .wp-block-navigation__responsive-container.is-menu-open { top: 46px; }
@media (min-width: 783px) { .admin-bar .jutip-header .wp-block-navigation__responsive-container.is-menu-open { top: 32px; } }

@media (max-width: 599px) {
	:root { --j-header-h: 60px; }
	.jutip-header .jutip-brand { font-size: 1.3rem; }
	.jutip-header .wp-block-navigation__responsive-container-open { padding: 0 0.7rem; }
}

/* ---------------------------------------------------------------- 본문 틀 */
.jutip-main { padding-bottom: clamp(3rem, 8vw, 6rem); }
.jutip-main.is-front { padding-bottom: 0; }
.jutip-main > .wp-block-post-content > :first-child { margin-top: 0; }

/* 페이지 머리 (제목 띠) */
.jutip-page-head { border-bottom: 1px solid var(--j-line); background: var(--j-page-head-bg, var(--j-band)); color: var(--j-page-head-text, var(--j-text)); padding-top: clamp(1.75rem, 5vw, 3.5rem); padding-bottom: clamp(1.5rem, 4vw, 2.75rem); margin-bottom: clamp(1.75rem, 4vw, 3rem) !important; }
.jutip-page-head > * { margin-top: 0; margin-bottom: 0; }
.jutip-page-head .wp-block-post-title, .jutip-page-head h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.25; margin-top: 0.35rem; color: inherit; }
.jutip-page-head .jutip-kicker, .jutip-page-head .jutip-kicker a { font-size: 0.95rem; font-weight: 700; color: var(--j-primary); text-decoration: none; }
.jutip-page-head .jutip-page-meta { margin-top: 0.6rem; color: var(--j-muted); font-size: 1rem; }

.jutip-main .wp-block-post-content { font-size: 1.125rem; line-height: 1.85; }
.jutip-main .wp-block-post-content img, .jutip-main .wp-block-post-featured-image img { border-radius: var(--j-radius-sm); }
.jutip-main .wp-block-post-content > h2 { margin-top: 2.25em; }
.jutip-back { margin-top: 2.5rem; }
.jutip-post-nav { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--j-line); font-size: 1.05rem; }

/* 글 목록 (교회소식, 기도제목, 검색) */
.jutip-archive-list .wp-block-post-template { border-top: 1px solid var(--j-line); }
.jutip-archive-list .wp-block-post { padding: 1.25rem 0.25rem; border-bottom: 1px solid var(--j-line); margin: 0; }
.jutip-archive-list .wp-block-post > * { margin-top: 0; margin-bottom: 0; }
.jutip-archive-list .jutip-archive-date { font-size: 0.95rem; font-weight: 700; color: var(--j-primary); }
.jutip-archive-list .wp-block-post-title { font-size: 1.35rem; margin: 0.2rem 0 0.35rem; }
.jutip-archive-list .wp-block-post-title a { text-decoration: none; color: var(--j-text); }
.jutip-archive-list .wp-block-post-title a:hover { color: var(--j-primary); }
.jutip-archive-list .wp-block-post-excerpt__excerpt { color: var(--j-muted); font-size: 1.02rem; margin: 0; }
.jutip-archive-list .wp-block-post-excerpt__more-text { margin-top: 0.4rem; }
.wp-block-query-pagination { margin-top: 2rem; gap: 0.4rem; }
.wp-block-query-pagination .page-numbers, .wp-block-query-pagination-next, .wp-block-query-pagination-previous { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 0.9em; border-radius: var(--j-radius-sm); background: var(--j-surface); border: 1px solid var(--j-line); font-weight: 700; text-decoration: none; }
.wp-block-query-pagination .page-numbers.current { background: var(--j-primary); border-color: var(--j-primary); color: #fff; }
.wp-block-search__inside-wrapper { gap: 0.5rem; }
.wp-block-search__button { min-height: 52px; border-radius: var(--j-radius-sm) !important; }
.wp-block-search__input { font-size: 1.1rem; padding: 0.6em 0.8em; border-radius: var(--j-radius-sm); border: 2px solid var(--j-line-strong, #d6cec6); }

/* 홈 맨 위: 아래 카드들과 같은 폭의 둥근 카드 */
.jutip-main.is-front > .wp-block-post-content > .jutip-hero { max-width: var(--j-wide); margin: clamp(0.75rem, 2vw, 1.5rem) auto 0 !important; border-radius: clamp(20px, 3vw, 32px); }
/* 넓지 않은 화면: 본문 칸이 이미 좌우 여백(gutter)을 주므로 아래 카드들과 같은 선에 맞춤 */
@media (max-width: 1263px) { .jutip-main.is-front > .wp-block-post-content > .jutip-hero { margin-left: 0 !important; margin-right: 0 !important; } }

/* 홈 화면 띠: 페이지 편집기에서 "그룹"에 jutip-band 를 붙이면 위아래 여백, is-tinted 면 바탕색 */
.jutip-band { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); margin-top: 0 !important; margin-bottom: 0 !important; }
.jutip-band.is-tinted { background: var(--j-band); --j-surface: var(--j-surface-on-band, #fff); }
.jutip-band.is-quick { padding-top: clamp(1.5rem, 4vw, 2.5rem); padding-bottom: 0; }
.jutip-band > :last-child { margin-bottom: 0; }
.jutip-band .wp-block-columns { gap: clamp(1.5rem, 4vw, 3rem); margin-bottom: 0; }
.jutip-band .wp-block-column > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- 바닥글 */
.jutip-footer { background: var(--j-footer-bg); color: var(--j-footer-text); }
.jutip-site-footer { max-width: calc(var(--j-wide) + var(--j-gutter) * 2); margin: 0 auto; padding: 2.25rem var(--j-gutter) 1.75rem; font-size: 0.95rem; line-height: 1.6; }
.jutip-sf-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem 2rem; flex-wrap: wrap; }
.jutip-sf-name { display: inline-block; font-family: var(--j-font-head); font-size: 1.2rem; font-weight: var(--j-head-weight); letter-spacing: -0.02em; color: var(--j-footer-text); text-decoration: none; }
.jutip-sf-info { display: flex; flex-wrap: wrap; gap: 0.15rem 1.25rem; margin-top: 0.5rem; font-style: normal; color: var(--j-footer-muted); }
.jutip-sf-info a { color: inherit; text-decoration: none; }
.jutip-sf-info a:hover { color: var(--j-footer-text); text-decoration: underline; }
.jutip-sf-bottom { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--j-footer-line); color: var(--j-footer-muted); font-size: 0.9rem; }
.jutip-sf-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.jutip-sf-links a { color: inherit; text-decoration: none; }
.jutip-sf-links a:hover { color: var(--j-footer-text); text-decoration: underline; }
/* 개인정보처리방침은 다른 링크와 구별되게 굵게 (개인정보 보호법 시행령: 쉽게 확인할 수 있게) */
.jutip-sf-links a.is-privacy { font-weight: 800; color: var(--j-footer-text); }
.jutip-sf-copy { margin: 0; }
.jutip-sf-pastors { margin: 0.35rem 0 0; color: var(--j-footer-muted); }
.jutip-sf-pastors strong { color: var(--j-footer-text); font-weight: 600; }
.jutip-footer .jutip-social { margin: 0; }
.jutip-footer .jutip-social.is-list { min-width: 0; }
.jutip-footer .jutip-social.is-list .jutip-social-handle { color: var(--j-footer-muted); }

@media (max-width: 767px) {
	.jutip-site-footer { padding-top: 1.75rem; padding-bottom: calc(1.5rem + 68px + env(safe-area-inset-bottom)); }
	.jutip-sf-info { flex-direction: column; }
	.jutip-sf-bottom { flex-direction: column; align-items: flex-start; }
}

/* 휴대폰 아래 고정 버튼 */
.jutip-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--j-bar-bg, var(--j-surface)); border-top: 1px solid var(--j-line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 20px rgba(30, 20, 10, 0.08); margin: 0 !important; }
/* 전체 화면 메뉴를 열면(워드프레스가 html 에 has-modal-open 을 붙임) 아래 고정 버튼은 숨김 */
html.has-modal-open .jutip-mobile-bar { display: none; }
.jutip-mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; color: var(--j-bar-text, var(--j-text)); text-decoration: none; font-size: 0.8rem; font-weight: 700; }
.jutip-mobile-bar a .jutip-icon { color: var(--j-primary); }
.jutip-mobile-bar a:active { background: var(--j-soft); }
@media (min-width: 768px) { .jutip-mobile-bar { display: none; } }
.has-modal-open .jutip-mobile-bar { display: none; }

/* ---------------------------------------------------------------- 접근성 */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--j-focus, var(--j-primary)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

@media print {
	.wp-site-blocks > header, .jutip-footer, .jutip-mobile-bar, .jutip-breadcrumb { display: none !important; }
	.jutip-page-head { background: none; padding: 0; }
}