@charset "utf-8";

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

/* 질문 헤더 (보라 그라데이션) */
.p11-qhead {position:relative; overflow:hidden; display:flex; flex-direction:column; gap:16.8px; padding:36.9px 29.5px 33.2px; background:linear-gradient(135deg, #1E3A5F 0%, #2D1B69 100%);}
.p11-qhead::before {content:""; position:absolute; top:-37px; right:-37px; width:185px; height:185px; background:rgba(255,255,255,0.06); border-radius:50%;}
.p11-qhead > * {position:relative; z-index:1;}
.p11-qtop {display:flex; align-items:center; justify-content:space-between;}
.p11-qtop .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;}
.p11-qtop .ic img {width:34px; height:34px;}
.p11-qtop .rt {display:flex; gap:11.1px;}
.p11-qtags {display:flex; flex-wrap:wrap; gap:11.1px;}
.p11-qtags span {padding:3.7px 16.6px; border-radius:36.9px; font-size:18.5px; font-weight:700;}
.p11-qtags .done {background:rgba(22,163,74,0.3); color:#86EFAC;}
.p11-qtags .cat {background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.9);}
.p11-qtags .n {background:rgba(220,38,38,0.3); color:#FCA5A5;}
.p11-qtitle {color:#fff; font-size:33.2px; font-weight:700; line-height:1.4;}
.p11-qauthor {display:flex; align-items:center; gap:14.8px;}
.p11-qauthor .av {display:flex; align-items:center; justify-content:center; width:55.4px; height:55.4px; background:rgba(255,255,255,0.2); border-radius:50%; color:#fff; font-size:22.2px; font-weight:700;}
.p11-qauthor .nm {color:rgba(255,255,255,0.7); font-size:22.2px;}
.p11-qauthor .dt {flex:1; text-align:right; color:rgba(255,255,255,0.45); font-size:20.3px;}

/* 통계 버튼 */
.p11-stats {display:flex; gap:11.1px; padding:14.8px 29.5px 20.3px; background:var(--card); border-bottom:1.85px solid var(--line);}
.p11-stats .b {flex:1; display:flex; align-items:center; justify-content:center; gap:9.2px; padding:16.6px 12.9px; background:var(--snow); border:1.85px solid var(--line); border-radius:14.8px; color:var(--body); font-size:20.3px; font-weight:600;}
.p11-stats .b img {width:25.8px; height:25.8px;}
.p11-stats .b.help {background:#FEF2F2; border-color:var(--red); color:var(--red);}
.p11-stats .b.help.is-on {background:var(--red); color:#fff;}
.p11-stats .b.help.is-on img {filter:brightness(0) invert(1);}
.p11-qtop .ic.js-save.is-on {background:rgba(255,255,255,0.35);}
.p11-aacts .help.is-on {background:#16A34A; border-color:#16A34A; color:#fff;}
.p11-aacts .help.is-on img {filter:brightness(0) invert(1);}
.p11-cacts .help.is-on {font-weight:800;}

/* 질문 본문 */
.p11-qbody {display:flex; flex-direction:column; gap:20.1px; padding:31.2px 29.5px 35.1px; background:var(--card); border-bottom:1.85px solid var(--line);}
.p11-qbody p {color:var(--ink); font-size:25.8px; line-height:1.85;}

/* 답변 영역 */
.p11-answers {display:flex; flex-direction:column; gap:18.5px; padding-bottom:260px; background:var(--snow);}
.p11-ahead {display:flex; align-items:center; gap:14.8px; padding:24px 29.5px; background:var(--card); border-top:1.85px solid var(--line); border-bottom:1.85px solid var(--line);}
.p11-ahead .ico {display:flex; align-items:center; justify-content:center; width:51.7px; height:51.7px; background:#F0FDF4; border-radius:14.8px;}
.p11-ahead .ico img {width:27.7px; height:27.7px;}
.p11-ahead .t {color:var(--ink); font-size:24px; font-weight:700;}
.p11-ahead .c {color:#16A34A; font-size:24px; font-weight:700;}

/* 채택 답변 */
.p11-adopted {margin:0 29.5px; background:var(--card); border:3.7px solid #16A34A; border-radius:29.5px; overflow:hidden;}
.p11-abar {display:flex; align-items:center; gap:12.9px; padding:18.5px 25.8px; background:#16A34A;}
.p11-abar img {width:27.7px; height:27.7px;}
.p11-abar span {color:#fff; font-size:22.2px; font-weight:700;}
.p11-abody {display:flex; flex-direction:column; gap:17px; padding:25.8px 29.5px;}
.p11-arow {display:flex; align-items:center; gap:14.8px;}
.p11-arow .av {display:flex; align-items:center; justify-content:center; width:62.8px; height:62.8px; border-radius:50%; background:linear-gradient(135deg, #0F766E, #1E3A5F); color:#fff; font-size:24px; font-weight:700;}
.p11-arow .info {flex:1; min-width:0; display:flex; flex-direction:column;}
.p11-arow .info .nm {color:var(--ink); font-size:24px; font-weight:700;}
.p11-arow .info .role {color:var(--teal); font-size:20.3px; font-weight:600;}
.p11-arow .dt {color:var(--sub); font-size:20.3px;}
.p11-atext {display:flex; flex-direction:column; gap:18.5px;}
.p11-atext p {color:var(--ink); font-size:25.8px; line-height:1.8;}
.p11-aacts {display:flex; gap:14.8px; padding-top:5.5px;}
.p11-aacts .b {display:flex; align-items:center; gap:9.2px; padding:12.9px 27.7px; border-radius:14.8px; font-size:22.2px; font-weight:600;}
.p11-aacts .b img {width:25.8px; height:25.8px;}
.p11-aacts .help {background:#F0FDF4; border:1.85px solid #BBF7D0; color:#16A34A;}
.p11-aacts .sh {background:var(--snow); border:1.85px solid var(--line); color:var(--body);}

/* 댓글 */
.p11-comment {margin:0 29.5px; background:var(--card); border:1.85px solid var(--line); border-radius:29.5px; padding:31.4px 31.4px 27.7px; display:flex; flex-direction:column; gap:16.8px;}
.p11-crow {display:flex; align-items:center; gap:14.8px;}
.p11-crow .av {display:flex; align-items:center; justify-content:center; width:59px; height:59px; border-radius:50%; color:#fff; font-size:22.2px; font-weight:700;}
.av-blue {background:linear-gradient(135deg, #3B82F6, #2563EB);}
.av-orange {background:linear-gradient(135deg, #F59E0B, #D97706);}
.p11-crow .info {flex:1; min-width:0; display:flex; flex-direction:column;}
.p11-crow .info .nm {color:var(--ink); font-size:24px; font-weight:600;}
.p11-crow .info .dt {color:var(--sub); font-size:20.3px;}
.p11-ctext {color:var(--body); font-size:24px; line-height:1.7;}
.p11-cacts {display:flex; gap:11.1px;}
.p11-cacts .b {display:flex; align-items:center; gap:7.4px; padding:7.4px 3.7px; font-size:20.3px; font-weight:600;}
.p11-cacts .b img {width:24px; height:24px;}
.p11-cacts .help {color:var(--red);}
.p11-cacts .reply {color:var(--sub);}

/* 입력 바 */
.p11-input {position:fixed; left:50%; transform:translateX(-50%); bottom:111px; width:720px; max-width:100%; z-index:39; display:flex; align-items:center; gap:14.8px; padding:24px 29.5px 22.2px; background:var(--card); border-top:1.85px solid var(--line);}
.p11-input .av {display:flex; align-items:center; justify-content:center; width:62.8px; height:62.8px; border-radius:50%; background:linear-gradient(135deg, #8B5CF6, #7C3AED); color:#fff; font-size:24px; font-weight:700;}
.p11-input .field {flex:1; display:flex; align-items:center; gap:11.1px; padding:18.5px 27.7px; background:var(--snow); border:1.85px solid var(--line); border-radius:36.9px;}
.p11-input .field input {flex:1; border:0; background:none; color:var(--ink); font-size:24px; outline:none; min-width:0;}
.p11-input .field input::placeholder {color:var(--sub);}
.p11-input .send {display:flex; align-items:center; justify-content:center; width:59px; height:59px; background:#7C3AED; border-radius:16.6px; flex:none;}
.p11-input .send img {width:27.7px; height:27.7px;}

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