/* board-public.css - 방문자용 게시판 화면(WEB-INF/jsp/homepage/board/list.jsp, view.jsp)의 스타일.
   글꼴·기본 글자색·메뉴(.nb-nav)는 nb-runtime.css(빌더로 만든 메인과 같은 파일)의 것을 쓰고, 여기는 게시판 자체만 다룬다.
   클래스는 전부 bbs- 로 시작한다. 글 내용(.bbs-content) 안의 ez- 클래스는 웹 에디터가 만든 것이다.
   2026.10.07 : 동적 항목 - 목록의 항목 칸(.bbs-col-field), 검색 조건 칸(.bbs-search-fields), 글 보기의 항목 목록(.bbs-fields) 추가
   2026.10.08 : 글 보기의 이전글/다음글(.bbs-nav-post, .bbs-nav-row/-label/-title/-empty) 추가
   2026.10.09 : 통합검색 결과 화면(homepage/search/result.jsp)의 .bbs-search-result / -form / -msg / -tabs / -group / -list / -item ... 추가 (파일 끝) */
.bbs-page{background-color:#fff;color:#111827}
.bbs-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.bbs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 머리 / 꼬리 */
.bbs-header{border-bottom:1px solid #e5e7eb;background-color:#fff}
.bbs-header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.bbs-site{font-size:20px;font-weight:800;color:#111827;text-decoration:none}
.bbs-nav{margin:0}
.bbs-footer{margin-top:80px;padding:28px 0;border-top:1px solid #e5e7eb;background-color:#f9fafb;color:#6b7280;font-size:13px}

/* 제목 줄 */
.bbs-main{padding-top:40px;min-height:50vh}
.bbs-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:2px solid #111827;margin-bottom:24px}
.bbs-title{margin:0;font-size:28px;font-weight:800;line-height:1.3}
.bbs-path{margin:0;font-size:13px;color:#6b7280}
.bbs-path a{color:inherit;text-decoration:none}
.bbs-path a:hover{text-decoration:underline}
.bbs-path strong{color:#111827;font-weight:600}
/* 옆 메뉴(SitePageNav) : 1차 메뉴의 하위 전체. 하위가 있는 묶음은 details 로 접는다 */
.bbs-main.has-lnb{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
.bbs-main.has-lnb{padding-bottom:64px}
.bbs-body{min-width:0}
.bbs-lnb{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;border:1px solid #e5e7eb;border-radius:12px;background-color:#fff}
.bbs-lnb-title{margin:0;padding:22px 20px;border-radius:11px 11px 0 0;background-color:#1d4ed8;color:#fff;font-size:20px;font-weight:800;line-height:1.3}
.bbs-lnb-list,.bbs-lnb-sub{margin:0;padding:0;list-style:none}
.bbs-lnb-list>li{border-top:1px solid #e5e7eb}
.bbs-lnb-list>li:first-child{border-top:0}
.bbs-lnb a,.bbs-lnb summary{display:block;padding:13px 20px;color:#1f2937;font-size:15px;font-weight:600;line-height:1.4;text-decoration:none;cursor:pointer}
.bbs-lnb summary{position:relative;padding-right:40px;list-style:none}
.bbs-lnb summary::-webkit-details-marker{display:none}
.bbs-lnb summary::after{content:"";position:absolute;right:20px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:2px solid #9ca3af;border-bottom:2px solid #9ca3af;transform:rotate(45deg)}
.bbs-lnb details[open]>summary{color:#1d4ed8}
.bbs-lnb details[open]>summary::after{margin-top:-2px;transform:rotate(225deg);border-color:#1d4ed8}
.bbs-lnb a:hover,.bbs-lnb summary:hover{background-color:#f3f6fb;color:#1d4ed8}
.bbs-lnb a:focus-visible,.bbs-lnb summary:focus-visible{outline:2px solid #1d4ed8;outline-offset:-2px}
.bbs-lnb-sub{padding:4px 0 10px;background-color:#f8fafc}
.bbs-lnb-sub a,.bbs-lnb-sub summary{padding:8px 20px 8px 30px;font-size:14px;font-weight:400;color:#4b5563}
.bbs-lnb-sub .bbs-lnb-sub a{padding-left:42px}
.bbs-lnb a[aria-current="page"]{color:#1d4ed8;font-weight:700;box-shadow:inset 3px 0 0 #1d4ed8;background-color:#eef4ff}
.bbs-lnb a[target="_blank"]::after{content:"\2197";margin-left:4px;font-size:.85em;opacity:.6}
@media (max-width:900px){
.bbs-main.has-lnb{display:block}
.bbs-lnb{position:static;max-height:none;margin-bottom:28px}
.bbs-lnb-title{padding:14px 18px;font-size:17px}
.bbs-lnb-list{max-height:260px;overflow-y:auto}
}

/* 검색 */
.bbs-search{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.bbs-count{margin:0;font-size:14px;color:#4b5563}
.bbs-count strong{color:#1d4ed8}
.bbs-search-box{display:flex;gap:6px}
.bbs-search-box input{width:240px;max-width:100%;height:40px;padding:0 12px;border:1px solid #d1d5db;border-radius:6px;font:inherit;font-size:14px}
.bbs-search-box button,.bbs-btn{display:inline-block;height:40px;padding:0 20px;border:1px solid #111827;border-radius:6px;background-color:#111827;color:#fff;font:inherit;font-size:14px;font-weight:600;line-height:38px;text-decoration:none;cursor:pointer}
.bbs-search-box input:focus-visible,.bbs-search-box button:focus-visible,.bbs-btn:focus-visible,.bbs-table a:focus-visible,.bbs-paging a:focus-visible,.bbs-search-fields input:focus-visible,.bbs-search-fields select:focus-visible,.bbs-fields a:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}
/* 검색 조건 항목 (게시판의 "검색 조건" 동적 항목) - 검색어 칸 아래 한 줄에 항목명 + 입력칸 */
.bbs-search-fields{flex:0 0 100%;display:flex;flex-wrap:wrap;gap:8px 20px;padding:12px 14px;border:1px solid #e5e7eb;border-radius:6px;background-color:#f9fafb}
.bbs-search-field{display:flex;align-items:center;gap:6px;font-size:14px}
.bbs-search-field-nm{font-weight:600;color:#374151;white-space:nowrap}
.bbs-search-fields input,.bbs-search-fields select{height:34px;padding:0 10px;border:1px solid #d1d5db;border-radius:6px;background-color:#fff;font:inherit;font-size:14px;color:#111827}
.bbs-search-fields input[type="text"]{width:160px}
.bbs-search-fields input[type="date"]{width:150px}
.bbs-search-fields .bbs-search-num{width:110px}
.bbs-search-fields select{min-width:120px}
.bbs-search-tilde{color:#9ca3af}

/* 목록 */
.bbs-table{width:100%;border-collapse:collapse;border-top:1px solid #111827;font-size:15px}
.bbs-table th{padding:14px 8px;border-bottom:1px solid #d1d5db;background-color:#f9fafb;font-weight:700;font-size:14px;white-space:nowrap}
.bbs-table td{padding:15px 8px;border-bottom:1px solid #e5e7eb;text-align:center;color:#4b5563}
.bbs-table td.bbs-col-title{text-align:left;color:#111827}
.bbs-col-no{width:80px}
.bbs-col-writer{width:140px}
.bbs-col-date{width:120px}
.bbs-col-view{width:80px}
/* 동적 항목 칸 (제목 뒤). 값은 표시 문자열 하나 - 길면 줄여서 보여 준다 */
.bbs-col-field{width:130px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbs-table a{color:inherit;text-decoration:none}
.bbs-table a:hover{text-decoration:underline}
.bbs-table tr.is-notice td{background-color:#f8fafc}
.bbs-table tr.is-notice td.bbs-col-title{font-weight:700}
.bbs-table tr.is-deleted .bbs-nolink{color:#9ca3af;text-decoration:line-through}
.bbs-title-cell{display:block}
.bbs-depth-1{padding-left:20px}
.bbs-depth-2{padding-left:40px}
.bbs-depth-3{padding-left:60px}
.bbs-depth-4{padding-left:80px}
.bbs-depth-5{padding-left:100px}
.bbs-reply{margin-right:6px;color:#9ca3af}
.bbs-nolink{color:#6b7280}
.bbs-lock{margin-right:4px;font-size:13px}
.bbs-badge{display:inline-block;padding:2px 10px;border-radius:999px;background-color:#1d4ed8;color:#fff;font-size:12px;font-weight:700;line-height:1.6}
.bbs-new{margin-left:6px;color:#dc2626;font-size:11px;font-weight:800}
.bbs-cmt{margin-left:6px;color:#1d4ed8;font-size:13px}
.bbs-file{margin-left:6px;padding:1px 6px;border:1px solid #d1d5db;border-radius:4px;color:#6b7280;font-size:11px}
.bbs-empty{padding:64px 8px !important;color:#6b7280}

/* 페이지 번호 */
.bbs-paging{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:28px}
.bbs-paging a,.bbs-paging strong{min-width:38px;height:38px;padding:0 10px;border:1px solid #d1d5db;border-radius:6px;color:#374151;font-size:14px;line-height:36px;text-align:center;text-decoration:none}
.bbs-paging a:hover{border-color:#111827}
.bbs-paging .bbs-page-on{border-color:#1d4ed8;background-color:#1d4ed8;color:#fff}

/* 글 보기 */
.bbs-post-head{padding:6px 0 18px;border-bottom:1px solid #e5e7eb}
.bbs-post-title{margin:0 0 12px;font-size:22px;font-weight:700;line-height:1.4}
.bbs-post-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;font-size:14px;color:#6b7280}
.bbs-post-meta div{display:flex;gap:8px}
.bbs-post-meta dt{font-weight:600;color:#374151}
.bbs-post-meta dd{margin:0}
/* 동적 항목 (머리와 내용 사이). 항목명 | 값 두 칸 - 값이 있는 항목만 나온다 */
.bbs-fields{margin:0;border-bottom:1px solid #e5e7eb;font-size:15px}
.bbs-field{display:grid;grid-template-columns:160px 1fr;gap:0 16px;padding:11px 4px;border-bottom:1px dashed #e5e7eb}
.bbs-field:last-child{border-bottom:0}
.bbs-field dt{font-weight:600;color:#374151}
.bbs-field dd{margin:0;color:#111827;overflow-wrap:anywhere}
.bbs-field-text{white-space:pre-wrap}
.bbs-field a{color:#1d4ed8}
.bbs-field ul{margin:0;padding:0;list-style:none}
.bbs-field li{padding:2px 0}
.bbs-files{padding:14px 18px;border-bottom:1px solid #e5e7eb;background-color:#f9fafb;font-size:14px}
.bbs-files-title{display:block;margin-bottom:6px;font-size:13px;color:#374151}
.bbs-files ul{margin:0;padding:0;list-style:none}
.bbs-files li{padding:3px 0}
.bbs-files a{color:#1d4ed8}
.bbs-file-size{color:#6b7280;font-size:12px}
.bbs-content{min-height:240px;padding:32px 4px;border-bottom:1px solid #e5e7eb;font-size:16px;line-height:1.8;overflow-wrap:anywhere}
.bbs-content::after{content:"";display:block;clear:both}
.bbs-content-text{white-space:pre-wrap}
/* 프로그램 메뉴의 소개 글(page.jsp) - 프로그램 화면 위에 짧게 */
.bbs-content.bbs-intro{min-height:0;padding:4px 4px 24px;margin-bottom:24px}
/* 본문이 빈 콘텐츠 메뉴의 "준비 중" 안내 (homepage/page/page.jsp) */
.bbs-content-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:320px;padding:56px 24px;border:1px dashed #cbd5e1;border-radius:12px;background-color:#f8fafc;text-align:center}
.bbs-content-empty p{margin:0}
.bbs-empty-title{font-size:20px;font-weight:800;color:#111827;overflow-wrap:anywhere}
.bbs-empty-desc{font-size:15px;color:#6b7280}
/* 이전글 / 다음글 ([목록] 위). nav 에 bbs-nav 도 붙지만 그 이름은 틀의 사이트 메뉴가 쓰므로 규칙은 bbs-nav-post 로 건다 */
.bbs-nav-post{margin-top:28px;border-top:1px solid #d1d5db;border-bottom:1px solid #d1d5db;font-size:15px}
.bbs-nav-row{display:flex;align-items:center;gap:16px;min-width:0;padding:13px 4px}
.bbs-nav-row+.bbs-nav-row{border-top:1px solid #e5e7eb}
.bbs-nav-label{flex:0 0 72px;font-weight:700;color:#374151;font-size:14px}
.bbs-nav-title{flex:1 1 auto;min-width:0;color:#111827;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbs-nav-title:hover{text-decoration:underline}
.bbs-nav-title:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}
.bbs-nav-empty{flex:1 1 auto;min-width:0;color:#6b7280}
.bbs-actions{display:flex;justify-content:flex-end;margin-top:20px}
.bbs-notice-box{padding:72px 16px;border-bottom:1px solid #e5e7eb;color:#4b5563;text-align:center}
.bbs-lock-big{margin:0 0 8px;font-size:36px}

/* 글 내용 - 웹 에디터가 만든 요소. 편집할 때만 쓰는 손잡이 등은 감춘다 */
.bbs-content p{margin:0 0 12px}
.bbs-content img{max-width:100%;height:auto}
.bbs-content a{color:#1d4ed8}
.bbs-content blockquote{margin:16px 0;padding:4px 16px;border-left:3px solid #1d4ed8;background-color:#f8f8fb;color:#4b5563}
.bbs-content table{max-width:100%;border-collapse:collapse;margin:16px 0}
.bbs-content table.ez-table{width:100%}
.bbs-content td,.bbs-content th{padding:8px 10px;border:1px solid #d7d9e0;vertical-align:top}
.bbs-content th{background-color:#f8f9fc;font-weight:600;text-align:left}
.bbs-content pre{margin:16px 0;padding:16px;border-radius:6px;background-color:#1f2937;color:#e5e7eb;font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.bbs-content figure{margin:16px 0;max-width:100%}
.bbs-content figure[data-align="left"]{float:left;margin:4px 16px 8px 0;max-width:50%}
.bbs-content figure[data-align="right"]{float:right;margin:4px 0 8px 16px;max-width:50%}
.bbs-content figure[data-align="center"]{display:table;margin-left:auto;margin-right:auto}
.bbs-content figure.ez-media[data-align="center"]{display:block}
.bbs-content .ez-img-wrap{display:inline-block;max-width:100%}
.bbs-content .ez-media-wrap{position:relative;width:100%;padding-bottom:56.25%;background-color:#000}
.bbs-content .ez-media-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.bbs-content [class*="resize-handle"],.bbs-content .ez-media-click-shield,.bbs-content .ez-code-langbar{display:none !important}

/* 댓글 */
.bbs-comments{margin-top:28px}
.bbs-comments-title{margin:0 0 10px;font-size:16px}
.bbs-comments-title span{color:#1d4ed8}
.bbs-comments ul{margin:0;padding:0;list-style:none;border-top:1px solid #e5e7eb}
.bbs-comments li{padding:14px 4px;border-bottom:1px solid #e5e7eb}
.bbs-comment-meta{margin:0 0 4px;font-size:13px;color:#6b7280}
.bbs-comment-meta strong{margin-right:8px;color:#111827}
.bbs-comment-body{margin:0;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}

@media (max-width:767px){
.bbs-wrap{padding:0 16px}
.bbs-header-inner{min-height:60px}
.bbs-main{padding-top:24px}
.bbs-title{font-size:22px}
.bbs-path{display:none}
.bbs-search-box{width:100%}
.bbs-search-box input{flex:1;width:auto}
.bbs-search-fields{gap:8px 12px;padding:10px 12px}
.bbs-search-field{flex:0 0 100%;flex-wrap:wrap}
.bbs-search-fields input[type="text"],.bbs-search-fields select{flex:1;width:auto;min-width:0}
.bbs-search-fields input[type="date"],.bbs-search-fields .bbs-search-num{flex:1;width:auto;min-width:0}
/* 좁은 화면에서는 번호·조회 칸을 감추고, 작성자·등록일을 제목 아래 한 줄로 내린다 */
.bbs-table thead{display:none}
.bbs-table tr{display:flex;flex-wrap:wrap;gap:2px 12px;padding:14px 4px;border-bottom:1px solid #e5e7eb}
.bbs-table td{padding:0;border:0;font-size:13px;text-align:left}
.bbs-table td.bbs-col-title{flex:0 0 100%;font-size:15px}
.bbs-table td.bbs-col-no,.bbs-table td.bbs-col-view{display:none}
.bbs-table tr.is-notice td.bbs-col-no{display:block;flex:0 0 100%}
.bbs-col-writer,.bbs-col-date{width:auto}
/* 동적 항목 칸은 작성자·등록일과 같은 줄에 "항목명: 값"으로 내린다 (머리글이 감춰지므로 항목명을 앞에 붙인다). 값이 없는 칸은 감춘다 */
.bbs-table td.bbs-col-field{width:auto;max-width:none;overflow:visible;text-overflow:clip;white-space:normal;color:#4b5563}
.bbs-table td.bbs-col-field::before{content:attr(data-nm) ": ";color:#9ca3af}
.bbs-table td.bbs-col-field:empty{display:none}
.bbs-table td.bbs-empty{flex:0 0 100%;text-align:center}
.bbs-depth-1,.bbs-depth-2,.bbs-depth-3,.bbs-depth-4,.bbs-depth-5{padding-left:16px}
.bbs-post-title{font-size:19px}
.bbs-field{grid-template-columns:1fr;gap:2px 0;padding:9px 0}
.bbs-field dt{font-size:13px}
.bbs-content{padding:24px 0;font-size:15px}
.bbs-content figure[data-align="left"],.bbs-content figure[data-align="right"]{float:none;max-width:100%;margin:16px 0}
.bbs-content table{display:block;overflow-x:auto}
.bbs-nav-row{gap:12px;padding:12px 0}
.bbs-nav-label{flex-basis:56px;font-size:13px}
.bbs-nav-title,.bbs-nav-empty{font-size:14px}
}
/* 통합검색 결과 (homepage/search/result.jsp - 방문자용 메뉴 화면의 <main> 안에 들어가는 조각). 2026.10.09
   검색 폼은 게시판 목록의 .bbs-search-box(입력칸·버튼 모양)를 같이 쓰고 .bbs-search-form 으로 자리만 바꾼다. 쪽 번호는 .bbs-paging 그대로다.
   색은 theme-daegu.css 의 토큰(var(--c-*))을 쓰고, 그 파일이 없을 때의 값을 뒤에 적었다 - 테마 파일에 같은 규칙을 다시 적지 않는다.
   게시판 목록이 이미 쓰는 이름(.bbs-search, .bbs-search-box, .bbs-search-fields, .bbs-search-field, .bbs-search-num, .bbs-search-tilde)과 겹치게 짓지 말 것 */
.bbs-search-result{margin:0 0 40px}
.bbs-search-box.bbs-search-form{justify-content:center;margin:0 0 20px;padding:24px 16px;border:1px solid var(--c-line,#e5e7eb);border-radius:var(--r-md,8px);background-color:var(--c-bg-soft,#f9fafb)}
.bbs-search-box.bbs-search-form input{flex:0 1 480px;width:auto;min-width:0}
.bbs-search-msg{margin:0 0 16px;font-size:15px;color:var(--c-text-2,#374151)}
.bbs-search-msg strong{color:var(--c-primary,#1d4ed8)}
.bbs-search-kw{overflow-wrap:anywhere}
.bbs-search-msg.is-notice{padding:14px 16px;border-left:4px solid var(--c-accent,#c2410c);background-color:var(--c-bg-soft,#f9fafb);color:var(--c-text,#111827)}
.bbs-search-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0;border-bottom:2px solid var(--c-text,#111827)}
.bbs-search-tab{padding:10px 18px;border:1px solid var(--c-line-dk,#d1d5db);border-bottom:0;border-radius:6px 6px 0 0;background-color:var(--c-bg-soft,#f9fafb);color:var(--c-text-2,#374151);font-size:15px;font-weight:600;line-height:1.4;text-decoration:none}
.bbs-search-tab:hover{color:var(--c-text,#111827)}
.bbs-search-tab.is-on{border-color:var(--c-text,#111827);background-color:var(--c-text,#111827);color:#fff}
.bbs-search-tab-cnt{font-weight:400}
.bbs-search-tab:focus-visible,.bbs-search-title a:focus-visible,.bbs-search-more a:focus-visible{outline:3px solid var(--c-focus,#1d4ed8);outline-offset:2px}
.bbs-search-group{margin:28px 0 0}
.bbs-search-head{margin:0;padding:0 0 10px;border-bottom:1px solid var(--c-line-dk,#d1d5db);font-size:18px;font-weight:800;line-height:1.4}
.bbs-search-head-cnt{margin-left:6px;font-size:14px;font-weight:400;color:var(--c-text-3,#6b7280)}
.bbs-search-list{margin:0;padding:0;list-style:none}
.bbs-search-item{padding:16px 4px;border-bottom:1px solid var(--c-line,#e5e7eb)}
.bbs-search-title{margin:0;font-size:16px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.bbs-search-title a{color:var(--c-text,#111827);text-decoration:none}
.bbs-search-title a:hover{text-decoration:underline}
.bbs-search-board{color:var(--c-primary,#1d4ed8);font-weight:600}
.bbs-search-snippet{margin:6px 0 0;font-size:14px;line-height:1.7;color:var(--c-text-2,#4b5563);overflow-wrap:anywhere}
.bbs-search-date{margin:6px 0 0;font-size:13px;color:var(--c-text-3,#6b7280)}
.bbs-search-result mark{padding:0 2px;border-radius:2px;background-color:#fff3b0;color:inherit;font-weight:700}
.bbs-search-more{margin:12px 0 0;font-size:14px;text-align:right}
.bbs-search-more a{color:var(--c-text-2,#374151)}
.bbs-search-empty{margin:0;padding:64px 8px;border-bottom:1px solid var(--c-line,#e5e7eb);color:var(--c-text-3,#6b7280);text-align:center}
.bbs-search-capped{margin:16px 0 0;font-size:13px;color:var(--c-text-3,#6b7280)}
@media (max-width:767px){
.bbs-search-box.bbs-search-form{padding:16px 12px}
.bbs-search-box.bbs-search-form input{flex:1 1 auto}
.bbs-search-tab{flex:1 1 auto;padding:9px 8px;font-size:14px;text-align:center}
.bbs-search-item{padding:14px 0}
}

/* ============================================================
   방문자 회원 화면 (WEB-INF/jsp/homepage/member/*.jsp). 2026.10.10 - 사이클 5 [5-1]
   마크업 표준은 resources/nexuscms/html-samples/visitor-member/*.html 이다(화면마다 한 파일).
   색 · 글자 · 간격은 theme-daegu.css 의 토큰(var(--c-*), --fs-*, --sp-*, --r-*)만 쓴다. frameHead.jspf 가 두 틀 모두에서
   theme-daegu.css 를 같이 걸므로 없을 때의 값을 뒤에 적지 않았다 - 테마 없이 쓰는 사이트가 생기면 달아야 한다.
     - #FBE9E2 는 theme-daegu.css 가 경고 바탕(.rich .note-warn, .view-divider)에 이미 쓰는 값이다(토큰 없음).
   제목 줄(.bbs-title-row), 읽기 전용 항목 목록(.bbs-fields / .bbs-field), 버튼(.btn .btn-primary .btn-outline)은 기존 것을 그대로 쓴다.
   클래스는 전부 mbr- 로 시작한다. 예외는 .pw-rule 하나다 - nexus-password-policy.js 의 renderChecklist 가 만드는 li (ok | bad).
   회원 링크(ul.nx-member-links, .nb-member-*)의 모양은 nb-runtime.css 에 있고, 여기에는 기본 틀 머리(.bbs-header-inner) 안의 자리만 있다(파일 끝 [9]).
   지우지 말 것 : 입력칸 · 약관 상자 · 링크의 :focus-visible 에 다시 적은 border-radius(전역 :focus-visible 이 2px 로 바꾼다),
                  입력칸 테두리 --c-gray-500(경계 3:1 이상), .mbr-term-body 의 white-space:pre-line(약관 내용은 일반 글자로 저장된다)
   ============================================================ */

/* [1] 본문 틀 : pageHead.jspf 의 제목 줄 아래, 가운데 한 열 (가입 · 내 정보 640px, 로그인 · 비밀번호 변경 · 탈퇴는 .mbr-narrow 440px) */
.mbr-wrap{display:flex;flex-direction:column;gap:var(--sp-6);max-width:640px;margin:0 auto;padding-bottom:var(--sp-12)}
.mbr-wrap.mbr-narrow{max-width:440px}
.mbr-panel{padding:var(--sp-8);border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-bg)}
.mbr-sec{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.mbr-sec-title{margin:0;font-size:var(--fs-md);font-weight:800;line-height:var(--lh-tight)}

/* [2] 가입 단계 표시 : ol > li (지난 단계 .is-done, 지금 단계 aria-current="step"). 상태는 .mbr-step-st 글자로도 적는다 */
.mbr-steps{display:flex;margin:0;padding:0;list-style:none}
.mbr-steps>li{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 4px;color:var(--c-text-3);text-align:center}
.mbr-steps>li+li::before{content:"";position:absolute;top:17px;left:calc(-50% + 24px);right:calc(50% + 24px);height:2px;background:var(--c-line-dk)}
.mbr-steps>li.is-done+li::before{background:var(--c-primary)}
.mbr-step-no{display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--c-line-dk);border-radius:50%;background:var(--c-bg);font-size:var(--fs-sm);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.mbr-step-nm{font-size:var(--fs-sm);font-weight:600;line-height:1.3}
.mbr-step-st{font-size:var(--fs-xs);font-weight:700;line-height:1.5}
.mbr-steps>li.is-done{color:var(--c-text-2)}
.mbr-steps>li.is-done .mbr-step-no{border-color:var(--c-primary);background:var(--c-primary-50);color:var(--c-primary)}
.mbr-steps>li.is-done .mbr-step-st{color:var(--c-primary)}
.mbr-steps>li[aria-current="step"]{color:var(--c-text)}
.mbr-steps>li[aria-current="step"] .mbr-step-no{border-color:var(--c-primary);background:var(--c-primary);color:#fff}
.mbr-steps>li[aria-current="step"] .mbr-step-nm{font-weight:800}
.mbr-steps>li[aria-current="step"] .mbr-step-st{padding:0 8px;border-radius:var(--r-pill);background:var(--c-primary);color:#fff}

/* [3] 알림
   .mbr-alert : 폼 위 요약. 오류는 role="alert" tabindex="-1"(스크립트가 포커스를 옮긴다), 저장 결과는 .is-ok + role="status".
                비어 있는 동안은 보이지 않는다. 앞의 느낌표 · 체크는 CSS 가 붙인다(스크립트는 글자만 넣으면 된다).
   .mbr-note  : 늘 보이는 안내문. 경고는 .is-warn */
.mbr-alert{padding:var(--sp-4) var(--sp-5);border-left:4px solid var(--c-accent);border-radius:0 var(--r-sm) var(--r-sm) 0;background:#FBE9E2;color:var(--c-text)}
.mbr-alert:empty{display:none}
.mbr-alert:focus{outline:3px solid var(--c-focus);outline-offset:2px}
.mbr-alert-title{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:var(--fs-base);font-weight:700;line-height:1.5;color:var(--c-accent-dk)}
.mbr-alert-title::before,.mbr-err::before{content:"!";content:"!" / "";flex:none;display:inline-grid;place-items:center;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--c-accent-dk);color:#fff;font-size:12px;font-weight:800;line-height:1}
.mbr-alert ul{margin:8px 0 0;padding-left:44px;font-size:var(--fs-sm);line-height:1.7}
.mbr-alert a{color:var(--c-text);text-decoration:underline;text-underline-offset:3px}
.mbr-alert a:hover{color:var(--c-accent-dk)}
.mbr-alert.is-ok{border-left-color:var(--c-secondary);background:var(--c-secondary-50)}
.mbr-alert.is-ok .mbr-alert-title{color:var(--c-secondary)}
.mbr-alert.is-ok .mbr-alert-title::before{content:"\2713";content:"\2713" / "";background:var(--c-secondary)}
.mbr-note{margin:0;padding:var(--sp-4) var(--sp-5);border-left:4px solid var(--c-primary);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--c-primary-50);color:var(--c-text-2);font-size:var(--fs-sm);line-height:1.7}
.mbr-note p{margin:0}
.mbr-note ul{margin:6px 0 0;padding-left:18px}
.mbr-note-title{display:block;margin:0 0 2px;font-size:15px;font-weight:700;color:var(--c-primary)}
.mbr-note.is-warn{border-left-color:var(--c-accent);background:#FBE9E2;color:var(--c-text)}
.mbr-note.is-warn .mbr-note-title{color:var(--c-accent-dk)}

/* [4] 폼 : .mbr-field = label + 입력칸 + 도움말(.mbr-hint) + 오류 글(.mbr-err) */
.mbr-form{display:flex;flex-direction:column;gap:var(--sp-5);margin:0}
.mbr-field{display:flex;flex-direction:column;min-width:0}
.mbr-label{display:block;margin:0 0 6px;font-size:15px;font-weight:700;color:var(--c-text)}
.mbr-req{margin-left:4px;font-size:13px;font-weight:600;color:var(--c-accent-dk)}
.mbr-opt{margin-left:4px;font-size:13px;font-weight:400;color:var(--c-text-3)}
/* 테두리는 gray-500(흰 바탕 4.2:1) - 입력칸 경계가 3:1 을 넘게. 글자 16px 은 iOS 의 자동 확대를 막는다 */
.mbr-input{width:100%;min-width:0;height:48px;padding:0 14px;border:1px solid var(--c-gray-500);border-radius:var(--r-sm);background:var(--c-bg);color:var(--c-text);font:inherit;font-size:var(--fs-base)}
.mbr-input::placeholder{color:var(--c-text-3)}
.mbr-input:hover{border-color:var(--c-gray-700)}
.mbr-input:focus-visible{border-color:var(--c-primary);border-radius:var(--r-sm);outline:3px solid var(--c-focus);outline-offset:2px}
.mbr-input[aria-invalid="true"]{padding:0 13px;border:2px solid var(--c-accent)}  /* 색 + 굵기 + 아래 오류 글 */
.mbr-input:disabled,.mbr-input[readonly]{border-color:var(--c-line-dk);background:var(--c-gray-100);color:var(--c-text-2)}
.mbr-row{display:flex;gap:8px}
.mbr-row>.mbr-input{flex:1 1 auto}
.mbr-row>.btn{flex:none;height:48px}
.mbr-hint{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--c-text-3)}
.mbr-err{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font-size:var(--fs-sm);font-weight:600;line-height:1.6;color:var(--c-accent-dk)}
.mbr-err::before{width:16px;height:16px;font-size:11px}
.mbr-err:empty,.mbr-ok:empty{display:none}
.mbr-ok{margin:6px 0 0;font-size:var(--fs-sm);font-weight:600;line-height:1.6;color:var(--c-secondary)}
.mbr-ok::before{content:"\2713\00a0";content:"\2713\00a0" / ""}
/* 비밀번호 규칙 목록 : ul.mbr-pw-rules(aria-live="polite") 안에 renderChecklist 가 li.pw-rule.ok|bad 를 넣는다. 글자 앞의 ✓ ✗ 는 그 스크립트가 붙인다 */
.mbr-pw-rules{display:grid;gap:2px;margin:8px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.5}
.mbr-pw-rules:empty{display:none}
.mbr-pw-rules .pw-rule{color:var(--c-text-3)}
.mbr-pw-rules .pw-rule.ok{color:var(--c-secondary);font-weight:600}
/* 체크 : label.mbr-check > input + 글자. 줄 전체가 누르는 자리(44px 이상) */
.mbr-check{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:11px 0;font-size:15px;line-height:22px;cursor:pointer}
.mbr-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--c-primary);cursor:pointer}
.mbr-check input[aria-invalid="true"]{outline:2px solid var(--c-accent);outline-offset:1px}
.mbr-check input:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}  /* 오류 표시 선이 포커스 선을 가리지 않게 다시 적는다 */
.mbr-check.mbr-check-all{padding:13px var(--sp-4);border:1px solid var(--c-line-dk);border-radius:var(--r-sm);background:var(--c-bg-soft);font-weight:700}
/* 버튼 줄 */
.mbr-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:var(--sp-2)}
.mbr-actions.is-center{justify-content:center}
.mbr-actions .btn{min-width:120px;height:48px;font-size:15px}
.btn.mbr-btn-block{width:100%;height:48px;font-size:var(--fs-base)}
.btn.mbr-btn-danger{background:var(--c-accent-dk);color:#fff}
.btn.mbr-btn-danger:hover{filter:brightness(.88)}

/* [5] 약관 (가입 1단계) : ol.mbr-terms > li.mbr-term */
.mbr-terms{display:flex;flex-direction:column;gap:var(--sp-5);margin:0;padding:0;list-style:none}
.mbr-term{min-width:0}
.mbr-term-title{margin:0 0 8px;font-size:var(--fs-base);font-weight:700;line-height:1.4}
/* 내용은 글자로 받는다고 보고 줄바꿈을 살린다(pre-line). HTML 로 저장하게 되면 이 한 줄을 뺀다 */
.mbr-term-body{max-height:168px;overflow-y:auto;padding:14px 16px;border:1px solid var(--c-line-dk);border-radius:var(--r-sm);background:var(--c-bg);color:var(--c-text-2);font-size:var(--fs-sm);line-height:1.7;white-space:pre-line}
.mbr-term-body:focus-visible{border-radius:var(--r-sm);outline:3px solid var(--c-focus);outline-offset:2px}

/* [6] 로그인 화면 아래의 회원가입 안내 */
.mbr-sub{margin:var(--sp-6) 0 0;padding-top:var(--sp-5);border-top:1px solid var(--c-line);color:var(--c-text-2);font-size:var(--fs-sm);text-align:center}
.mbr-sub a{margin-left:6px;color:var(--c-primary);font-weight:700;text-underline-offset:3px}

/* [7] 가입 완료 */
.mbr-done{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-10) var(--sp-6);border:1px solid var(--c-line);border-radius:var(--r-md);text-align:center}
.mbr-done-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--c-secondary-50);color:var(--c-secondary)}
.mbr-done-ico .ico{width:32px;height:32px}
.mbr-done-title{margin:0;font-size:var(--fs-xl);font-weight:800;line-height:var(--lh-tight)}
.mbr-done-desc{margin:0;color:var(--c-text-2);font-size:15px}
.mbr-done-desc strong{color:var(--c-text)}
.mbr-done .mbr-actions{margin-top:var(--sp-4)}

/* [8] 내 정보 : 읽기 전용 항목은 dl.bbs-fields.mbr-info > div.bbs-field (기존 규칙), 계정 관리 링크는 ul.mbr-menu */
.mbr-info{border-top:2px solid var(--c-gray-900)}
.mbr-menu{margin:0;padding:0;list-style:none;border-top:1px solid var(--c-line-dk)}
.mbr-menu li{border-bottom:1px solid var(--c-line)}
.mbr-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px;color:var(--c-text);text-decoration:none}
.mbr-menu a::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-top:2px solid var(--c-gray-500);border-right:2px solid var(--c-gray-500);transform:rotate(45deg)}
.mbr-menu a:hover{background:var(--c-bg-soft)}
.mbr-menu a:hover .mbr-menu-nm{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.mbr-menu a:focus-visible{border-radius:var(--r-sm);outline:3px solid var(--c-focus);outline-offset:-3px}
.mbr-menu-nm{display:block;font-size:15px;font-weight:700}
.mbr-menu-desc{display:block;font-size:13px;color:var(--c-text-3)}

@media (max-width:767px){
.mbr-wrap{gap:var(--sp-5);padding-bottom:var(--sp-10)}
.mbr-panel{padding:0;border:0}
.mbr-steps>li+li::before{top:15px;left:calc(-50% + 20px);right:calc(50% + 20px)}
.mbr-step-no{width:32px;height:32px}
.mbr-step-nm{font-size:13px}
.mbr-actions{flex-direction:column}
.mbr-actions .btn{width:100%}
.mbr-done{padding:var(--sp-8) var(--sp-4)}
}

/* [9] 회원 링크의 자리 - 기본 틀(frameHead.jspf)의 머리 전용. 링크의 모양(ul.nx-member-links)은 nb-runtime.css 에 있다.
   DOM 순서는 사이트 이름 → nav → 회원 링크이고 셋은 .bbs-header-inner 의 형제다.
   nav 를 감싸는 상자를 만들거나 이 줄의 상자에 position 을 주지 말 것 - 화면 끝까지 가는 메뉴 판이 그 폭으로 줄어든다(DEVELOPMENT_RULES.md 31절) */
.bbs-header-inner>.nx-member-links{flex:none}
@media (max-width:767px){
/* 좁은 화면 : 사이트 이름 - 회원 링크 - 메뉴 단추 순(order 로만 바꾼다). 이름(○○님)은 자리가 없어 감춘다 */
.bbs-header-inner{gap:8px}
.bbs-header-inner>.bbs-site{min-width:0}
.bbs-header-inner>.nx-member-links{order:2;margin-left:auto}
.bbs-header-inner>.bbs-nav{order:3}
.bbs-header-inner>.nx-member-links .nx-ml-name{display:none}
.bbs-header-inner>.nx-member-links .nx-ml-name+li::before{display:none}
}
/* [10] Layout 틀의 로고 - 서브 화면에서는 Layout 의 h1 이 p 로 바뀌어 나온다(SiteFrameHtml.demoteH1 : h1 은 본문 제목 하나).
   h1 의 기본 글자 크기만 맞춘다. 굵기 · 여백은 .nb-heading 이, 빌더에서 정한 크기는 #id 규칙이 그대로 정한다 */
p.nb-heading{font-size:2em}

/* ============================================================
   방문자 글쓰기 · 댓글 (WEB-INF/jsp/homepage/board/write.jsp, list.jsp, view.jsp). 2026.10.13 - 사이클 5 [5-2]
   마크업 표준은 resources/nexuscms/html-samples/visitor-board/*.html 이다(list / view / write / dialog).
   색 · 글자 · 간격은 theme-daegu.css 의 토큰만 쓴다(5-1 과 같이 폴백 없음). #FBE9E2 는 5-1 과 같은 경고 바탕 값이다(토큰 없음).
   폼 부품은 5-1 의 mbr-* 를 그대로 쓴다 : .mbr-form .mbr-alert .mbr-note .mbr-field .mbr-label .mbr-req .mbr-opt .mbr-input .mbr-row
   .mbr-hint .mbr-err .mbr-check .mbr-actions .btn.mbr-btn-danger. 여기에는 게시판에만 필요한 것만 있다. 새 클래스는 전부 bbs- 로 시작한다.
     - 이미 있는 이름과 헷갈리지 말 것 : .bbs-cmt(목록의 댓글 수) · .bbs-file(목록의 첨부 칩) · .bbs-files(글 보기의 첨부) · .bbs-btn(검은 [목록]).
       그래서 댓글 쪽은 bbs-comment-*, 첨부 입력 쪽은 bbs-attach-* 다.
     - theme-daegu.css 가 이 파일 "뒤"에 걸린다. 그 파일에 있는 선택자(.btn, .bbs-notice-box, .bbs-comments ul …)와 같은 특이도로 적으면 진다.
       그래서 .btn.bbs-write, .bbs-visitor .bbs-notice-box 처럼 한 단계 올려 적은 것이 있다 - 줄이지 말 것.
   지우지 말 것 : [16] 의 .bbs-comments .mbr-alert ul / li (기존 .bbs-comments ul / li 가 댓글 폼 안 오류 요약의 목록까지 잡는다. 같은 규칙이
                  theme-daegu.css 에도 있어 기존 규칙을 고쳐서는 풀리지 않는다),
                  .mbr-input.bbs-textarea[aria-invalid] 의 padding(기존 .mbr-input[aria-invalid] 가 위아래 여백을 0 으로 만든다),
                  .bbs-visitor [hidden] (display 를 정한 클래스에 hidden 속성이 지지 않게)
   ============================================================ */

/* [11] 공통 : 본문 최상위 div.bbs-visitor(data-nx-visitor-csrf, data-nx-member-base). 버튼 안의 그림, 작은 글자 버튼, 숨은 칸 */
.bbs-visitor{min-width:0}
.bbs-visitor [hidden]{display:none!important}
.bbs-visitor .btn .ico{width:18px;height:18px}
.bbs-textbtn{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:44px;min-height:36px;padding:0 10px;border:0;border-radius:var(--r-xs);background:none;color:var(--c-text-2);font:inherit;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bbs-textbtn:hover{background:var(--c-gray-100);color:var(--c-text)}
.bbs-textbtn.is-danger{color:var(--c-accent-dk)}
.bbs-textbtn.is-danger:hover{background:#FBE9E2;color:var(--c-accent-dk)}
.bbs-textbtn:disabled{opacity:.45;cursor:not-allowed}
/* 숨은 칸(website) : 화면 밖으로 뺀다. display:none 을 쓰지 않는다 */
.bbs-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* [12] 목록 : [글쓰기] 는 form.bbs-search.has-write 의 자식(검색 상자 다음), 비밀글 행의 자물쇠는 svg.ico.bbs-lock */
.bbs-search.has-write .bbs-count{margin-right:auto}
.btn.bbs-write{flex:none}

/* [13] 글 보기 : 버튼 줄(.bbs-actions) 왼쪽의 [수정] [삭제], 제목 앞 비밀글 표시, 비회원 글 비밀번호 영역 */
.bbs-actions-own{display:flex;gap:8px;margin-right:auto}
/* [목록] 은 늘 오른쪽 끝 : 좁은 화면에서 theme-daegu.css 가 버튼 줄을 space-between 으로 바꿔, 왼쪽 버튼이 없는 화면에서는 [목록] 이 왼쪽으로 가던 것을 맞춘다 */
.bbs-visitor .bbs-actions>.bbs-btn{margin-left:auto}
.btn.bbs-btn-del{border-color:var(--c-accent-dk);background:var(--c-bg);color:var(--c-accent-dk)}
.btn.bbs-btn-del:hover{background:#FBE9E2}
.bbs-badge.is-secret{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--c-gray-500);background:var(--c-bg);color:var(--c-text-2)}
.bbs-badge.is-secret .ico{width:13px;height:13px}
.bbs-guest-panel{margin-top:var(--sp-4);padding:var(--sp-5);border:1px solid var(--c-line-dk);border-radius:var(--r-md);background:var(--c-bg-soft)}
.bbs-guest-panel .bbs-pw{max-width:440px}

/* [14] 안내 상자(.bbs-notice-box - 기존) 안의 제목 · 설명 · 버튼 : 비밀글을 못 읽는 상태, 쓰기 권한 없음(403), 비회원 글 비밀번호 확인 */
.bbs-lock-big{color:var(--c-text-3);line-height:1}
.bbs-notice-title{margin:0;font-size:var(--fs-md);font-weight:700;line-height:1.5;color:var(--c-text)}
.bbs-notice-desc{margin:6px 0 0;font-size:15px}
.bbs-notice-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:var(--sp-6)}
.bbs-notice-actions .btn{min-width:120px;height:48px;font-size:15px}
.bbs-notice-box .bbs-pw{margin:var(--sp-6) auto 0}
/* 글 비밀번호 확인 폼 : form.mbr-form.bbs-pw (label + [입력칸 | 확인] + 오류 글). 세 곳에서 같은 마크업을 쓴다 */
.bbs-pw{width:100%;max-width:400px;gap:var(--sp-3);text-align:left}
.bbs-pw-lead{margin:0;font-size:15px;font-weight:700;line-height:1.5;color:var(--c-text)}

/* [15] 쓰기 · 수정 폼 : .bbs-form-head(h2 + 필수 안내) → form.mbr-form.bbs-form */
.bbs-form-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin:0 0 var(--sp-4)}
.bbs-form-title{margin:0;font-size:var(--fs-xl);font-weight:700;line-height:1.4}
.bbs-form-legend{margin:0;font-size:13px;color:var(--c-text-3)}
.bbs-form-legend .mbr-req{margin-left:0}
.bbs-form{padding:var(--sp-6) 0 var(--sp-12);border-top:2px solid var(--c-gray-900)}
/* 안내문(.mbr-note) 안의 링크 - 5-1 에는 링크가 없어 색이 정해져 있지 않았다(브라우저 기본 파랑) */
.bbs-visitor .mbr-note a{color:var(--c-primary);font-weight:700;text-underline-offset:3px}
.bbs-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.bbs-input-sm{max-width:240px}
.bbs-input-md{max-width:400px}
/* 여러 줄 입력 : textarea.mbr-input.bbs-textarea (댓글 · 동적 항목은 .is-short) */
/* 높이는 height 로 정한다 - rows 속성이 있으면 min-height 만으로는 rows 쪽 높이가 이긴다. min-height 는 끌어서 줄일 때의 아래 한계다 */
.mbr-input.bbs-textarea{display:block;height:320px;min-height:104px;padding:12px 14px;line-height:1.7;resize:vertical}
.mbr-input.bbs-textarea.is-short{height:104px}
.mbr-input.bbs-textarea[aria-invalid="true"]{padding:11px 13px}
/* 입력칸 아래 줄 : 왼쪽 도움말, 오른쪽 글자 수. 오류 글(.mbr-err)은 이 줄 다음에 둔다 */
.bbs-field-foot{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:0 16px}
.bbs-field-foot .mbr-hint{flex:1 1 240px;min-width:0}
.bbs-counter{flex:none;margin:6px 0 0 auto;font-size:13px;line-height:1.5;color:var(--c-text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.bbs-counter strong{font-weight:700;color:var(--c-text)}
.bbs-counter.is-over,.bbs-counter.is-over strong{font-weight:700;color:var(--c-accent-dk)}
/* 체크 줄 아래의 설명 (체크 상자 폭만큼 들여 쓴다) */
.bbs-check-hint{margin:-6px 0 0 32px;font-size:13px;line-height:1.5;color:var(--c-text-3)}
/* 선택지 묶음(라디오 · 체크) : fieldset.bbs-fieldset > legend.mbr-label + div.bbs-options > label.mbr-check */
.bbs-fieldset{min-width:0;margin:0;padding:0;border:0}
.bbs-fieldset>legend{padding:0}
.bbs-options{display:flex;flex-wrap:wrap;gap:0 var(--sp-6)}
/* 동적 항목(nexus-board-field.js 의 .nx-bf-* - 이름을 바꾸지 말 것). 관리자 쪽 규칙(nexus-form.css)은 방문자 화면에 걸리지 않아 다시 적는다 */
.bbs-visitor .nx-bf-inline{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.bbs-visitor .nx-bf-number{max-width:220px}
.bbs-visitor .nx-bf-date{max-width:190px}
.bbs-visitor .nx-bf-select{max-width:320px}
.bbs-visitor .nx-bf-unit{color:var(--c-text-3)}
/* 첨부 : div.bbs-attach > input[type=file].bbs-attach-input + ul.bbs-attach-list > li.bbs-attach-item
   동적 FILE 항목의 목록은 nexus-board-field.js 가 ul.nf-files > li.nf-file(.f-name .f-size button) 로 그리므로 같은 모양을 건다 */
.bbs-attach{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);border:1px dashed var(--c-gray-500);border-radius:var(--r-sm);background:var(--c-bg-soft)}
.bbs-attach-input{max-width:100%;font:inherit;font-size:var(--fs-sm);color:var(--c-text-2)}
.bbs-attach-input::file-selector-button{height:40px;margin-right:12px;padding:0 16px;border:1px solid var(--c-gray-500);border-radius:var(--r-sm);background:var(--c-bg);color:var(--c-text);font:inherit;font-weight:600;cursor:pointer}
.bbs-attach-input:hover::file-selector-button{border-color:var(--c-gray-700)}
.bbs-attach-input:focus-visible{border-radius:var(--r-sm);outline:3px solid var(--c-focus);outline-offset:2px}
.bbs-attach-sub{margin:0;font-size:13px;font-weight:700;color:var(--c-text-2)}
.bbs-attach-list,.bbs-visitor .nf-files{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.bbs-attach-item,.bbs-visitor .nf-file{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:4px 4px 4px 12px;border:1px solid var(--c-line-dk);border-radius:var(--r-sm);background:var(--c-bg);font-size:var(--fs-sm)}
.bbs-attach-name,.bbs-visitor .nf-file .f-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.bbs-attach-size,.bbs-visitor .nf-file .f-size{flex:none;color:var(--c-text-3);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
/* nexus-board-field.js 가 그리는 [빼기] 는 button.btn.btn-sm.btn-secondary 다(관리자 쪽 이름 - 방문자 테마에는 btn-secondary 가 없다). .bbs-textbtn 과 같은 모양으로 */
.bbs-visitor .nf-file .btn{flex:none;min-width:44px;height:36px;padding:0 10px;border:0;border-radius:var(--r-xs);background:none;color:var(--c-text-2);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.bbs-visitor .nf-file .btn:hover{background:var(--c-gray-100);color:var(--c-text)}
.bbs-attach-st{flex:none;font-size:var(--fs-xs);font-weight:700;color:var(--c-text-3)}
.bbs-attach-st.is-done{color:var(--c-secondary)}
.bbs-attach-st.is-fail{color:var(--c-accent-dk)}
.bbs-attach-item.is-fail{border-color:var(--c-accent)}

/* [16] 댓글 : section.bbs-comments#comments (기존) 에 항목 머리 · 내 댓글 표시 · 입력 폼 · 로그인 안내를 더한다 */
.bbs-comments{scroll-margin-top:var(--sp-6)}
.bbs-comments-empty{margin:0;padding:var(--sp-6) 4px;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);color:var(--c-text-3);font-size:15px;text-align:center}
.bbs-comment-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px}
.bbs-comment-head .bbs-comment-meta{margin:0}
.bbs-comment-mine{display:inline-block;margin-right:8px;padding:0 8px;border-radius:var(--r-pill);background:var(--c-primary-50);color:var(--c-primary);font-size:var(--fs-xs);font-weight:700;line-height:1.7}
.bbs-comment-form{gap:var(--sp-3);margin-top:var(--sp-5);padding:var(--sp-5);border:1px solid var(--c-line-dk);border-radius:var(--r-md);background:var(--c-bg-soft)}
.bbs-comment-form .mbr-actions{margin-top:0}
.bbs-comment-form .mbr-actions .btn{min-width:96px;height:44px}
.bbs-comment-login{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-5);border:1px solid var(--c-line-dk);border-radius:var(--r-md);background:var(--c-bg-soft);color:var(--c-text-2);font-size:15px}
.bbs-comment-login p{margin:0}
/* 기존 .bbs-comments ul / li 규칙이 폼 안 오류 요약의 목록까지 잡는 것을 되돌린다 */
.bbs-comments .mbr-alert ul{margin:8px 0 0;padding:0 0 0 44px;border:0;list-style:disc}
.bbs-comments .mbr-alert li{padding:0;border:0}

/* [17] 삭제 확인 대화상자 : <dialog class="bbs-dialog"> 를 showModal() 로 연다(Esc 닫기 · 포커스 가두기 · 닫은 뒤 포커스 되돌리기는 브라우저가 한다) */
.bbs-dialog{width:min(420px,calc(100vw - 32px));max-width:none;margin:auto;padding:var(--sp-6);border:1px solid var(--c-line-dk);border-radius:var(--r-md);background:var(--c-bg);color:var(--c-text);box-shadow:var(--sh-lg)}
.bbs-dialog::backdrop{background:rgba(22,32,46,.55)}
.bbs-dialog-title{margin:0;font-size:var(--fs-md);font-weight:700;line-height:1.5}
.bbs-dialog-desc{margin:8px 0 0;color:var(--c-text-2);font-size:15px;line-height:1.6}
.bbs-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:var(--sp-6)}
.bbs-dialog-actions .btn{min-width:96px;height:48px;font-size:15px}

@media (max-width:767px){
/* 목록 : 건수는 첫 줄, 둘째 줄에 [검색어 | 검색 | 글쓰기] */
.bbs-search.has-write .bbs-count{flex:0 0 100%}
.bbs-search.has-write .bbs-search-box{flex:1 1 0;flex-wrap:nowrap;width:auto;min-width:0}
.bbs-search.has-write .bbs-search-box input{min-width:0}
.bbs-search.has-write .bbs-search-box button{flex:none;padding:0 14px}
.btn.bbs-write{padding:0 14px}
/* 목록 표 : 제목이 길면(한 줄 + 말줄임) 표가 화면보다 넓어져 가로 스크롤이 생기던 것을 막는다. 표 폭을 100% 로 묶고 제목 칸이 줄어들 수 있게 한다 */
.bbs-table{table-layout:fixed}
.bbs-table td.bbs-col-title{min-width:0}
.bbs-form{padding-bottom:var(--sp-10)}
.bbs-form-row{grid-template-columns:minmax(0,1fr)}
.mbr-input.bbs-textarea{height:240px}
.mbr-input.bbs-textarea.is-short{height:104px}
/* 날짜 범위 두 칸이 한 줄에 들어가게 나눠 쓴다 */
.bbs-visitor .nx-bf-inline .nx-bf-date{flex:1 1 0;min-width:0;max-width:none}
.bbs-guest-panel,.bbs-comment-form{padding:var(--sp-4)}
.bbs-comment-login{flex-direction:column;align-items:stretch;text-align:center}
.bbs-visitor .bbs-notice-box{padding:48px 0}
.bbs-notice-actions{flex-direction:column}
.bbs-dialog-actions .btn{flex:1 1 0;min-width:0}
}