@charset "utf-8";

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

/* 헤더 */
.p5-head {background:var(--navy);}
.p5-top {display:flex; align-items:center; gap:18.5px; padding:22px 29.5px;}
.p5-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;}
.p5-top .ic img {width:36.9px; height:36.9px;}
.p5-top h1 {flex:1; color:#fff; font-size:31.4px; font-weight:700;}
.p5-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;}
.p5-tabs::-webkit-scrollbar {display:none;}
.p5-tabs .t {position:relative; flex:none; padding:22.2px 25.8px; color:var(--sub); font-size:24px; font-weight:500; white-space:nowrap;}
.p5-tabs .t.on {color:var(--navy); font-weight:700;}
.p5-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;}

/* 본문 */
.p5-body {flex:1; display:flex; flex-direction:column; gap:18.5px; padding:25.8px 0 0;}

/* Featured 카드 */
.p5-feat {position:relative; margin:0 29.5px; min-height:369px; display:flex; flex-direction:column; justify-content:flex-end; padding:124px 29.5px 33.2px; border-radius:29.5px; overflow:hidden; background:linear-gradient(135deg, #0F766E, #1E3A5F);}
.p5-feat > img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.4;}
.p5-feat::after {content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,23,42,0) 35%, rgba(15,23,42,0.85));}
.p5-feat > * {position:relative; z-index:1;}
.p5-feat .badge {position:absolute; top:25.8px; left:29.5px; display:flex; align-items:center; gap:7.4px; padding:5.5px 18.5px; background:var(--teal-2); border-radius:36.9px; z-index:2;}
.p5-feat .badge img {width:20.3px; height:20.3px;}
.p5-feat .badge span {color:#fff; font-size:18.5px; font-weight:700;}
.p5-feat .arrow {position:absolute; top:22.2px; right:22.2px; display:flex; align-items:center; justify-content:center; width:55.4px; height:55.4px; background:rgba(255,255,255,0.15); border-radius:50%; z-index:2;}
.p5-feat .arrow img {width:27.7px; height:27.7px;}
.p5-feat .cat {align-self:flex-start; padding:3.7px 16.6px; background:rgba(255,255,255,0.18); border-radius:36.9px; color:#fff; font-size:18.5px; font-weight:700; margin-bottom:12.9px;}
.p5-feat .ti {color:#fff; font-size:31.4px; font-weight:700; line-height:1.4; margin-bottom:9.2px;}
.p5-feat .de {color:rgba(255,255,255,0.7); font-size:22.2px; line-height:1.5; margin-bottom:14.8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.p5-feat .by {color:rgba(255,255,255,0.5); font-size:20.3px;}

/* 이미지 카드 */
.p5-card {margin:0 29.5px; background:var(--card); border:1.85px solid var(--line); border-radius:18.5px; overflow:hidden;}
.p5-cimg {position:relative; height:295.4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14.8px; background:linear-gradient(135deg, #334155, #1E293B);}
.p5-cimg > img.bg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.5;}
.p5-cimg .ph {position:relative; width:59px; height:59px; opacity:0.4;}
.p5-cimg .pht {position:relative; color:rgba(255,255,255,0.6); font-size:24px; font-weight:700;}
.p5-cbody {display:flex; flex-direction:column; gap:9.2px; padding:22.2px 25.8px;}
.p5-cbody .tags {display:flex; gap:9.2px;}
.p5-cbody .tg {padding:3.7px 14.8px; border-radius:7.4px; font-size:18.5px; font-weight:700;}
.tg-news {background:var(--mint); color:var(--teal);}
.tg-n {background:var(--red); color:#fff; padding:1.85px 11.1px;}
.p5-cbody .ti {color:var(--ink); font-size:27.7px; font-weight:700; line-height:1.4;}
.p5-cbody .de {color:var(--body); font-size:22.2px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.p5-cbody .by {display:flex; align-items:center; gap:9.2px; color:var(--sub); font-size:20.3px;}
.p5-cbody .by img {width:22.2px; height:22.2px;}

/* 카테고리 목록 */
.p5-list {background:var(--card); border-top:1.85px solid var(--line); margin-top:0;}
.p5-item {display:flex; gap:22.2px; align-items:center; padding:24px 29.5px; border-bottom:1.85px solid var(--line);}
.p5-sq {flex:none; display:flex; align-items:center; justify-content:center; width:132.9px; height:132.9px; border-radius:18.5px;}
.p5-sq img {width:44.3px; height:44.3px;}
.p5-sq {overflow:hidden;}
.p5-sq img.cover {width:100%; height:100%; object-fit:cover;}
.sq-slate {background:linear-gradient(135deg, #475569, #334155);}
.sq-blue {background:linear-gradient(135deg, #3B82F6, #2563EB);}
.sq-violet {background:linear-gradient(135deg, #8B5CF6, #7C3AED);}
.sq-teal {background:linear-gradient(135deg, #14B8A6, #0D9488);}
.sq-red {background:linear-gradient(135deg, #EF4444, #DC2626);}
.sq-green {background:linear-gradient(135deg, #22C55E, #16A34A);}
.p5-ibody {flex:1; min-width:0; display:flex; flex-direction:column; gap:7.4px;}
.p5-ibody .tags {display:flex; align-items:center; gap:9.2px;}
.p5-tag {padding:3.7px 14.8px; border-radius:7.4px; font-size:18.5px; font-weight:700;}
.t-guide {background:#EFF6FF; color:#2563EB;}
.t-event {background:#F0FDF4; color:#16A34A;}
.t-youth {background:var(--cream); color:#D97706;}
.t-miss {background:#F5F3FF; color:#7C3AED;}
.t-news {background:var(--mint); color:var(--teal);}
.t-new {background:#FFF7ED; color:#EA580C;}
.p5-nbadge {background:var(--red); color:#fff; padding:1.85px 11.1px; border-radius:7.4px; font-size:16.6px; font-weight:700;}
.p5-ititle {color:var(--ink); font-size:24px; font-weight:600; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.p5-iby {color:var(--sub); font-size:20.3px;}
.p5-item .chev {flex:none; width:29.5px; height:29.5px;}

/* FAB */
.p5-fab {position:absolute; right:29.5px; bottom:172px; display:flex; align-items:center; justify-content:center; width:92.3px; height:92.3px; background:var(--navy); border-radius:50%; box-shadow:0 12px 28px rgba(30,58,95,0.4); z-index:5;}
.p5-fab img {width:40.6px; height:40.6px;}

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