@charset "utf-8";

/* 색상 변수 */
.churchro {
	--navy: #1E3A5F;
	--navy-2: #1A5276;
	--teal: #0F766E;
	--teal-2: #0D9488;
	--teal-3: #5EEAD4;

	--ink: #0F172A;
	--body: #475569;
	--sub: #94A3B8;
	--mute: #CBD5E1;
	--line: #E2E8F0;

	--page: #FFFFFF;
	--card: #FFFFFF;
	--mint: #F0FDFA;
	--snow: #F8FAFC;
	--cream: #FFFBEB;

	--red: #DC2626;
	--violet: #8B5CF6;
	--blue: #3B82F6;
	--orange: #F59E0B;
}

/* 다크모드 색상 */
.churchro.dark-mode {
	--teal: #2DD4BF;
	--teal-2: #14B8A6;

	--ink: #F1F5F9;
	--body: #CBD5E1;
	--sub: #94A3B8;
	--mute: #64748B;
	--line: #2A3A4F;

	--page: #0B1220;
	--card: #16202E;
	--mint: #16242B;
	--snow: #182230;
	--cream: #20221A;
}

/* 앱 레이아웃 */
.app {position:relative; width:720px; max-width:100%; min-height:100vh; margin:0 auto; background:var(--page); overflow:hidden;}
.churchro, .churchro * {font-family:'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; letter-spacing:0; line-height:normal;}

/* 토스트 알림 */
.app-toast {position:fixed; left:50%; bottom:150px; transform:translateX(-50%) translateY(20px); max-width:84%; padding:18px 34px; background:rgba(15,23,42,0.92); color:#fff; font-size:24px; font-weight:600; border-radius:44px; z-index:9999; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; box-shadow:0 10px 30px rgba(0,0,0,0.35); text-align:center;}
.app-toast.show {opacity:1; transform:translateX(-50%) translateY(0);}
.churchro.dark-mode .app-toast {background:rgba(241,245,249,0.95); color:#0F172A;}

/* 클릭(탭) 가능 요소 피드백 */
.churchro a[href], .churchro button {transition:transform .08s ease, box-shadow .15s ease, background-color .15s ease, opacity .12s ease;}
.churchro a[href]:active, .churchro button:active {transform:scale(0.98);}
@media (hover:hover) and (pointer:fine) {
	.churchro a[href]:hover, .churchro button:hover {opacity:0.9;}
}
body.churchro {background:#e9edf1;}
.dark-mode body.churchro {background:#05080f;}

/* 헤더 */
.app-header {position:sticky; top:0; z-index:30; background:var(--navy);}
.app-header .header-top {display:flex; align-items:center; gap:10px; padding:29.538px 29.538px 25.846px;}
.app-header .header-logo a {display:block;}
.app-header .header-logo img {width:180px; height:auto;}
.app-header .header-tools {display:flex; align-items:center; justify-content:flex-end; gap:7.385px; flex:1;}
.app-header .tool-btn {position:relative; display:flex; align-items:center; justify-content:center; width:66.462px; height:66.462px; background:rgba(255,255,255,0.12); border-radius:18.462px;}
.app-header .tool-btn img {width:36.923px; height:36.923px;}
.app-header .tool-btn .tool-badge {position:absolute; top:7.385px; right:7.385px; display:flex; align-items:center; justify-content:center; min-width:29.538px; height:29.538px; padding:0 5px; background:var(--red); border:1.846px solid var(--navy); border-radius:50px; color:#fff; font-size:16.615px; font-weight:700;}

/* 검색 */
.app-search {padding:0 29.538px 29.538px; background:var(--navy);}
.app-search .search-box {display:flex; align-items:center; gap:14.769px; padding:20.308px 27.692px; background:rgba(255,255,255,0.13); border:1.846px solid rgba(255,255,255,0.2); border-radius:22.154px;}
.app-search .search-box img {width:29.538px; height:29.538px;}
.app-search .search-box input {width:100%; background:none; border:none; color:#fff; font-size:24px; font-weight:400;}
.app-search .search-box input::placeholder {color:rgba(255,255,255,0.5);}

/* 본문 */
.app-body {background:var(--page); padding-bottom:135px;}

/* 히어로 (오늘의 말씀) */
.hero {position:relative; margin:38.308px 59.077px 0; border-radius:29.538px; background:linear-gradient(134.95deg, #1E3A5F 0%, #0D9488 100%); box-shadow:0 3.692px 25.846px rgba(15,23,42,0.09); overflow:hidden;}
.hero .hero-deco {position:absolute; top:-80px; right:-60px; width:258.462px; height:258.462px; border-radius:50%; background:rgba(255,255,255,0.06);}
.hero .hero-deco2 {position:absolute; bottom:-90px; left:-50px; width:184.615px; height:184.615px; border-radius:50%; background:rgba(255,255,255,0.04);}
.hero .hero-icon {position:absolute; top:50%; right:36.923px; transform:translateY(-50%); width:110.769px; height:147.692px; opacity:0.18;}
.hero .swiper {position:relative; z-index:1;}
.hero .hero-slide {padding:36.923px; min-height:258.462px;}
.hero .hero-date {display:inline-flex; align-items:center; gap:7.385px; padding:5.538px 18.462px; background:rgba(255,255,255,0.15); border-radius:36.923px; color:rgba(255,255,255,0.9); font-size:20.308px; font-weight:600;}
.hero .hero-date img {width:18.462px; height:18.462px;}
.hero .hero-title {margin-top:7.385px; color:#fff; font-size:33.231px; font-weight:800; line-height:44.862px;}
.hero .hero-desc {margin-top:7.385px; color:rgba(255,255,255,0.7); font-size:22.154px; font-weight:400; line-height:33.231px;}
.hero .hero-pager {position:absolute; left:0; bottom:0; z-index:1; display:flex; align-items:center; justify-content:center; gap:9.231px; width:100%; padding:18.462px 36.923px 25.846px;}
.hero .hero-pager .swiper-pagination-bullet {width:11.077px; height:11.077px; margin:0 !important; background:rgba(255,255,255,0.35); border-radius:50px; opacity:1; transition:width .3s;}
.hero .hero-pager .swiper-pagination-bullet-active {width:33.231px; background:#fff; border-radius:5.538px;}

/* 카드 공통 */
.card {background:var(--card); border:1.846px solid var(--line); border-radius:29.538px; box-shadow:0 1.846px 5.538px rgba(15,23,42,0.06);}

/* 성경읽기 */
.bible {margin:0 29.538px; margin-top:25.308px; padding:27.692px 31.385px; display:flex; flex-direction:column; gap:18.462px;}
.bible .bible-head {display:flex; align-items:center; justify-content:space-between;}
.bible .bible-head .bible-title {display:flex; align-items:center; gap:14px;}
.bible .bible-icon {display:flex; align-items:center; justify-content:center; width:51.692px; height:51.692px; background:#CCFBF1; border-radius:14.769px;}
.dark-mode .bible .bible-icon {background:rgba(45,212,191,0.16);}
.bible .bible-icon img {width:27.692px; height:27.692px;}
.bible .bible-head h3 {font-size:25.846px; font-weight:700; color:var(--ink);}
.bible .bible-go {display:flex; align-items:center; gap:7.385px; padding:11.077px 24px; background:var(--mint); border:1.846px solid #CCFBF1; border-radius:14.769px; color:var(--teal); font-size:22.154px; font-weight:600;}
.dark-mode .bible .bible-go {border-color:rgba(45,212,191,0.25);}
.bible .bible-go img {width:22.154px; height:22.154px;}
.bible .bible-today {display:flex; align-items:center; gap:14.769px; padding:14.769px 22.154px; background:var(--mint); border-radius:14.769px;}
.bible .bible-today img {width:25.846px; height:25.846px;}
.bible .bible-today span {color:var(--teal); font-size:22.154px; font-weight:600;}
.bible .bible-progress .progress-info {display:flex; align-items:center; justify-content:space-between; margin-bottom:11.077px;}
.bible .bible-progress .progress-info .day {color:var(--sub); font-size:20.308px; font-weight:400;}
.bible .bible-progress .progress-info .rate {color:var(--teal); font-size:20.308px; font-weight:700;}
.bible .bible-progress .progress-bar {height:11.077px; background:var(--line); border-radius:11.077px; overflow:hidden;}
.bible .bible-progress .progress-bar i {display:block; height:100%; background:linear-gradient(to right, #0D9488, #5EEAD4); border-radius:11.077px;}

/* 섹션 공통 */
.section {padding:25.846px 29.538px 0;}
.section .section-head {display:flex; align-items:center; justify-content:space-between; margin-bottom:18.462px;}
.section .section-head h2 {font-size:27.692px; font-weight:700; color:var(--ink);}
.section .section-more {display:flex; align-items:center; gap:4px; color:var(--sub); font-size:22.154px; font-weight:400;}
.section .section-more img {width:24px; height:24px;}
.dark-mode .section .section-more img {filter:brightness(1.4);}
.section.notice {padding-top:49.231px;}
.section.latest {padding-top:59.077px;}
.section.popular {padding-top:41.077px;}

/* 빠른 메뉴 */
.quick-menu .quick-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:18.462px;}
.quick-menu .quick-item {display:flex; flex-direction:column; align-items:center; gap:11.077px;}
.quick-menu .quick-ico {display:flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:29.538px; box-shadow:0 1.846px 5.538px rgba(15,23,42,0.06);}
.quick-menu .quick-ico img {width:48px; height:48px;}
.quick-menu .quick-item span {color:var(--body); font-size:20.308px; font-weight:500; line-height:26.4px; text-align:center;}

/* 아이콘 배경 팔레트 */
.tint-mint {background:#F0FDFA;}
.tint-cream {background:#FFFBEB;}
.tint-snow {background:#F8FAFC;}
.tint-indigo {background:#EEF2FF;}
.tint-blue {background:#EFF6FF;}
.tint-green {background:#F0FDF4;}
.tint-violet {background:#F5F3FF;}
.tint-pink {background:#FFF0F4;}
.tint-orange {background:#FFF7ED;}
.tint-slate {background:#F1F5F9;}
.dark-mode .tint-mint, .dark-mode .tint-cream, .dark-mode .tint-snow, .dark-mode .tint-indigo,
.dark-mode .tint-blue, .dark-mode .tint-green, .dark-mode .tint-violet, .dark-mode .tint-pink,
.dark-mode .tint-orange, .dark-mode .tint-slate {background:rgba(255,255,255,0.06);}

/* 롤링 배너 */
.rolling {position:relative; margin:55.385px 29.538px 0; padding:13px 0;}
.rolling .rolling-track {display:flex; align-items:center; justify-content:center; gap:16px; padding:0 24px;}
.rolling .rolling-track img {height:48px; width:auto; border-radius:8px;}
.rolling .rolling-prev, .rolling .rolling-next {position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:24px; height:24px; cursor:pointer;}
.rolling .rolling-prev {left:0;}
.rolling .rolling-next {right:0;}

/* 캠프 배너 */
.camp {position:relative; margin:49.231px 61px 0; padding:25.846px 29.538px; border-radius:29.538px; background:linear-gradient(136.08deg, #1E3A5F 0%, #1A5276 100%); box-shadow:0 3.692px 25.846px rgba(15,23,42,0.09); display:flex; align-items:center; justify-content:space-between; gap:20px; overflow:hidden;}
.camp .camp-deco {position:absolute; top:-70px; right:-50px; width:184.615px; height:184.615px; border-radius:50%; background:rgba(255,255,255,0.05);}
.camp .camp-info {position:relative; z-index:1; display:flex; flex-direction:column; gap:5.538px; align-items:flex-start;}
.camp .camp-info .camp-label {color:rgba(255,255,255,0.6); font-size:18.462px; font-weight:400;}
.camp .camp-info .camp-title {color:#fff; font-size:25.846px; font-weight:700;}
.camp .camp-deadline {display:inline-flex; align-items:center; gap:7.385px; margin-top:3px; padding:5.538px 14.769px 3.692px; background:rgba(220,38,38,0.25); border-radius:36.923px; color:#FCA5A5; font-size:20.308px; font-weight:600;}
.camp .camp-deadline img {width:20.308px; height:20.308px;}
.camp .camp-btn {position:relative; z-index:1; flex:none; padding:16.615px 25.846px; background:var(--teal-2); border-radius:18.462px; color:#fff; font-size:22.154px; font-weight:700;}

/* 게시글 카드(공지/최신/인기 공통) */
.post-list {overflow:hidden;}
.post-list.card {box-shadow:0 1.846px 11.077px rgba(15,23,42,0.06);}
.post-item {display:flex; align-items:center; gap:18.462px; padding:20.308px 25.846px 22.154px; border-bottom:1.846px solid var(--line);}
.post-item:last-child {border-bottom:none; padding-bottom:20.308px;}
.post-item .post-main {flex:1; min-width:0;}
.post-item .post-title {color:var(--ink); font-size:24px; font-weight:400; line-height:32.4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* 공지사항 */
.notice .post-dot {flex:none; width:14.769px; height:14.769px; border-radius:50%; background:var(--mute);}
.notice .post-dot.on {background:var(--red);}
.notice .post-item .post-title {white-space:normal;}
.notice .post-meta {display:flex; align-items:center; gap:9px; margin-top:8px;}
.notice .post-time {color:var(--sub); font-size:20.308px; font-weight:400;}
.tag {display:inline-flex; align-items:center; padding:3.692px 12.923px; border-radius:7.385px; font-size:18.462px; font-weight:600;}
.tag.tag-important {background:#E8F4F8; color:#B91C1C;}
.tag.tag-notice {background:#F0FDFA; color:#1D4ED8;}
.tag.tag-normal {background:#F8FAFC; border:1.846px solid var(--line); color:var(--sub);}
.dark-mode .tag.tag-important {background:rgba(220,38,38,0.18);}
.dark-mode .tag.tag-notice {background:rgba(29,78,216,0.18);}
.dark-mode .tag.tag-normal {background:rgba(255,255,255,0.05);}
.tag-n {display:inline-flex; align-items:center; justify-content:center; width:31px; height:31px; background:var(--red); border-radius:7.385px; color:#fff; font-size:16.615px; font-weight:700;}

/* 빠른 액션 */
.quick-action {padding-top:41.077px;}
.quick-action .action-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:14.769px;}
.quick-action .action-item {display:flex; flex-direction:column; align-items:center; gap:9.231px; padding:24px 10px; background:var(--card); border:1.846px solid var(--line); border-radius:18.462px; box-shadow:0 1.846px 5.538px rgba(15,23,42,0.06);}
.quick-action .action-ico {display:flex; align-items:center; justify-content:center; width:62.769px; height:62.769px; background:var(--mint); border-radius:18.462px;}
.quick-action .action-ico img {width:33.231px; height:33.231px;}
.quick-action .action-item span {color:var(--body); font-size:20.308px; font-weight:700;}

/* 최신글 */
.post-item .post-cate {display:block; color:var(--sub); font-size:18.462px; font-weight:700; margin-bottom:3.692px;}
.post-item .post-head {margin-bottom:6px;}
.post-item .post-head .post-title {display:block; width:100%; white-space:normal; overflow:visible; text-overflow:clip;}
.latest .post-item {align-items:flex-start; gap:14.769px;}
.latest .post-bar {flex:none; width:5.538px; height:66.462px; border-radius:3.692px;}
.latest .post-meta {display:flex; align-items:center; gap:14px; margin-top:6px;}
.latest .post-meta .meta {display:flex; align-items:center; gap:5px; color:var(--sub); font-size:18.462px;}
.latest .post-meta .meta img {width:20.308px; height:20.308px;}
.latest .post-meta .post-time {color:var(--sub); font-size:18.462px;}

/* 배너 이미지 */
.promo {margin:41.077px 42px 0;}
.promo img {display:block; width:100%; height:auto; border-radius:25px;}

/* 인기글 */
.popular .post-rank {flex:none; min-width:33.231px; padding:0 8.308px; text-align:center; font-size:27.692px; font-weight:800; color:var(--mute);}
.popular .post-rank.top {color:var(--teal);}
.popular .post-meta {display:flex; align-items:center; gap:14px; margin-top:6px;}
.popular .post-meta .meta {display:flex; align-items:center; gap:5px; color:var(--sub); font-size:18.462px;}
.popular .post-meta .meta img {width:18.462px; height:18.462px;}
.popular .post-meta .post-time {color:var(--sub); font-size:18.462px;}

/* 푸터 (하단 탭바) */
.app-footer {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:40; width:720px; max-width:100%; background:#F5F6F7; border-radius:5px 5px 0 0; box-shadow:0 -2px 12px rgba(15,23,42,0.06);}
.dark-mode .app-footer {background:#0F1826;}
.app-footer .tab-nav {display:flex; align-items:flex-end; justify-content:center; gap:66px; height:111px;}
.app-footer .tab-item {display:flex; flex-direction:column; align-items:center; gap:6px; padding-bottom:14px;}
.app-footer .tab-item img {width:42.24px; height:42.24px;}
.app-footer .tab-item span {color:var(--sub); font-size:19.2px; font-weight:400;}
.app-footer .tab-item.on span {color:var(--teal); font-weight:600;}
.app-footer .tab-fab {margin-bottom:6px;}
.app-footer .tab-fab .fab {display:flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg, #0D9488 0%, #1E3A5F 100%); box-shadow:0 7.68px 13.44px rgba(13,148,136,0.4); transform:translateY(-18px);}
.app-footer .tab-fab .fab img {width:48px; height:48px;}

/* 사이드메뉴 */
.side-menu {position:fixed; inset:0; z-index:100; visibility:hidden; pointer-events:none;}
.side-menu.active {visibility:visible; pointer-events:auto;}
.side-menu .side-dim {position:absolute; inset:0; background:rgba(0,0,0,0.46); opacity:0; transition:opacity .3s;}
.side-menu.active .side-dim {opacity:1;}
.side-menu .side-panel {position:absolute; top:0; right:0; width:86%; max-width:619px; height:100%; background:var(--card); border-radius:38.4px 0 0 38.4px; box-shadow:-7.68px 0 61.44px rgba(0,0,0,0.22); transform:translateX(100%); transition:transform .35s ease; display:flex; flex-direction:column; overflow:hidden;}
.side-menu.active .side-panel {transform:translateX(0);}

.side-panel .side-head {display:flex; align-items:center; justify-content:space-between; padding:26.88px 30.72px 0;}
.side-panel .side-head h2 {font-size:26.88px; font-weight:700; color:var(--ink);}
.side-panel .side-close {display:flex; align-items:center; justify-content:center; width:61.44px; height:61.44px; background:var(--snow); border:1.92px solid var(--line); border-radius:50%;}
.side-panel .side-close img {width:28.8px; height:28.8px;}
.dark-mode .side-panel .side-close img {filter:invert(1) brightness(1.6);}

/* 프로필 */
.side-profile {display:flex; flex-direction:column; gap:21.12px; padding:23.04px 30.72px 28.8px; border-bottom:1.92px solid var(--line);}
.side-profile .profile-row {display:flex; align-items:center; gap:21.12px;}
.side-profile .profile-avatar {display:flex; align-items:center; justify-content:center; flex:none; width:92.16px; height:92.16px; border-radius:50%; background:linear-gradient(135deg, #1E3A5F 0%, #0F766E 100%); box-shadow:0 3.84px 9.6px rgba(30,58,95,0.3); color:#fff; font-size:34.56px; font-weight:800; overflow:hidden;}
.side-profile .profile-avatar img {width:100%; height:100%; border-radius:50%; object-fit:cover;}
.side-profile .profile-name {font-size:26.88px; font-weight:800; color:var(--ink);}
.side-profile .profile-church {display:flex; align-items:center; gap:5.76px; margin-top:5.76px;}
.side-profile .profile-church img {width:21.12px; height:21.12px;}
.side-profile .profile-church {color:var(--body); font-size:21.12px; font-weight:400;}
.side-profile .profile-church span {color:var(--body);}
.side-profile .profile-tabs {display:flex; gap:11.52px;}
.side-profile .profile-tab {display:flex; align-items:center; gap:5.76px; padding:9.6px 21.12px; border-radius:38.4px; border:1.92px solid var(--line); background:var(--snow); color:var(--body); font-size:21.12px; font-weight:600;}
.side-profile .profile-tab img {width:21.12px; height:21.12px;}
.side-profile .profile-tab:not(.on) img {filter:brightness(0); opacity:0.55;}
.dark-mode .side-profile .profile-tab:not(.on) img {filter:brightness(0) invert(1); opacity:0.55;}
.side-profile .profile-tab.on {background:var(--navy); border-color:var(--navy); color:#fff;}
.side-profile .profile-tab.on img {filter:brightness(0) invert(1); opacity:1;}
.dark-mode .side-profile .profile-tab.on {background:var(--teal); border-color:var(--teal);}

/* 메뉴 스크롤 영역 */
.side-body {flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.side-group {padding:0 0 24.96px;}
.side-group + .side-group {border-top:1.92px solid var(--line);}
.side-group .group-head {display:flex; align-items:center; justify-content:space-between; width:100%; padding:30.72px 30.72px 7.68px; background:none; border:none; color:var(--sub); font-size:19.2px; font-weight:700; letter-spacing:0.96px; text-align:left; cursor:pointer;}
.side-group:first-child .group-head {padding-top:23.04px;}
.side-group .group-chevron {width:19.2px; height:19.2px; opacity:0.6; transition:transform .2s;}
.side-group .group-chevron.open {transform:rotate(180deg);}
.dark-mode .side-group .group-chevron {filter:invert(1) brightness(1.6);}

.menu-item {display:flex; align-items:center; gap:21.12px; padding:17.28px 30.72px;}
.menu-item .menu-ico {display:flex; align-items:center; justify-content:center; flex:none; width:65.28px; height:65.28px; border-radius:17.28px;}
.menu-item .menu-ico img {width:32.64px; height:32.64px;}
.menu-item .menu-text {flex:1; min-width:0; display:flex; flex-direction:column;}
.menu-item .menu-label {color:var(--ink); font-size:23.04px; font-weight:600;}
.menu-item .menu-desc {margin-top:1.92px; color:var(--sub); font-size:19.2px; font-weight:400;}
.menu-item .menu-badge {display:flex; align-items:center; justify-content:center; min-width:38.4px; height:34px; padding:1.92px 13.44px; background:var(--red); border-radius:38.4px; color:#fff; font-size:19.2px; font-weight:700;}

/* 토글 스위치 */
.switch {position:relative; flex:none; width:76.8px; height:42.24px; border-radius:21.12px; background:var(--mute); transition:background .25s; cursor:pointer;}
.switch::after {content:""; position:absolute; top:3.84px; left:3.84px; width:34.56px; height:34.56px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,0.2); transition:transform .25s;}
.switch.on {background:var(--teal);}
.switch.on::after {transform:translateX(34.56px);}

/* 로그아웃 / 푸터 */
.side-foot {padding:24.96px 30.72px 38.4px;}
.side-profile .profile-guest {display:flex; flex-direction:column; gap:17.28px;}
.side-profile .guest-msg {font-size:24.96px; font-weight:700; color:var(--ink); line-height:1.45;}
.side-login {display:flex; align-items:center; justify-content:center; gap:13.44px; width:100%; padding:21.12px; background:var(--navy); border:1.92px solid var(--navy); border-radius:19.2px; color:#fff; font-size:24.96px; font-weight:700;}
.dark-mode .side-login {background:var(--teal); border-color:var(--teal);}
.side-logout {display:flex; align-items:center; justify-content:center; gap:13.44px; width:100%; padding:21.12px; background:#FEF2F2; border:1.92px solid #FECACA; border-radius:19.2px; color:var(--red); font-size:24.96px; font-weight:700;}
.side-logout img {width:28.8px; height:28.8px;}
.dark-mode .side-logout {background:rgba(220,38,38,0.12); border-color:rgba(220,38,38,0.35);}

/* 공통 확인 팝업(ConfirmModal) — window.confirm 대체. main.css 는 항상 로드되어 전역 사용 가능. */
.app-confirm {position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:38px; background:rgba(0,0,0,.5);}
.app-confirm-card {width:100%; max-width:538px; overflow:hidden; border-radius:35px; background:var(--card); box-shadow:0 15px 77px rgba(0,0,0,.2);}
.app-confirm-head {display:flex; flex-direction:column; align-items:center; gap:8px; padding:40px 35px 28px;}
.app-confirm-head h3 {font-size:31px; font-weight:800; color:var(--ink); text-align:center;}
.app-confirm-head p {font-size:23px; color:var(--body); text-align:center; line-height:1.5;}
.app-confirm-foot {display:flex; flex-direction:column; gap:15px; padding:0 27px 35px;}
.app-confirm-btn {display:flex; align-items:center; justify-content:center; padding:25px 0; border-radius:19px; font-size:27px; font-weight:700;}
.app-confirm-btn.primary {background:#0D9488; color:#fff;}
.app-confirm-btn.ghost {border:1.92px solid var(--line); color:var(--body);}
.side-version {padding:19.2px 0 0; text-align:center; color:var(--sub); font-size:19.2px; font-weight:400;}

/* 스크롤바 숨김 */
.side-body::-webkit-scrollbar {width:0; height:0;}

/* 서브 헤더 (뒤로가기 + 제목) */
.sub-header {position:sticky; top:0; z-index:30; background:var(--navy);}
.sub-header .sub-bar {display:flex; align-items:center; gap:14.769px; padding:22.154px 29.538px;}
.sub-header .sub-back {display:flex; align-items:center; justify-content:center; flex:none; width:66.462px; height:66.462px; border-radius:18.462px;}
.sub-header .sub-back img {width:36.923px; height:36.923px;}
.sub-header .sub-title {flex:1; min-width:0; color:#fff; font-size:29.538px; font-weight:700;}
.sub-header .sub-action {display:flex; align-items:center; color:rgba(255,255,255,0.7); font-size:22.154px; font-weight:600;}
.sub-header .sub-action img {width:36.923px; height:36.923px;}

/* 페이지 탭 */
.page-tabs {display:flex; align-items:flex-end; padding:0 29.538px; background:var(--navy); border-bottom:3.692px solid rgba(255,255,255,0.15);}
.page-tabs .tab {position:relative; display:flex; align-items:flex-end; justify-content:center; gap:7.385px; padding:20.308px 25.846px; color:rgba(255,255,255,0.5); font-size:24px; font-weight:500;}
.page-tabs .tab.on {color:#fff; font-weight:700;}
.page-tabs .tab.on::after {content:""; position:absolute; left:0; right:0; bottom:-3.692px; height:3.692px; background:var(--teal); border-radius:3.692px 3.692px 0 0;}
.page-tabs .tab .tab-badge {display:inline-flex; align-items:center; justify-content:center; padding:1.846px 11.077px; background:var(--red); border-radius:18.462px; color:#fff; font-size:16.615px; font-weight:700;}

/* 알림 리스트 */
.noti-list {background:var(--snow); min-height:calc(100vh - 220px);}
.noti-group {padding:18.462px 29.538px 11.077px; color:var(--sub); font-size:20.308px; font-weight:700; letter-spacing:0.923px;}
.noti-item {position:relative; display:flex; gap:22.154px; align-items:flex-start; padding:24px 29.538px 25.846px; border-bottom:1.846px solid var(--line); background:var(--card);}
.noti-item.unread {background:var(--mint);}
.noti-ico {display:flex; align-items:center; justify-content:center; flex:none; width:73.846px; height:73.846px; border-radius:36.923px;}
.noti-ico img {width:36.923px; height:36.923px;}
.noti-body {flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start;}
.noti-title {color:var(--ink); font-size:24px; font-weight:600; line-height:33.6px;}
.noti-title .who {color:var(--teal); font-size:inherit; font-weight:inherit; line-height:inherit;}
.noti-text {margin-top:5px; color:var(--body); font-size:22.154px; font-weight:400; line-height:32.123px;}
.noti-time {margin-top:8px; color:var(--sub); font-size:20.308px; font-weight:400;}
.noti-chip {display:inline-flex; align-items:center; gap:7.385px; margin-top:14.769px; padding:7.385px 18.462px; background:var(--mint); border-radius:36.923px; color:var(--teal); font-size:20.308px; font-weight:600;}
.noti-chip img {width:20.308px; height:20.308px;}
.noti-dot {position:absolute; top:29.54px; right:25.85px; width:14.769px; height:14.769px; border-radius:7.385px; background:var(--teal-2);}

/* 서브 헤더 - 흰 배경 변형 (리스트) */
.sub-header.light {background:var(--card);}
.sub-header.light .sub-bar {padding:22.154px 29.538px 24px; border-bottom:1.846px solid var(--line);}
.sub-header.light .sub-title {color:var(--ink);}
.sub-header.light .sub-back {width:66.462px; height:66.462px;}
.dark-mode .sub-header.light img {filter:invert(1) brightness(2);}

/* 세그먼트 탭 */
.seg-tabs {background:var(--card); padding:20.308px 51.692px; border-bottom:1.846px solid var(--line);}
.seg-tabs .seg {display:flex; padding:7.384px; background:var(--snow); border:1.846px solid var(--line); border-radius:18.462px;}
.seg-tabs .seg .seg-tab {flex:1; padding:12.923px; border-radius:14.769px; color:var(--sub); font-size:22.154px; font-weight:500; text-align:center;}
.seg-tabs .seg .seg-tab.on {background:var(--card); color:var(--teal); font-weight:600; box-shadow:0 1.846px 5.538px rgba(15,23,42,0.08);}
.dark-mode .seg-tabs .seg .seg-tab.on {background:#27374d;}

/* 게시글 피드 (인기글/최신글) */
.feed {background:var(--snow); min-height:calc(100vh - 320px); padding:14.769px; display:flex; flex-direction:column; gap:14.769px;}
.feed-card {position:relative; background:var(--card); border:1.846px solid var(--line); border-radius:18.462px; box-shadow:0 1.846px 11.077px rgba(15,23,42,0.06); padding:27.692px; display:flex; flex-direction:column; gap:14.769px;}
.feed-top {display:flex; gap:18.462px;}
.feed-rank {flex:none; padding-right:25.883px; font-size:36.923px; font-weight:800; color:var(--mute); line-height:1;}
.feed-main {flex:1; min-width:0; display:flex; flex-direction:column; gap:3.692px; padding-bottom:7.385px;}
.feed-cate {display:flex; align-items:center; gap:9.231px;}
.feed-cate .dot {flex:none; width:11.077px; height:11.077px; border-radius:5.538px;}
.feed-cate .cate {font-size:20.308px; font-weight:700; color:var(--sub);}
.feed-title {margin-top:4px; font-size:25.846px; font-weight:700; color:var(--ink); line-height:33.6px;}
.feed-snippet {color:var(--body); font-size:22.154px; font-weight:400; line-height:32.123px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.feed-foot {display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:16.615px; border-top:1.846px solid var(--line);}
.feed-author {display:flex; align-items:center; gap:11.077px; min-width:0;}
.feed-avatar {display:flex; align-items:center; justify-content:center; flex:none; width:36.923px; height:36.923px; border-radius:18.462px; color:#fff; font-size:16.615px; font-weight:700;}
.feed-author .name {color:var(--sub); font-size:20.308px; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.feed-stats {display:flex; align-items:center; gap:18.462px; flex:none;}
.feed-stats .stat {display:flex; align-items:center; gap:5.538px; color:var(--sub); font-size:20.308px; font-weight:400;}
.feed-stats .stat img {width:22.154px; height:22.154px;}
.feed-badge {position:absolute; top:18.462px; right:18.462px; display:flex; align-items:center; gap:5.538px; padding:3.692px 14.769px; background:var(--mint); border-radius:36.923px; font-size:18.462px; font-weight:700;}
.feed-badge img {width:20.308px; height:20.308px;}
.feed-badge.hot {color:var(--red);}
.feed-badge.today {color:var(--teal);}

/* 교회찾기 - 헤더 */
.cf-header {position:sticky; top:0; z-index:30;}
.cf-top {display:flex; align-items:center; justify-content:space-between; padding:19.2px 30.72px 23.04px; background:linear-gradient(135deg, #0369A1 0%, #0EA5E9 100%);}
.cf-top h1 {color:#fff; font-size:34.56px; font-weight:700;}
.cf-top .cf-tools {display:flex; gap:11.52px;}
.cf-top .cf-tool {display:flex; align-items:center; justify-content:center; width:69.12px; height:69.12px; background:rgba(255,255,255,0.18); border-radius:19.2px;}
.cf-top .cf-tool img {width:38.4px; height:38.4px;}

/* 교회찾기 - 검색 */
.cf-search {padding:19.2px 26.88px 15.36px; background:var(--card);}
.cf-search-box {display:flex; align-items:center; gap:15.36px; padding:21.12px 28.8px; background:var(--snow); border:1.92px solid var(--line); border-radius:42.24px;}
.cf-search-box > img {flex:none; width:30.72px; height:30.72px;}
.cf-search-box input {flex:1; min-width:0; background:none; border:none; color:var(--ink); font-size:24.96px;}
.cf-search-box input::placeholder {color:var(--sub);}
.cf-search-box .cf-search-btn {flex:none; height:69.12px; padding:0 26.88px; background:#0369A1; border-radius:38.4px; color:#fff; font-size:24.96px; font-weight:700;}

/* 교회찾기 - 필터 드롭다운 */
.cf-filters {display:flex; gap:11.52px; padding:15.36px 26.88px 17.28px; background:var(--card); border-bottom:1.92px solid var(--line);}
.cf-fil {display:flex; align-items:center; gap:9.6px; flex:none; padding:17.28px 24.96px; background:var(--snow); border:1.92px solid var(--line); border-radius:38.4px; color:var(--body); font-size:23.04px;}
.cf-fil img {width:24.96px; height:24.96px; transition:transform .2s;}

/* 드롭다운 메뉴 (필터/정렬 공용) */
.cf-dd {position:relative; flex:none;}
.cf-dd-btn .lbl {font:inherit; color:inherit;}
.cf-dd.open .cf-dd-btn img {transform:rotate(180deg);}
.cf-dd-menu {position:absolute; top:calc(100% + 8px); left:0; z-index:50; min-width:100%; padding:9.6px 0; background:var(--card); border:1.92px solid var(--line); border-radius:19.2px; box-shadow:0 7.68px 30px rgba(15,23,42,0.16); white-space:nowrap; display:none;}
.cf-dd.right .cf-dd-menu {left:auto; right:0;}
.cf-dd.open .cf-dd-menu {display:block;}
.cf-dd-menu li {padding:15.36px 28.8px; color:var(--body); font-size:23.04px; cursor:pointer;}
.cf-dd-menu li.on {color:#0369a1; font-weight:700;}
.dark-mode .cf-dd-menu li.on {color:#38bdf8;}
.cf-dd-menu li:hover {background:var(--snow);}
.cf-fil.on {background:#f0f9ff; border-color:#0ea5e9; color:#0369a1;}
.dark-mode .cf-fil.on {background:rgba(14,165,233,0.16); color:#7dd3fc;}
.cf-fil.my {background:linear-gradient(135deg, #0369A1, #0EA5E9); border:none; color:#fff; font-weight:700;}

/* 교회찾기 - 필터 칩 */
.cf-chips {display:flex; gap:11.52px; padding:13.44px 26.88px; background:var(--card); border-bottom:1.92px solid var(--line); overflow-x:auto;}
.cf-chips::-webkit-scrollbar {display:none;}
.cf-chip {flex:none; padding:13.44px 21.12px; background:var(--snow); border:1.92px solid var(--line); border-radius:38.4px; color:var(--body); font-size:21.12px;}
.cf-chip.on {background:#7c3aed; border-color:#7c3aed; color:#fff;}

/* 교회찾기 - 정렬 */
.cf-sort {display:flex; align-items:center; justify-content:space-between; padding:15.36px 26.88px; background:var(--snow);}
.cf-sort .cf-count {color:var(--body); font-size:23.04px; font-weight:400;}
.cf-sort .cf-count b {font:inherit; color:#0369a1;}
.dark-mode .cf-sort .cf-count b {color:#38bdf8;}
.cf-sort .cf-sortby {display:flex; align-items:center; gap:5.76px; color:var(--sub); font-size:21.12px;}
.cf-sort .cf-sortby img {width:23.04px; height:23.04px;}

/* 교회찾기 - 리스트 */
.cf-list {background:var(--card); padding-bottom:240px;}
.cf-card {position:relative; display:flex; gap:23.04px; padding:26.88px 26.88px 28.8px; border-bottom:1.92px solid var(--line);}
.cf-avatar {display:flex; align-items:center; justify-content:center; flex:none; width:153.6px; height:153.6px; border:1.92px solid var(--line); border-radius:19.2px; color:#fff; font-size:49.92px; font-weight:800;}
.cf-info {flex:1; min-width:0; padding-right:100px;}
.cf-denom {color:var(--sub); font-size:21.12px;}
.cf-name {margin-top:6px; color:var(--ink); font-size:30.72px; font-weight:800;}
.cf-pastor {margin-top:7px; color:var(--body); font-size:23.04px;}
.cf-badges {display:flex; flex-wrap:wrap; gap:5.76px; margin-top:9.6px;}
.cf-badge {display:inline-flex; align-items:center; gap:5.76px; padding:5.76px 13.44px; border-radius:38.4px; font-size:19.2px; font-weight:700;}
.cf-badge img {width:19.2px; height:19.2px;}
.cf-addr {margin-top:9.6px; color:var(--sub); font-size:21.12px;}
.cf-acts {position:absolute; top:23.04px; right:23.04px; display:flex; align-items:center; gap:9.6px;}
.cf-acts img {width:30.72px; height:30.72px;}
.cf-acts .cf-star {display:inline-flex; cursor:pointer;}
.cf-acts .cf-star img {transition:filter .15s;}
.cf-acts .cf-star:not(.on) img {filter:grayscale(1) opacity(0.4);}
.cf-dist {position:absolute; right:26.88px; bottom:28.8px; display:flex; align-items:center; gap:5.76px; color:#ea580c; font-size:24.96px; font-weight:700;}
.cf-dist img {width:26.88px; height:26.88px;}
.bd-newcomer {background:#f0fdfa; color:#0f766e;}
.bd-parking {background:#fffbeb; color:#d97706;}
.bd-online {background:#eef2ff; color:#1e3a5f;}
.bd-youth {background:#f0fdf4; color:#16a34a;}
.bd-counsel {background:#fdf2f8; color:#db2777;}
.bd-sign {background:#f5f3ff; color:#7c3aed;}
.bd-disabled {background:#fff7ed; color:#ea580c;}
.bd-english {background:#eff6ff; color:#1d4ed8;}
.bd-foreign {background:#f0f9ff; color:#0369a1;}

/* 교회찾기 - 지도로 보기 */
.cf-mapfab {position:fixed; left:50%; bottom:158px; transform:translateX(-50%); z-index:35; display:flex; align-items:center; gap:11.52px; padding:21.12px 30.72px; background:#0369A1; border-radius:50px; box-shadow:0 7.68px 23px rgba(3,105,161,0.4); color:#fff; font-size:30.72px; font-weight:700;}
.cf-mapfab img {width:30.72px; height:30.72px;}

/* 교회찾기 - 하단 탭 */
.cf-nav {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:40; width:720px; max-width:100%; display:flex; align-items:flex-end; justify-content:space-between; padding:21.12px 40.9px 30.72px; background:var(--card); border-top:1.92px solid var(--line);}
.cf-nav .cf-tab {display:flex; flex-direction:column; align-items:center; gap:7.68px;}
.cf-nav .cf-tab img {width:42.24px; height:42.24px;}
.cf-nav .cf-tab span {color:var(--sub); font-size:19.2px;}
.cf-nav .cf-tab.on span {color:#0369a1;}
.dark-mode .cf-nav .cf-tab.on span {color:#38bdf8;}