@charset "utf-8";

.p13-wrap {position:relative; display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

/* 헤더 */
.p13-head {display:flex; align-items:center; gap:18.5px; padding:22.2px 29.5px; background:linear-gradient(135deg, #1E3A5F 0%, #1A2A4A 50%, #2D1B69 100%);}
.p13-head .ic {display:flex; align-items:center; justify-content:center; width:66.5px; height:66.5px; background:rgba(255,255,255,0.12); border-radius:18.5px;}
.p13-head .ic img {width:36.9px; height:36.9px;}
.p13-head h1 {flex:1; color:#fff; font-size:31.4px; font-weight:700;}

/* 카테고리 탭 */
.p13-tabs {display:flex; background:var(--card); border-bottom:3.7px solid var(--line); overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; padding:0 29.5px;}
.p13-tabs::-webkit-scrollbar {display:none;}
.p13-tabs .t {position:relative; flex:none; padding:22.2px 25.8px; color:var(--sub); font-size:24px; font-weight:500; white-space:nowrap;}
.p13-tabs .t.on {color:var(--navy); font-weight:700;}
.p13-tabs .t.on::after {content:""; position:absolute; left:25.8px; right:25.8px; bottom:-3.7px; height:4.6px; background:var(--navy); border-radius:3.7px 3.7px 0 0;}

/* 히어로 */
.p13-hero {position:relative; overflow:hidden; display:flex; flex-direction:column; gap:22.2px; padding:29.5px; background:linear-gradient(135deg, #1E3A5F 0%, #1A2A4A 50%, #2D1B69 100%);}
.p13-hero::before {content:""; position:absolute; top:-46px; right:-46px; width:203px; height:203px; background:rgba(255,255,255,0.06); border-radius:50%; z-index:0;}
.p13-hero > * {position:relative; z-index:1;}
.p13-hero .ti {display:flex; align-items:center; gap:18.5px;}
.p13-hero .ti .ic {display:flex; align-items:center; justify-content:center; width:73.8px; height:73.8px; background:rgba(255,255,255,0.12); border:1.85px solid rgba(255,255,255,0.15); border-radius:22.2px;}
.p13-hero .ti .ic img {width:40.6px; height:40.6px;}
.p13-hero .ti h2 {color:#fff; font-size:36.9px; font-weight:800;}
.p13-hero .verse {color:rgba(255,255,255,0.6); font-size:22.2px; line-height:1.6;}
.p13-hstats {display:grid; grid-template-columns:1fr 1fr 1fr; gap:14.8px;}
.p13-hstats .b {display:flex; flex-direction:column; align-items:center; gap:3.7px; padding:20.3px 16.6px; background:rgba(255,255,255,0.08); border:1.85px solid rgba(255,255,255,0.1); border-radius:18.5px;}
.p13-hstats .b b {color:#fff; font-size:33.2px; font-weight:800;}
.p13-hstats .b span {color:rgba(255,255,255,0.5); font-size:18.5px;}
.p13-hinput {display:flex; align-items:center; gap:14.8px; padding:25.8px 27.7px; background:rgba(255,255,255,0.14); border:1.85px solid rgba(255,255,255,0.2); border-radius:22.2px;}
.p13-hinput .ph {display:flex; align-items:center; justify-content:center; width:51.7px; height:51.7px; background:rgba(255,255,255,0.15); border-radius:14.8px;}
.p13-hinput .ph img {width:27.7px; height:27.7px;}
.p13-hinput .tx {flex:1; color:rgba(255,255,255,0.6); font-size:24px;}
.p13-hinput .w {width:29.5px; height:29.5px;}

/* 필터 칩 */
.p13-fil {display:flex; gap:11.1px; background:var(--card); border-bottom:1.85px solid var(--line); padding:14.8px 29.5px 20.3px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;}
.p13-fil::-webkit-scrollbar {display:none;}
.p13-chip {flex:none; padding:11.1px 24px; border:1.85px solid var(--line); border-radius:36.9px; background:var(--card); color:var(--body); font-size:20.3px; font-weight:500; white-space:nowrap;}
.p13-chip.on {background:var(--navy); border-color:var(--navy); color:#fff; font-weight:700;}

/* 공동 기도제목 카드 */
.p13-common {display:flex; align-items:center; gap:22.2px; margin:25.8px 29.5px 0; padding:25.8px 29.5px; border-radius:29.5px; background:linear-gradient(135deg, #0F766E, #1E3A5F);}
.p13-common .ic {display:flex; align-items:center; justify-content:center; width:81.2px; height:81.2px; background:rgba(255,255,255,0.15); border-radius:22.2px; flex:none;}
.p13-common .ic img {width:40.6px; height:40.6px;}
.p13-common .info {flex:1; min-width:0; display:flex; flex-direction:column; gap:3.7px;}
.p13-common .info .l {color:rgba(255,255,255,0.6); font-size:20.3px;}
.p13-common .info .t {color:#fff; font-size:25.8px; font-weight:700;}
.p13-common .info .s {color:rgba(255,255,255,0.6); font-size:20.3px;}
.p13-common .arrow {width:33.2px; height:33.2px; flex:none;}

/* 구분선 */
.p13-divider {display:flex; align-items:center; gap:18.5px; padding:29.5px;}
.p13-divider .ln {flex:1; height:1.85px; background:var(--line);}
.p13-divider span {color:var(--sub); font-size:20.3px; font-weight:700;}

/* 기도 카드 */
.p13-list {display:flex; flex-direction:column; gap:18.5px; padding:0 29.5px 29.5px;}
.p13-card {background:var(--card); border:1.85px solid var(--line); border-radius:29.5px; overflow:hidden;}
.p13-card.resp {border-color:#FCD34D;}
.p13-rbadge {display:flex; align-items:center; gap:11.1px; padding:12.9px 25.8px; background:linear-gradient(90deg, #F59E0B, #D97706); color:#fff; font-size:20.3px; font-weight:700;}
.p13-rbadge img {width:24px; height:24px;}
.p13-rbadge span {color:#fff; font-size:20.3px; font-weight:700;}
.p13-crow {display:flex; gap:18.5px; align-items:flex-start; padding:24px 25.8px 18.5px;}
.p13-av {flex:none; display:flex; align-items:center; justify-content:center; width:70.2px; height:70.2px; border-radius:50%; color:#fff; font-size:25.8px; font-weight:700;}
.av-green {background:linear-gradient(135deg, #22C55E, #16A34A);}
.av-blue {background:linear-gradient(135deg, #3B82F6, #2563EB);}
.av-pink {background:linear-gradient(135deg, #FB7185, #E11D48);}
.av-violet {background:linear-gradient(135deg, #8B5CF6, #7C3AED);}
.av-orange {background:linear-gradient(135deg, #F59E0B, #D97706);}
.p13-cbody {flex:1; min-width:0; display:flex; flex-direction:column; gap:7.4px;}
.p13-chead {display:flex; flex-wrap:wrap; align-items:center; gap:12.9px;}
.p13-chead .nm {color:var(--ink); font-size:24px; font-weight:700;}
.p13-ctag {padding:3.7px 14.8px; border-radius:7.4px; font-size:18.5px; font-weight:600;}
.ct-green {background:#F0FDF4; color:#16A34A;}
.ct-blue {background:#EFF6FF; color:#2563EB;}
.ct-pink {background:#FFF1F2; color:#E11D48;}
.ct-violet {background:#F5F3FF; color:#7C3AED;}
.ct-orange {background:var(--cream); color:#D97706;}
.p13-ctext {color:var(--ink); font-size:24px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.p13-cdate {flex:none; color:var(--sub); font-size:20.3px;}
.p13-cfoot {display:flex; align-items:center; gap:18.5px; padding:18.5px 25.8px; border-top:1.85px solid var(--line);}
.p13-amen {display:flex; align-items:center; gap:9.2px; padding:11.1px 24px; background:#F5F3FF; border:1.85px solid #7C3AED; border-radius:36.9px; color:#7C3AED; font-size:22.2px; font-weight:700;}
.p13-amen img {width:25.8px; height:25.8px;}
.p13-amen.is-on {background:#7C3AED; color:#fff;}
.p13-amen.is-on img {filter:brightness(0) invert(1);}
.p13-cstats {flex:1; display:flex; justify-content:flex-end; gap:18.5px;}
.p13-cstats span {display:flex; align-items:center; gap:7.4px; color:var(--sub); font-size:20.3px;}
.p13-cstats img {width:24px; height:24px;}

/* FAB */
.p13-fab {position:absolute; right:29.5px; bottom:172px; display:flex; align-items:center; justify-content:center; width:92.3px; height:92.3px; background:linear-gradient(135deg, #4F46E5, #3730A3); border-radius:50%; box-shadow:0 12px 28px rgba(79,70,229,0.45); z-index:5;}
.p13-fab img {width:40.6px; height:40.6px;}

/* 푸터 탭바 */
.p13-nav {display:flex; align-items:center; justify-content:space-between; padding:20px 40px; background:var(--card); border-top:1.85px solid var(--line);}
.p13-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.p13-nav .tab img {width:42px; height:42px;}
.p13-nav .tab.on {color:var(--teal);}
.p13-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.p13-nav .tab-fab .fab {position:absolute; left:50%; top:0; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg, #0D9488, #1E3A5F); border:5px solid var(--card); box-shadow:0 10px 24px rgba(13,148,136,0.4);}
.p13-nav .tab-fab .fab img {width:48px; height:48px;}