@charset "utf-8";

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

/* 헤더 */
.p3-head {background:var(--navy);}
.p3-top {display:flex; align-items:center; gap:18.5px; padding:22px 29.5px;}
.p3-top .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;}
.p3-top .ic img {width:36.9px; height:36.9px;}
.p3-top h1 {flex:1; color:#fff; font-size:31.4px; font-weight:700;}

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

/* 필터 칩 */
.p3-fil {display:flex; gap:11.1px; align-items:center; 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;}
.p3-fil::-webkit-scrollbar {display:none;}
.p3-chip {flex:none; display:flex; align-items:center; gap:5.5px; 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;}
.p3-chip.on {background:var(--navy); border-color:var(--navy); color:#fff; font-weight:700;}
.p3-chip img {width:20.3px; height:20.3px;}
.p3-chip.on img {filter:brightness(0) invert(1);}

/* 본문 */
.p3-body {flex:1; padding-bottom:18.5px;}

/* 추천(최신) 카드 */
.p3-feat {margin:25.8px 29.5px 0; background:var(--card); border:1.85px solid var(--line); border-radius:29.5px; overflow:hidden;}
.p3-thumb {position:relative; width:100%; height:341.5px; overflow:hidden; background:linear-gradient(135deg, #1E3A5F, #0F766E);}
.p3-thumb > img {width:100%; height:100%; object-fit:cover;}
.p3-thumb .tag-new {position:absolute; top:18.5px; left:18.5px; padding:5.5px 16.6px; background:#2563EB; border-radius:11.1px; color:#fff; font-size:18.5px; font-weight:700;}
.p3-thumb .dur {position:absolute; bottom:20.3px; right:18.5px; padding:5.5px 14.8px; background:rgba(0,0,0,0.75); border-radius:11.1px; color:#fff; font-size:18.5px; font-weight:700;}
.p3-thumb .play {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:103.4px; height:103.4px; background:rgba(255,255,255,0.92); border-radius:50%; box-shadow:0 6px 18px rgba(0,0,0,0.2);}
.p3-thumb .play img {width:40.6px; height:40.6px; margin-left:5px;}

.p3-fbody {padding:25.8px 29.5px; display:flex; flex-direction:column; gap:12.9px;}
.p3-tags {display:flex; gap:11.1px;}
.p3-tags .tg {padding:3.7px 16.6px; border-radius:7.4px; font-size:18.5px; font-weight:700;}
.tg-new {background:#EFF6FF; color:#2563EB;}
.tg-sun {background:var(--mint); color:var(--teal);}
.p3-ftitle {color:var(--ink); font-size:29.5px; font-weight:700; line-height:1.4;}
.p3-meta {display:flex; flex-direction:column; gap:7.4px; padding-top:1.85px;}
.p3-meta .r {display:flex; align-items:center; gap:11.1px; color:var(--body); font-size:22.2px;}
.p3-meta .r img {width:24px; height:24px;}
.p3-acts {display:flex; gap:14.8px; padding-top:9.2px;}
.p3-acts .play {flex:1; display:flex; align-items:center; justify-content:center; gap:11.1px; padding:24px; background:#2563EB; border-radius:18.5px; color:#fff; font-size:25.8px; font-weight:700;}
.p3-acts .play img {width:25.8px; height:25.8px;}
.p3-acts .sq {display:flex; align-items:center; justify-content:center; width:84.9px; height:84.9px; background:var(--snow); border:1.85px solid var(--line); border-radius:18.5px;}
.p3-acts .sq img {width:33.2px; height:33.2px;}

/* 목록 헤더 */
.p3-lhead {display:flex; align-items:center; justify-content:space-between; padding:25.8px 29.5px 18.5px;}
.p3-lhead .l {color:var(--body); font-size:24px; font-weight:700;}
.p3-lhead .c {color:var(--sub); font-size:22.2px;}

/* 설교 목록 */
.p3-list {background:var(--card); border-top:1.85px solid var(--line);}
.p3-item {display:flex; gap:22.2px; align-items:flex-start; padding:20.3px 29.5px; border-bottom:1.85px solid var(--line);}
.p3-ithumb {position:relative; flex:none; width:162.5px; height:107.1px; border-radius:14.8px; overflow:hidden; background:linear-gradient(135deg, #1E3A5F, #0F766E);}
.p3-ithumb > img {width:100%; height:100%; object-fit:cover;}
.p3-ithumb .play {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:36.9px; height:36.9px;}
.p3-ithumb .dur {position:absolute; bottom:7.4px; right:9px; padding:1.85px 11.1px; background:rgba(0,0,0,0.75); border-radius:7.4px; color:#fff; font-size:16.6px; font-weight:700;}
.p3-ibody {flex:1; min-width:0; display:flex; flex-direction:column; gap:7.4px;}
.p3-cat {align-self:flex-start; padding:1.85px 12.9px; border-radius:7.4px; font-size:18.5px; font-weight:600;}
.c-sun {background:var(--mint); color:var(--teal);}
.c-wed {background:rgba(124,58,237,0.12); color:#7C3AED;}
.c-fri {background:var(--cream); color:var(--orange);}
.p3-ititle {color:var(--ink); font-size:24px; font-weight:600; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.p3-iauthor {color:var(--sub); font-size:20.3px;}
.p3-bm {flex:none; display:flex; align-items:flex-start; padding:3.7px;}
.p3-bm img {width:29.5px; height:29.5px;}

/* 페이지네이션 */
.p3-page {display:flex; align-items:center; justify-content:center; gap:7.4px; padding:25.8px 0;}
.p3-page .pg {display:flex; align-items:center; justify-content:center; min-width:62.8px; height:62.8px; padding:0 19.4px; background:var(--card); border:1.85px solid var(--line); border-radius:14.8px; color:var(--body); font-size:22.2px; font-weight:500;}
.p3-page .pg.on {background:var(--navy); border-color:var(--navy); color:#fff; font-weight:700;}
.p3-page .pg img {width:24px; height:24px;}
.p3-page .dots {color:var(--sub); font-size:24px; padding:0 5px;}

/* 푸터 탭바 */
.p3-nav {display:flex; align-items:center; justify-content:space-between; padding:20px 40px; background:var(--card); border-top:1.85px solid var(--line);}
.p3-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.p3-nav .tab img {width:42px; height:42px;}
.p3-nav .tab.on {color:var(--teal);}
.p3-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.p3-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);}
.p3-nav .tab-fab .fab img {width:48px; height:48px;}

@media (hover:hover) and (pointer:fine) {
	.p3-feat:hover, .p3-item:hover {opacity:1;}
	.p3-item:hover {background:var(--snow);}
}