@charset "utf-8";

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

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

/* 카테고리 탭 */
.p10-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;}
.p10-tabs::-webkit-scrollbar {display:none;}
.p10-tabs .t {position:relative; flex:none; padding:22.2px 25.8px; color:var(--sub); font-size:24px; font-weight:500; white-space:nowrap;}
.p10-tabs .t.on {color:#7C3AED; font-weight:700;}
.p10-tabs .t.on::after {content:""; position:absolute; left:25.8px; right:25.8px; bottom:-3.7px; height:4.6px; background:#7C3AED; border-radius:3.7px 3.7px 0 0;}

/* 히어로 통계 */
.p10-hero {position:relative; overflow:hidden; padding:33.2px; background:linear-gradient(135deg, #1E3A5F 0%, #2D1B69 55%, #7C3AED 100%);}
.p10-hero .c1 {position:absolute; top:-55px; right:-55px; width:240px; height:240px; background:rgba(255,255,255,0.08); border-radius:50%;}
.p10-hero .c2 {position:absolute; bottom:-46px; left:18px; width:184px; height:184px; background:rgba(124,58,237,0.3); border-radius:50%;}
.p10-hero h2 {position:relative; color:#fff; font-size:36.9px; font-weight:800;}
.p10-hero .sub {position:relative; color:rgba(255,255,255,0.6); font-size:24px; margin-top:7.4px;}
.p10-hstats {position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; gap:14.8px; margin-top:18.5px;}
.p10-hstats .b {display:flex; flex-direction:column; align-items:center; gap:3.7px; padding:20.3px; background:rgba(255,255,255,0.1); border:1.85px solid rgba(255,255,255,0.12); border-radius:18.5px;}
.p10-hstats .b b {color:#fff; font-size:33.2px; font-weight:800;}
.p10-hstats .b span {color:rgba(255,255,255,0.55); font-size:18.5px;}

/* 필터 칩 */
.p10-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;}
.p10-fil::-webkit-scrollbar {display:none;}
.p10-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;}
.p10-chip.on {background:#F5F3FF; border-color:#7C3AED; color:#7C3AED; font-weight:700;}

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

/* Q&A 카드 */
.p10-list {display:flex; flex-direction:column; gap:18.5px; padding:0 29.5px;}
.p10-card {background:var(--card); border:1.85px solid var(--line); border-left:5.5px solid var(--line); border-radius:29.5px; overflow:hidden;}
.p10-card.done {border-left-color:#16A34A;}
.p10-card.wait {border-left-color:#D97706;}
.p10-qrow {display:flex; gap:18.5px; align-items:flex-start; padding:24px 25.8px 18.5px;}
.p10-q {flex:none; display:flex; align-items:center; justify-content:center; width:51.7px; height:51.7px; background:#F5F3FF; border-radius:14.8px; color:#7C3AED; font-size:24px; font-weight:800;}
.p10-qbody {flex:1; min-width:0; display:flex; flex-direction:column; gap:7.4px;}
.p10-qtags {display:flex; flex-wrap:wrap; align-items:center; gap:9.2px;}
.p10-qtags .tg {padding:3.7px 14.8px; border-radius:7.4px; font-size:18.5px; font-weight:700;}
.tg-done {background:#F0FDF4; color:#16A34A;}
.tg-wait {background:var(--cream); color:#D97706;}
.tg-cat {background:#F5F3FF; color:#7C3AED;}
.tg-n {background:var(--red); color:#fff; padding:1.85px 11.1px;}
.p10-qtitle {color:var(--ink); font-size:25.8px; font-weight:700; line-height:1.4;}
.p10-qdesc {color:var(--body); font-size:22.2px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.p10-qmeta {display:flex; flex-wrap:wrap; align-items:center; gap:9.2px; padding-top:3.7px; color:var(--sub); font-size:20.3px;}
.p10-qmeta img {width:22.2px; height:22.2px;}
.p10-qmeta .dot {color:var(--sub);}
.p10-answer {margin:0 25.8px 24px; padding:20.3px 24px; background:#F0FDF4; border:1.85px solid #BBF7D0; border-radius:18.5px; display:flex; flex-direction:column; gap:9.2px;}
.p10-answer .h {display:flex; align-items:center; gap:7.4px; color:#16A34A; font-size:18.5px; font-weight:700;}
.p10-answer .h img {width:22.2px; height:22.2px;}
.p10-answer .tx {color:#14532D; font-size:22.2px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* FAB */
.p10-fab {position:absolute; right:29.5px; bottom:172px; display:flex; align-items:center; justify-content:center; width:92.3px; height:92.3px; background:#7C3AED; border-radius:50%; box-shadow:0 12px 28px rgba(124,58,237,0.45); z-index:5;}
.p10-fab img {width:40.6px; height:40.6px;}

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