/* Human Bunker 게시판 공용 스타일 (홈 목록 · 글 보기) */
:root{--ink:#0b0b0c;--ink2:#121213;--ink3:#19191a;--row:#1c1c1d;--bone:#e9e4d8;--bone2:#a8a294;--dim:#6f6a61;--sig:#ff4a1a;--line:#2a2a2b;--ok:#9fc59a;
  --ko:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,var(--ko);--st:"Saira Stencil One",var(--ko)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink)}
body{color:var(--bone);font:14px/1.55 var(--ko);word-break:keep-all;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit;background:none;border:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* 경보 띠: 한 줄, 고정 */
.tick{background:var(--sig);color:#000;font:700 12px/26px var(--ko);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tick .wrap{display:flex;gap:18px}
.tick b{font:700 11px/26px var(--mono);letter-spacing:.06em}

/* 상단 바 */
.hd{border-bottom:1px solid var(--line)}
.hd .row{display:flex;align-items:center;gap:20px;height:60px}
.logo{display:flex;align-items:center;gap:10px;font:400 27px/1 var(--st);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.logo i{width:11px;height:11px;background:var(--sig)}
.logo b{font-weight:400;color:var(--sig)}
.srch{flex:1;max-width:380px;display:flex;align-items:center;border:1px solid #343435;background:var(--ink2);height:34px;padding:0 10px;gap:8px;opacity:.6}
.srch input{flex:1;outline:0;font-size:13px;cursor:not-allowed}.srch input::placeholder{color:var(--dim)}
.ch{display:flex;align-items:center;font:700 11px/1 var(--mono);letter-spacing:.04em;white-space:nowrap;border:1px solid #343435;height:30px}
.ch a{padding:0 9px;height:100%;display:flex;align-items:center;color:var(--dim)}
.ch a.on{color:var(--bone)}.ch a.on b{color:var(--sig)}
.ch i{width:1px;height:12px;background:#343435}
.acct{margin-left:auto;display:flex;align-items:center;gap:2px;font-size:13px;color:var(--dim);white-space:nowrap}
.acct span{padding:6px 9px}
.acct a:hover span{color:var(--bone)}
.acct a.me span{color:var(--bone);font-weight:700}
.acct span+span{border-left:1px solid var(--line)}

/* 게시판 탭 줄 */
.gnb{display:flex;height:42px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);background:var(--ink2)}
.gnb::-webkit-scrollbar{display:none}
.gnb .wrap{display:flex;align-items:stretch;width:100%}
.gnb a{display:flex;align-items:center;padding:0 14px;font:700 14px/1 var(--ko);color:var(--bone2);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.gnb a:hover{color:var(--bone)}
.gnb a.on{color:var(--bone);border-bottom-color:var(--sig)}
.gnb .sp{margin-left:auto;font-weight:500;font-size:13px}

/* 본문 2단 */
.main{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;padding-top:18px;padding-bottom:50px}
.main>*{min-width:0}

/* 게시판 머리 */
.gh{display:flex;align-items:flex-end;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--bone)}
.gh h1{font:800 21px/1.2 var(--ko);letter-spacing:-.04em}
.gh p{color:var(--bone2);font-size:13px;padding-bottom:2px}
.gh .wr{margin-left:auto;flex:none;font:700 13px/1 var(--ko);padding:9px 13px;border:1px solid var(--bone2);color:var(--bone)}
.gh .wr:not(.off):hover{background:var(--bone);color:#000}

.bar{display:flex;align-items:center;gap:4px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.bar .lt{display:flex;margin-right:10px}
.bar .lt button{font:700 13px/1 var(--ko);padding:7px 11px;border:1px solid var(--line);color:var(--bone2);cursor:pointer}
.bar .lt button+button{border-left:0}
.bar .lt button.on{background:var(--bone);color:#000;border-color:var(--bone)}
.bar .hh{display:flex;gap:2px;flex-wrap:wrap}
.bar .hh button{font-size:13px;color:var(--bone2);padding:6px 8px;cursor:pointer}
.bar .hh button.on{color:var(--sig);font-weight:700}

/* 글 목록 표 */
.lst{width:100%;border-collapse:collapse;table-layout:fixed}
.lst th{font:600 12px/1 var(--ko);color:var(--dim);height:34px;border-bottom:1px solid var(--line);text-align:center}
.lst td{height:37px;border-bottom:1px solid var(--row);text-align:center;font-size:12.5px;color:var(--bone2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lst tr:hover td{background:var(--ink2)}
.lst .n{width:64px;font:500 12px/1 var(--mono)}
.lst .h{width:76px}
.lst .t{text-align:left;padding:0 8px;color:var(--bone);font-size:14px}
.lst .t a:hover{text-decoration:underline}
.lst .t .c{color:var(--sig);font:700 12px/1 var(--mono);margin-left:5px}
.lst .t .x{color:var(--dim);font-size:11px;margin-left:5px}
.lst .w{width:96px}
.lst .d{width:62px;font:500 12px/1 var(--mono)}
.lst .v,.lst .r{width:48px;font:500 12px/1 var(--mono)}
.lst tr.ntc td{background:#16120f}
.lst tr.ntc .n{color:var(--sig);font:700 12px/1 var(--ko)}
.lst tr.ntc .t{font-weight:700}
.lst .w .ip{color:var(--dim);font:500 10.5px/1 var(--mono)}
.op{color:var(--bone)}
.op::after{content:"";display:inline-block;width:6px;height:6px;background:var(--sig);margin-left:5px;vertical-align:1px}
.hd-tag{color:var(--bone2)}
.empty td{height:150px;white-space:normal;color:var(--dim);font-size:13.5px;line-height:1.7}
.empty b{display:block;color:var(--bone);font-size:15px;margin-bottom:2px}

.pg{display:flex;justify-content:center;align-items:center;gap:4px;padding:18px 0 4px;font:500 13px/1 var(--mono)}
.pg span{min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--dim)}
.pg .on{color:var(--sig);font-weight:700;border:1px solid var(--line)}
.ft-bar{display:flex;justify-content:space-between;align-items:center;padding-top:6px}
.ft-bar .srch2{display:flex;gap:6px;opacity:.6}
.ft-bar .srch2 span{border:1px solid var(--line);padding:6px 10px;font-size:12.5px;color:var(--dim)}

/* 사이드 */
.side{display:flex;flex-direction:column;gap:16px}
.sb{border:1px solid var(--line);background:var(--ink2)}
.sb h2{font:800 14px/1 var(--ko);padding:11px 13px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.sb h2 small{margin-left:auto;font:500 11px/1 var(--mono);color:var(--dim)}
.sb ul{list-style:none}
.sb li a,.sb li>span{display:block;padding:8px 13px;font-size:13px;border-bottom:1px solid var(--row);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb li:last-child a{border-bottom:0}
.sb li a:hover{background:var(--ink3)}
.sb li em{font-style:normal;font:500 11px/1 var(--mono);color:var(--dim);margin-right:6px}
.sb .bd{padding:12px 13px;font-size:13px;color:var(--bone2);line-height:1.6}
.sb .bd b{color:var(--bone)}
.sb.door{position:relative;padding-top:5px}
.sb.door::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:5px;background:repeating-linear-gradient(-45deg,var(--sig) 0 8px,var(--ink) 8px 16px)}
.sb .go{display:block;margin:0 13px 13px;text-align:center;border:1px solid var(--bone2);padding:10px;font:700 13px/1 var(--ko)}
.sb .go:hover{background:var(--bone);color:#000}
.sb.help .bd b{font:800 22px/1 var(--mono);color:var(--sig);display:inline-block;margin-right:6px;vertical-align:-2px}

/* 글 보기 */
.post{border-top:2px solid var(--bone)}
.post .ph{padding:16px 4px 12px;border-bottom:1px solid var(--line)}
.post .ph .bdn{font-size:12.5px;color:var(--sig);font-weight:700}
.post .ph h1{font:800 21px/1.4 var(--ko);letter-spacing:-.035em;margin-top:6px}
.post .ph .mt{display:flex;gap:14px;margin-top:8px;font-size:12.5px;color:var(--bone2)}
.post .ph .mt span:not(:first-child){font-family:var(--mono)}
.post .bdy{padding:26px 4px 30px;font-size:15.5px;line-height:1.85;max-width:720px}
.post .bdy p+p,.post .bdy ul+p,.post .bdy p+ul{margin-top:14px}
.post .bdy ul{padding-left:20px}
.post .bdy li+li{margin-top:6px}
.post .bdy strong{color:#fff}
.post .bdy a{color:var(--sig);text-decoration:underline}
.vote{display:flex;justify-content:center;gap:10px;padding:10px 0 26px}
.vote span{border:1px solid var(--line);padding:11px 20px;font:700 13px/1 var(--ko);color:var(--dim);cursor:not-allowed;text-align:center;min-width:96px}
.vote span b{display:block;font:700 18px/1 var(--mono);margin-top:6px;color:var(--bone2)}
.cmt{border-top:1px solid var(--line)}
.cmt h2{font:700 14px/1 var(--ko);padding:13px 4px}
.cmt h2 b{color:var(--sig);font-family:var(--mono)}
.cmt .no{border-top:1px solid var(--row);padding:22px 4px;color:var(--dim);font-size:13px}
.cmt .box{border:1px solid var(--line);background:var(--ink2);height:70px;display:flex;align-items:center;padding:0 14px;color:var(--dim);font-size:13px;margin-top:4px}
.nav2{list-style:none;border-top:2px solid var(--bone);margin-top:26px}
.nav2 li{display:flex;gap:14px;padding:10px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.nav2 li em{font-style:normal;color:var(--dim);width:44px;flex:none}
.nav2 li a:hover{text-decoration:underline}
.back{display:inline-block;margin-top:14px;border:1px solid var(--line);padding:9px 14px;font-size:13px}

footer{border-top:1px solid var(--line);padding:22px 0 36px;color:var(--dim);font-size:12.5px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{margin-right:14px}

@media (max-width:900px){
  .wrap{padding:0 14px}
  .tick span:nth-child(n+3){display:none}
  .hd .row{height:52px;gap:8px}
  .logo{font-size:20px;gap:7px}.logo i{width:8px;height:8px}
  .srch{display:none}
  .ch{height:26px;font-size:10px}.ch a{padding:0 6px}.ch a span{display:none}
  .acct{font-size:12px}.acct span{padding:5px 6px}
  .gnb{height:40px}.gnb .wrap{padding:0 4px}.gnb a{padding:0 10px;font-size:14px}.gnb .sp{display:none}
  .main{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:12px}
  .gh h1{font-size:18px}.gh p{display:none}.gh .wr{padding:8px 10px;font-size:12.5px}
  .bar{padding:8px 0}.bar .lt button{padding:6px 9px;font-size:12.5px}
  .bar .hh{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:4px}.bar .hh button{white-space:nowrap}
  /* 한 줄 목록: 제목 + 메타 줄 */
  .lst thead{display:none}
  .lst,.lst tbody,.lst tr{display:block}
  .lst tr{padding:9px 2px;border-bottom:1px solid var(--row);display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
  .lst td{display:block;height:auto;border:0;background:none!important;font-size:12px;text-align:left}
  .lst .t{order:1;width:100%;padding:0;font-size:15px;white-space:normal;line-height:1.4;margin-bottom:4px}
  .lst .t .x{white-space:nowrap}
  .lst .n{display:none}
  .lst .h{order:2;width:auto;color:var(--sig)}
  .lst .w{order:3;width:auto}
  .lst .d{order:4;width:auto}
  .lst .v,.lst .r{order:5;width:auto}
  .lst .v:not(:empty)::before{content:"조회 "}.lst .r:not(:empty)::before{content:"추천 "}
  .lst tr.ntc{background:#16120f;padding-left:8px;padding-right:8px}
  .lst tr.ntc .h{font-weight:700}
  .empty{display:block}.empty td{width:100%;padding:30px 0;text-align:center}
  .ft-bar .srch2{display:none}
  .post .ph h1{font-size:19px}.post .bdy{font-size:15px;padding-top:20px}
}

/* 404 */
.nf{padding:46px 4px 40px;border-bottom:1px solid var(--line)}
.nf b{display:block;font:400 72px/1 var(--st);color:var(--sig)}
.nf p{margin-top:12px;color:var(--bone2);font-size:14.5px}
.nf .en{font-size:13px;color:var(--dim)}.nf .en a{text-decoration:underline}
.nf-go{display:flex;gap:8px;margin-top:22px}
.nf-go a{border:1px solid var(--line);padding:9px 14px;font-size:13px}
.nf-go a:first-child{border-color:var(--bone2);font-weight:700}
.nf-go a:hover{background:var(--bone);color:#000}

/* 글쓰기 */
.wlock{margin-top:12px;border-left:3px solid var(--sig);background:#16120f;padding:11px 14px;font-size:13.5px;color:var(--bone2)}
.wlock b{color:var(--bone);margin-right:4px}
.wf{margin-top:12px;border-top:1px solid var(--line)}
.wr-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:8px 0}
.wr-row label{width:64px;flex:none;font-size:13px;color:var(--bone2);font-weight:600}
.wr-row label.sub{width:auto;margin-left:14px}
.wf select,.wf input,.wf textarea{background:var(--ink2);border:1px solid #343435;color:var(--bone);font:inherit;font-size:14px;height:34px;padding:0 10px;cursor:not-allowed;opacity:.65}
.wf input{flex:1;min-width:0}
.wf select{min-width:120px}
.wf textarea{display:block;width:100%;height:320px;margin-top:10px;padding:12px;resize:none;line-height:1.7}
.wf ::placeholder{color:var(--dim)}
.wr-act{display:flex;justify-content:flex-end;gap:8px;padding:12px 0}
.wr-act a,.wr-act button{font:700 13px/1 var(--ko);padding:11px 18px;border:1px solid var(--line)}
.wr-act button{background:#2a2a2b;color:var(--dim);cursor:not-allowed}
.wrule{border:1px solid var(--line);padding:14px 16px;margin-top:6px;font-size:13px;color:var(--bone2)}
.wrule h2{font:800 13.5px/1 var(--ko);color:var(--bone);margin-bottom:8px}
.wrule ul{padding-left:18px}.wrule li+li{margin-top:4px}
.wrule a{display:inline-block;margin-top:10px;color:var(--sig);text-decoration:underline}

@media (max-width:900px){
  /* 탭 줄이 옆으로 더 있다는 단서: 오른쪽 끝을 흐리게 */
  .gnb{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .gnb .wrap::after{content:"";flex:none;width:40px}
  .nf{padding:32px 2px}
  .nf b{font-size:56px}
  .wr-row{flex-wrap:wrap}.wr-row label.sub{margin-left:0}
  .wf select{flex:1;min-width:0}
  .wf textarea{height:240px}
}
.gh .wr.off{border-color:#444;color:var(--dim)}

/* 글 보기 (DB 글) */
.post .ph .mt .mem,.cm b.mem{color:var(--bone);font-weight:700}
.pdel{margin-left:auto;font-size:12px;color:var(--dim);cursor:pointer}.pdel:hover{color:var(--sig)}
.vote.on button{border:1px solid #3a3a3b;padding:11px 20px;font:700 13px/1 var(--ko);color:var(--bone2);text-align:center;min-width:96px;cursor:pointer}
.vote.on button b{display:block;font:700 18px/1 var(--mono);margin-top:6px;color:var(--bone)}
.vote.on button[data-v="1"] b{color:var(--sig)}
.vote.on button:hover{border-color:var(--bone2)}
.vmsg{text-align:center;font-size:12.5px;color:var(--bone2);margin:-14px 0 16px;min-height:1em}
.post .bdy{white-space:normal;overflow-wrap:anywhere}
.clist{list-style:none}
.clist li{border-top:1px solid var(--row);padding:11px 4px}
.clist li.re{padding-left:26px;background:var(--ink2)}
.cm{display:flex;align-items:baseline;gap:10px;font-size:12.5px;color:var(--bone2)}
.cm b{font-weight:600}
.cm span{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.cm button{margin-left:auto;font-size:12px;color:var(--dim);cursor:pointer}.cm button:hover{color:var(--sig)}
.cb{margin-top:4px;font-size:14px;line-height:1.65;overflow-wrap:anywhere}.cb p+p{margin-top:6px}
.cf{border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.cf-who{display:flex;gap:6px;margin-bottom:6px}
.cf input,.cf textarea{background:var(--ink2);border:1px solid #343435;color:var(--bone);font:inherit;font-size:13.5px;padding:0 10px}
.cf input{height:32px;width:160px;min-width:0}
.cf textarea{display:block;width:100%;height:84px;padding:10px;resize:vertical;line-height:1.6}
.cf ::placeholder{color:var(--dim)}
.cf-act{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:6px}
.cf-act .msg,.wr-act .msg{font-size:12.5px;color:var(--sig);margin-right:auto}
.cf-act button,.wf.live .wr-act button{font:700 13px/1 var(--ko);padding:10px 18px;background:var(--bone);color:#000;cursor:pointer}
.cf-act button:disabled,.wf.live .wr-act button:disabled{opacity:.5;cursor:wait}
/* 글쓰기: DB 연결되면 잠금 풀림 */
.wf.live select,.wf.live input,.wf.live textarea{cursor:auto;opacity:1}
.wf.live input:focus,.wf.live textarea:focus,.wf.live select:focus,.cf input:focus,.cf textarea:focus{outline:1px solid var(--bone2);outline-offset:-1px}
@media (max-width:900px){
  .cf input{flex:1;width:auto}
  .clist li.re{padding-left:16px}
}
/* 가입·로그인 */
.jf .wr-row label{width:72px}
.nchk{flex:none;font-size:12px;color:var(--dim);min-width:64px}
.nchk.ok{color:var(--ok)}.nchk.no{color:var(--sig)}
.jok{margin-top:12px;border-left:3px solid var(--ok);background:#121712;padding:11px 14px;font-size:13.5px;color:var(--bone2)}
.jok b{color:var(--bone);margin-right:4px}
.me-box{margin-top:12px;border-top:1px solid var(--line);padding-top:14px;font-size:14.5px}
.me-box b{color:var(--bone)}
.me-box .wr-act{justify-content:flex-start}
.me-box button{font:700 13px/1 var(--ko);padding:11px 18px;border:1px solid var(--line);color:var(--bone2);cursor:pointer}
.jf .wr-act{justify-content:flex-end}
@media (max-width:900px){
  .nchk{min-width:0}.nchk:empty{display:none}
}
.jf{border-top:0;margin-top:0}.wlock:not([hidden])~.jf{margin-top:12px;border-top:1px solid var(--line)}
.me-box{border-top:0;padding-top:4px}
.acct a.me span{display:inline-block;max-width:9em;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
@media (max-width:900px){.acct a.me span{max-width:5em}.acct a[data-out]{display:none}}
/* 비밀번호 찾기 링크, 만료 안내, 비회원 로그인 안내 */
.wr-act a.jfind{order:-1;border:0;padding:11px 0;margin-right:auto;font-weight:500;font-size:12.5px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.wr-act a.jfind:hover{color:var(--bone)}
.jfind~.msg{margin-right:0}
.jok a{color:var(--bone);text-decoration:underline;text-underline-offset:3px;margin-left:4px}
.jok.bad{border-left-color:var(--sig);background:#1a1210}
.gl{font-size:12.5px;color:var(--dim);margin:2px 0 8px}
.gl a{color:var(--bone2);text-decoration:underline;text-underline-offset:3px}
.wf .gl{padding-left:74px;margin:6px 0}
@media (max-width:900px){.wf .gl{padding-left:0}}