@charset "utf-8";

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

/* 이미지 뷰어 */
.p9-viewer {background:#0F172A;}
.p9-image {position:relative; height:517px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22.2px; background:linear-gradient(135deg, #1E3A5F, #1A4A7A); overflow:hidden;}
.p9-gallery {position:absolute; inset:0; z-index:0; height:100%;}
.p9-gallery .swiper-wrapper, .p9-gallery .swiper-slide {height:100%;}
.p9-gallery .swiper-slide img {width:100%; height:100%; object-fit:cover;}
.p9-image::after {content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0) 30%);}
.p9-vtop {position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:22.2px 25.8px;}
.p9-vtop .vb {display:flex; align-items:center; justify-content:center; width:62.8px; height:62.8px; background:rgba(0,0,0,0.3); border-radius:16.6px;}
.p9-vtop .vb img {width:33.2px; height:33.2px;}
.p9-vtop .rt {display:flex; gap:11.1px;}
.p9-vtop .rt .vb img {width:31.4px; height:31.4px;}
.p9-vnav {position:absolute; top:50%; transform:translateY(-50%); z-index:2; display:flex; align-items:center; justify-content:center; width:62.8px; height:62.8px; background:rgba(0,0,0,0.45); border-radius:50%;}
.churchro .p9-vnav:active {transform:translateY(-50%) scale(0.97);}
.p9-vnav.l {left:22.2px;}
.p9-vnav.r {right:22.2px;}
.p9-vnav img {width:33.2px; height:33.2px;}
.p9-vidx {position:absolute; bottom:22.2px; right:26.9px; z-index:2; padding:7.4px 22.2px; background:rgba(0,0,0,0.55); border-radius:36.9px; color:#fff; font-size:22.2px; font-weight:700;}
.p9-vthumbs {display:flex; gap:11.1px; padding:18.5px 25.8px; background:#0F172A; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;}
.p9-vthumbs::-webkit-scrollbar {display:none;}
.p9-vthumbs .th {flex:none; overflow:hidden; width:103.4px; height:103.4px; border:3.7px solid transparent; border-radius:14.8px;}
.p9-vthumbs .th.on {border-color:#fff;}
.p9-vthumbs .th img {width:100%; height:100%; object-fit:cover;}
.p9-dots {display:flex; align-items:center; justify-content:center; gap:9.2px; padding:14.8px 0; background:#0F172A;}
.p9-dots i {width:11.1px; height:11.1px; border-radius:5.5px; background:rgba(255,255,255,0.3);}
.p9-dots i.on {width:33.2px; background:#fff;}

/* 정보 */
.p9-info {display:flex; flex-direction:column; gap:9.2px; padding:29.5px 29.5px 27.7px; background:var(--card); border-bottom:1.85px solid var(--line);}
.p9-tags {display:flex; gap:14.8px;}
.p9-tags .tg {padding:3.7px 16.6px; border-radius:7.4px; font-size:18.5px; font-weight:700;}
.tg-feat {background:var(--teal-2); color:#fff;}
.tg-cat {background:var(--mint); color:var(--teal);}
.p9-title {color:var(--ink); font-size:36.9px; font-weight:800; line-height:1.35; padding-top:5.5px;}
.p9-desc {color:var(--body); font-size:25.8px; line-height:1.75; padding-top:5.5px;}
.p9-mrow {display:flex; align-items:center; gap:11.1px; color:var(--body); font-size:24px;}
.p9-mrow img {width:25.8px; height:25.8px;}
.p9-stats {display:flex; gap:25.8px; margin-top:9.2px; padding-top:24px; border-top:1.85px solid var(--line);}
.p9-stats span {display:flex; align-items:center; gap:9.2px; font-size:24px; font-weight:600; color:var(--body);}
.p9-stats span img {width:29.5px; height:29.5px;}
.p9-stats .like {color:var(--red);}

/* 액션 버튼 */
.p9-acts {display:flex; gap:14.8px; padding:18.5px 29.5px 20.3px; background:var(--card); border-bottom:1.85px solid var(--line);}
.p9-acts .btn {flex:1; display:flex; align-items:center; justify-content:center; gap:9.2px; padding:20.3px 12.9px; background:var(--snow); border:1.85px solid var(--line); border-radius:14.8px; color:var(--body); font-size:22.2px; font-weight:600;}
.p9-acts .btn img {width:27.7px; height:27.7px;}
.p9-acts .btn.like {background:#FEF2F2; border-color:var(--red); color:var(--red);}
.p9-acts .btn.like.is-on {background:var(--red); color:#fff;}
.p9-acts .btn.like.is-on img {filter:brightness(0) invert(1);}
.p9-acts .btn.js-save.is-on {background:var(--mint); border-color:var(--teal); color:var(--teal);}
.p9-vtop .vb.js-save.is-on {background:var(--teal);}

/* 다른 갤러리 */
.p9-other {display:flex; flex-direction:column; gap:7.4px; padding:29.5px; background:var(--card);}
.p9-other .l {color:var(--ink); font-size:27.7px; font-weight:700;}
.p9-other .s {color:var(--sub); font-size:22.2px;}
.p9-ogrid {display:grid; grid-template-columns:1fr 1fr; gap:18.5px; padding-top:18.5px;}
.p9-ocard {border:1.85px solid var(--line); border-radius:18.5px; overflow:hidden; background:var(--card);}
.p9-oimg {position:relative; height:166px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.p9-oimg > img.bg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.5;}
.p9-oimg .ph {position:relative; width:40.6px; height:40.6px; opacity:0.6;}
.o-navy {background:linear-gradient(135deg, #1E3A5F, #1A4A7A);}
.o-blue {background:linear-gradient(135deg, #0369A1, #1E3A5F);}
.o-violet {background:linear-gradient(135deg, #7C3AED, #1E3A5F);}
.o-orange {background:linear-gradient(135deg, #D97706, #1E3A5F);}
.p9-obody {display:flex; flex-direction:column; gap:3.7px; padding:14.8px 18.5px;}
.p9-obody .ti {color:var(--ink); font-size:22.2px; font-weight:700;}
.p9-obody .by {color:var(--sub); font-size:20.3px;}

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