/* 
    2025.10.17 수정
    1.0.0
    NX 커뮤니티 게시판
*/

/* 게시판 목록 */
#nxCardWrap.nx-cardboard{ width:100%; margin:0; padding:8px 0 20px; box-sizing:border-box; position:relative; }

.nx-cardlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.nx-card{ width:100%; box-sizing:border-box; border:1px solid #e9ecf1; border-radius:12px; background:#fff; padding:24px 50px; transition:background .15s, border-color .15s; }
.nx-card:hover{ background:#f7faff; border-color:#dbe0ea; }
.nx-card.is-empty{ text-align:center; color:#8a94a6; }

.nx-toprow{ display:flex; align-items:center; gap:12px; }
.nx-avatar{ flex:0 0 36px; height:36px; border-radius:50%; overflow:hidden; display:block; }
.nx-avatar img{ width:36px; height:36px; object-fit:cover; border-radius:50%; }
.nx-avatar-fallback{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#eef2f7; }
.nx-meta{ display:flex; align-items:center; gap:6px; min-width:0; }
.nx-nick{ font-weight:600; color:#2b3340; font-size:14px; }
.nx-dot{ opacity:.5; }
.nx-time{ color:#7a889c; font-size:12px; }

.nx-cat-badge{ margin-left:auto; }
.nx-cat-badge a, .nx-cat-badge span{ display:inline-block; padding:4px 12px; border-radius:999px; background:#fff; border:1px solid #e6e9ef; color:#6a768a; font-size:12px; font-weight:700; text-decoration:none; }

.nx-title{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; margin:10px 0 0; font-size:18px; line-height:1.45; font-weight:700; color:#111; text-decoration:none; word-break:keep-all; }

.nx-excerpt{ margin:6px 0 0; color:#606a7a; font-size:16px; line-height:1.55; display:block; max-height:calc(1.55em * 2); overflow:hidden; word-break:break-word; overflow-wrap:anywhere; }

.nx-card-btm{ display:flex; gap:18px; margin-top:12px; color:#5b6475; }
.nx-card-btm .nx-stat{ display:inline-flex; align-items:center; gap:5px; color:#9aa5b1; }

.nx-morewrap{ margin:18px 0 12px; }
.nx-morebox{ display:block; width:100%; text-align:center; padding:12px 16px; border:1px solid #e9ecf1; border-radius:12px; background:#fff; color:#707a8c; font-weight:700; text-decoration:none; }
.nx-morebox:hover{ background:#f7faff; }
.nx-morebox.is-disabled{ opacity:.55; pointer-events:none; }
.nx-morebox.is-loading{ opacity:.75; pointer-events:none; }

.nx-fabcol{ position:fixed; bottom:24px; z-index:1000; display:flex; flex-direction:column; gap:10px; width:56px; visibility:hidden; opacity:0; transition:opacity .15s ease; }
.nx-fabcol.is-ready{ visibility:visible; opacity:1; }
.nx-topbtn{ width:56px; height:56px; border-radius:50%; background:#fff; border:1px solid #e5e7eb; color:#2f55ff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.nx-topbtn[hidden]{ display:none !important; }

.nx-fab{ width:56px; height:56px; border-radius:50%; background:#2f55ff; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.18); text-decoration:none; }
.nx-fab:hover{ filter:brightness(0.95); }

.nx-ico{ width:18px; height:18px; display:inline-block; background-color:#9aa5b1; opacity:.85; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; margin-right:8px; vertical-align:middle; }

.nx-ico-heart{ -webkit-mask-image:url("img/heart.svg"); mask-image:url("img/heart.svg"); }
.nx-ico-msg  { -webkit-mask-image:url("img/message.svg"); mask-image:url("img/message.svg"); }
.nx-ico-eye  { -webkit-mask-image:url("img/eye.svg"); mask-image:url("img/eye.svg"); }

@media (max-width:720px){
  .nx-card{ padding:18px 18px; }
  .nx-topbtn, .nx-fab{ width:52px; height:52px; }
}





/* 게시판 뷰 */
#nxViewWrap.nx-view{position:relative;padding:12px 0 56px;color:#111;background:transparent;box-sizing:border-box}

#nxViewWrap .nx-righttop{position:absolute;top:4px;right:0;display:flex;align-items:center;gap:8px}
#nxViewWrap .nx-cat{display:inline-block;padding:4px 10px;border:1px solid #e6e9ef;border-radius:999px;background:#fff;color:#6b768a;font-size:12px;font-weight:700;text-decoration:none}
#nxViewWrap .nx-morewrap{position:relative}
#nxViewWrap .nx-kebab{width:28px;height:28px;padding:0;border:0;background:transparent;cursor:pointer}
#nxViewWrap .nx-kebab-ico{display:inline-block;width:24px;height:24px;background:#9aa5b1;-webkit-mask:url('img/more-vert.svg') no-repeat center/24px 24px;mask:url('img/more-vert.svg') no-repeat center/24px 24px}
#nxViewWrap .nx-menu{position:absolute;top:34px;right:0;min-width:120px;border:1px solid #e6e9ef;border-radius:10px;background:#fff;list-style:none;margin:0;padding:6px 0;z-index:10}
#nxViewWrap .nx-menu[hidden]{display:none}
#nxViewWrap .nx-menu li a{display:block;padding:8px 12px;color:#2b3342;text-decoration:none;font-size:13px}
#nxViewWrap .nx-menu li a:hover{background:#f7faff}

#nxViewWrap .nx-vhead{display:flex;align-items:center;gap:12px;margin:0 0 20px}
#nxViewWrap .nx-vavatar{display:inline-flex;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#eef2f7}
#nxViewWrap .nx-vavatar img{width:40px;height:40px;object-fit:cover;border-radius:50%;display:block}
#nxViewWrap .nx-vmeta{display:flex;align-items:center;gap:6px;min-width:0}
#nxViewWrap .nx-vnick{font-weight:700;color:#1b2533}
#nxViewWrap .nx-vdot{opacity:.45}
#nxViewWrap .nx-vtime{font-size:13px;color:#7a889c;white-space:nowrap}
#nxViewWrap .nx-vtitle{margin:0 0 20px;font-size:26px;line-height:1.25;font-weight:800;color:#101318;word-break:keep-all}
#nxViewWrap .nx-vcontent{font-size:16px;line-height:1.65;color:#202736}
#nxViewWrap .nx-vcontent p{margin:0 0 16px}
#nxViewWrap #bo_v_img{margin:0 0 10px}
#nxViewWrap #bo_v_img img{display:block;margin:0 auto 10px;max-width:100%;height:auto;border-radius:8px}
#nxViewWrap #bo_v_con img,#nxViewWrap #bo_v_atc img{max-width:100% !important;height:auto !important;border-radius:8px}

#nxViewWrap .nx-ico{display:inline-block;width:24px;height:24px;background:#1a1a1a;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:24px 24px;mask-size:24px 24px}
#nxViewWrap .nx-ico--eye{-webkit-mask-image:url('img/eye.svg');mask-image:url('img/eye.svg')}
#nxViewWrap .nx-ico--msg{-webkit-mask-image:url('img/message.svg');mask-image:url('img/message.svg')}
#nxViewWrap .nx-ico--chat{-webkit-mask-image:url('img/chat-bubble.svg');mask-image:url('img/chat-bubble.svg')}
#nxViewWrap .nx-ico--up{-webkit-mask-image:url('img/thumbs-up.svg');mask-image:url('img/thumbs-up.svg');background:#fff}
#nxViewWrap .nx-ico--down{-webkit-mask-image:url('img/thumbs-down.svg');mask-image:url('img/thumbs-down.svg');background:#fff}

#nxViewWrap .nx-vfoot{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#nxViewWrap .nx-vstats-left{display:flex;align-items:center;gap:12px;color:#9aa5b1}
#nxViewWrap .nx-vstat{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#9aa5b1}
#nxViewWrap .nx-vstat em{font-style:normal;font-weight:700;color:#1a1a1a}
#nxViewWrap .nx-sharebar{margin-left:auto;display:flex;align-items:center;gap:8px}
#nxViewWrap .nx-sharebtn{width:36px;height:36px;border-radius:10px;border:1px solid #e6e9ef;background:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none}
#nxViewWrap .nx-sharebtn:hover{background:#f7faff}

#nxViewWrap .nx-vvote{margin:14px 0 0;display:flex;justify-content:center;gap:10px}
#nxViewWrap .nx-vbtn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:#2c2f36;color:#fff;text-decoration:none}
#nxViewWrap .nx-vbtn .nx-vcount{font-weight:800}

#nxViewWrap .nx-hr{height:1px;border:0;background:#edf0f4;margin:16px 0 12px}





/* 게시판 댓글 */
#nxViewWrap .nx-cmtheadbar{display:flex;align-items:center;gap:14px;margin:16px 0 6px}
#nxViewWrap .nx-cmtcount{font-size:16px;font-weight:800;color:#111}
#nxViewWrap .nx-cmtcount em{font-style:normal;font-weight:800}
#nxViewWrap .nx-cmtarea{margin:0}
#nxViewWrap .nx-cmtempty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:36px 0;color:#6b768a}
#nxViewWrap .nx-cmtempty .nx-ico{background:#c3cad3}
#nxViewWrap .nx-cmtempty p{margin:0;font-weight:700}

#nxViewWrap .nx-cmt{position:relative;display:flex;gap:12px;padding:14px 0;border:0}
#nxViewWrap .nx-cmt:not(:last-child){border-bottom:1px solid #f1f3f6}
#nxViewWrap .nx-cmtavatar{width:28px;height:28px;border-radius:50%;overflow:hidden;background:#eef2f7;flex:0 0 28px;margin-top:2px}
#nxViewWrap .nx-cmtavatar img{width:28px;height:28px;object-fit:cover;border-radius:50%;display:block}
#nxViewWrap .nx-cmtwrap{flex:1 1 auto;min-width:0;background-repeat:no-repeat}
#nxViewWrap .nx-cmthead{display:flex;align-items:center;gap:6px;color:#2b3240}
#nxViewWrap .nx-cmtnick{font-weight:700}
#nxViewWrap .nx-wbadge{display:inline-block;padding:2px 6px;border-radius:999px;background:#ffece5;color:#ff6b3b;font-size:11px;font-weight:800}
#nxViewWrap .nx-cmttime{font-size:12px;color:#909db0}
#nxViewWrap .nx-cmtsep{color:#cad1db}
#nxViewWrap .nx-cmtbody{margin-top:6px;color:#2a3240;font-size:15px;line-height:1.65}
#nxViewWrap .nx-cmtbody p{margin:0 0 8px}
#nxViewWrap .nx-cmtbody .nx-lock{width:16px;height:16px;vertical-align:-3px;margin-right:4px;opacity:.7}

#nxViewWrap .nx-cmtacts{display:flex;align-items:center;gap:12px;margin-top:2px}
#nxViewWrap .nx-like{width:16px;height:16px;display:inline-block;-webkit-mask:radial-gradient(circle at 30% 35%, #000 40%, transparent 41%) top left/50% 50% no-repeat,radial-gradient(circle at 70% 35%, #000 40%, transparent 41%) top right/50% 50% no-repeat,linear-gradient(135deg, transparent 43%, #000 44% 56%, transparent 57%) center/70% 70% no-repeat;background:#d7dbe3}
#nxViewWrap .nx-cmtreply{font-size:13px;color:#9aa3b0;text-decoration:none;font-weight:700}
#nxViewWrap .nx-cmtreply:hover{text-decoration:underline}

#nxViewWrap .nx-cmtmenu{position:absolute;right:0;top:6px}
#nxViewWrap .nx-cmtmenu .nx-kebab{width:24px;height:24px;border:0;background:transparent;cursor:pointer}
#nxViewWrap .nx-cmtmenu .nx-kebab .nx-dot{width:4px;height:4px;border-radius:50%;background:#9aa3b0;position:relative;display:block;box-shadow:0 -6px 0 #9aa3b0,0 6px 0 #9aa3b0}
#nxViewWrap .nx-cmtmenu .nx-menu{position:absolute;top:26px;right:0;min-width:120px;list-style:none;padding:6px 0;margin:0;background:#fff;border:1px solid #e6e9ef;border-radius:10px;z-index:10}
#nxViewWrap .nx-cmtmenu .nx-menu[hidden]{display:none}
#nxViewWrap .nx-cmtmenu .nx-menu li a{display:block;padding:8px 12px;color:#2b3342;text-decoration:none;font-size:13px}
#nxViewWrap .nx-cmtmenu .nx-menu li a:hover{background:#f7faff}

#nxViewWrap .nx-cmtform,#nxViewWrap .nx-cmtwrite{border:0 !important;box-shadow:none !important;outline:0 !important}
#nxViewWrap .nx-cmtwrite{display:flex;gap:12px;align-items:flex-start;background:#f6f8fb;border-radius:12px;padding:16px;position:relative}
#nxViewWrap .nx-cmtw-avatar{width:32px;height:32px;flex:0 0 32px;border-radius:50%;overflow:hidden;background:#eef2f7}
#nxViewWrap .nx-cmtw-avatar img{width:32px;height:32px;object-fit:cover;border-radius:50%;display:block}
#nxViewWrap .nx-cmtw-field{position:relative;flex:1 1 auto;min-width:0}
#nxViewWrap .nx-cmtw-field textarea{width:100%; min-height:100px; resize:none; overflow:hidden; border:0 !important;outline:0 !important;box-shadow:none !important; font-size:14px; color:#2a3140;line-height:1.45;padding:0 112px 44px 12px;background:transparent}
#nxViewWrap .nx-cmtw-field textarea::-webkit-resizer{display:none}
#nxViewWrap .nx-cmtw-field textarea::placeholder{color:#9aa6b2}
#nxViewWrap .nx-inline-submit{position:absolute;right:12px;bottom:10px;height:34px;padding:0 14px;border:0;border-radius:5px;background:#e9edf3;color:#7c889a;font-weight:700;font-size:13px}
#nxViewWrap .nx-inline-submit:hover{filter:brightness(.98)}

@media (max-width:720px){
  #nxViewWrap .nx-vavatar,#nxViewWrap .nx-vavatar img{width:36px;height:36px}
  #nxViewWrap .nx-vtitle{font-size:22px}
  #nxViewWrap .nx-cmtavatar{width:26px;height:26px;flex-basis:26px}
  #nxViewWrap .nx-cmtavatar img{width:26px;height:26px}
  #nxViewWrap .nx-cmtw-avatar{width:30px;height:30px;flex-basis:30px}
  #nxViewWrap .nx-cmtw-avatar img{width:30px;height:30px}
  #nxViewWrap .nx-cmtw-field textarea{padding-right:112px;padding-bottom:46px}
  #nxViewWrap .nx-inline-submit{right:10px;bottom:10px}
}


/* 사용자 정의 */
textarea { padding:10px 20px !important; }