@charset "utf-8";

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

/* 헤더 */
.p8-head {display:flex; align-items:center; gap:18.5px; padding:22.2px 29.5px; background:linear-gradient(135deg, #1E3A5F 0%, #1A4A7A 60%, #0F766E 100%);}
.p8-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;}
.p8-head .ic img {width:36.9px; height:36.9px;}
.p8-head h1 {flex:1; color:#fff; font-size:31.4px; font-weight:700;}

/* 카테고리 탭 */
.p8-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;}
.p8-tabs::-webkit-scrollbar {display:none;}
.p8-tabs .t {position:relative; flex:none; padding:22.2px 25.8px; color:var(--sub); font-size:24px; font-weight:500; white-space:nowrap;}
.p8-tabs .t.on {color:var(--navy); font-weight:700;}
.p8-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;}

/* Featured */
.p8-feat {background:linear-gradient(135deg, #1E3A5F, #1A4A7A 40%, #0F766E);}
.p8-fimg {position:relative; height:443px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18.5px; overflow:hidden;}
.p8-swiper {position:absolute; inset:0; z-index:0; height:100%;}
.p8-swiper .swiper-wrapper, .p8-swiper .swiper-slide {height:100%;}
.p8-swiper .swiper-slide img {width:100%; height:100%; object-fit:cover;}
.p8-fimg::after {content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65));}
.p8-fimg .badge {position:absolute; top:25.8px; left:25.8px; z-index:2; display:flex; align-items:center; gap:7.4px; padding:5.5px 18.5px; background:var(--teal-2); border-radius:36.9px; color:#fff; font-size:18.5px; font-weight:700;}
.p8-fimg .badge img {width:20.3px; height:20.3px;}
.p8-fimg .badge span {color:#fff; font-size:18.5px; font-weight:700;}
.p8-fimg .cnt {position:absolute; top:25.8px; right:26.6px; z-index:2; display:flex; align-items:center; gap:7.4px; padding:5.5px 18.5px; background:rgba(0,0,0,0.55); border-radius:36.9px;}
.p8-fimg .cnt img {width:22.2px; height:22.2px;}
.p8-fimg .cnt span {color:#fff; font-size:20.3px; font-weight:700;}
.p8-fthumbs {display:flex; gap:7.4px; padding:14.8px 25.8px; background:rgba(0,0,0,0.4); overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;}
.p8-fthumbs::-webkit-scrollbar {display:none;}
.p8-fthumbs .th {flex:none; display:flex; align-items:center; justify-content:center; width:96px; height:96px; background:rgba(255,255,255,0.15); border:3.7px solid transparent; border-radius:11.1px;}
.p8-fthumbs .th.on {border-color:#fff;}
.p8-fthumbs .th img {width:33.2px; height:33.2px;}
.p8-fthumbs .th {overflow:hidden;}
.p8-fthumbs .th img.cover {width:100%; height:100%; object-fit:cover;}

/* 다른 갤러리 헤더 */
.p8-lhead {display:flex; align-items:center; justify-content:space-between; padding:29.5px 29.5px 18.5px;}
.p8-lhead .l {color:var(--ink); font-size:27.7px; font-weight:700;}
.p8-lhead .r {color:var(--sub); font-size:22.2px;}

/* 그리드 */
.p8-grid {display:grid; grid-template-columns:1fr 1fr; gap:7.4px; padding:0 29.5px 29.5px;}
.p8-gcard {position:relative; aspect-ratio:1/1; border-radius:18.5px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11.1px;}
.p8-gcard.g-navy {background:linear-gradient(135deg, #1E3A5F, #1A4A7A);}
.p8-gcard.g-slate {background:linear-gradient(135deg, #374151, #1E3A5F);}
.p8-gcard.g-blue {background:linear-gradient(135deg, #0369A1, #1E3A5F);}
.p8-gcard.g-violet {background:linear-gradient(135deg, #7C3AED, #1E3A5F);}
.p8-gcard > img.bg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.4;}
.p8-gcard .ph {position:relative; width:48px; height:48px; opacity:0.5;}
.p8-gcard .pht {position:relative; color:rgba(255,255,255,0.12); font-size:20.3px; font-weight:700;}
.p8-gcard::after {content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.62));}
.p8-gcard .meta {position:absolute; left:0; right:0; bottom:4.8px; z-index:1; display:flex; flex-direction:column; gap:3.7px; padding:14.8px 18.5px;}
.p8-gcard .meta .ti {color:#fff; font-size:22.2px; font-weight:700; line-height:1.3;}
.p8-gcard .meta .by {color:rgba(255,255,255,0.6); font-size:18.5px;}
.p8-gcard .cnt {position:absolute; top:12.9px; right:14.4px; z-index:1; display:flex; align-items:center; gap:5.5px; padding:3.7px 12.9px; background:rgba(0,0,0,0.5); border-radius:18.5px; color:#fff; font-size:18.5px; font-weight:600;}
.p8-gcard .cnt img {width:20.3px; height:20.3px;}
.p8-gcard .cnt span {color:#fff; font-size:18.5px; font-weight:600;}

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