@charset "UTF-8";
/* board-common — 게시판 공통 스타일(스킨 10종이 공유).
   토큰 + 목록 셸 + 표 + 본문 + 에디터 호환 + 글쓰기 폼.
   게시판 고유 모양(이미지 카드·press·qna·review 특화)은 각 svndex/post/{코드}/skin.scss 가 덮는다.
   자기완결 — 외부 토큰에 기대지 않는다. */
/* 공통 토큰 + 자체 reset (3 라우트 공유) — 폰트 토큰 = rem (브라우저 기본 16px = 1rem). base = 18px (1.125rem) 로 가독성 강화. */
/* --nb-faint 는 표 헤더·날짜·조회수·폼 라벨 등 «글자» 에 쓰인다 — 대비 기준(4.5:1)을 넘는 톤으로 둔다.
   개별 규칙 25곳을 갈아타게 하는 대신 토큰 값 자체를 올려 한 곳에서 해결한다 */
.board-list, .board-view, .board-write, .board-list-unregistered, .board-view-notfound, .svx-editor-shell { --nb-text: #0f172a; --nb-mute: #64748b; --nb-faint: #64748b; --nb-line: #f1f5f9; --nb-line-2: #e2e8f0; --nb-bg: #ffffff; --nb-bg-soft: #fafafa; --nb-bg-hover: #f8fafc; --nb-accent: #0f172a; --nb-accent-hov: #1e293b; --nb-link: var(--brand-color,var(--c-primary,#7c3aed)); --nb-link-hov: var(--brand-color-d,var(--c-secondary,#6d28d9)); --nb-link-soft: var(--brand-color-soft,#f5f3ff); --nb-link-rgb: var(--brand-rgb,124,58,237); --nb-danger: #dc2626; --nb-font: 'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif; --nb-fs-2xs: 0.75rem; --nb-fs-xs: 0.875rem; --nb-fs-sm: 1rem; --nb-fs-base: 1.125rem; --nb-fs-lg: 1.25rem; --nb-fs-xl: 1.5rem; --nb-fs-2xl: 2rem; --nb-fs-3xl: 2.25rem; --nb-lh: 1.7; --nb-r: 0.5rem; --nb-r-sm: 0.375rem; --nb-r-pill: 999px; --nb-trans: cubic-bezier(.4,0,.2,1); font-family: var(--nb-font); font-size: var(--nb-fs-base); line-height: var(--nb-lh); color: var(--nb-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; --nb-on-accent: #fff; --nb-on-link: #fff; --nb-text-2: #475569; --nb-line-mid: #e5e7eb; --nb-line-strong: #cbd5e1; --nb-row-pin: #f3f4f6; --nb-row-pin-hov: #e5e7eb; --nb-row-notice-hov: #e4e8ff; --nb-row-notice-pin: #e7e9ff; --nb-danger-soft: #fef2f2; --nb-danger-soft-2: #fee2e2; --nb-danger-soft-3: #fde2e2; --nb-danger-line: #fecaca; --nb-warn-soft: #fffbeb; --nb-warn-line: #fde68a; --nb-warn-ink: #92400e; --nb-warn-ink-2: #b45309; }
/* 다크 = 토큰만 뒤집는다. 규칙에는 색을 숫자로 적지 않는다(§2026-09-29 — 흰 바탕 #fff 에 뒤집히는 글자 토큰을 얹은 규칙,
   뒤집히는 바탕에 흰 글자 #fff 를 얹은 규칙이 다크에서 대비 1.2 가 됐다). 짝 원칙:
   · 바탕·글자·선이 모두 토큰이거나, 모두 고정(두 모드 같은 모양의 작은 칩 — 위험 알약·형식 칩·본문 버튼)이다. 섞지 않는다.
   · 새 색이 필요하면 위 라이트 블록과 이 다크 블록에 짝으로 넣는다(라이트 값은 기존 숫자 그대로).
     다크 값은 가능하면 바탕·글자 토큰에서 만든다(var·color-mix) — 사이트가 --nb-bg 등을 자기 팔레트로 다시 정의하므로 저절로 맞는다.
   · 브랜드색도 두 모드가 다르다 — 사이트는 다크에서 --brand-color 를 밝게 다시 정의한다(강남 #14b3cf 등). 그래서 브랜드 바탕 위 글자는
     흰색 고정이 아니라 --nb-on-link(라이트 흰색 · 다크 어두운 바탕색)다. 흰 글자를 고정하면 밝아진 브랜드 위에서 묻힌다.
   · .svx-editor-shell 은 라이트 블록에만 있다 — 에디터는 다크와 무관하게 흰 종이라 안쪽 토큰이 늘 라이트 값이다.
   · :where() = 사이트 덮어쓰기가 불러오는 순서와 무관하게 이긴다(§12-69·§12-110). 검사기 = check/system/board-dark-pairs.test.php */
:where(html[data-theme=dark], body[data-theme=dark]) :is(.board-list, .board-view, .board-write, .board-list-unregistered, .board-view-notfound) { --nb-text: #e5e7eb; --nb-mute: #9ca3af; --nb-faint: #9ca3af; --nb-line: #252032; --nb-line-2: #2f2942; --nb-bg: #1a1525; --nb-bg-soft: #13101e; --nb-bg-hover: #221c31; --nb-accent: #e5e7eb; --nb-accent-hov: #f1f5f9; --nb-on-accent: var(--nb-bg); --nb-on-link: var(--nb-bg); --nb-text-2: color-mix(in srgb, var(--nb-text) 60%, var(--nb-mute)); --nb-line-mid: var(--nb-line-2); --nb-line-strong: color-mix(in srgb, var(--nb-text) 22%, var(--nb-bg)); --nb-link-soft: rgba(var(--nb-link-rgb), .14); --nb-row-pin: var(--nb-bg-hover); --nb-row-pin-hov: color-mix(in srgb, var(--nb-text) 8%, var(--nb-bg-hover)); --nb-row-notice-hov: rgba(var(--nb-link-rgb), .24); --nb-row-notice-pin: rgba(var(--nb-link-rgb), .2); --nb-danger-soft: rgba(220, 38, 38, .12); --nb-danger-soft-2: rgba(220, 38, 38, .18); --nb-danger-soft-3: rgba(220, 38, 38, .24); --nb-danger-line: rgba(220, 38, 38, .4); --nb-warn-soft: rgba(245, 158, 11, .1); --nb-warn-line: rgba(245, 158, 11, .35); --nb-warn-ink: #fcd34d; --nb-warn-ink-2: #fbbf24; }
.board-list *, .board-view *, .board-write *, .board-list-unregistered *, .board-view-notfound * { box-sizing: border-box; }
/* 회원전용/비밀글 자물쇠 아이콘이 aria-hidden 뿐이라 스크린리더에 열람제한 상태가
   전달되지 않았다 — 시각적으로 숨긴 보조텍스트 유틸(공개 게시판 스킨 공용, 8종 신규 도입). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.board-list h1, .board-list h2, .board-list h3, .board-view h1, .board-view h2, .board-view h3, .board-write h1, .board-write h2, .board-write h3 { margin: 0; line-height: 1.3; color: var(--nb-text); font-weight: 700; letter-spacing: -0.02em; }
.board-list p, .board-view p, .board-write p { margin: 0; }
.board-list ul, .board-list ol, .board-view ul, .board-view ol, .board-write ul, .board-write ol { list-style: none; padding: 0; margin: 0; }
.board-list table, .board-view table, .board-write table { border-collapse: collapse; width: 100%; }
.board-list a, .board-view a, .board-write a { color: inherit; text-decoration: none; transition: color 0.16s var(--nb-trans); }
/* 버튼 초기화는 :where() — 특이도 0+1. 게시판 안에 들어오는 CMS 부품(에디터 도구줄·이미지 확대 버튼)의 자기 규칙이 이겨야 한다.
   종전 (0,1,1) 은 에디터 도구줄의 글자색까지 «물려받기» 로 눌러, 흰 에디터 위 아이콘이 다크 페이지 글자색(밝은색)이 됐다(대비 1.2). */
:where(.board-list, .board-view, .board-write) button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
.board-list input, .board-list textarea, .board-list select, .board-view input, .board-view textarea, .board-view select, .board-write input, .board-write textarea, .board-write select { font: inherit; color: inherit; }
.board-list i, .board-view i, .board-write i { font-style: normal; }
/* ───── LIST ───── */
.board-list { padding: 30px 0px 30px; }
.board-list .board-head { text-align: left; margin-bottom: 32px; padding-bottom: 0; border-bottom: 0; }
.board-list .board-title { font-size: var(--nb-fs-xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; }
/* 서브헤더(페이지 h1) 아래 소제목 h2 — 2rem→1.5rem(§2026-10-06 대표님 «게시판 제목 크기 줄여») */
.board-list .board-desc { margin-top: 8px; color: var(--nb-mute); font-size: var(--nb-fs-sm); max-width: 540px; }
/* 검색 + 글쓰기 — list 하단 양쪽 정렬 (검색 좌, 글쓰기 우) */
.board-list .board-footer { margin-top: 24px; display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.board-list .board-search { position: relative; flex: 0 1 auto; }
.board-list .board-search-toggle { display: none; }
.board-list .board-search-form { display: flex; gap: 0; align-items: center; position: relative; }
.board-list .board-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--nb-faint); font-size: 1rem; pointer-events: none; }
.board-list .board-search-input { width: 280px; height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--nb-line-2); border-radius: var(--nb-r-pill); background: var(--nb-bg); font-size: var(--nb-fs-sm); line-height: 40px; transition: border-color 0.16s var(--nb-trans), box-shadow 0.16s var(--nb-trans), width 0.16s var(--nb-trans); }
.board-list .board-search-input::placeholder { color: var(--nb-faint); }
.board-list .board-search-input:focus { outline: none; border-color: var(--nb-text); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06); width: 340px; }
.board-list .board-search-form .board-search-icon ~ .board-search-input:focus + .board-search-btn { background: var(--nb-link); color: var(--nb-on-link); }
/* 검색 버튼 배경은 액센트 토큰을 쓴다 — 본문 글자색을 쓰면 브랜드색을 넣은 사이트에서 이 버튼만 검게 남는다.
   엔진 기본값은 둘이 같은 값이라 기본 출력은 그대로다 */
.board-list .board-search-scope { position: relative; flex: 0 0 auto; width: 40px; height: 40px; margin: 0 6px 0 0; border: 1px solid var(--nb-line-2); border-radius: 50%; background: var(--nb-bg); color: var(--nb-text); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer; transition: background 0.16s var(--nb-trans), color 0.16s var(--nb-trans), border-color 0.16s var(--nb-trans); }
/* 투명 고르기 칸을 동그라미 위에 덮는다 — 누르면 기기 기본 고르기 창(폰 = 아래에서 올라오는 목록). 16px = 아이폰 확대 방지 */
.board-list .board-search-scope select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.board-list .board-search-scope:has(select:focus-visible) { border-color: var(--nb-link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nb-link) 18%, transparent); }
/* 범위마다 아이콘 — 고른 것만 보인다(전체 = 네 칸 · 제목 = T · 내용 = 문서 · 작성자 = 사람) */
.board-list .board-search-scope .sf-ico { display: none; }
.board-list .board-search-scope:has(option[value=all]:checked) .sf-ico-all,
.board-list .board-search-scope:has(option[value=title]:checked) .sf-ico-title,
.board-list .board-search-scope:has(option[value=content]:checked) .sf-ico-content,
.board-list .board-search-scope:has(option[value=author]:checked) .sf-ico-author { display: inline-block; }
/* «전체» 가 아닌 범위를 고르면 채운 동그라미 */
.board-list .board-search-scope:has(option[value=all]:not(:checked)) { background: var(--nb-accent); border-color: var(--nb-accent); color: var(--nb-on-accent); }
/* 범위 동그라미가 앞에 오면 돋보기는 입력칸 안쪽 왼쪽으로(동그라미 40 + 여백 6 + 14) — §2026-10-13 검색 범위 */
.board-list .board-search-form .board-search-scope ~ .board-search-icon { left: 60px; }
.board-list .board-search-btn { width: 40px; height: 40px; padding: 0; margin-left: 6px; background: var(--nb-accent); color: var(--nb-on-accent); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background 0.16s var(--nb-trans), transform 0.16s var(--nb-trans); }
.board-list .board-search-btn i { font-size: 1rem; }
.board-list .board-search-btn:hover { background: var(--nb-accent-hov); transform: translateX(2px); }
.board-list .board-search-close { display: none; }
/* 표 — 격자 없음. 행 전체가 클릭 가능하도록 position:relative + 제목 링크의 ::after 를 깐다.
   table-layout:fixed 로 칸 폭을 고정한다(auto 면 들쑥날쑥해진다) */
.board-list .board-table { border-top: 1px solid var(--nb-line-2); border-bottom: 1px solid var(--nb-line-2); table-layout: fixed; }
.board-list .board-table thead th { padding: 12px 14px; border-bottom: 1px solid var(--nb-line); font-size: var(--nb-fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-faint); background: transparent; white-space: nowrap; }
.board-list .board-table .col-check { width: 48px; text-align: center; padding-left: 8px; padding-right: 8px; }
.board-list .board-table .col-num { width: 64px; text-align: center; }
.board-list .board-table .col-title { text-align: left; }
.board-list .board-table .col-author { width: 120px; text-align: center; }
.board-list .board-table .col-date { width: 120px; text-align: center; white-space: nowrap; }
.board-list .board-table .col-views { width: 72px; text-align: center; }
.board-list .board-table .board-row { position: relative; }
.board-list .board-table .board-row td { padding: 16px 14px; border-bottom: 1px solid var(--nb-line); font-size: var(--nb-fs-base); color: var(--nb-text); transition: background 0.16s var(--nb-trans); vertical-align: middle; }
.board-list .board-table .board-row:last-child td { border-bottom: 0; }
.board-list .board-table .board-row td.col-num { text-align: center; color: var(--nb-faint); font-size: var(--nb-fs-xs); font-variant-numeric: tabular-nums; }
.board-list .board-table .board-row td.col-title { text-align: left; overflow: hidden; }
.board-list .board-table .board-row td.col-author { text-align: center; color: var(--nb-mute); font-size: var(--nb-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-list .board-table .board-row td.col-date { text-align: center; color: var(--nb-faint); font-size: var(--nb-fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-list .board-table .board-row td.col-views { text-align: center; color: var(--nb-faint); font-size: var(--nb-fs-xs); font-variant-numeric: tabular-nums; }
.board-list .board-table .board-row:hover td { background: var(--nb-bg-soft); }
.board-list .board-table .board-row:hover .col-title a { color: var(--nb-link); }
.board-list .board-table .board-row.is-notice td { background: var(--nb-link-soft); }
.board-list .board-table .board-row.is-notice:hover td { background: var(--nb-row-notice-hov); }
.board-list .board-table .board-row.is-pinned td { background: var(--nb-row-pin); }
.board-list .board-table .board-row.is-pinned:hover td { background: var(--nb-row-pin-hov); }
.board-list .board-table .board-row.is-pinned.is-notice td { background: var(--nb-row-notice-pin); }
.board-list .board-table .board-row.is-pinned td.col-num { color: var(--nb-link); }
/* 상단고정 = **번호 자리에 메달**. 아이콘만 두면 번호열에서 묻히므로 브랜드색 원형 배지로 감싼다.
   ⚠️ 깃발 아이콘은 «신고» 로도 읽혀서 쓰지 않는다 */
.board-list .board-table .board-row.is-pinned td.col-num .pin-medal { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--nb-r-pill); background: var(--nb-link); color: var(--nb-on-link); box-shadow: 0 1px 3px rgba(var(--nb-link-rgb), 0.35); }
.board-list .board-table .board-row.is-pinned td.col-num .pin-medal .ph-medal { font-size: 0.9375rem; line-height: 1; }
.board-list .board-table .board-row.is-pinned td.col-title a { font-weight: 700; }
.board-list .board-table .board-row.is-deleted td { background: var(--nb-danger-soft); }
.board-list .board-table .board-row.is-deleted:hover td { background: var(--nb-danger-soft-2); }
.board-list .board-table .board-row.is-deleted td.col-num { color: var(--nb-danger); }
.board-list .board-table .board-row.is-deleted td.col-num .ph-trash { font-size: 1.125rem; vertical-align: middle; }
.board-list .board-table .board-row.is-deleted td.col-title a { color: var(--nb-mute); cursor: default; }
.board-list .board-table .board-row.is-deleted td.col-title a::after { content: none; }
.board-list .board-table .board-row.is-deleted td.col-date { color: var(--nb-danger); }
.board-list .board-table .board-row.is-deleted.is-checked td { background: var(--nb-danger-soft-3); }
.board-list .board-table .col-title a { color: var(--nb-text); font-weight: 600; font-size: var(--nb-fs-base); letter-spacing: -0.01em; transition: color 0.16s var(--nb-trans); }
.board-list .board-table .col-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.board-list .board-table .col-title .ph { margin-left: 6px; color: var(--nb-faint); font-size: var(--nb-fs-sm); vertical-align: middle; position: relative; z-index: 1; }
.board-list .board-table .col-title .comment-count { position: relative; z-index: 1; }
.board-list .board-table .badge-notice { display: inline-flex; align-items: center; padding: 3px 10px; background: var(--nb-link); color: var(--nb-on-link); border-radius: var(--nb-r-pill); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; position: relative; z-index: 1; }
.board-list .board-table .badge-match { display: inline-flex; align-items: center; padding: 2px 9px; margin-right: 4px; background: #e5e7eb; color: #4b5563; border-radius: var(--nb-r-pill); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle; position: relative; z-index: 1; }
.board-list .board-table .comment-count { color: var(--nb-link); font-weight: 600; margin-left: 8px; font-size: var(--nb-fs-sm); }
/* 페이지네이션 */
.board-list .board-pagination { margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 6px 4px; justify-content: center; align-items: center; }
/* flex-wrap — 320px 폰에서 쪽번호 10개+다음이 한 줄에 안 들어가 양끝이 잘렸다(§2026-09-26 감사 #16) */
.board-list .board-pagination a, .board-list .board-pagination span { min-width: 32px; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--nb-r-sm); color: var(--nb-mute); font-size: var(--nb-fs-sm); font-variant-numeric: tabular-nums; transition: background 0.16s var(--nb-trans), color 0.16s var(--nb-trans); }
.board-list .board-pagination a:hover { background: var(--nb-bg-hover); color: var(--nb-text); }
.board-list .board-pagination .page-current { background: var(--nb-text); color: var(--nb-on-accent); font-weight: 600; }
/* 글쓰기 버튼 */
.board-list .board-footer .board-actions { margin: 0; }
.board-list .board-footer-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* 체크박스 셀 */
.board-list .board-table .col-check-label { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; cursor: pointer; margin: 0; padding: 0; }
.board-list .board-table .col-check-label input[type=checkbox] { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--nb-link); }
.board-list .board-table .board-row td.col-check { position: relative; z-index: 2; }
.board-list .board-table .board-row.is-checked td { background: var(--nb-link-soft); }
.board-list .board-table .board-row.is-checked:hover td { background: rgba(var(--brand-rgb, 79, 70, 229), 0.16); }
/* ── 선택(체크) 상태 = 브랜드 밝은 톤 배경 + 브랜드 보더 (카드/리스트형 전 게시판 통일 · 신규 게시판도 [data-post-id]>a 구조면 자동 적용). ── */
.board-list [data-post-id].is-checked > a { background: var(--nb-link-soft); border-color: var(--nb-link); }
/* 관리 버튼 — 옅은 그레이 톤 (3개 동일) */
.board-list .board-manage-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.board-list .btn-manage { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; background: var(--nb-bg); color: var(--nb-mute); border: 1px solid var(--nb-line-2); border-radius: var(--nb-r-pill); font-size: var(--nb-fs-sm); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background 0.16s var(--nb-trans), border-color 0.16s var(--nb-trans), color 0.16s var(--nb-trans), transform 0.16s var(--nb-trans); }
.board-list .btn-manage i { font-size: 1rem; color: var(--nb-faint); transition: color 0.16s var(--nb-trans); }
.board-list .btn-manage:hover { background: var(--nb-bg-soft); border-color: var(--nb-mute); color: var(--nb-text); transform: translateY(-1px); }
.board-list .btn-manage:hover i { color: var(--nb-text); }
.board-list .btn-manage:active { transform: translateY(0); }
.board-list .btn-manage:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.board-list .btn-manage.btn-manage-danger:hover { background: #fef2f2; border-color: #fecaca; color: var(--nb-danger); }
.board-list .btn-manage.btn-manage-danger:hover i { color: var(--nb-danger); }
.board-list .btn-manage.btn-manage-restore:hover { background: #f0fdf4; border-color: #bbf7d0; color: #16a34a; }
.board-list .btn-manage.btn-manage-restore:hover i { color: #16a34a; }
/* 휴지통 토글 — 회색 outline 버튼. trash 모드일 땐 active (어두운 배경). */
.board-list .btn-manage.btn-manage-trash { text-decoration: none; }
.board-list .btn-manage.btn-manage-trash.is-active { background: var(--nb-text); color: var(--nb-on-accent); border-color: var(--nb-text); }
.board-list .btn-manage.btn-manage-trash.is-active i { color: var(--nb-on-accent); }
.board-list .btn-manage.btn-manage-trash.is-active:hover { background: var(--nb-accent-hov); border-color: var(--nb-accent-hov); color: var(--nb-on-accent); }
.board-list .btn-manage.btn-manage-trash.is-active:hover i { color: var(--nb-on-accent); }
/* 휴지통 모드 헤더 표시 */
.board-list.is-trash .board-title-trash { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 4px 12px; background: #fef2f2; color: var(--nb-danger); border: 1px solid #fecaca; border-radius: var(--nb-r-pill); font-size: var(--nb-fs-sm); font-weight: 600; vertical-align: middle; }
.board-list.is-trash .board-title-trash i { font-size: 1rem; }
/* 휴지통 모드 — 남은 일수 뱃지 */
.board-list .badge-expire { display: inline-flex; align-items: center; padding: 2px 9px; margin-left: 6px; background: #fef2f2; color: var(--nb-danger); border: 1px solid #fecaca; border-radius: var(--nb-r-pill); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle; position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
/* board-table 안에 form 직접 자식 — table 자체 layout 유지 위해 form 은 display:contents 처럼 처리. */
.board-list .board-manage-form { display: block; margin: 0; padding: 0; }
/* 이동 팝업 */
.board-list .board-move-dialog { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.board-list .board-move-dialog[hidden] { display: none; }
.board-list .board-move-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); animation: svndex-move-fade-in 0.18s var(--nb-trans); }
.board-list .board-move-panel { position: relative; width: 100%; max-width: 480px; max-height: 80vh; background: var(--nb-bg); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; overflow: hidden; animation: svndex-move-slide-in 0.22s var(--nb-trans); }
.board-list .board-move-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--nb-line); }
.board-list .board-move-head h3 { margin: 0; font-size: var(--nb-fs-lg); font-weight: 700; color: var(--nb-text); letter-spacing: -0.01em; }
.board-list .board-move-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--nb-mute); cursor: pointer; border-radius: 50%; transition: background 0.16s var(--nb-trans), color 0.16s var(--nb-trans); }
.board-list .board-move-close i { font-size: 1.125rem; }
.board-list .board-move-close:hover { background: var(--nb-bg-soft); color: var(--nb-text); }
.board-list .board-move-hint { margin: 0; padding: 14px 22px 0; color: var(--nb-mute); font-size: var(--nb-fs-sm); }
.board-list .board-move-hint .board-move-count { color: var(--nb-link); font-weight: 700; }
.board-list .board-move-list { list-style: none; padding: 14px 14px 6px; margin: 0; overflow-y: auto; max-height: 50vh; }
.board-list .board-move-list li { padding: 0; margin: 0 0 4px; }
.board-list .board-move-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin: 0; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: background 0.16s var(--nb-trans), border-color 0.16s var(--nb-trans); font-size: var(--nb-fs-sm); }
.board-list .board-move-item:hover { background: var(--nb-bg-soft); }
.board-list .board-move-item input[type=radio] { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; cursor: pointer; accent-color: var(--nb-link); }
.board-list .board-move-item-name { flex: 1; min-width: 0; color: var(--nb-text); font-weight: 500; word-break: keep-all; }
.board-list .board-move-item-code { color: var(--nb-faint); font-size: var(--nb-fs-xs); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; flex: 0 0 auto; }
.board-list .board-move-item:has(input:checked) { background: var(--nb-link-soft); border-color: var(--nb-link); }
.board-list .board-move-item:has(input:checked) .board-move-item-name { color: var(--nb-link); }
.board-list .board-move-actions { padding: 14px 22px; border-top: 1px solid var(--nb-line); display: flex; gap: 8px; justify-content: flex-end; }
.board-list .btn-manage.btn-manage-confirm { background: var(--nb-link); color: var(--nb-on-link); border-color: var(--nb-link); }
.board-list .btn-manage.btn-manage-confirm i { color: var(--nb-on-link); }
.board-list .btn-manage.btn-manage-confirm:hover { background: var(--nb-link-hov); border-color: var(--nb-link-hov); color: var(--nb-on-link); }
.board-list .btn-manage.btn-manage-confirm:hover i { color: var(--nb-on-link); }
.board-list .btn-manage.btn-manage-confirm:disabled { background: #cbd5e1; border-color: #cbd5e1; color: #fff; }
@keyframes svndex-move-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes svndex-move-slide-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.board-list .board-actions .btn-primary { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 20px; background: var(--nb-text); color: var(--nb-on-accent); border-radius: var(--nb-r-pill); font-size: var(--nb-fs-sm); font-weight: 500; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; transition: background 0.16s var(--nb-trans), transform 0.16s var(--nb-trans); }
.board-list .board-actions .btn-primary:hover { background: var(--nb-accent-hov); transform: translateY(-1px); }
.board-list .board-actions .btn-primary:active { transform: translateY(0); }
/* LIST — 모바일 */
@media (max-width: 720px) { .board-list { padding: 20px 0 20px; } .board-list .board-head { margin-bottom: 28px; } /* 모바일 = 관리 footer(전체/복사/이동/삭제/휴지통/글쓰기) 세로 스택 + 버튼 wrap(가로 넘침 시 잘림·줄바꿈 방지) */ .board-list .board-footer { flex-direction: column; align-items: stretch; gap: 10px; } .board-list .board-footer-right { width: 100%; justify-content: flex-start; } .board-list .board-title { font-size: 1.25rem; } .board-list .board-table thead th { padding: 10px 6px; font-size: 0.6875rem; letter-spacing: 0.04em; } .board-list .board-table .col-author, .board-list .board-table .col-views { display: none; } .board-list .board-table .col-num { width: 38px; padding-left: 4px; padding-right: 4px; } .board-list .board-table .col-check { width: 36px; padding-left: 4px; padding-right: 4px; } .board-list .board-table .col-date { width: 60px; padding-left: 4px; padding-right: 4px; } .board-list .board-table .board-row td { padding: 14px 6px; font-size: var(--nb-fs-sm); } .board-list .board-table .board-row td.col-num { width: 38px; padding-left: 4px; padding-right: 4px; } .board-list .board-table .board-row td.col-check { width: 36px; padding-left: 4px; padding-right: 4px; } .board-list .board-table .board-row td.col-date { width: 60px; padding-left: 4px; padding-right: 4px; font-size: 0.75rem; } .board-list .board-table .board-row td.col-title { padding-left: 4px; padding-right: 4px; } /* 모바일 = 작성일 연도 숨김. "2026-05-04" → "05-04" */ .board-list .board-table .board-row td.col-date .d-year { display: none; } /* 모바일 = 새 글 «N» 상자는 PC 와 같은 모양 · 칸 사이만 좁힌다. */ .board-list .board-table .badge-new { margin-left: 2px; flex: 0 0 auto; } /* 모바일 = 새글뱃지 / 댓글수 / 첨부 아이콘 사이 간격 좁힘 (selector 깊이 = 데스크톱 정의 override) */ .board-list .board-table .col-title .ph { margin-left: 3px; } .board-list .board-table .col-title .comment-count { margin-left: 3px; } /* 모바일 = 제목 2줄 line-clamp + 우측 N/첨부/댓글 인라인 함께 wrap */ .board-list .board-table .board-row td.col-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; max-height: 2.9em; font-size: var(--nb-fs-sm); word-break: break-all; } .board-list .board-pagination a, .board-list .board-pagination span { min-width: 32px; height: 32px; padding: 0 8px; font-size: var(--nb-fs-xs); } /* 모바일 = footer 6 버튼 (돋보기 / 복사·이동·삭제 / 휴지통 / 글쓰기) 작게 */ .board-list .board-footer { gap: 6px; } .board-list .board-footer-right { gap: 4px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } .board-list .btn-manage { height: 34px; padding: 0 10px; font-size: var(--nb-fs-xs); gap: 4px; } .board-list .btn-manage i { font-size: 0.8125rem; } .board-list .board-actions .btn-primary { height: 34px; padding: 0 14px; font-size: var(--nb-fs-xs); gap: 4px; } .board-list .board-actions .btn-primary i { font-size: 0.8125rem; } /* §2026-09-24 — 모바일 도구 줄 재배치. 종전 = 돋보기 혼자 한 줄 → 관리 버튼 4개가 왼쪽에서 2x2 로 접히고 휴지통·글쓰기는 오른쪽에 떠 있었다
     (실측 390px: 관리 묶음 193px 폭에 2줄). 첫 줄 = 돋보기(왼쪽) · 휴지통·글쓰기(오른쪽), 둘째 줄 = 관리 버튼 4개를 같은 폭으로 한 줄.
     오른쪽 묶음을 `display:contents` 로 풀어 줄 배치만 바꾼다(마크업 그대로 · 스킨 29개 전부 같은 구조임을 확인). */ .board-list .board-footer { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; } .board-list .board-footer-right { display: contents; } .board-list .board-footer .board-search { order: 1; } .board-list .board-footer .btn-manage-trash { order: 2; margin-left: auto; } .board-list .board-footer .board-actions { order: 3; margin-left: auto; flex: 0 0 auto; } /* 이 블록 끝의 `.board-actions { flex:1 }` 를 이긴다(특이도) — 안 하면 휴지통이 왼쪽으로 붙는다 */ .board-list .board-footer .btn-manage-trash + .board-actions { margin-left: 0; } .board-list .board-footer .board-manage-actions { order: 4; flex: 1 1 100%; display: flex; flex-wrap: nowrap; gap: 6px; } .board-list .board-footer .board-manage-actions > .btn-manage { flex: 1 1 0; min-width: 0; justify-content: center; } /* 모바일 검색 — 돋보기 버튼만 표시 → 클릭 시 풀스크린 플로팅. */ .board-list .board-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--nb-line-2); border-radius: 50%; background: var(--nb-bg); color: var(--nb-mute); cursor: pointer; transition: border-color 0.16s var(--nb-trans), color 0.16s var(--nb-trans); flex: 0 0 auto; } .board-list .board-search-toggle i { font-size: 0.9375rem; } .board-list .board-search-toggle:hover { border-color: var(--nb-link); color: var(--nb-link); } .board-list .board-search .board-search-form { display: none; } .board-list .board-search.is-open .board-search-form { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 14px 16px; background: var(--nb-bg); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); border-bottom: 1px solid var(--nb-line-2); align-items: center; gap: 8px; animation: svndex-search-slide-in 0.18s cubic-bezier(0.4, 0, 0.2, 1); } .board-list .board-search.is-open::before { content: ""; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.3); z-index: 999; animation: svndex-search-fade-in 0.18s cubic-bezier(0.4, 0, 0.2, 1); } .board-list .board-search.is-open .board-search-icon { left: 30px; } .board-list .board-search.is-open .board-search-scope { margin-right: 0; } .board-list .board-search.is-open .board-search-scope ~ .board-search-icon { left: 78px; } /* 펼친 칸 왼쪽 여백 16 + 범위 동그라미 40 + 칸 사이 8 + 14 */ .board-list .board-search.is-open .board-search-input { flex: 1; min-width: 0; width: 100%; padding-left: 50px; } .board-list .board-search.is-open .board-search-input:focus { width: 100%; } .board-list .board-search.is-open .board-search-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--nb-mute); cursor: pointer; border-radius: 50%; flex: 0 0 auto; transition: background 0.16s var(--nb-trans); } .board-list .board-search.is-open .board-search-close i { font-size: 1.25rem; } .board-list .board-search.is-open .board-search-close:hover { background: var(--nb-bg-soft); color: var(--nb-text); } .board-list .board-footer { gap: 8px; } .board-list .board-actions { flex: 1; text-align: right; } }
@keyframes svndex-search-slide-in { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes svndex-search-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* ───── VIEW ───── */
.board-view { max-width: 1200px; margin: 0 auto; padding: 64px 0 96px; }
.board-view .post-header { padding: 0 0 24px; border-bottom: 1px solid var(--nb-line-2); margin-bottom: 32px; }
/* §2026-10-13 대표님 «제목이 너무 크다» → 26px — 본문 18px 의 1.45배(종전 32px = 1.8배 · 긴 칼럼 제목이 한 줄 750px). 폰(720px 이하)은 아래 20px 그대로. 토큰 --nb-fs-2xl 은 글쓰기 머리 등이 같이 쓰므로 건드리지 않는다. */
.board-view .post-title { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 16px; line-height: 1.25; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.board-view .post-title .post-title-text { flex: 1; min-width: 0; word-break: keep-all; }
.board-view .post-title .post-title-actions { flex: 0 0 auto; display: inline-flex; gap: 6px; align-items: center; }
.board-view .post-title .post-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0; border: 1px solid var(--nb-line-2); border-radius: 50%; background: var(--nb-bg); color: var(--nb-mute); cursor: pointer; font-size: 0; text-decoration: none; transition: border-color 0.16s var(--nb-trans), background 0.16s var(--nb-trans), color 0.16s var(--nb-trans), transform 0.16s var(--nb-trans); }
.board-view .post-title .post-icon-btn i { font-size: 1.125rem; }
.board-view .post-title .post-icon-btn:hover { border-color: var(--nb-link); background: var(--nb-link-soft); color: var(--nb-link); transform: translateY(-1px); }
.board-view .post-title .post-icon-btn:active { transform: translateY(0); }
.board-view .post-title .post-share-btn.is-copied { border-color: #16a34a; background: #f0fdf4; color: #16a34a; }
.board-view .post-title .post-edit-btn { background: var(--nb-text); border-color: var(--nb-text); color: var(--nb-on-accent); }
.board-view .post-title .post-edit-btn:hover { background: var(--nb-accent-hov); border-color: var(--nb-accent-hov); color: var(--nb-on-accent); }
.board-view .post-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--nb-fs-sm); color: var(--nb-mute); }
.board-view .post-meta .post-author { color: var(--nb-text); font-weight: 500; }
.board-view .post-meta .post-date, .board-view .post-meta .post-views { font-variant-numeric: tabular-nums; color: var(--nb-faint); }
.board-view .post-content { padding: 8px 0 48px; min-height: 240px; line-height: 1.7; font-size: 1.125rem; font-weight: 400; color: var(--nb-text); word-break: keep-all; }
.board-view .post-content img { max-width: 100%; height: auto !important; border-radius: var(--nb-r); margin: 1.5em 0; }
.board-view .post-content a { color: var(--nb-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.board-view .post-content a:hover { color: var(--nb-link-hov); }
/* 에디터 + view 페이지 통일 — 본문 1.125rem/400/1.7, h1-h4 = 2.5/2.0/1.5/1.25rem · 700/600/600/500 · 1.35 */
/* Paperlogy 폰트 = heading 전용 (svndex-editor.css 의 @font-face 와 동일 self-host 사용 — view 페이지에서도 로드됨) */
@font-face  { font-family: "Paperlogy"; font-weight: 400; font-style: normal; font-display: swap; src: url("/core/fonts/Paperlogy/Paperlogy-4Regular.woff2") format("woff2"); }
@font-face  { font-family: "Paperlogy"; font-weight: 500; font-style: normal; font-display: swap; src: url("/core/fonts/Paperlogy/Paperlogy-5Medium.woff2") format("woff2"); }
@font-face  { font-family: "Paperlogy"; font-weight: 600; font-style: normal; font-display: swap; src: url("/core/fonts/Paperlogy/Paperlogy-6SemiBold.woff2") format("woff2"); }
@font-face  { font-family: "Paperlogy"; font-weight: 700; font-style: normal; font-display: swap; src: url("/core/fonts/Paperlogy/Paperlogy-7Bold.woff2") format("woff2"); }
/* 상위 2종 — 실제 태그는 h2 그대로 두고(문서 개요 유지) 크기만 클래스로 얹는다.
   ⚠️ 반드시 `.scss` 원본에 있어야 한다 — 컴파일본에만 있으면 다음 빌드가 지운다 */
.board-view .post-content h2.svx-h-2xl { font-family: "Paperlogy", "Pretendard", -apple-system, sans-serif; font-size: 2.5rem; font-weight: 600; line-height: 1.3; margin: 1.8em 0 0.5em; }
.board-view .post-content h2.svx-h-xl { font-family: "Paperlogy", "Pretendard", -apple-system, sans-serif; font-size: 2.25rem; font-weight: 600; line-height: 1.3; margin: 1.8em 0 0.5em; }
.board-view .post-content h1 { font-family: "Paperlogy", "Pretendard", -apple-system, sans-serif; font-size: 2.5rem; font-weight: 700; line-height: 1.35; margin: 1em 0 0.5em; }
.board-view .post-content h2 { font-family: "Paperlogy", "Pretendard", -apple-system, sans-serif; font-size: 2rem; font-weight: 600; line-height: 1.35; margin: 1em 0 0.5em; }
.board-view .post-content h3 { font-family: "Paperlogy", "Pretendard", -apple-system, sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1.35; margin: 1em 0 0.5em; }
.board-view .post-content h4 { font-family: "Paperlogy", "Pretendard", -apple-system, sans-serif; font-size: 1.25rem; font-weight: 500; line-height: 1.35; margin: 1em 0 0.5em; }
.board-view .post-content h5 { font-size: 1rem; font-weight: 400; line-height: 1.5; margin: 1em 0 0.5em; color: var(--nb-text-2); }
.board-view .post-content p { font-size: 1.125rem; font-weight: 400; line-height: 1.7; margin: 0 0 1.2em; }
.board-view .post-content p.svx-body-xl { font-size: 1.375rem; }
.board-view .post-content p.svx-body-lg { font-size: 1.25rem; }
/* 태블릿(≤1024px) — 대형 크기만 완만히 축소, 중소형은 유지 */
@media (max-width: 1024px) { .board-view .post-content h1 { font-size: 2.2rem; } .board-view .post-content h2 { font-size: 1.8rem; } .board-view .post-content h2.svx-h-2xl { font-size: 2.2rem; } .board-view .post-content h2.svx-h-xl { font-size: 2rem; } .board-view .post-content p.svx-body-xl { font-size: 1.25rem; } .board-view .post-content p.svx-body-lg { font-size: 1.15rem; } }
/* 모바일(≤720px) — 대·중형 전부 축소, 본문 기본(1.125rem)·보조/주석은 유지(가독성 유지 목적) */
@media (max-width: 720px) { .board-view .post-content h1 { font-size: 1.9rem; } .board-view .post-content h2 { font-size: 1.6rem; } .board-view .post-content h2.svx-h-2xl { font-size: 1.9rem; } .board-view .post-content h2.svx-h-xl { font-size: 1.75rem; } .board-view .post-content h3 { font-size: 1.3rem; } .board-view .post-content h4 { font-size: 1.15rem; } .board-view .post-content p.svx-body-xl { font-size: 1.2rem; } .board-view .post-content p.svx-body-lg { font-size: 1.1rem; } }
.board-view .post-content ul, .board-view .post-content ol { padding-left: 1.5em; margin: 0 0 1.2em; }
.board-view .post-content ul { list-style: disc; }
.board-view .post-content ol { list-style: decimal; }
.board-view .post-content blockquote { margin: 1.5em 0; padding: 14px 22px; border-left: 3px solid var(--nb-text); background: var(--nb-bg-soft); color: var(--nb-mute); border-radius: 0 var(--nb-r) var(--nb-r) 0; }
.board-view .post-content code { padding: 2px 6px; background: var(--nb-bg-soft); border-radius: var(--nb-r-sm); font-size: 0.92em; }
.board-view .post-content pre { padding: 18px; background: var(--nb-bg-soft); border-radius: var(--nb-r); overflow-x: auto; margin: 1.2em 0; white-space: pre-wrap; }
.board-view .post-content pre code { padding: 0; background: transparent; }
/* Tiptap 호환 — task list (체크리스트) */
.board-view .post-content ul.svx-editor-tasklist { list-style: none; padding-left: 0.2em; }
.board-view .post-content ul.svx-editor-tasklist li.svx-editor-taskitem { display: grid; grid-template-columns: 20px 1fr; column-gap: 6px; align-items: start; padding: 3px 0; list-style: none; }
.board-view .post-content ul.svx-editor-tasklist li.svx-editor-taskitem > label { display: flex; align-items: center; padding-top: 4px; }
.board-view .post-content ul.svx-editor-tasklist li.svx-editor-taskitem > label input[type=checkbox] { accent-color: var(--nb-link); cursor: default; }
.board-view .post-content ul.svx-editor-tasklist li.svx-editor-taskitem > div { transform: translateY(-3px); }
.board-view .post-content ul.svx-editor-tasklist li.svx-editor-taskitem ul.svx-editor-tasklist { padding-left: 1.2em; margin: 4px 0; }
/* Tiptap 호환 — highlight (mark) */
.board-view .post-content mark { background-color: #fff7a8; padding: 0 0.15em; border-radius: 2px; color: inherit; }
/* Tiptap 호환 — 이미지 정렬 (data-align inline style 박힘 = sanitizer 통과). 보강 클래스. */
.board-view .post-content img[data-align=center] { display: block; margin-left: auto; margin-right: auto; }
.board-view .post-content img[data-align=right] { float: right; margin: 0 0 1em 1em; }
.board-view .post-content img[data-align=left] { float: left; margin: 0 1em 1em 0; }
/* 이관 콘텐츠(외부 에디터) 호환 — data-align 속성 대신 부모에 text-align 으로 정렬한 이미지.
   sanitizer 가 text-align 을 보존하므로 기본 흐름으로도 중앙정렬되지만, block + margin:auto 로 확실히 보장한다.
   7dex 에디터 자체 정렬 로직은 그대로 두고 렌더 CSS 만 보강한다 */
.board-view .post-content [style*="text-align: center"] > img:only-child,
.board-view .post-content [style*="text-align:center"] > img:only-child { display: block; margin-left: auto; margin-right: auto; }
/* Tiptap 호환 — 이미지 폭 옵션 5종 (기본/50%/75%/100%/채우기) */
.board-view .post-content img.svx-editor-img { max-width: 100%; height: auto; }
.board-view .post-content img.svx-img-w-25 { width: 25%; max-width: 25%; height: auto; }
.board-view .post-content img.svx-img-w-50 { width: 50%; max-width: 50%; height: auto; }
.board-view .post-content img.svx-img-w-75 { width: 75%; max-width: 75%; height: auto; }
.board-view .post-content img.svx-img-w-100 { width: 100%; max-width: 100%; height: auto; }
/* Tiptap 호환 — 텍스트 색상 (svx-color-*) — 향후 도입 호환 */
.board-view .post-content .svx-color-default { color: inherit; }
.board-view .post-content .svx-color-darkgray { color: #374151; }
.board-view .post-content .svx-color-gray { color: #6b7280; }
.board-view .post-content .svx-color-red { color: #dc2626; }
.board-view .post-content .svx-color-orange { color: #ea580c; }
.board-view .post-content .svx-color-yellow { color: #ca8a04; }
.board-view .post-content .svx-color-green { color: #16a34a; }
.board-view .post-content .svx-color-blue { color: #2563eb; }
.board-view .post-content .svx-color-navy { color: #1e3a8a; }
.board-view .post-content .svx-color-purple { color: #7c3aed; }
/* Tiptap 호환 — 줄간격 옵션 — 향후 도입 호환 */
.board-view .post-content .svx-lh-140 { line-height: 1.4; }
.board-view .post-content .svx-lh-160 { line-height: 1.6; }
.board-view .post-content .svx-lh-180 { line-height: 1.8; }
.board-view .post-content .svx-lh-200 { line-height: 2; }
/* Tiptap 호환 — 이미지 링크 (a > img) — link cursor + a 의 default underline 제거 (이미지 자체) */
.board-view .post-content a > img { cursor: pointer; }
.board-view .post-content a:has(> img) { display: inline-block; text-decoration: none; border: 0; }
/* 에디터 산출 클래스(영상·버튼·소제목·노트)를 게시판 본문 스코프에도 이식한다 —
   에디터 산출물은 어느 스코프에서 렌더돼도 같은 결과여야 한다.
   ⚠️ 원본 색상값·비율 그대로 유지 — 임의로 바꾸지 말 것 */
.board-view .post-content p.svx-sub { font-size: 1rem; color: var(--nb-mute); }
.board-view .post-content p.svx-sub2 { font-size: 0.9rem; color: var(--nb-mute); }
.board-view .post-content p.svx-note { font-size: 0.85rem; color: var(--nb-mute); }
.board-view .post-content .svx-video { position: relative; width: 100%; max-width: 100%; margin: 1.4em auto; aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; }
.board-view .post-content .svx-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .board-view .post-content .svx-video { max-width: 100%; } }
.board-view .post-content .svx-btn { display: inline-block; padding: 10px 22px; border-radius: 5px; font-size: 1rem; font-weight: 600; font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif; line-height: 1.2; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: opacity 0.15s ease; }
.board-view .post-content .svx-btn:hover { opacity: 0.88; }
.board-view .post-content .svx-btn-white { background: #ffffff; color: #111827; border-color: #d1d5db; }
.board-view .post-content .svx-btn-gray { background: #e5e7eb; color: #111827; border-color: #d1d5db; }
.board-view .post-content .svx-btn-black { background: #1a1d24; color: #ffffff; }
.board-view .post-content .svx-btn-red { background: #dc2626; color: #ffffff; }
.board-view .post-content .svx-btn-blue { background: #2563eb; color: #ffffff; }
.board-view .post-content .svx-btn-green { background: #16a34a; color: #ffffff; }
.board-view .post-content .svx-btn-purple { background: #7c3aed; color: #ffffff; }
/* 모바일 — 이미지 폭 옵션 모두 100% (레이아웃 안정) */
@media (max-width: 720px) { .board-view .post-content img.svx-img-w-25,
  .board-view .post-content img.svx-img-w-50,
  .board-view .post-content img.svx-img-w-75,
  .board-view .post-content img.svx-img-w-100,
  .board-view .post-content img[data-align=left],
  .board-view .post-content img[data-align=right] { float: none; margin: 1em 0; } }
/* float clear — 이미지 정렬 후 다음 블록 정상 흐름 */
.board-view .post-content > p::after { content: ""; display: table; clear: both; }
/* fields.php 추가 필드 영역 (form / view) */
.board-write .post-form-extra .form-row-extra { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; margin: 0 0 10px; }
.board-write .post-form-extra .form-row-extra > label { font-size: var(--nb-fs-sm); color: var(--nb-text); font-weight: 500; }
.board-write .post-form-extra .form-row-extra > label em { color: #dc2626; font-style: normal; }
.board-write .post-form-extra .form-help { display: block; grid-column: 2; font-size: var(--nb-fs-xs); color: var(--nb-faint); margin-top: 4px; }
.board-write .post-form-extra .form-row-radios, .board-write .post-form-extra .form-row-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.board-write .post-form-extra .form-row-image { display: inline-flex; align-items: center; gap: 10px; }
.board-write .post-form-extra .form-row-image .form-image-preview { width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--nb-line-2); border-radius: 8px; }
.board-write .post-form-extra .form-row-image .form-image-empty { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border: 1px dashed var(--nb-line-2); border-radius: 8px; color: var(--nb-faint); font-size: var(--nb-fs-xs); }
.board-write .post-form-extra .btn-image-pick, .board-write .post-form-extra .btn-gallery-add { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--nb-bg); border: 1px solid var(--nb-line-2); border-radius: 6px; color: var(--nb-text); font-size: var(--nb-fs-xs); cursor: pointer; }
.board-write .post-form-extra .btn-image-pick:hover, .board-write .post-form-extra .btn-gallery-add:hover { border-color: var(--nb-link); color: var(--nb-link); }
.board-write .post-form-extra .btn-image-clear { background: transparent; border: 0; color: var(--nb-faint); cursor: pointer; padding: 4px; }
.board-write .post-form-extra .form-row-gallery { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.board-write .post-form-extra .form-gallery-list { display: flex; gap: 6px; flex-wrap: wrap; }
.board-write .post-form-extra .form-gallery-item { position: relative; width: 60px; height: 60px; }
.board-write .post-form-extra .form-gallery-item img { width: 60px; height: 60px; object-fit: cover; border: 1px solid var(--nb-line-2); border-radius: 6px; }
.board-write .post-form-extra .form-gallery-remove { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; padding: 0; background: var(--nb-bg); border: 1px solid var(--nb-line-2); border-radius: 50%; color: var(--nb-mute); cursor: pointer; font-size: 0.65rem; display: inline-flex; align-items: center; justify-content: center; }
.board-write .post-form-extra .form-row-gallery .btn-gallery-add { padding: 0; width: 60px; height: 60px; border: 1.5px dashed var(--nb-line-2); border-radius: 6px; flex-direction: column; gap: 2px; }
/* view 의 추가 필드 출력 */
.board-view .post-extras-view { margin: 24px 0; padding: 18px 22px; background: var(--nb-bg-soft); border: 1px solid var(--nb-line); border-radius: var(--nb-r); display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; }
.board-view .post-extras-view dt { color: var(--nb-mute); font-size: var(--nb-fs-sm); font-weight: 500; }
.board-view .post-extras-view dd { margin: 0; color: var(--nb-text); font-size: var(--nb-fs-sm); min-width: 0; overflow-wrap: anywhere; }
.board-view .post-extras-view .post-extra-image { max-width: 240px; height: auto; border-radius: 8px; }
.board-view .post-extras-view .post-extra-gallery { display: flex; gap: 6px; flex-wrap: wrap; }
.board-view .post-extras-view .post-extra-gallery img { width: 120px; height: 120px; object-fit: cover; border-radius: 6px; }
.board-list .post-extras-list { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--nb-mute); font-size: var(--nb-fs-xs); }
.board-list .post-extras-list dt { font-weight: 500; }
.board-list .post-extras-list dd { margin: 0; }
.board-list .post-extras-list .post-extra-image,
.board-list .post-extras-list .post-extra-gallery { display: none; }
/* 모바일 = 1 컬럼 */
@media (max-width: 720px) { .board-write .post-form-extra .form-row-extra { grid-template-columns: 1fr; gap: 6px; } .board-write .post-form-extra .form-help { grid-column: 1; } .board-view dl.post-extras-view { grid-template-columns: 100px 1fr; gap: 9px 14px; padding: 14px 16px; } /* 라벨 칸은 고정폭 — max-content 는 게시판마다 폭이 달라 값 시작선이 어긋난다 */ .board-view .post-extras-view dt { padding-top: 8px; } }
/* Tiptap 호환 — 표 (view 페이지) */
.board-view .post-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; table-layout: fixed; }
.board-view .post-content th, .board-view .post-content td { border: 1px solid var(--nb-line-mid); padding: 10px 12px; vertical-align: middle; text-align: left; word-break: break-word; }
.board-view .post-content th { background: var(--nb-bg-hover); font-weight: 600; }
.board-view .post-content .tableWrapper, .board-view .post-content .table-wrap { overflow-x: auto; margin: 1.2em 0; }
@media (max-width: 720px) { .board-view .post-content { overflow-x: auto; } .board-view .post-content table { min-width: 560px; } }
/* 첨부 */
/* post-extras — 첨부 / 관련 링크 통일 카드 스타일 */
.board-view .post-extras { margin: 32px 0; padding: 24px 28px; background: var(--nb-bg-soft); border: 1px solid var(--nb-line); border-radius: var(--nb-r); }
.board-view .post-extras-title { margin: 0 0 12px; font-size: var(--nb-fs-sm); font-weight: 600; color: var(--nb-mute); letter-spacing: 0.04em; text-transform: uppercase; }
.board-view .post-extras-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.board-view .post-extras-list li { padding: 0; margin: 0; }
.board-view .post-extras-list a { display: inline-flex; align-items: center; gap: 8px; color: var(--nb-text); font-size: var(--nb-fs-sm); text-decoration: none; word-break: break-all; transition: color 0.16s var(--nb-trans); }
.board-view .post-extras-list a i { color: var(--nb-faint); font-size: 1rem; flex: 0 0 auto; transition: color 0.16s var(--nb-trans); }
.board-view .post-extras-list a small { color: var(--nb-faint); font-size: var(--nb-fs-xs); flex: 0 0 auto; font-variant-numeric: tabular-nums; margin-left: 4px; }
.board-view .post-extras-list a:hover { color: var(--nb-link); }
.board-view .post-extras-list a:hover i { color: var(--nb-link); }
/* 이전/다음 */
.board-view .post-navigation { margin-top: 40px; border-top: 1px solid var(--nb-line); border-bottom: 1px solid var(--nb-line); }
.board-view .post-nav-list li { display: flex; align-items: center; gap: 14px; padding: 14px 4px; font-size: var(--nb-fs-sm); }
.board-view .post-nav-list li:not(:last-child) { border-bottom: 1px solid var(--nb-line); }
.board-view .post-nav-list span { flex-shrink: 0; width: 60px; color: var(--nb-faint); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.board-view .post-nav-list a { color: var(--nb-text); }
.board-view .post-nav-list a:hover { color: var(--nb-link); }
/* 댓글 영역 */
.board-view .post-comments-wrap { margin-top: 0; }
.board-view .post-comments { margin-top: 40px; }
.board-view .comments-title { font-size: var(--nb-fs-base); font-weight: 700; margin: 0 0 0px; padding-bottom: 12px; border-bottom: 1px solid var(--nb-line-2); letter-spacing: -0.01em; }
/* §2026-10-13 대표님 «보더 남발 · COUNSEL 보다 허접» — 댓글 하나 = 카드 하나(구분선 없음) · 머리 «댓글 N» = 공용 부품(svx-cmt-h · 스킨의 옛 «댓글» 머리는 숨김) ·
   병원(관리자) 댓글 = 옅은 포인트색 카드 + 로고 심볼 동그라미(모든 게시판 같은 규칙 · 표시 글자 없음) · 색은 사이트 토큰. */
.board-view .comments-title:has(~ .post-comments-wrap) { display: none; }
.board-view .svx-cmt-h { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; font-size: var(--nb-fs-base); font-weight: 700; color: var(--nb-text); letter-spacing: -0.01em; }
.board-view .svx-cmt-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--nb-r-pill); background: var(--nb-link-soft); color: var(--nb-link); font-size: 12px; font-weight: 700; }
.board-view .comment-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.board-view .comment-item { position: relative; padding: 16px 18px 16px 66px; border: 1px solid var(--nb-line); border-radius: 14px; background: var(--nb-bg); font-size: var(--nb-fs-sm); }
.board-view .comment-item.is-staff { background: var(--nb-link-soft); border-color: color-mix(in srgb, var(--nb-link) 35%, transparent); }
.board-view .comment-item.is-reply { margin-left: 24px; }
.board-view .svx-cmt-av { position: absolute; left: 18px; top: 16px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--nb-line); border-radius: 50%; background: var(--nb-bg-soft); color: var(--nb-mute); font-size: 14px; font-weight: 700; line-height: 1; }
.board-view .comment-item.is-staff .svx-cmt-av { background: #fff; color: #374151; border-color: color-mix(in srgb, var(--nb-link) 30%, transparent); }
/* 로고는 흰 바탕이 정본(다크에서도) · 바탕·글자 둘 다 고정(§12-119 색 짝 — 로고가 없어 첫 글자일 때도 보이게) */
.board-view .svx-cmt-av img { width: 70%; height: 70%; object-fit: contain; }
.board-view .comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 5px; font-size: var(--nb-fs-xs); color: var(--nb-faint); }
.board-view .comment-meta strong { color: var(--nb-text); font-weight: 700; font-size: var(--nb-fs-sm); }
.board-view .comment-meta .comment-edited { margin-left: 4px; font-style: italic; }
.board-view .comment-body { color: var(--nb-text); line-height: 1.7; overflow-wrap: anywhere; }
/* 댓글 액션 */
.board-view .comment-actions { margin-top: 8px; display: flex; gap: 12px; }
.board-view .comment-actions button { padding: 0; border: 0; background: none; color: var(--nb-mute); font-size: var(--nb-fs-xs); cursor: pointer; transition: color 0.16s var(--nb-trans); }
.board-view .comment-actions button:hover { color: var(--nb-text); }
.board-view .comment-actions button.comment-act-delete:hover { color: var(--nb-danger); }
/* 댓글 수정 / 삭제 폼 */
.board-view .comment-edit-form, .board-view .comment-delete-form { margin-top: 8px; padding: 0; background: none; border-radius: 0; }
/* §2026-10-13 대표님 «주변 허연 거» — 댓글 카드가 이미 틀이라 상자를 겹치지 않는다 */
.board-view .comment-edit-form textarea, .board-view .comment-edit-form input[type=password], .board-view .comment-delete-form input[type=password] { width: 100%; padding: 10px 12px; border: 1px solid var(--nb-line-2); border-radius: var(--pf-ctl-r); background: var(--nb-bg); color: var(--nb-text); font-size: var(--pf-fs-input); line-height: 1.4; transition: border-color 0.16s var(--nb-trans), box-shadow 0.16s var(--nb-trans); }
.board-view .comment-edit-form textarea:hover, .board-view .comment-edit-form input[type=password]:hover, .board-view .comment-delete-form input[type=password]:hover { border-color: var(--nb-link); }
.board-view .comment-edit-form textarea:focus, .board-view .comment-edit-form input[type=password]:focus, .board-view .comment-delete-form input[type=password]:focus { outline: none; border-color: var(--nb-link); box-shadow: 0 0 0 3px rgba(var(--nb-link-rgb, 124, 58, 237), 0.13); }
.board-view .comment-edit-form textarea { min-height: 80px; line-height: 1.5; resize: vertical; margin-bottom: 10px; }
.board-view .comment-edit-form input[type=password], .board-view .comment-delete-form input[type=password] { max-width: 240px; height: var(--pf-ctl-h); margin-top: 8px; }
.board-view .comment-edit-actions, .board-view .comment-delete-actions { margin-top: 10px; display: flex; gap: 6px; align-items: center; }
.board-view .comment-edit-actions button, .board-view .comment-delete-actions button { padding: 7px 16px; border-radius: var(--nb-r-sm); font-size: var(--nb-fs-sm); font-weight: 500; cursor: pointer; transition: background 0.16s var(--nb-trans); }
.board-view .comment-edit-actions button[type=submit], .board-view .comment-delete-actions button[type=submit] { background: var(--nb-text); color: var(--nb-on-accent); border: 1px solid var(--nb-text); }
.board-view .comment-edit-actions button[type=submit]:hover, .board-view .comment-delete-actions button[type=submit]:hover { background: var(--nb-accent-hov); }
.board-view .comment-delete-actions button[type=submit].is-danger { background: var(--nb-danger); border-color: var(--nb-danger); color: #fff; }
.board-view .comment-delete-actions button[type=submit].is-danger:hover { background: #b91c1c; }
.board-view .comment-act-cancel { background: var(--nb-bg); color: var(--nb-text); border: 1px solid var(--nb-line-2); }
.board-view .comment-act-cancel:hover { background: var(--nb-bg-hover); }
.board-view .comment-delete-confirm { flex: 1; color: var(--nb-danger); font-size: var(--nb-fs-sm); font-weight: 500; white-space: nowrap; }
/* 좁은 폰(320px)에서 «정말 / 삭제하시겠습니까?» 로 쪼개졌다 — 문구는 한 줄, 자리가 모자라면 단추가 다음 줄로 간다(§2026-10-05 전수 점검) */
.board-view .comment-delete-actions { flex-wrap: wrap; }
/* 댓글 작성 폼 */
.board-view .comment-form { margin-top: 4px; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--nb-bg-soft); border: 1px solid var(--nb-line); border-radius: 14px; }
.board-view .comment-form textarea { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid var(--nb-line-2); border-radius: var(--pf-ctl-r); background: var(--nb-bg); color: var(--nb-text); font-size: var(--pf-fs-input); line-height: 1.5; transition: border-color 0.16s var(--nb-trans), box-shadow 0.16s var(--nb-trans); resize: vertical; }
.board-view .comment-form textarea:focus { outline: none; border-color: var(--nb-link); box-shadow: 0 0 0 3px rgba(var(--nb-link-rgb, 124, 58, 237), 0.13); }
.board-view .comment-form input[type=text], .board-view .comment-form input[type=password] { max-width: 240px; height: var(--pf-ctl-h); padding: 10px 12px; border: 1px solid var(--nb-line-2); border-radius: var(--pf-ctl-r); background: var(--nb-bg); color: var(--nb-text); font-size: var(--pf-fs-input); line-height: 1.4; transition: border-color 0.16s var(--nb-trans), box-shadow 0.16s var(--nb-trans); }
.board-view .comment-form :is(textarea, input[type=text], input[type=password]):hover { border-color: var(--nb-link); }
.board-view .comment-form input[type=text]:focus, .board-view .comment-form input[type=password]:focus { outline: none; border-color: var(--nb-link); box-shadow: 0 0 0 3px rgba(var(--nb-link-rgb, 124, 58, 237), 0.13); }
.board-view .comment-form button[type=submit] { align-self: flex-end; padding: 8px 20px; background: var(--nb-text); color: var(--nb-on-accent); border-radius: var(--nb-r-pill); font-size: var(--nb-fs-sm); font-weight: 500; cursor: pointer; transition: background 0.16s var(--nb-trans); }
.board-view .comment-form button[type=submit]:hover { background: var(--nb-accent-hov); }
/* 비회원 댓글 = 닉네임·비밀번호 한 줄(비회원 글쓰기 칸과 같은 2칸 · 600px 이하 위아래) + 보안문자 = 글쓰기와 같은 묶음(.guest-captcha — 아래 규칙이 두 곳에 같이 걸린다).
   §2026-10-05 대표님 «댓글, 비회원 쪽도 똑같이» · «닉네임·비번 한 줄». 종전엔 댓글만 따로 그린 보안문자 줄(그림·칸·안내가 붙은 채)이었다. */
.board-view .comment-form .comment-guest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: start; max-width: max(50% - 6px, 380px); }
.board-view .comment-form .comment-guest > input { width: 100%; max-width: none; }
/* 묶음 폭 = 보안문자 칩 폭(댓글 칸의 절반) — 닉네임|비밀번호가 그 폭 안에 한 줄, 칩은 묶음 전체 폭(§2026-10-05 대표님 «그대로에서 좌우 배치 · 자동등록방지 폭만큼만»).
   좁은 태블릿은 380px 아래로 줄지 않는다(«비밀번호 (8자 이상)» 안내가 잘리지 않게) */
.board-view .comment-form .comment-guest > .guest-captcha { grid-column: 1/-1; }
@media (max-width: 600px) { .board-view .comment-item { padding: 14px 14px 14px 56px; } .board-view .svx-cmt-av { left: 14px; top: 14px; width: 32px; height: 32px; font-size: 13px; } .board-view .comment-item.is-reply { margin-left: 12px; } }
@media (max-width: 600px) { .board-view .comment-form .comment-guest { grid-template-columns: minmax(0, 1fr); max-width: none; } }
/* 비밀글 비밀번호 확인(보기·수정) = 글쓰기 칸과 같은 입력칸·단추. 종전엔 꾸밈이 하나도 없어 기본 입력칸(회색 안쪽 테두리)과
   글자뿐인 «확인» 이 나왔다 — 비회원 상담·예약 글쓴이가 자기 글을 열 때 보는 화면이다(§2026-10-05). */
/* 비밀글 문(§2026-10-07 대표님 «가로·세로 가운데 상자 · 목록으로도 단추 · 디자인 새로») — 입력칸 한 줄 + [목록으로 | 확인] 두 칸 */
.board-view .board-secret-unlock-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 26px 0 0; }
.board-view .board-secret-unlock-form input[type=password] { grid-column: 1/-1; width: 100%; min-width: 0; height: var(--pf-ctl-h); padding: 10px 14px; border: 1px solid var(--nb-line-2); border-radius: var(--pf-ctl-r); background: var(--nb-bg); color: var(--nb-text); font: inherit; font-size: var(--pf-fs-input); line-height: 1.4; transition: border-color 0.16s var(--nb-trans), box-shadow 0.16s var(--nb-trans); }
.board-view .board-secret-unlock-form input[type=password]:hover { border-color: var(--nb-link); }
.board-view .board-secret-unlock-form input[type=password]:focus { outline: none; border-color: var(--nb-link); box-shadow: 0 0 0 3px rgba(var(--nb-link-rgb, 124, 58, 237), 0.13); }
.board-view .board-secret-unlock-form .btn-primary { display: inline-flex; align-items: center; justify-content: center; height: var(--pf-ctl-h); padding: 0 18px; border: 1px solid var(--nb-text); background: var(--nb-text); color: var(--nb-on-accent); border-radius: var(--pf-ctl-r); font-size: var(--pf-fs-title); font-weight: 600; cursor: pointer; transition: background 0.16s var(--nb-trans), border-color 0.16s var(--nb-trans); }
.board-view .board-secret-unlock-form .btn-primary:hover { background: var(--nb-accent-hov); border-color: var(--nb-accent-hov); }
.board-view-secret .board-secret-card .board-secret-back { display: inline-flex; align-items: center; justify-content: center; height: var(--pf-ctl-h, 44px); padding: 0 18px; border: 1px solid var(--nb-line-2); border-radius: var(--pf-ctl-r, 0.5rem); background: var(--nb-bg); color: var(--nb-text-2); font-size: var(--pf-fs-title, 0.9375rem); font-weight: 600; text-decoration: none; transition: border-color 0.16s var(--nb-trans), color 0.16s var(--nb-trans), background 0.16s var(--nb-trans); }
.board-view-secret .board-secret-card .board-secret-back:hover { border-color: var(--nb-link); color: var(--nb-link); }
/* 액션 (목록 / 수정) */
.board-view .post-actions { margin-top: 32px; display: flex; gap: 8px; justify-content: flex-end; }
.board-view .post-actions a, .board-view .post-actions button { padding: 8px 18px; border: 1px solid var(--nb-line-2); border-radius: var(--nb-r-pill); background: var(--nb-bg); color: var(--nb-text); font-size: var(--nb-fs-sm); font-weight: 500; transition: background 0.16s var(--nb-trans), border-color 0.16s var(--nb-trans); }
.board-view .post-actions a:hover, .board-view .post-actions button:hover { background: var(--nb-bg-hover); border-color: var(--nb-text); }
.board-view .post-actions .btn-edit { background: var(--nb-text); border-color: var(--nb-text); color: var(--nb-on-accent); }
.board-view .post-actions .btn-edit:hover { background: var(--nb-accent-hov); border-color: var(--nb-accent-hov); color: var(--nb-on-accent); }
/* VIEW — 모바일 */
@media (max-width: 720px) { .board-view { padding: 0; } .board-view .post-header { padding: 0 0 16px; margin-bottom: 20px; } .board-view .post-title { font-size: 1.25rem; gap: 8px; margin: 0 0 10px; line-height: 1.3; } .board-view .post-title .post-icon-btn { width: 34px; height: 34px; } .board-view .post-title .post-icon-btn i { font-size: 1rem; } .board-view .post-meta { gap: 10px; font-size: var(--nb-fs-xs); } .board-view .post-content { font-size: var(--nb-fs-base); } .board-view .post-actions { flex-wrap: wrap; } }
/* ───── WRITE ───── */
.board-write { max-width: 1200px; margin: 0 auto; padding: 64px 0 96px; }
.board-write .page-head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--nb-line-2); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.board-write .page-title { font-size: var(--nb-fs-2xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; flex: 1; min-width: 0; }
.board-write .page-head .post-pin-toggle { flex: 0 0 auto; }
/* 고정글 «강제순번» 칩 — 다른 칩과 같은 높이·한 줄. 색(바탕·선·글자)은 여기 기본값 + 사이트 다크 CSS 가 정한다.
   ⚠️ 주석을 «선택자 가운데» 넣지 말 것 — 선택자 사이에 끼면 후손 선택자가 돼 규칙이 통째로 안 걸린다. */
.board-write .post-pin-order { align-items: center; flex: 0 0 auto; white-space: nowrap; background: var(--nb-bg); border: 1px solid var(--nb-line-2); border-radius: var(--nb-r-pill); color: var(--nb-mute); cursor: text; transition: border-color 0.16s var(--nb-trans), background 0.16s var(--nb-trans), color 0.16s var(--nb-trans); }
/* 모양(표시·간격·여백·글자)은 #post-form 으로 고정한다 — 종전엔 라벨 공용 규칙(`.board-write .post-form label { display:block }`)이 특이도로 이겨
   «상단 고정» 을 끄면 block(글자~칸 6px), 켜면 inline-flex(14px+6px)로 바뀌어 칩이 20px 늘었다(§2026-10-05 대표님 신고). 지금은 켜든 끄든 같은 모양.
   «값이 있거나 입력 중» 이면 다른 칩(눌린 상태)처럼 색이 들어온다 — 빈 칸 판정 = :placeholder-shown(마크업 placeholder 가 빈칸 한 칸). */
#post-form .post-pin-order { display: inline-flex; gap: 8px; margin: 0; min-height: 46px; padding: 10px 16px; font-size: var(--pf-fs-text); font-weight: 500; color: var(--nb-text, #0f172a); letter-spacing: normal; text-transform: none; }
.board-write .post-pin-order:hover { border-color: var(--nb-text); }
#post-form .post-pin-order:focus-within, #post-form .post-pin-order:has(input:not(:placeholder-shown)) { background: var(--nb-link-soft, #f5f3ff); border-color: var(--nb-link, #7c3aed); color: var(--nb-link, #7c3aed); }
/* ⚠️ 선택자를 여기까지 올린 이유 = `.board-write .post-form input[type=number]` 가 이겨서 패딩이 그대로 먹고
   칩이 이웃보다 높아진다. 그보다 높인다 */
.board-write .post-form .post-pin-order input[type=number] { width: 74px; height: 24px; padding: 0 2px 0 8px; border: 1px solid var(--nb-line-2); border-radius: var(--nb-r-sm); text-align: center; font-size: var(--nb-fs-sm); font-variant-numeric: tabular-nums; }
/* 스피너(위/아래 화살표)를 «항상» 보이게 한다 — 기본값은 포커스·호버일 때만 나타나서, 숫자를
   직접 타이핑해야 하는 칸으로 읽혔다(사용자 지정). 폭은 스피너가 숫자를 밀지 않도록 62→74px. */
/* 칸을 눌렀을 때 = 칩이 이미 색으로 알려 준다 — 공용 입력칸의 짙은 테두리 + 3px 빛까지 더하면 칩 안에서 칸만 두 겹으로 뚱뚱해 보였다(§2026-10-05 대표님) */
#post-form .post-pin-order input:focus { outline: 0; border-color: var(--nb-link, #7c3aed); box-shadow: none; }
.board-write .post-form .post-pin-order input[type=number]::-webkit-inner-spin-button,
.board-write .post-form .post-pin-order input[type=number]::-webkit-outer-spin-button { opacity: 1; margin: 0; }
.board-write .page-head-actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.board-write .page-head-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid transparent; border-radius: 50%; cursor: pointer; font-size: 0; text-decoration: none; transition: background 0.16s var(--nb-trans), border-color 0.16s var(--nb-trans), color 0.16s var(--nb-trans), transform 0.16s var(--nb-trans); }
.board-write .page-head-btn i { font-size: 1.125rem; }
.board-write .page-head-btn:hover { transform: translateY(-1px); }
.board-write .page-head-btn:active { transform: translateY(0); }
.board-write .page-head-btn-save { background: var(--nb-text); border-color: var(--nb-text); color: var(--nb-on-accent); }
.board-write .page-head-btn-save:hover { background: var(--nb-accent-hov); border-color: var(--nb-accent-hov); color: var(--nb-on-accent); }
.board-write .page-head-btn-cancel { background: var(--nb-bg); border-color: var(--nb-line-2); color: var(--nb-mute); }
.board-write .page-head-btn-cancel:hover { background: var(--nb-bg-hover); border-color: var(--nb-text); color: var(--nb-text); }
.board-write .post-form .form-row { margin-bottom: 20px; }
.board-write .post-form label { display: block; margin-bottom: 8px; font-weight: 600; font-size: var(--nb-fs-xs); color: var(--nb-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.board-write .post-form input[type=text], .board-write .post-form input[type=email], .board-write .post-form input[type=password], .board-write .post-form input[type=tel], .board-write .post-form input[type=url], .board-write .post-form input[type=number], .board-write .post-form input[type=search], .board-write .post-form textarea, .board-write .post-form select { width: 100%; padding: 12px 16px; border: 1px solid var(--nb-line-2); border-radius: var(--nb-r-sm); font-size: var(--nb-fs-base); background: var(--nb-bg); color: var(--nb-text); transition: border-color 0.16s var(--nb-trans), box-shadow 0.16s var(--nb-trans); }
.board-write .post-form input[type=text]::placeholder, .board-write .post-form input[type=email]::placeholder, .board-write .post-form input[type=password]::placeholder, .board-write .post-form input[type=tel]::placeholder, .board-write .post-form input[type=url]::placeholder, .board-write .post-form input[type=number]::placeholder, .board-write .post-form textarea::placeholder { color: var(--nb-faint); }
.board-write .post-form input[type=text]:focus, .board-write .post-form input[type=email]:focus, .board-write .post-form input[type=password]:focus, .board-write .post-form input[type=tel]:focus, .board-write .post-form input[type=url]:focus, .board-write .post-form input[type=number]:focus, .board-write .post-form input[type=search]:focus, .board-write .post-form textarea:focus, .board-write .post-form select:focus { outline: none; border-color: var(--nb-text); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06); }
.board-write .post-form textarea { min-height: 360px; line-height: 1.7; resize: vertical; }
.board-write .post-form .form-actions { margin-top: 28px; display: flex; gap: 8px; justify-content: flex-end; }
.board-write .post-form .btn-primary { padding: 10px 22px; background: var(--nb-text); color: var(--nb-on-accent); border-radius: var(--nb-r-pill); font-weight: 500; font-size: var(--nb-fs-sm); transition: background 0.16s var(--nb-trans), transform 0.16s var(--nb-trans); }
.board-write .post-form .btn-primary:hover { background: var(--nb-accent-hov); transform: translateY(-1px); }
.board-write .post-form .btn-primary:active { transform: translateY(0); }
.board-write .post-form .btn-cancel { padding: 10px 22px; background: var(--nb-bg); color: var(--nb-text); border: 1px solid var(--nb-line-2); border-radius: var(--nb-r-pill); font-weight: 500; font-size: var(--nb-fs-sm); transition: background 0.16s var(--nb-trans); }
.board-write .post-form .btn-cancel:hover { background: var(--nb-bg-hover); }
/* WRITE — 모바일 */
@media (max-width: 720px) { .board-write { padding: 0; } .board-write .page-title { font-size: 1.5rem; } .board-write .post-form textarea { min-height: 280px; } .board-write .post-form .form-actions { flex-wrap: wrap; } .board-write .post-form .btn-primary, .board-write .post-form .btn-cancel { flex: 1 1 calc(50% - 4px); text-align: center; } }
/* ───── 신규 요소 (NEW 뱃지 / 비밀글 / 링크 / 비디오 / 폼 보조 / forbidden / secret 안내) ───── */
/* 새 글 = «N» 네모 상자(§2026-10-13 대표님 — 모든 게시판 «N» 하나 · 둥글기·크기 = 댓글 말풍선 몸통과 같게 · 알약 모양 금지).
   관리자 COUNSEL · SUPPORT 공지의 «N»(svndex.css .sdx-sup-new)도 같은 값. 두 모드 같은 모양의 작은 칩이라 색은 고정. */
.board-list .badge-new { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; box-sizing: border-box; background: #dc2626; color: #fff; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1; vertical-align: middle; position: relative; z-index: 1; }
/* 댓글 말풍선 바로 뒤의 «N» = 여백 3px — 말풍선 왼쪽(꼬리 5px + 3px)과 같은 몫이라 «제목 → 꼬리 끝» 과 «말풍선 → N» 간격이 늘 같다. */
.board-list .svx-cmt-count + .badge-new { margin-left: 3px; }
/* 검색어 매칭 뱃지 제네릭 base — 리스트형(press/review/qna)도 커버. 테이블형(.board-table)은 위 규칙이 override. */
.board-list .badge-match { display: inline-flex; align-items: center; padding: 2px 9px; margin-right: 4px; background: #e5e7eb; color: #4b5563; border-radius: var(--nb-r-pill); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle; position: relative; z-index: 1; }
/* 유입처 뱃지(빠른상담 패널로 들어온 상담 글 · §2026-10-06) — 두 화면 같은 작은 칩(색 짝 원칙의 «고정» 쪽 · 관리자 COUNSEL 목록과 같은 색) */
.board-list .badge-inflow { display: inline-flex; align-items: center; padding: 2px 8px; margin-right: 6px; background: #fef3c7; color: #92400e; border-radius: var(--nb-r-pill); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap; vertical-align: middle; position: relative; z-index: 1; }
.board-list .board-row.is-secret .col-title a { color: var(--nb-mute); }
.board-list .board-row.is-secret .ph-lock-key { margin-right: 4px; color: var(--nb-faint); font-size: 0.95em; vertical-align: middle; position: relative; z-index: 1; }
.board-list-forbidden, .board-view-forbidden, .board-view-secret, .board-write-unregistered, .board-write-notfound { max-width: 680px; margin: 0 auto; padding: 120px 24px; text-align: center; }
.board-list-forbidden .board-head, .board-view-forbidden .post-header, .board-view-secret .post-header, .board-write-unregistered .page-head, .board-write-notfound .page-head { padding: 0 0 24px; border: 0; margin: 0; }
.board-list-forbidden .board-title, .board-view-forbidden .post-title, .board-view-secret .post-title, .board-write-unregistered .page-title, .board-write-notfound .page-title { font-size: var(--nb-fs-xl); font-weight: 700; color: var(--nb-text); }
.board-list-forbidden p, .board-view-forbidden p, .board-view-secret p, .board-write-unregistered p, .board-write-notfound p { margin-top: 32px; color: var(--nb-mute); word-break: keep-all; overflow-wrap: break-word; }
.board-list-forbidden p a, .board-view-forbidden p a, .board-view-secret p a, .board-write-notfound p a { color: var(--nb-link); font-weight: 500; }
.board-list-forbidden p a:hover, .board-view-forbidden p a:hover, .board-view-secret p a:hover, .board-write-notfound p a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 비밀글 문 카드 — 페이지 본문 칸의 가로·세로 가운데(§2026-10-07). 색은 게시판 토큰이라 병원 색·어두운 화면을 따른다. 위 «없는 글·권한 없음» 공용 여백을 이 화면만 덮는다 */
.board-view.board-view-secret { display: flex; align-items: center; justify-content: center; max-width: none; min-height: clamp(440px, 62vh, 680px); padding: 56px 20px; }
.board-view-secret .board-secret-card { width: 100%; max-width: 440px; padding: 40px 36px 36px; border: 1px solid var(--nb-line-2); border-radius: 20px; background: var(--nb-bg); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px -18px rgba(15, 23, 42, 0.16); text-align: center; }
.board-view-secret .board-secret-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 0 18px; border-radius: 50%; background: var(--nb-link-soft); color: var(--nb-link); }
.board-view-secret .board-secret-ico svg { display: block; width: 26px; height: 26px; }
.board-view-secret .board-secret-card .board-secret-title { margin: 0; padding: 0; border: 0; color: var(--nb-text); font-size: var(--nb-fs-lg); font-weight: 700; line-height: 1.4; text-align: center; }
.board-view-secret .board-secret-card .board-secret-desc { margin: 10px 0 0; color: var(--nb-mute); font-size: var(--pf-fs-title, 0.9375rem); line-height: 1.65; text-align: center; text-wrap: balance; }
.board-view-secret .board-secret-card .post-flash { margin: 18px 0 0; padding: 10px 14px; border: 1px solid var(--nb-danger-line); border-radius: var(--nb-r-sm); background: var(--nb-danger-soft); color: var(--nb-danger); font-size: var(--nb-fs-xs); line-height: 1.5; }
.board-view-secret .board-secret-actions { display: grid; margin: 26px 0 0; }
@media (max-width: 480px) { .board-view.board-view-secret { min-height: 0; padding: 40px 16px; } .board-view-secret .board-secret-card { padding: 32px 20px 24px; border-radius: 16px; } }
.board-view .post-videos { margin: 32px 0; display: grid; gap: 16px; }
.board-view .post-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--nb-r); background: #000; }
.board-view .post-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.board-view .post-links { margin: 32px 0; padding: 24px; background: var(--nb-bg-soft); border: 1px solid var(--nb-line); border-radius: var(--nb-r); }
.board-view .post-links-title { margin: 0 0 12px; font-size: var(--nb-fs-sm); font-weight: 600; color: var(--nb-mute); letter-spacing: 0.04em; text-transform: uppercase; }
.board-view .post-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.board-view .post-links li { padding: 0; }
.board-view .post-links a { color: var(--nb-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; word-break: break-all; }
.board-view .post-links a:hover { color: var(--nb-link-hov); }
/* 비밀글 / 상단 고정 토글 — chip 스타일 */
/* align-items 를 명시한다 — 기본값 stretch 면 체크박스 알약과 옆 설명의 높이가 다를 때
   (설명이 길어 줄바꿈되면) 알약이 늘어나며 세로 중앙이 어긋난다 */
.board-write .post-form .form-row-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 24px 0; }
.board-write .flag-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin: 0; background: var(--nb-bg); border: 1px solid var(--nb-line-2); border-radius: var(--nb-r-pill); font-size: var(--nb-fs-sm); font-weight: 500; color: var(--nb-mute); cursor: pointer; transition: border-color 0.16s var(--nb-trans), background 0.16s var(--nb-trans), color 0.16s var(--nb-trans); text-transform: none; letter-spacing: 0; }
.board-write .flag-toggle:hover { border-color: var(--nb-text); }
.board-write .flag-toggle i { font-size: 1.05em; color: var(--nb-faint); transition: color 0.16s var(--nb-trans); }
.board-write .flag-toggle small { color: var(--nb-faint); font-weight: 400; font-size: var(--pf-fs-hint, 0.8125rem); }
.board-write .flag-toggle input[type=checkbox] { width: auto; margin: 0; padding: 0; flex: 0 0 auto; cursor: pointer; accent-color: var(--nb-link); }
.board-write .flag-toggle:has(input:checked) { background: var(--nb-link-soft); border-color: var(--nb-link); color: var(--nb-link); }
.board-write .flag-toggle:has(input:checked) i { color: var(--nb-link); }
.board-write .flag-toggle:has(input:checked) small { color: var(--nb-link); }
/* fieldset 통일 — 모던 카드형 */
.board-write .post-form-fset { margin: 28px 0; padding: 24px 28px 22px; background: var(--nb-bg); border: 1px solid var(--nb-line-2); border-radius: 12px; transition: border-color 0.16s var(--nb-trans); }
.board-write .post-form-fset:hover { border-color: var(--nb-line); }
.board-write .post-form-fset legend { padding: 0 12px; margin-left: -4px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--nb-fs-sm); font-weight: 600; color: var(--nb-text); letter-spacing: 0; text-transform: none; }
.board-write .post-form-fset legend i { color: var(--nb-link); font-size: 1.15em; }
.board-write .post-form-fset legend .legend-hint { color: var(--nb-faint); font-size: var(--nb-fs-xs); font-weight: 400; margin-left: 4px; }
.board-write .post-form-guest { margin: 24px 0; padding: 24px 28px; background: var(--nb-bg); border: 1px solid var(--nb-line-2); border-radius: 12px; }
.board-write .post-form-guest legend { padding: 0 12px; margin-left: -4px; font-size: var(--pf-fs-title, 0.9375rem); font-weight: 600; color: var(--nb-text); letter-spacing: 0; text-transform: none; }
/* 비회원 정보 2x2 그리드 (이름|비번 / 이메일|휴대전화) — 수직 나열·과대 폭 회피 */
.board-write .post-form-guest .guest-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.board-write .post-form-guest .guest-info-grid .form-row { margin: 0; }
/* 비회원 인풋 = 제목보다 오밀조밀하게(과대 폭·두께 회피) */
.board-write .post-form-guest .guest-info-grid label { font-size: var(--pf-fs-text, 0.875rem); font-weight: 600; color: var(--nb-mute); margin-bottom: 4px; display: inline-block; }
.board-write .post-form-guest .guest-info-grid input { height: var(--pf-ctl-h, 44px); padding: 10px 12px; font-size: var(--pf-fs-input, 1rem); line-height: 1.4; border-radius: var(--pf-ctl-r, var(--nb-r)); }
/* 비회원 칸·보안문자 칸도 다른 입력칸과 같은 테두리 반응(브랜드색) — 종전엔 이 둘만 어두운 테두리로 반응했다 */
.board-write :is(.post-form-guest .guest-info-grid, .post-form-confirm .guest-captcha) input:hover, .board-view .comment-form .guest-captcha input:hover { border-color: var(--nb-link); }
.board-write :is(.post-form-guest .guest-info-grid, .post-form-confirm .guest-captcha) input:focus, .board-view .comment-form .guest-captcha input:focus { outline: none; border-color: var(--nb-link); box-shadow: 0 0 0 3px rgba(var(--nb-link-rgb, 124, 58, 237), 0.13); }
.board-write .post-form-guest .guest-info-grid .form-row small { display: block; margin-top: 3px; font-size: var(--pf-fs-hint, 0.8125rem); color: var(--nb-faint); }
@media (max-width: 600px) { .board-write .post-form-guest .guest-info-grid { grid-template-columns: 1fr; } }
/* 관리자 전용 비회원 작성자 정보 패널 (뷰 상세) — amber 톤으로 민감정보/관리자전용 시그널 */
.board-view .post-guest-admin { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin: 16px 0 20px; padding: 14px 20px; background: var(--nb-warn-soft); border: 1px solid var(--nb-warn-line); border-radius: 12px; }
.board-view .post-guest-admin .pga-head { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin: 0; font-size: var(--nb-fs-sm); font-weight: 700; color: var(--nb-warn-ink); white-space: nowrap; }
.board-view .post-guest-admin .pga-head i { font-size: 1.15em; }
.board-view .post-guest-admin .pga-head small { padding: 1px 7px; border-radius: 999px; background: var(--nb-warn-line); color: var(--nb-warn-ink); font-size: var(--nb-fs-xs); font-weight: 600; }
.board-view .post-guest-admin .pga-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin: 0; min-width: 0; }
.board-view .post-guest-admin .pga-row { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 24px; border-left: 1px solid var(--nb-warn-line); min-width: 0; }
.board-view .post-guest-admin .pga-row:first-child { padding-left: 0; border-left: 0; }
.board-view .post-guest-admin .pga-row dt { margin: 0; color: var(--nb-warn-ink-2); font-size: var(--nb-fs-xs); font-weight: 500; white-space: nowrap; }
.board-view .post-guest-admin .pga-row dd { margin: 0; color: var(--nb-text); font-size: var(--nb-fs-sm); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.board-view .post-guest-admin .pga-row dd a { color: inherit; text-decoration: none; }
.board-view .post-guest-admin .pga-row dd a:hover { color: var(--nb-link); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .board-view .post-guest-admin { flex-direction: column; align-items: flex-start; gap: 10px; } .board-view .post-guest-admin .pga-body { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; } .board-view .post-guest-admin .pga-row { flex-direction: row; align-items: baseline; gap: 12px; padding: 0; border-left: 0; } .board-view .post-guest-admin .pga-row dt { flex: 0 0 64px; } .board-view .post-guest-admin .pga-row dd { white-space: normal; overflow-wrap: anywhere; } }
/* 링크 / 비디오 row — 콤팩트 (input 폰트 = sm, padding 작게) */
.board-write .post-form .form-row-prefix { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; flex: 0 0 28px; background: var(--nb-bg-soft); border: 1px solid var(--nb-line); border-radius: 50%; font-size: var(--nb-fs-xs); font-weight: 600; color: var(--nb-mute); font-variant-numeric: tabular-nums; }
.board-write .post-form .form-row-link, .board-write .post-form .form-row-video { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.board-write .post-form .form-row-link:last-child, .board-write .post-form .form-row-video:last-child { margin-bottom: 0; }
.board-write .post-form .form-row-link input, .board-write .post-form .form-row-video input[type=url] { flex: 1; min-width: 0; padding: 5px 12px; font-size: var(--nb-fs-xs); height: 34px; border: 1px solid var(--nb-line-mid); border-radius: 8px; background: var(--nb-bg); color: var(--nb-text); transition: border-color 0.15s var(--nb-trans), box-shadow 0.15s var(--nb-trans); }
.board-write .post-form .form-row-link input:hover, .board-write .post-form .form-row-video input[type=url]:hover { border-color: var(--nb-line-strong); }
.board-write .post-form .form-row-link input:focus, .board-write .post-form .form-row-video input[type=url]:focus { outline: none; border-color: var(--nb-link); box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 79, 70, 229), 0.1); }
.board-write .post-form .form-row-link input[type=text] { flex: 0 0 38%; }
/* 영상 메타 행 (제목·업로드일) — . VideoObject schema 필수 필드.
   URL 행 바로 아래에 번호 칸만큼 들여쓴다(빈 번호 동그라미를 두면 빈 원이 그려진다). */
.board-write .post-form .form-row-video-meta { padding-left: 38px; gap: 8px; margin-top: -2px; }
.board-write .post-form .form-row-video-meta input[type=text] { flex: 1 1 auto; min-width: 0; padding: 5px 12px; font-size: var(--nb-fs-xs); height: 34px; border: 1px solid var(--nb-line-mid); border-radius: 8px; background: var(--nb-bg); color: var(--nb-text); }
.board-write .post-form .form-row-video-meta input[type=date] { flex: 0 0 170px; padding: 5px 10px; font-size: var(--nb-fs-xs); height: 34px; border: 1px solid var(--nb-line-mid); border-radius: 8px; background: var(--nb-bg); color: var(--nb-text); }
.board-write .post-form .form-row-video-meta input:focus { outline: none; border-color: var(--nb-link); box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 79, 70, 229), 0.1); }
/* 비디오 우측 체크박스 영역 — 최상단 / 최하단 위치 지정 */
.board-write .post-form .form-row-video-pos { flex: 0 0 38%; display: flex; align-items: center; gap: 14px; padding: 0 4px; }
.board-write .post-form .video-pos-chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nb-fs-xs); color: var(--nb-mute); cursor: pointer; user-select: none; }
.board-write .post-form .video-pos-chk input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--nb-link); cursor: pointer; }
.board-write .post-form .video-pos-chk i { font-size: 1rem; color: var(--nb-faint); }
.board-write .post-form .video-pos-chk:hover { color: var(--nb-text); }
.board-write .post-form .video-pos-chk:has(input:checked) { color: var(--nb-link); font-weight: 500; }
.board-write .post-form .video-pos-chk:has(input:checked) i { color: var(--nb-link); }
.board-write .post-form-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.board-write .post-form .form-row-captcha .captcha-wrap { display: flex; gap: 10px; align-items: center; }
/* 캡차 이미지 = 코드 판독 위해 넉넉히(PC/모바일 시인성). 입력칸은 코드 길이(6자)에 맞춰 컴팩트+중앙. */
.board-write .post-form .form-row-captcha .captcha-img { height: 56px; width: auto; aspect-ratio: 150/50; overflow: hidden; border: 1px solid var(--nb-line-2); border-radius: var(--nb-r-sm); cursor: pointer; }
.board-write .post-form .form-row-captcha input { width: auto; flex: 0 1 150px; max-width: 150px; padding: 8px 12px; font-size: var(--nb-fs-base); text-align: center; letter-spacing: 0.18em; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .board-write .post-form .form-row-captcha .captcha-img { height: 52px; } .board-write .post-form .form-row-captcha input { flex: 1 1 auto; } }
.board-write .post-form .form-row-existing-att .post-form-att-existing { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.board-write .post-form .form-row-existing-att .post-form-att-existing li { margin: 0; padding: 10px 14px; background: var(--nb-bg); border: 1px solid var(--nb-line-2); border-radius: var(--nb-r-sm); }
.board-write .post-form .form-row-existing-att .att-keep { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; padding: 0; font-weight: 400; font-size: var(--pf-fs-text, 0.875rem); text-transform: none; letter-spacing: 0; color: var(--nb-text); }
.board-write .post-form .form-row-existing-att .att-keep input[type=checkbox] { width: auto; margin: 0; flex: 0 0 auto; accent-color: var(--nb-danger); cursor: pointer; }
.board-write .post-form .form-row-existing-att .att-name { flex: 1; word-break: break-all; }
.board-write .post-form .form-row-existing-att .att-keep small { color: var(--nb-faint); flex: 0 0 auto; font-size: var(--pf-fs-hint, 0.8125rem); font-variant-numeric: tabular-nums; }
.board-write .post-form .form-row-existing-att .att-hint { color: var(--nb-faint); font-size: var(--pf-fs-hint, 0.8125rem); flex: 0 0 auto; font-style: italic; }
.board-write .post-form .form-row-existing-att .att-keep:has(input:checked) { background: var(--nb-danger-soft); border-color: var(--nb-danger-line); }
.board-write .post-form .form-row-existing-att .att-keep:has(input:checked) .att-name { color: var(--nb-danger); text-decoration: line-through; }
.board-write .post-form-wrap .post-form-error:empty { display: none; }
.board-write .post-form-wrap .post-form-error { margin: 16px 0; }
.board-write .post-form-wrap .post-form-error .post-flash { padding: 14px 18px; border-radius: var(--nb-r-sm); font-size: var(--nb-fs-sm); font-weight: 500; }
.board-write .post-form-wrap .post-form-error .post-flash.is-error { background: #fef2f2; color: var(--nb-danger); border: 1px solid #fecaca; }
.board-write .post-form-wrap .post-form-error .post-flash.is-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.board-write .post-form-wrap .post-form-error .post-flash.is-info { background: #eff6ff; color: var(--nb-link); border: 1px solid #bfdbfe; }
/* 첨부 — 모던 dropzone 스타일. native input 가리고 label 이 클릭 영역. */
.board-write .post-form-attachments .post-form-att-slots { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.board-write .post-form-attachments .post-form-att-slot { position: relative; padding: 0; margin: 0; }
.board-write .post-form-attachments .att-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
/* 테두리·배경은 명시적으로 진한 톤으로 고정한다 — 옅은 값이면 흰 배경 위에서 사실상 안 보이고,
   사이트마다 배경톤이 달라 더 두드러진다 */
.board-write .post-form-attachments .att-pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; padding: 18px 16px; border: 1.5px dashed var(--nb-line-strong); border-radius: 10px; background: var(--nb-line); color: var(--nb-mute); font-size: var(--pf-fs-text, 0.875rem); font-weight: 500; text-align: center; cursor: pointer; transition: border-color 0.16s var(--nb-trans), background 0.16s var(--nb-trans), color 0.16s var(--nb-trans); margin: 0; padding-top: 18px; padding-bottom: 18px; text-transform: none; letter-spacing: 0; }
.board-write .post-form-attachments .att-pick-icon { font-size: 1.5rem; color: var(--nb-faint); transition: color 0.16s var(--nb-trans); }
.board-write .post-form-attachments .att-pick-text { color: var(--nb-text); font-weight: 600; }
.board-write .post-form-attachments .att-pick-hint { color: var(--nb-faint); font-size: var(--pf-fs-hint, 0.8125rem); font-weight: 400; }
.board-write .post-form-attachments .att-pick:hover { border-color: var(--nb-link); background: var(--nb-link-soft); color: var(--nb-link); }
.board-write .post-form-attachments .att-pick:hover .att-pick-icon { color: var(--nb-link); }
.board-write .post-form-attachments .att-input:focus + .att-pick { border-color: var(--nb-link); box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 79, 70, 229), 0.12); outline: none; }
.board-write .post-form-attachments .post-form-att-slot.is-dragover .att-pick { border-color: var(--nb-link); background: var(--nb-link-soft); border-style: solid; }
.board-write .post-form-attachments .post-form-att-slot.has-file .att-pick { border-style: solid; border-color: #16a34a; background: #f0fdf4; color: #166534; }
.board-write .post-form-attachments .post-form-att-slot.has-file .att-pick-icon { color: #16a34a; }
.board-write .post-form-attachments .post-form-att-slot.has-file .att-pick-text { color: #166534; word-break: break-all; padding: 0 24px; }
.board-write .post-form-attachments .post-form-att-slot.has-file .att-pick-hint { display: none; }
.board-write .post-form-attachments .att-clear { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0; border: 0; background: transparent; color: var(--nb-mute); cursor: pointer; border-radius: 50%; display: none; align-items: center; justify-content: center; transition: background 0.16s var(--nb-trans), color 0.16s var(--nb-trans); }
.board-write .post-form-attachments .att-clear i { font-size: 1.25rem; }
.board-write .post-form-attachments .att-clear:hover { background: #fee2e2; color: var(--nb-danger); }
.board-write .post-form-attachments .post-form-att-slot.has-file .att-clear { display: flex; }
.board-write .post-form-attachments .post-form-att-full { grid-column: 1/-1; padding: 18px; background: var(--nb-line); border: 1.5px dashed var(--nb-line-strong); border-radius: 10px; color: var(--nb-mute); font-size: var(--pf-fs-text, 0.875rem); text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.board-write .post-form-attachments .post-form-att-full i { color: #d97706; font-size: 1.1em; }
/* 허용 확장자 안내 — 칩 스타일 */
.board-write :is(.post-form-attachments, .post-form-guide) .post-form-att-formats { margin-top: 14px; padding: 12px 14px; background: var(--nb-bg-soft); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; font-size: var(--nb-fs-xs); color: var(--nb-mute); line-height: 1.5; }
.board-write .post-form-guide .post-form-att-formats:first-of-type { margin-top: 0; }
.board-write :is(.post-form-attachments, .post-form-guide) .post-form-att-formats strong { color: var(--nb-text); font-weight: 600; font-size: var(--nb-fs-xs); letter-spacing: 0.04em; text-transform: uppercase; }
.board-write :is(.post-form-attachments, .post-form-guide) .post-form-att-formats .fmt-group { display: inline-flex; align-items: center; gap: 8px; }
.board-write :is(.post-form-attachments, .post-form-guide) .post-form-att-formats .fmt-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--nb-r-pill); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.board-write :is(.post-form-attachments, .post-form-guide) .post-form-att-formats .fmt-key { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 7px; border: 1px solid #cbd5e1; border-bottom-color: #94a3b8; border-radius: 6px; background: linear-gradient(180deg, #fff, #f8fafc); color: #0f172a; box-shadow: 0 1px 0 #94a3b8, inset 0 -1px 0 rgba(148, 163, 184, 0.25); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; font-weight: 700; line-height: 1; }
.board-write :is(.post-form-attachments, .post-form-guide) .post-form-att-formats .fmt-key-plus { margin: 0 -4px; color: var(--nb-faint); font-weight: 700; }
.board-write :is(.post-form-attachments, .post-form-guide) .post-form-att-formats .fmt-break-help-mobile { display: none; }
.board-write :is(.post-form-attachments, .post-form-guide) .post-form-att-formats .fmt-img { background: #dbeafe; color: #1e40af; }
.board-write :is(.post-form-attachments, .post-form-guide) .post-form-att-formats .fmt-doc { background: #fce7f3; color: #9f1239; }
.board-write :is(.post-form-attachments, .post-form-guide) .post-form-att-formats .fmt-etc { background: #e5e7eb; color: #374151; }
/* WRITE — 신규 요소 모바일 */
@media (max-width: 720px) { .board-write .post-form .form-row-link, .board-write .post-form .form-row-video { flex-wrap: wrap; } .board-write .post-form .form-row-link input[type=text], .board-write .post-form .form-row-video-pos { flex: 1 1 100%; margin-left: 34px; } .board-write :is(.post-form-attachments, .post-form-guide) .post-form-att-formats .fmt-break-help-pc { display: none; } .board-write :is(.post-form-attachments, .post-form-guide) .post-form-att-formats .fmt-break-help-mobile { display: inline-flex; } }
/* ───── 미등록 / 미존재 안내 ───── */
.board-list-unregistered, .board-view-notfound { max-width: 680px; margin: 0 auto; padding: 120px 24px; text-align: center; }
.board-list-unregistered .board-head, .board-view-notfound .post-header { padding: 0 0 24px; border: 0; margin: 0; }
.board-list-unregistered .board-title, .board-view-notfound .post-title { font-size: var(--nb-fs-xl); font-weight: 700; color: var(--nb-text); }
.board-list-unregistered .board-desc { margin-top: 14px; color: var(--nb-mute); font-size: var(--nb-fs-base); }
.board-list-unregistered .board-desc code { padding: 2px 8px; background: var(--nb-bg-soft); border-radius: var(--nb-r-sm); font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--nb-link); }
.board-list-unregistered p, .board-view-notfound p { margin-top: 32px; color: var(--nb-mute); }
.board-list-unregistered p a, .board-view-notfound p a { color: var(--nb-link); font-weight: 500; }
.board-list-unregistered p a:hover, .board-view-notfound p a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ═══ 푸터 관리 버튼 그룹 안 전체 선택 = 버튼 톤 ═══ */
.board-list .btn-manage-checkall { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.board-list .btn-manage-checkall input[type=checkbox] { width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: var(--nb-link); }
.board-list .btn-manage-checkall span { font-size: var(--nb-fs-xs); font-weight: 500; }
.board-list .btn-manage-checkall:has(input:checked) { background: var(--nb-link-soft); border-color: var(--nb-link); color: var(--nb-link); }
.board-list .board-row.is-checked { background: var(--nb-bg-hover); }
/* 컨테이너 폭 = 부모 main 의 --container (core/css/main.scss) 자동 상속 */
/* ───── 글 액션 결과 안내(이동/복사/삭제/댓글) = 공용 토스트 한 벌(svx-toast · svndex-ui.css) — §2026-10-12 감사 F-28 에서 이 자리에 있던 두 번째 토스트(게시판 전용 알약 모양)를 걷었다 ───── */
/* ───── 전역 휴지통 (전체 게시판 삭제글 통합 — 공용 렌더 svndex_board_trash_render) ───── */
.board-trash { margin-top: 6px; }
.board-trash-head { display: grid; grid-template-columns: 26px 120px 1fr 104px 90px; gap: 14px; align-items: center; padding: 0 14px 10px; border-bottom: 2px solid var(--nb-line-2); font-size: var(--nb-fs-2xs); font-weight: 600; color: var(--nb-mute); letter-spacing: 0.02em; }
.board-trash-list { list-style: none; margin: 0; padding: 0; }
.board-trash-row { display: grid; grid-template-columns: 26px 120px 1fr 104px 90px; gap: 14px; align-items: center; padding: 13px 14px; border-bottom: 1px solid var(--nb-line); }
.board-trash-row:hover { background: var(--nb-bg-soft); }
.board-trash .board-trash-list .board-trash-row .board-item-check { position: static; display: inline-flex; transform: none; top: auto; left: auto; }
.board-trash .board-trash-list .board-trash-row .board-item-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--nb-link); cursor: pointer; }
.board-trash-origin { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; background: var(--nb-link-soft); color: var(--nb-link); border-radius: var(--nb-r-pill); font-size: var(--nb-fs-2xs); font-weight: 600; white-space: nowrap; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.board-trash-origin:hover { filter: brightness(0.95); }
.board-trash-title { color: var(--nb-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.board-trash-title:hover { color: var(--nb-link); text-decoration: underline; }
.board-trash-date { font-size: var(--nb-fs-xs); color: var(--nb-faint); white-space: nowrap; }
.board-trash-expire { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: var(--nb-r-pill); font-size: var(--nb-fs-2xs); font-weight: 600; background: var(--nb-bg-soft); color: var(--nb-mute); border: 1px solid var(--nb-line-2); white-space: nowrap; }
.board-trash-expire.is-expired { background: #fef2f2; color: var(--nb-danger); border-color: #fecaca; }
/* §2026-10-13 대표님 «항목명 정렬 위치 · 총 00건 스타일» — 원위치·보존 칸은 알약이 칸 가운데 서므로 머리 글자도 가운데. 총 건수는 공용 규칙이 없어 사이트 본문 글자(16px)로 목록에 붙어 나왔다 → 목록 아래 오른쪽 작은 글자. */
.board-trash-head > span:nth-child(2), .board-trash-head > span:nth-child(5) { text-align: center; }
@media (min-width: 681px) { .board-trash-row > .board-trash-origin, .board-trash-row > .board-trash-expire { justify-self: center; } }
.board-trash-total { margin: 12px 0 0; padding: 0 14px; text-align: right; font-size: var(--nb-fs-xs); color: var(--nb-mute); }
.board-trash-total strong { color: var(--nb-text); font-weight: 700; }
.board-trash-empty { padding: 64px 16px; text-align: center; color: var(--nb-mute); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.board-trash-empty i { font-size: 2rem; color: var(--nb-line-2); }
@media (max-width: 680px) { .board-trash-head { display: none; } .board-trash-row { grid-template-columns: 26px 1fr auto; gap: 4px 10px; padding: 12px 10px; } .board-trash .board-trash-list .board-trash-row .board-item-check { grid-area: 1/1/4/2; align-self: center; } .board-trash-origin { grid-area: 1/2/2/3; justify-self: start; } .board-trash-expire { grid-area: 1/3/2/4; } .board-trash-title { grid-area: 2/2/3/4; white-space: normal; } .board-trash-date { grid-area: 3/2/4/4; } }
/* ───── 게시물 없음(빈 목록) — 게시판 10종 공용 정본 ─────
   종전엔 게시판마다 클래스가 제각각이라 패딩·색·배경이 뒤섞여 있었다. 한 벌로 통일한다 */
/* 바깥 래퍼 = 문맥 어댑터만 담당(그리드 span·기본여백 제거). 실제 레이아웃은 안쪽 요소가 맡는다.
   ⚠️ <td> 에 직접 display:flex 를 주면 셀이 table-cell 을 잃어 폭이 무너진다 — 반드시 분리한다 */
.board-empty { grid-column: 1/-1; padding: 0; margin: 0; border: 0; background: none; text-align: center; }
.board-empty-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 72px 24px; text-align: center; background: var(--nb-bg-soft); border: 1px solid var(--nb-line); border-radius: var(--nb-r); }
.board-empty-ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--nb-bg); border: 1px solid var(--nb-line-2); color: var(--nb-faint); font-size: 1.5rem; }
.board-empty-title { margin: 0; font-size: var(--nb-fs-base); font-weight: 600; color: var(--nb-text); letter-spacing: -0.01em; }
.board-empty-hint { margin: 0; font-size: var(--nb-fs-xs); color: var(--nb-mute); line-height: 1.6; }
/* 테이블 셀 안(공지) = 셀 자체가 이미 표 테두리를 그리므로 카드 테두리·배경 중복 제거 */
td .board-empty-inner { border: 0; background: transparent; }
@media (max-width: 640px) { .board-empty-inner { padding: 52px 18px; gap: 8px; } .board-empty-ico { width: 46px; height: 46px; font-size: 1.3rem; } }
/* ══ 글쓰기 폼 — 엔진 소관이다.
   이 스타일이 엔진 데모 사이트의 사이트 CSS 에만 있던 시절에는 다른 병원에서 쓰기 폼이 맨몸으로 나왔다
   (네이티브 체크박스·기본 삼각형 마커·제각각인 색). 폼은 스킨이 아니라 여기서 출고한다 ══ */
/* 글쓰기 폼 단계 — 모든 병원 같은 값(§2026-10-05 대표님 «포인트색·배경 계열만 병원마다, 나머지는 같게»). 색은 병원 토큰(--nb-*),
   글자 크기·입력칸 높이·둥글기·여백은 여기 한 벌 — 표준 폼(svndex_post_form)과 특수 게시판 부품(form-parts)·비회원 칸이 같은 값을 쓴다.
   숨는 칸(링크·영상·첨부·SEO·보안문자)도 같은 값이라 게시판 설정에서 무엇을 켜도 모양이 같다.
   글자 = 묶음 제목 15 · 항목·안내 14 · 도움말 13 · 칩 12 · 입력 16(아이폰 확대 방지) / 입력칸 = 한 줄 44px · 둥글기 8px(작은 칸 6px).
   둥글기도 모든 병원 같은 값이다 — 사이트가 게시판 둥글기 토큰(--nb-r·--nb-r-sm)을 크게 바꿔도(비온 22px) 폼 안에서는 표준 값으로 되돌린다
   (§2026-10-05 대표님 «비온 둥글기도 다른 사이트처럼 · 입력폼도 모두 통일»). 댓글 쓰기·수정·삭제 칸과 비밀글 비밀번호 칸도 같은 토큰을 쓴다.
   ⚠️ 특수 게시판이 «추가 정보» 안에 직접 그린 표(강남 수술후기 계열 rv-/rs-write-table)는 병원 스킨 몫이라 이 값이 닿지 않게 범위를 잡았다
      (표준 폼의 추가 정보 = .post-form-extra · 하단 = .post-form-acc-body · 비회원 = .post-form-guest).
   ⚠️ 사이트 CSS 는 이 칸의 크기·정렬을 덮지 않는다(색 토큰만). */
#post-form, .board-view :is(.comment-form, .comment-edit-form, .comment-delete-form, .board-secret-unlock-form) { --nb-r: 0.5rem; --nb-r-sm: 0.375rem; --pf-fs-title: 0.9375rem; --pf-fs-text: 0.875rem; --pf-fs-hint: 0.8125rem; --pf-fs-chip: 0.75rem; --pf-fs-input: 1rem; --pf-ctl-h: 44px; --pf-ctl-r: 0.5rem; }
/* 폼 안 글(안내·도움말·동의 원문)은 낱말 단위로 줄을 바꾼다 — 사이트가 본문에 keep-all 을 걸지 않은 곳(엔진 사이트)에서만
   «바|로 등록» · «표시합니|다.» · «업|로드일까지» 로 끊겼다(§2026-10-05 전수 점검 · 비온은 0건). 사이트 설정에 기대지 않는다.
   편집 칸 본문은 보기 화면 CSS(.board-view .post-content 의 word-break)가 직접 정하므로 이 상속이 닿지 않는다. */
#post-form, .board-view :is(.comment-form, .comment-edit-form, .comment-delete-form, .board-secret-unlock-form) { word-break: keep-all; overflow-wrap: break-word; }
/* ── 글쓰기 폼 토글칩(비밀글·상단고정·예약발행) — 체크박스를 숨기고 알약 클릭 = 토글, 활성 = 아웃라인 + 배경.
   #post-form 스코프라 목록·휴지통 체크박스에는 영향이 없다 ── */
.form-row-schedule { align-items: center; }
/* 네이티브 체크박스/라디오 숨김 (DOM 유지=제출용). 알약 클릭이 토글/선택 */
#post-form .flag-toggle input[type=checkbox],
#post-form .flag-toggle input[type=radio] { position: absolute; width: 1px; height: 1px; opacity: 0; margin: -1px; pointer-events: none; }
/* 기본: 라벨 진하게(가독성) + 아이콘·보조문구는 은은하게 */
#post-form .flag-toggle { color: var(--nb-text, #0f172a); font-weight: 500; }
/* 칩 모양을 #post-form 으로 고정한다 — 라벨 공용 규칙(.board-write .post-form label (0,2,1) = display:block · margin-bottom:8px)이 칩 규칙(0,2,0)을 이겨
   칩이 «블록 + 아래 여백 8px» 로 그려졌다(§2026-10-05 대표님 «상단 고정 줄이 정확히 안 맞는다»): PC 옵션 줄에서 강제순번 칩만 4px 아래(가운데 맞춤이 여백까지 셌다) ·
   높이 45.8 대 46 · 폰 2칸 격자에서 칩 글자가 왼쪽에 붙고(가운데 맞춤이 블록에 안 먹음) 줄 사이 간격이 위아래로 달랐다 · 예약 발행을 고르면 글자와 날짜 칸이 붙었다.
   아이콘~글자 8px = 칩 규칙의 원래 값 — 강남·비온 특수 게시판 스킨이 이미 이 모양으로 되돌려 쓰고 있었다. */
#post-form .flag-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 46px; }
/* 답변 알림 메일 안내 = 비밀글 칩 옆 흰 알약(§2026-10-13 · comment.php svndex_post_reply_mail_pill) — 칩과 같은 높이·둥글기 · 누르는 칩이 아니라 안내라 글자색은 흐리게 */
/* 모양 = 켜진(강제) 비밀글 칩과 같게(§2026-10-13 대표님 «보더색을 비밀글 보더스타일로 · 강제 체크된 것처럼») */
#post-form .post-mail-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; margin: 0; background: var(--nb-link-soft, #f5f3ff); border: 1px solid var(--nb-link, #7c3aed); border-radius: var(--nb-r-pill); color: var(--nb-link, #7c3aed); font-size: var(--pf-fs-text, 14px); font-weight: 500; line-height: 1.4; white-space: nowrap; }
#post-form .post-mail-pill .ph { color: var(--nb-link, #7c3aed); font-size: 1rem; }
#post-form .flag-toggle i { color: var(--nb-mute, #64748b); }
#post-form .flag-toggle small { color: var(--nb-faint, #94a3b8); font-weight: 400; }
/* 활성(체크/선택) = 인디고 아웃라인+배경 (전 토글 동일) */
#post-form .flag-toggle:has(input:checked) { background: var(--nb-link-soft, #f5f3ff); border-color: var(--nb-link, #7c3aed); color: var(--nb-link, #7c3aed); }
#post-form .flag-toggle:has(input:checked) i { color: var(--nb-link, #7c3aed); }
#post-form .flag-toggle:has(input:checked) small { color: var(--nb-link, #7c3aed); }
/* 예약 pill 안 날짜입력 — 예약 선택 시에만 노출, borderless 작게(인디고) */
#post-form .sched-pill { gap: 8px; cursor: pointer; }
/* 개별 SEO (선택) 접기 바 — 글씨 0.875rem + 포인터 + 기본 ▶ 마커 숨기고 ph 캐럿(펼침 시 회전) */
#post-form .post-form-seo-summary { font-size: 0.9rem; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
#post-form .post-form-seo-summary::-webkit-details-marker { display: none; }
#post-form .post-form-seo-summary::marker { content: ""; }
#post-form .post-seo-caret { font-size: 0.9em; color: var(--nb-mute, #64748b); transition: transform 0.15s ease; flex: 0 0 auto; }
#post-form details.post-form-seo[open] > .post-form-seo-summary .post-seo-caret { transform: rotate(90deg); }
#post-form .post-form-seo-summary:hover { color: var(--nb-link, #7c3aed); }
#post-form .post-form-seo-summary:hover .post-seo-caret { color: var(--nb-link, #7c3aed); }
#post-form .sched-pill .form-sched-input { display: none; border: 0; background: transparent; box-shadow: none; outline: none; height: 24px; padding: 0; margin: 0; font-family: inherit; font-size: 0.9rem; font-weight: 400; color: var(--nb-link, #7c3aed); cursor: pointer; }
#post-form .sched-pill:has(input:checked) .form-sched-input { display: inline-flex; }
#post-form .sched-pill .form-sched-input::-webkit-calendar-picker-indicator { cursor: pointer; padding: 2px; border-radius: 4px; opacity: 0.55; transition: opacity 0.15s; }
#post-form .sched-pill .form-sched-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* ══ 외부 게시판 쓰기폼 = 네이티브 컨트롤 금지. 외부는 관리자 CSS 를 안 실으므로 여기서 자체 처리한다.
   #post-form(id) 특이도가 스킨별 규칙을 이겨 여러 스킨을 하나로 통일한다 ══ */
/* 셀렉트 = 네이티브 화살표 제거 + 커스텀 캐럿 (분류·평점 등 전 select 공용) */
#post-form select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 10px 34px 10px 12px; border: 1px solid var(--nb-line-2, #d8dce5); border-radius: var(--pf-ctl-r); background-color: var(--nb-bg, #fff); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; font-family: inherit; font-size: var(--pf-fs-input); color: var(--nb-text, #0f172a); line-height: 1.4; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
#post-form select:hover { border-color: var(--nb-link, #7c3aed); }
#post-form select:focus { outline: 0; border-color: var(--nb-link, #7c3aed); box-shadow: 0 0 0 3px rgba(var(--nb-link-rgb, 124, 58, 237), 0.13); }
#post-form .form-row-category select { max-width: 300px; }
/* 추가 정보(fields.php) = 2열 5:5 그리드. 각 필드 = 라벨 위 / 컨트롤 아래(세로). 스킨별 140px 가로그리드 통일 */
#post-form .post-form-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; align-items: start; }
#post-form .post-form-extra > legend { grid-column: 1/-1; }
#post-form .post-form-extra .form-row-extra { display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin: 0; }
#post-form .post-form-extra .form-row-extra > label { font-size: 0.9rem; font-weight: 600; color: var(--nb-text, #0f172a); }
#post-form .post-form-extra .form-row-extra > label em { color: var(--nb-danger, #dc2626); font-style: normal; }
/* 컨트롤 통일 박스 — 전폭 (input·textarea) */
#post-form .post-form-extra input:not([type=checkbox]):not([type=radio]):not([type=color]),
#post-form .post-form-extra textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--nb-line-2, #d8dce5); border-radius: var(--pf-ctl-r); background: var(--nb-bg, #fff); color: var(--nb-text, #0f172a); font-family: inherit; font-size: var(--pf-fs-input); line-height: 1.4; transition: border-color 0.15s, box-shadow 0.15s; }
/* 한 줄 입력칸 높이 = 한 값(날짜 칸은 달력 단추 때문에 2px 높았다) */
#post-form .post-form-extra input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=hidden]) { height: var(--pf-ctl-h); }
#post-form .post-form-extra select { width: 100%; height: var(--pf-ctl-h); }
#post-form .post-form-extra textarea { min-height: 92px; resize: vertical; }
#post-form .post-form-extra input:hover, #post-form .post-form-extra textarea:hover { border-color: var(--nb-link, #7c3aed); }
#post-form .post-form-extra input:focus, #post-form .post-form-extra textarea:focus { outline: 0; border-color: var(--nb-link, #7c3aed); box-shadow: 0 0 0 3px rgba(var(--nb-link-rgb, 124, 58, 237), 0.13); }
#post-form .post-form-extra input[type=date]::-webkit-calendar-picker-indicator,
#post-form .post-form-extra input[type=datetime-local]::-webkit-calendar-picker-indicator,
#post-form .post-form-extra input[type=time]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.5; transition: opacity 0.15s; }
#post-form .post-form-extra input[type=date]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
/* 이미지 필드 = 인라인 (전폭 아님) */
#post-form .post-form-extra .form-row-image { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#post-form .post-form-extra .form-row-image .form-image-preview,
#post-form .post-form-extra .form-row-image .form-image-empty { width: 88px; height: 88px; object-fit: cover; border-radius: var(--nb-r-sm, 8px); flex-shrink: 0; }
#post-form .post-form-extra .form-row-image .form-image-empty { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--nb-line-2, #d8dce5); color: var(--nb-faint, #94a3b8); font-size: 0.9rem; }
#post-form .post-form-extra .form-row-image .form-image-preview { border: 1px solid var(--nb-line-2, #d8dce5); }
#post-form .post-form-extra .btn-image-pick, #post-form .post-form-extra .btn-gallery-add { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; background: var(--nb-bg, #fff); border: 1px solid var(--nb-line-2, #d8dce5); border-radius: var(--nb-r-sm, 6px); color: var(--nb-text, #0f172a); font-size: 0.9rem; font-family: inherit; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
#post-form .post-form-extra .btn-image-pick:hover, #post-form .post-form-extra .btn-gallery-add:hover { border-color: var(--nb-link, #7c3aed); color: var(--nb-link, #7c3aed); }
#post-form .post-form-extra .btn-image-clear { background: transparent; border: 0; color: var(--nb-faint, #94a3b8); cursor: pointer; padding: 4px; }
/* 라디오/체크박스 그룹 = 가로 나열 */
#post-form .post-form-extra .form-row-radios, #post-form .post-form-extra .form-row-checks { display: flex; flex-wrap: wrap; gap: 12px; }
/* 단일 체크박스(리드문 등) 행 = 전폭 span */
#post-form .post-form-extra .form-row-flags { grid-column: 1/-1; margin: 0; }
/* help 문구 */
#post-form .post-form-extra .form-help { display: block; font-size: var(--pf-fs-hint); color: var(--nb-faint, #94a3b8); line-height: 1.5; }
@media (max-width: 640px) { #post-form .post-form-extra { grid-template-columns: 1fr; } }
/* ══ 쓰기폼 v2 통일 레이아웃 — write.php 가 form_layout=v2 로 렌더할 때의 스코프.
   ① 추가정보를 제목 밑 컴팩트 카드로 ② 본문 에디터 구분선 ③ 하단 = 접힘 아코디언 통일 ══ */
/* 라벨 통일 — 스킨의 대문자/자간/faint 라벨 리셋(제각각 방지). id 특이성으로 스킨 override. */
#post-form.post-form-v2 label { text-transform: none; letter-spacing: normal; }
#post-form.post-form-v2 .form-row-title { margin: 0 0 14px; }
#post-form.post-form-v2 .form-row-title > label { display: block; margin: 0 0 6px; font-size: 0.85rem; font-weight: 600; color: var(--nb-text, #0f172a); }
#post-form.post-form-v2 .form-row-title > input { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid var(--nb-line-2, #e2e8f0); border-radius: var(--pf-ctl-r); background: var(--nb-bg, #fff); color: var(--nb-text, #0f172a); font: inherit; font-size: var(--pf-fs-input); transition: border-color 0.15s, box-shadow 0.15s; }
#post-form.post-form-v2 .form-row-title > input:hover { border-color: var(--nb-link, #7c3aed); }
#post-form.post-form-v2 .form-row-title > input:focus { outline: 0; border-color: var(--nb-link, #7c3aed); box-shadow: 0 0 0 3px rgba(var(--nb-link-rgb, 124, 58, 237), 0.13); }
/* 추가정보 = 제목 밑. 라운드 보더 래퍼 + 항목명이 상단 보더에 걸터앉아 그 부분만 보더가 끊긴다(클래식 fieldset/legend).
   각 옵션은 [라벨][입력] 가로 한 줄로 순서대로 채워져, 게시판마다 어떤 옵션이 붙어도 맞는다 */
/* display:revert = fieldset 기본 렌더 복원(.post-form-extra 의 grid 상속 해제) → legend 걸침 살아남. */
#post-form .post-form-lead { display: revert; margin: 8px 0 16px; padding: 0 15px 14px; border: 1px solid var(--nb-line-2, #e2e8f0); border-radius: 8px; background: var(--nb-bg, #fff); }
/* legend = display 기본값 유지(변경 시 걸침 렌더가 깨짐). 아이콘은 inline 정렬. */
#post-form .post-form-lead > legend { width: auto; max-width: none; margin: 0 0 0 6px; padding: 0 7px; border: 0; font-size: 0.9rem; font-weight: 600; color: var(--nb-text, #0f172a); background: var(--nb-bg, #fff); }
#post-form .post-form-lead > legend i { color: var(--nb-link, #7c3aed); font-size: 1rem; vertical-align: -2px; margin-right: 4px; }
/* 본문 = legend 아래 2열 그리드 (좌우 padding 은 fieldset 이 가짐) */
#post-form .post-form-lead-body { padding: 6px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 28px; align-items: start; }
/* 각 옵션 셀 = 라벨(고정폭 정렬) + 인풋(1fr) 한 줄 */
#post-form .post-form-lead .form-row-extra { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 4px 12px; margin: 0; }
#post-form .post-form-lead .form-row-extra > label { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--nb-text, #0f172a); line-height: 1.3; align-self: center; }
#post-form .post-form-lead .form-row-extra > .form-help { grid-column: 2; margin: 2px 0 0; font-size: var(--pf-fs-hint); color: var(--nb-faint, #94a3b8); line-height: 1.5; }
#post-form .post-form-lead .post-cat-select, #post-form .post-form-lead input:not([type=checkbox]):not([type=radio]):not([type=color]):not([name=pin_order]), #post-form .post-form-lead select, #post-form .post-form-lead textarea { width: 100%; max-width: none; box-sizing: border-box; }
/* 이미지(썸네일) = 인풋칸 안 미리보기+버튼 인라인 (컴팩트) */
#post-form .post-form-lead .form-row-image { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#post-form .post-form-lead .form-row-image .form-image-preview, #post-form .post-form-lead .form-row-image .form-image-empty { width: 46px; height: 46px; }
#post-form .post-form-lead .form-row-image .form-image-empty { font-size: 0.56rem; text-align: center; line-height: 1.2; }
#post-form .post-form-lead .btn-image-pick { padding: 6px 10px; font-size: 0.75rem; }
#post-form .post-form-lead .btn-image-clear { padding: 2px; }
/* 넓은 타입(textarea·gallery·라디오/체크 그룹·단일체크) = 2열 span (그래도 라벨+인풋 한 줄) */
#post-form .post-form-lead .form-row-extra:has(textarea), #post-form .post-form-lead .form-row-extra:has(.form-row-gallery), #post-form .post-form-lead .form-row-extra:has(.form-row-radios), #post-form .post-form-lead .form-row-extra:has(.form-row-checks), #post-form .post-form-lead .form-row-flags { grid-column: 1/-1; }
#post-form .post-form-lead .form-row-extra:has(textarea), #post-form .post-form-lead .form-row-extra:has(.form-row-gallery) { align-items: start; }
@media (max-width: 640px) { #post-form .post-form-lead-body { grid-template-columns: minmax(0, 1fr); } }
/* 표준 추가 정보 카드는 폼 폭을 넘지 않는다 — fieldset 기본 최소 폭(min-content)이라 날짜 칸 고유 폭(약 162px)만큼 320px 폰에서 카드가 14px 넘쳤다(§2026-10-05 전수 점검).
   작은 폰(359px 이하)은 항목명을 칸 위로 올린다(라벨 96px + 날짜 칸이 한 줄에 안 들어간다). 360px 이상은 종전대로 한 줄.
   ⚠️ .post-form-extra 가 붙은 표준 카드만 — 강남 수술후기 계열의 추가 정보 표(fieldset.post-form-lead 단독)는 그 스킨이 다룬다(대표님이 직접 맞춘 자리). */
#post-form .post-form-extra.post-form-lead { min-width: 0; }
@media (max-width: 359px) { #post-form .post-form-lead-body > .form-row-extra { grid-template-columns: minmax(0, 1fr); row-gap: 6px; } #post-form .post-form-lead-body > .form-row-extra > .form-help { grid-column: 1; } }
/* 편집기 아래 크기 조절 손잡이(∨)가 편집기 밖으로 16px 내려온다(editor.css .svx-editor-resize-handle bottom:-16px) — 그만큼 이 줄이 자리를 잡는다.
   그래서 아래에 무엇이 오든(옵션 줄 · 특수 게시판 부품 묶음 · 묶음 칸) 손잡이와 겹치지 않고, 손잡이 아래 간격이 게시판마다 같다(§2026-10-05 대표님
   «대부분은 너무 붙어 있고 강남 특수 게시판은 너무 벌어져 있다»). ⚠️ margin 이 아니라 padding — 아래 줄의 margin 과 겹쳐 합쳐지지 않게. */
#post-form.post-form-v2 .form-row-content { margin: 14px 0 0; padding-bottom: 16px; }
#post-form.post-form-v2 .form-row-flags { margin: 12px 0 28px; }
/* 아래 = 위(편집기 줄 16 + 12 = 28)와 같은 간격 — 종전엔 아래 접기 칸과 8px 로 붙었다(§2026-10-06 대표님) */
/* 아코디언 통일 — 헤더(캐럿+아이콘+제목+힌트) / 본문(통일 패딩·인풋). 기본 접힘(native details). */
#post-form .post-form-acc { margin: 8px 0 0; padding: 0; border: 1px solid var(--nb-line-2, #e2e8f0); border-radius: var(--nb-r, 10px); background: var(--nb-bg, #fff); overflow: hidden; }
#post-form .post-form-acc > .post-form-acc-head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 15px; font-size: var(--pf-fs-title); font-weight: 600; color: var(--nb-text, #0f172a); user-select: none; transition: background 0.12s; }
#post-form .post-form-acc > .post-form-acc-head::-webkit-details-marker { display: none; }
#post-form .post-form-acc > .post-form-acc-head::marker { content: ""; }
#post-form .post-form-acc > .post-form-acc-head:hover { background: var(--nb-bg-soft, #fafafa); }
#post-form .post-form-acc .acc-caret { font-size: 0.85rem; color: var(--nb-faint, #94a3b8); transition: transform 0.15s ease; flex: 0 0 auto; }
#post-form .post-form-acc[open] > .post-form-acc-head .acc-caret { transform: rotate(90deg); }
#post-form .post-form-acc .acc-icon { font-size: 1rem; color: var(--nb-link, #7c3aed); flex: 0 0 auto; }
#post-form .post-form-acc .acc-title { flex: 0 0 auto; }
#post-form .post-form-acc .legend-hint { color: var(--nb-faint, #94a3b8); font-weight: 400; font-size: var(--pf-fs-hint); margin-left: 2px; }
/* 폰(720px 이하) — 안내 글이 제목 옆 좁은 기둥으로 쪼개졌다(비디오 임베드 4줄 · §2026-10-05 전수 점검). 안내 글은 제목 아래 줄, 제목 첫 글자에 맞춘다. */
@media (max-width: 720px) { #post-form .post-form-acc > .post-form-acc-head:has(> .legend-hint) { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 2px 8px; } #post-form .post-form-acc > .post-form-acc-head > .legend-hint { grid-column: 3; margin-left: 0; line-height: 1.45; } }
#post-form .post-form-acc[open] > .post-form-acc-head { border-bottom: 1px solid var(--nb-line-2, #e2e8f0); }
/* 펼침 이너영역 = 옅은 회색 패널(여러 개 펼쳐도 시각 구분). 이미 박스배경 있는 이너(att-formats·파일슬롯)는 흰색으로 뒤집어 대비. */
#post-form .post-form-acc-body { padding: 14px 15px 15px; background: var(--nb-bg-soft, #fafafa); }
/* 아코디언 본문 = 통일 폼행/라벨/인풋 */
#post-form .post-form-acc-body .form-row { margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
#post-form .post-form-acc-body .form-row:last-child { margin-bottom: 0; }
#post-form .post-form-acc-body .form-row > label { font-size: var(--pf-fs-text); font-weight: 600; color: var(--nb-text, #0f172a); }
#post-form .post-form-acc-body .form-row > label small { font-weight: 400; color: var(--nb-faint, #94a3b8); font-size: var(--pf-fs-hint); }
#post-form .post-form-acc-body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), #post-form .post-form-acc-body textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--nb-line-2, #e2e8f0); border-radius: var(--pf-ctl-r); background: var(--nb-bg, #fff); color: var(--nb-text, #0f172a); font: inherit; font-size: var(--pf-fs-input); line-height: 1.4; transition: border-color 0.15s, box-shadow 0.15s; }
#post-form .post-form-acc-body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]) { height: var(--pf-ctl-h); }
#post-form .post-form-acc-body input:hover, #post-form .post-form-acc-body textarea:hover { border-color: var(--nb-link, #7c3aed); }
#post-form .post-form-acc-body input:focus, #post-form .post-form-acc-body textarea:focus { outline: 0; border-color: var(--nb-link, #7c3aed); box-shadow: 0 0 0 3px rgba(var(--nb-link-rgb, 124, 58, 237), 0.13); }
#post-form .post-form-acc-body textarea { min-height: 58px; resize: vertical; }
/* 관련링크·비디오 = 번호 프리픽스 + 인풋 한 줄 */
#post-form .post-form-acc-body .form-row-link, #post-form .post-form-acc-body .form-row-video { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
#post-form .post-form-acc-body .form-row-prefix { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--nb-link-soft, #f5f3ff); color: var(--nb-link, #7c3aed); font-size: var(--pf-fs-hint); font-weight: 700; }
#post-form .post-form-acc-body .form-row-link input { flex: 1 1 180px; width: auto; }
#post-form .post-form-acc-body .form-row-video input[type=url] { flex: 1 1 180px; width: auto; }
#post-form .post-form-acc-body .form-row-video-pos { display: inline-flex; gap: 10px; flex: 0 0 auto; }
#post-form .post-form-acc-body .video-pos-chk { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pf-fs-text); font-weight: 500; color: var(--nb-mute, #64748b); cursor: pointer; }
/* 첨부 슬롯·안내 = 통일 톤 (본문 안에서) */
#post-form .post-form-acc-body .post-form-att-slots { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#post-form .post-form-acc-body .post-form-att-formats { margin: 10px 0 0; font-size: var(--pf-fs-text); color: var(--nb-mute, #64748b); line-height: 1.6; padding: 12px 14px; border: 0; border-radius: 8px; background: var(--nb-bg-soft, #fafafa); display: flex; flex-wrap: nowrap; align-items: baseline; gap: 14px 18px; word-break: keep-all; overflow-wrap: break-word; }
/* 첫 안내 줄은 위 여백 없이 — 상자 배경이 접기 칸 배경과 같아(안 보이는 상자) 위가 36px · 아래가 27px 로 기울어 보였다 */
#post-form .post-form-acc-body > .post-form-att-formats:first-child { margin-top: 0; }
#post-form .post-form-acc-body .post-form-att-formats strong { display: block; font-size: var(--pf-fs-text) !important; font-weight: 700; color: var(--nb-text, #0f172a); margin: 0; flex: 0 0 auto; letter-spacing: 0; text-transform: none; }
#post-form .post-form-acc-body .fmt-tag { display: inline-block; flex: 0 0 auto; white-space: nowrap; padding: 1px 7px; border-radius: 999px; font-size: var(--pf-fs-chip) !important; font-weight: 600; margin-right: 4px; }
/* 글 한 덩어리(묶음이 하나뿐인 줄)는 상자 끝까지 자연스럽게 흐른다 — 덩어리째 다음 줄로 넘어가 오른쪽이 비지 않게 */
#post-form .post-form-acc-body .post-form-att-formats .fmt-group:only-of-type { display: block; flex: 1 1 auto; min-width: 0; }
#post-form .post-form-acc-body .post-form-att-formats .fmt-group:only-of-type > i { vertical-align: -0.15em; margin: 0 2px; }
/* 묶음이 여럿인 줄(허용 확장자) — 태블릿 폭에서 한 줄에 다 못 들어가 칩 글자까지 «이미/지» 로 쪼개졌다(§2026-10-05 전수 점검 768px).
   721~1024px = 항목명 왼쪽 · 묶음은 오른쪽에 한 줄씩(같은 상자의 다른 안내 줄과 같은 «항목명 왼쪽» 모양). 720px 이하는 아래 블록이 위아래로 쌓는다. */
@media (min-width: 721px) and (max-width: 1024px) { #post-form .post-form-acc-body .post-form-att-formats:has(.fmt-group + .fmt-group) { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 18px; } #post-form .post-form-acc-body .post-form-att-formats:has(.fmt-group + .fmt-group) > strong { grid-column: 1; grid-row: 1; } #post-form .post-form-acc-body .post-form-att-formats:has(.fmt-group + .fmt-group) > .fmt-group { grid-column: 2; } }
/* 묶음 글이 두 줄이 되면 칩은 첫 줄에 맞춘다(가운데 맞춤이면 두 줄 사이에 떠 있다) */
@media (max-width: 1024px) { #post-form .post-form-acc-body .post-form-att-formats .fmt-group { align-items: baseline; } }
/* 영상 제목·업로드일 줄 = 주소 칸 왼쪽 끝에 맞춘다(번호 22px + 간격 8px) · 한 줄에 */
#post-form .post-form-acc-body .form-row-video-meta { padding-left: 30px; flex-wrap: nowrap; }
#post-form .post-form-acc-body .form-row-video-meta input[type=text] { flex: 1 1 auto; width: auto; min-width: 0; }
#post-form .post-form-acc-body .form-row-video-meta input[type=date] { flex: 0 0 180px; width: auto; }
@media (max-width: 720px) { #post-form .post-form-acc-body .post-form-att-formats { flex-direction: column; align-items: flex-start; gap: 4px; } #post-form .post-form-acc-body .form-row-video-meta { flex-wrap: wrap; } #post-form .post-form-acc-body .form-row-video-meta input[type=date] { flex: 1 1 100%; } }
#post-form .post-form-acc-body .fmt-img { background: #dbeafe; color: #1e40af; }
#post-form .post-form-acc-body .fmt-doc { background: #fce7f3; color: #9f1239; }
#post-form .post-form-acc-body .fmt-etc { background: #f3f4f6; color: #374151; }
/* 게시판 목록 상단 분류탭 — [전체][분류1]… 서버 필터(?cat=) <a> 링크. .col-cat 알약과 동일 accent(--nb-link) */
.board-cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.board-cat-tab { display: inline-flex; align-items: center; padding: 7px 16px; border: 1px solid var(--nb-line-2, #e2e8f0); border-radius: var(--nb-r-pill, 999px); background: var(--nb-bg, #fff); color: var(--nb-mute, #64748b); font-size: var(--nb-fs-xs, 0.875rem); font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.board-cat-tab:hover { color: var(--nb-link, #7c3aed); border-color: var(--nb-link, #7c3aed); }
.board-cat-tab.is-active { color: var(--nb-on-link); background: var(--nb-link, #7c3aed); border-color: var(--nb-link, #7c3aed); }
/* 뷰 작성정보 맨앞 분류 알약 — .col-cat(카드 오버레이)와 동일 색, 인라인 배치 */
.post-meta .post-cat { display: inline-flex; align-items: center; padding: 3px 11px; background: var(--nb-link, #7c3aed); color: var(--nb-on-link); border-radius: var(--nb-r-pill, 999px); font-size: var(--nb-fs-2xs, 0.75rem); font-weight: 700; line-height: 1.4; }
/* §2026-09-24 — 모바일 글쓰기 옵션 줄. 공지 등록·상단 고정·강제순번·즉시/예약 발행이 한 줄 흐름으로 섞여 접히며
   「강제순번」만 6px 안쪽으로 밀리고 「예약 발행」이 혼자 한 줄을 썼다. 또 편집기 아래 크기 조절 손잡이(∨)가 15px 내려와
   이 줄에 걸쳤다(실측 390px). 2열 칸으로 짝을 맞추고(공지·고정 / 강제순번 한 줄 / 즉시·예약), 손잡이 아래로 띄운다.
   (§2026-10-05 — 손잡이 자리는 이제 편집기 줄(.form-row-content)이 잡으므로 여기서 따로 띄우지 않는다.) */
@media (max-width: 720px) { #post-form .form-row-flags.form-row-schedule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #post-form .form-row-flags.form-row-schedule > .flag-toggle { justify-content: center; width: 100%; min-width: 0; } #post-form .form-row-flags.form-row-schedule > .flag-toggle:has(input[name=is_secret]) { grid-column: 1/-1; } #post-form .form-row-flags.form-row-schedule > .post-pin-order { grid-column: 1/-1; margin-left: 0; justify-content: space-between; } }
/* PC(1025px 이상) = 옵션 칩 한 줄(§2026-10-06 대표님 «두 줄이 될 이유가 없다») — 비밀글 칩도 이 줄에 들어온다.
   자리가 모자라면(«항상 비밀글» 긴 설명 · 예약 날짜 칸이 열림) 비밀글 설명 글자만 끝을 줄인다. 태블릿은 칩 여섯 개가 한 줄에 안 들어가 종전처럼 접힌다. */
@media (min-width: 1025px) { #post-form .form-row-flags.form-row-schedule { flex-wrap: nowrap; } #post-form .form-row-flags.form-row-schedule > :is(.flag-toggle, .post-pin-order) { flex: 0 0 auto; } #post-form .form-row-flags.form-row-schedule > .flag-toggle:has(input[name=is_secret]) { flex: 0 1 auto; min-width: 0; } #post-form .form-row-flags.form-row-schedule > .flag-toggle:has(input[name=is_secret]) small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
/* ───── 비회원 «개인정보 동의 + 자동등록방지» = 저장 단추 바로 위(§2026-10-06) ─────
   대표님 «동의는 왜 저렇게 공간을 차지하고 상자 안에 감싸져 있나» · «둘 다 입력해야 넘어가?» — 회색 상자 두 개(높이를 서로 맞춰 동의 칸이
   빈 상자처럼 컸다)를 걷고 한 줄씩 놓는다. 글 제목·본문보다 위에 있던 것을 아래로 내렸다 — 먼저 채우고 글을 쓰면 보안문자 유효시간이 지났다.
   마크업 정본 = svndex_post_guest_confirm_html · svndex_post_guest_consent_html · svndex_post_captcha_chip_html (skin-helpers.php)
   특수 게시판 부품(form-parts)은 같은 묶음을 비회원 칸 안 아래에 붙인다(.is-inline). 댓글 칸 보안문자도 같은 모양(.comment-form). */
.board-write .post-form-confirm { display: flex; flex-direction: column; align-items: stretch; gap: 16px; width: calc(var(--svx-cap-row, 416px)); max-width: 100%; margin: 32px 0 0 auto; padding: 0; border: 0; }
.board-write .post-form-confirm + .form-actions { margin-top: 20px; }
/* §2026-10-06 2차(대표님 «아주 못생겼다») — 동의 줄은 왼쪽 끝 · 보안문자 줄은 이름표 칸만큼 안쪽에서 시작해 세로 줄이 어긋났고, 새 글자 단추(34px 원)만
   입력칸(44px)보다 작았고, 펼침 글자는 밑줄 링크처럼 보였다. 지금 = 같은 왼쪽 줄 · 같은 폭(480px) · 같은 높이 — 동의 = 입력칸 모양 한 줄(누르면 체크) · 보안문자 = 이름표 위 */
.board-write .post-form-confirm > :is(.guest-consent-wrap, .guest-captcha) { width: 100%; }
/* §2026-10-06 3차(대표님 «통으로 우측으로 · 저장 단추와 가깝게 · 보안문자 가입 화면만큼 · 입력칸 적당히») — 구분선을 걷고 묶음 하나로 오른쪽 끝(저장 단추 위)에 둔다.
   묶음 폭 = 동의 줄 폭 · 글자 칸은 그 안에서 남은 폭(그림 150×50 = 가입 화면과 같은 크기). */
.board-write .post-form-confirm .guest-captcha :is(.guest-captcha__row, .guest-captcha__alt) input { flex: 0 0 200px; width: 200px; max-width: none; }
.board-write .post-form-guest .post-form-confirm.is-inline { margin-top: 18px; }
.board-write .post-form-confirm .guest-consent { position: relative; display: flex; align-items: center; gap: 8px 12px; min-height: 50px; padding: 10px 16px; background: var(--nb-bg); border: 1px solid var(--nb-line-2); border-radius: var(--pf-ctl-r, var(--nb-r-sm)); transition: border-color 0.16s var(--nb-trans), background 0.16s var(--nb-trans); }
.board-write .post-form-confirm .guest-consent:hover { border-color: var(--nb-link); }
.board-write .post-form-confirm .guest-consent:has(input:checked) { background: var(--nb-link-soft, #f5f3ff); border-color: var(--nb-link, #7c3aed); }
.board-write .post-form-confirm .guest-consent-agree { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--pf-fs-title, 0.9375rem); font-weight: 500; color: var(--nb-text); letter-spacing: normal; text-transform: none; cursor: pointer; }
.board-write .post-form-confirm .guest-consent-agree input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--nb-link); cursor: pointer; }
/* 문구 = 한 덩어리(span) — label 이 flex 라 글 조각마다 따로 놓여 폰에서 «동/의» · «합니/다» 로 쪼개졌다(§2026-10-05 전수 점검) */
.board-write .post-form-confirm .guest-consent-agree__text { min-width: 0; word-break: keep-all; overflow-wrap: break-word; line-height: 1.5; text-wrap: balance; }
/* ↑ balance = 폰에서 두 줄이 될 때 «(필수)» 만 따로 떨어지지 않게(«개인정보 수집·이용에 / 동의합니다. (필수)») */
.board-write .post-form-confirm .guest-consent-agree b { font-weight: 600; }
.board-write .post-form-confirm .guest-consent-agree em { color: var(--nb-danger, #e5484d); font-style: normal; font-weight: 500; }
/* 원문 = «내용 보기» 글자 단추로 접어 둔다(고지 의무 — 지우지 않는다). <details> 라 스크립트가 없다. 펼치면 줄 아래로 떠 있는 판. */
:is(.board-write .post-form-confirm .guest-consent-full, .board-write .post-form-confirm .guest-captcha__more) > summary { display: flex; width: max-content; align-items: center; gap: 6px; font-size: var(--pf-fs-text, 0.875rem); line-height: 1.5; color: var(--nb-mute); white-space: nowrap; cursor: pointer; list-style: none; }
/* ↑ flex(인라인 아님) = 펼침 상자(details)가 글자 줄 받침을 따로 잡아 22px 글자가 31px 칸이 됐다 — 동의 칸만 44 → 51px 로 커졌다 */
.board-write .post-form-confirm .guest-consent-full { flex: 0 0 auto; }
:is(.board-write .post-form-confirm .guest-consent-full, .board-write .post-form-confirm .guest-captcha__more, .board-view .comment-form .guest-captcha__more) > summary::-webkit-details-marker { display: none; }
:is(.board-write .post-form-confirm .guest-consent-full, .board-write .post-form-confirm .guest-captcha__more, .board-view .comment-form .guest-captcha__more) > summary::marker { content: ""; }
:is(.board-write .post-form-confirm .guest-consent-full, .board-write .post-form-confirm .guest-captcha__more, .board-view .comment-form .guest-captcha__more) > summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
:is(.board-write .post-form-confirm .guest-consent-full, .board-write .post-form-confirm .guest-captcha__more, .board-view .comment-form .guest-captcha__more)[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
:is(.board-write .post-form-confirm .guest-consent-full, .board-write .post-form-confirm .guest-captcha__more, .board-view .comment-form .guest-captcha__more) > summary:hover { color: var(--nb-link); }
.board-write .post-form-confirm .guest-consent-full .guest-consent-text { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 8px); max-height: 260px; overflow: auto; padding: 14px 16px; background: var(--nb-bg); border: 1px solid var(--nb-line-2); border-radius: var(--nb-r-sm); box-shadow: 0 18px 40px -18px rgba(14, 23, 26, 0.4); font-size: var(--nb-fs-xs); line-height: 1.7; color: var(--nb-mute); }
/* 자동등록방지 — [이름표] [그림 · 새 글자 · 입력칸] / 덧셈 문제는 «글자가 잘 안 보이면» 아래로 접는다(서버는 둘 중 하나만 맞으면 통과). */
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 16px; margin: 0; padding: 0; background: none; border: 0; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__label { grid-column: 1; font-size: var(--pf-fs-title, 0.9375rem); font-weight: 600; color: var(--nb-text); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__label em { color: var(--nb-danger, #e5484d); font-style: normal; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__row { grid-column: 2; display: flex; align-items: center; gap: 8px; max-width: 440px; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha { --svx-cap-h: 50px; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha .captcha-img { flex: 0 0 auto; height: var(--svx-cap-h); width: auto; aspect-ratio: 150/50; overflow: hidden; border: 1px solid var(--nb-line-2); border-radius: var(--pf-ctl-r, var(--nb-r-sm)); background: #fff; cursor: pointer; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__new { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--svx-cap-h); height: var(--svx-cap-h); padding: 0; border: 1px solid var(--nb-line-2); border-radius: var(--pf-ctl-r, var(--nb-r-sm)); background: var(--nb-bg); color: var(--nb-mute); font-size: 1.25rem; line-height: 1; cursor: pointer; transition: color 0.16s var(--nb-trans), border-color 0.16s var(--nb-trans); }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__new:hover { color: var(--nb-link); border-color: var(--nb-link); }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__row input { flex: 1 1 150px; width: 150px; min-width: 0; max-width: none; height: var(--svx-cap-h); padding: 0 10px; font-size: var(--pf-fs-text, 0.875rem); border-radius: var(--pf-ctl-r, var(--nb-r-sm)); text-align: center; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; }
/* ↑ max-width:none = 댓글 입력칸 규칙(최대 240px)이 칩 안 칸까지 묶어 PC 에서 칩 오른쪽이 비었다(글쓰기 칩은 칸이 칩 끝까지 찬다 · §2026-10-05) */
/* 보안문자 칸 글자 간격은 «입력한 코드» 에만 — 안내 글자까지 띄엄띄엄 보였다(글쓰기·댓글 같은 칸) */
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha input::placeholder { letter-spacing: 0; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__more { grid-column: 2; }
.board-view .comment-form .guest-captcha__more > summary { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pf-fs-text, 0.875rem); color: var(--nb-mute); white-space: nowrap; cursor: pointer; list-style: none; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__alt { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; max-width: 440px; font-size: var(--pf-fs-text, 0.875rem); color: var(--nb-mute); letter-spacing: normal; text-transform: none; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__q { flex: 0 0 auto; font-weight: 600; color: var(--nb-text); font-variant-numeric: tabular-nums; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__alt input { height: var(--svx-cap-h); flex: 1 1 150px; width: 150px; min-width: 0; max-width: none; letter-spacing: 0; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha.is-external { grid-template-columns: minmax(0, 1fr); }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha.is-external .svx-cap-widget { min-height: 78px; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha .svx-cap-msg { margin: 0; font-size: var(--nb-fs-xs); color: var(--nb-danger, #e5484d); }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha { grid-template-columns: minmax(0, 1fr); gap: 8px; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha :is(.guest-captcha__label, .guest-captcha__row, .guest-captcha__more) { grid-column: 1; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__label { color: var(--nb-mute); }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha :is(.guest-captcha__row, .guest-captcha__alt) { max-width: none; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__q { flex: 0 0 calc(var(--svx-cap-h) * 4 + 8px); font-size: 1.25rem; font-weight: 700; text-align: center; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__alt input { padding: 0 10px; font-size: 1.125rem; font-weight: 400; border-radius: var(--pf-ctl-r, var(--nb-r-sm)); text-align: center; }
.comment-form .comment-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { :is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha { grid-template-columns: minmax(0, 1fr); } :is(.board-write .post-form-confirm, .board-view .comment-form) :is(.guest-captcha__label, .guest-captcha__row, .guest-captcha__more) { grid-column: 1; } :is(.board-write .post-form-confirm, .board-view .comment-form) :is(.guest-captcha__row, .guest-captcha__alt) { max-width: none; } :is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha :is(.guest-captcha__row, .guest-captcha__alt) input { max-width: none; padding: 0 8px; font-size: var(--pf-fs-input, 1rem); } :is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha { --svx-cap-h: 50px; } .board-write .post-form-confirm { width: 100%; margin-left: 0; } }
/* ══ 글쓰기 폼 부품(form-parts) — 부품이 **표준 폼과 같은 마크업**을 내므로 전용 스타일이 필요 없다.
   위쪽 표준 규칙이 그대로 걸린다. 여기서는 dev 스킨이 부품을 담는 «옵션영역» 상자만 정의한다 ══ */
.board-write .post-form-parts { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; }
/* 부품 묶음의 첫 줄은 위 여백을 갖지 않는다 — 묶음 여백(12px)과 겹쳐 강남 특수 게시판만 34px 로 벌어졌다. 표준 폼(옵션 줄 12px)과 같은 간격 */
#post-form .post-form-parts > :first-child { margin-top: 0; }
.board-write .post-form-parts > .form-row-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 4px; }
/* ══ 게시판 본문 상단 여백 — 세 사이트 단일 규칙.
   목록·뷰·쓰기 셋 다 「서브헤더 아래 같은 여백」에서 시작한다.
   ⚠️ 사이트 셸은 «고정 헤더 높이만» 피하면 된다 — 그 아래 여백은 여기서 한 값으로 준다 ══ */
:root { --nb-board-gap: 56px; }
@media (max-width: 1024px) { :root { --nb-board-gap: 48px; } }
@media (max-width: 768px) { :root { --nb-board-gap: 40px; } }
.board-list, .board-view, .board-write, .board-list-unregistered, .board-view-notfound { padding-top: var(--nb-board-gap); }
/* ── 엔진코어-C 짚어주기 (의료법 제9·14호·제27조 등) — 수정 화면 상단 ──────────────
   저장을 막지 않는 항목이라 «경고» 가 아니라 «확인 요청» 톤으로 둔다. 빨강을 쓰면
   글쓴이가 저장이 실패한 줄 안다(실제로는 저장됐다). 주의색(앰버)으로 한 단계 낮춘다.
   ⚠ 종전엔 이 결과가 content_log 에만 쌓이고 보여 주는 자리가 한 곳도 없었다(§2026-09-23). */
.board-write .post-form-wrap .post-guard-note { margin: 0 0 18px; padding: 16px 18px; border: 1px solid #fde68a; border-left: 4px solid #d97706; border-radius: var(--nb-r-sm); background: #fffbeb; color: #78350f; }
.board-write .post-form-wrap .post-guard-note .pgn-head { display: block; margin: 0 0 10px; font-size: var(--nb-fs-sm); font-weight: 600; color: #92400e; }
.board-write .post-form-wrap .post-guard-note .pgn-list { margin: 0; padding-left: 20px; list-style: disc; }
.board-write .post-form-wrap .post-guard-note .pgn-list li { margin: 0 0 6px; font-size: var(--nb-fs-sm); line-height: 1.65; word-break: keep-all; }
.board-write .post-form-wrap .post-guard-note .pgn-list li:last-child { margin-bottom: 0; }
.board-write .post-form-wrap .post-guard-note .pgn-foot { margin: 12px 0 0; font-size: 0.8125rem; line-height: 1.6; opacity: 0.85; }
/* §2026-10-05 V-1 — 관리자 CSS(svndex.css)에만 있던 두 클래스. 방문자 게시판 스킨(권한·없는 글 안내 = sdx-empty-60)과
   글쓰기 도움말 아이콘(sdx-code-err · skin-helpers.php)이 쓰는데 방문자 화면은 svndex.css 를 싣지 않아 꾸밈이 빠져 있었다. 색은 게시판 토큰(게시판 상자 밖 안내에도 쓰여 기본값을 같이 둔다). */
.sdx-empty-60 { text-align: center; padding: 60px 16px; color: var(--nb-mute, #64748b); }
.sdx-code-err { color: var(--nb-danger, #dc2626); font-size: 20px; }
/* PC(1025px 이상) = 동의 상자를 보안문자 묶음 왼쪽에(§2026-10-06 대표님 «그걸 왼쪽에») — 동의 상자 윗선 = 보안문자 그림 줄 윗선(이름표 26 + 간격 8). */
@media (min-width: 1025px) { .board-write .post-form-confirm { display: grid; grid-template-columns: auto var(--svx-cap-row, 416px); align-items: start; column-gap: 24px; width: auto; justify-content: end; } .board-write .post-form-confirm > .guest-consent-wrap { width: var(--svx-cap-row, 416px); } /* = 자동등록방지 묶음과 같은 폭 */ }
/* 덧셈 문제 = 그림 줄과 «같은 자리» 에서 바뀐다(§2026-10-06 대표님 «별도 영역이 아니라 그대로 바뀌어야») — 펼치면 그림·새 글자 단추·글자 칸 줄을 감추고
   덧셈 줄(문제 = 그림 + 단추 폭 · 답 칸 = 글자 칸 자리)을 그 자리에 올린다. 안내 글자는 아래로(«그림 글자로 입력» 으로 바뀐다). 서버는 둘 중 하나만 맞으면 통과. */
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha:has(.guest-captcha__more[open]) .guest-captcha__row { display: none; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__more[open] { display: flex; flex-direction: column-reverse; gap: 8px; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__more[open] .guest-captcha__alt { margin: 0; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__more .gc-open,
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__more[open] .gc-closed { display: none; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__more[open] .gc-open { display: inline; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__eq { font-size: 1.25rem; font-weight: 700; color: var(--nb-text); cursor: default; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__more[open] .guest-captcha__q { flex: 0 0 calc(var(--svx-cap-h) * 3); }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha { position: relative; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__more > summary { position: absolute; top: 0; right: 0; min-height: 26px; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__more:not([open]) { position: absolute; top: 0; right: 0; }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__more:not([open]) > summary { position: static; }
.board-write .post-form-confirm .guest-consent-wrap { position: relative; display: flex; flex-direction: column; gap: 8px; }
.board-write .post-form-confirm .guest-consent__label { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; font-size: var(--pf-fs-title, 0.9375rem); font-weight: 600; color: var(--nb-mute); }
.board-write .post-form-confirm .guest-consent__label a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.board-write .post-form-confirm .guest-consent__label a:hover { color: var(--nb-link); }
.board-write .post-form-confirm .guest-consent-wrap > .guest-consent-full { position: absolute; top: 0; right: 0; z-index: 5; }
.board-write .post-form-confirm .guest-consent-wrap > .guest-consent-full > summary { min-height: 26px; }
.board-write .post-form-confirm .guest-consent-wrap .guest-consent-full .guest-consent-text { left: auto; right: 0; width: 416px; max-width: calc(100vw - 32px); }
@media (max-width: 600px) { .board-write .post-form-confirm .guest-captcha :is(.guest-captcha__row, .guest-captcha__alt) input { flex: 1 1 auto; width: auto; min-width: 0; } }
.board-write .post-form-confirm { width: auto; margin: 32px 0 0; padding: 24px 28px 26px; background: var(--nb-bg-soft); border-radius: 14px; }
@media (min-width: 1025px) { .board-write .post-form-confirm { justify-content: center; } }
@media (max-width: 600px) { .board-write .post-form-confirm { padding: 18px 14px 20px; } }
:is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__row input { font-size: var(--pf-fs-title, 0.9375rem); }
#post-form .post-form-confirm { border: 1px solid var(--nb-line-2, #e2e8f0); border-radius: var(--nb-r, 10px); }
@media (max-width: 1024px) { .board-write .post-form-confirm .guest-captcha :is(.guest-captcha__row, .guest-captcha__alt) input { flex: 1 1 auto; width: auto; min-width: 0; } }
@media (max-width: 600px) { :is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha input::placeholder { font-size: 0.875rem; } :is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha :is(.guest-captcha__row, .guest-captcha__alt) input { padding: 0 6px; } }
@media (max-width: 600px) { .board-view .comment-form .guest-captcha__new { width: 40px; } }
@media (max-width: 380px) { :is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha input::placeholder { font-size: 0.8125rem; } :is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha :is(.guest-captcha__row, .guest-captcha__alt) input { padding: 0 4px; } :is(.board-write .post-form-confirm, .board-view .comment-form) .guest-captcha__new { width: 40px; } }
@media (min-width: 1025px) { .board-write .post-form-guest .guest-info-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .board-write .post-form-guest .guest-info-grid > .form-row:has(.svx-phone-split) { grid-column: span 2; } .board-write .post-form-guest .guest-info-grid > .form-row:has(.svx-email-split) { grid-column: span 2; } }
.board-write .post-form-guest .svx-intake-sel { width: 100%; height: var(--pf-ctl-h, 44px); padding: 0 30px 0 12px; font-size: var(--pf-fs-input, 1rem); border: 1px solid var(--nb-line-2); border-radius: var(--pf-ctl-r, var(--nb-r)); background: var(--nb-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--nb-text); appearance: none; -webkit-appearance: none; cursor: pointer; }
.board-write .post-form-guest .svx-intake-sel:hover { border-color: var(--nb-link); }
.board-write .post-form-guest .svx-intake-sel:focus { outline: none; border-color: var(--nb-link); box-shadow: 0 0 0 3px rgba(var(--nb-link-rgb, 124, 58, 237), 0.13); }
.board-write .post-form-guest .guest-info-grid > .svx-intake-addr-row { grid-column: 1/-1; }
.board-write .post-form-guest .svx-intake-addr { display: grid; grid-template-columns: minmax(0, 140px) auto minmax(0, 1fr); gap: 8px; }
.board-write .post-form-guest .svx-intake-addr > .svx-intake-addr2 { grid-column: 1/-1; }
.board-write .post-form-guest .svx-intake-find { display: inline-flex; align-items: center; gap: 6px; height: var(--pf-ctl-h, 44px); padding: 0 14px; border: 1px solid var(--nb-line-2); border-radius: var(--pf-ctl-r, var(--nb-r)); background: var(--nb-bg-soft); color: var(--nb-text); font-size: var(--pf-fs-text, 0.875rem); font-weight: 600; white-space: nowrap; cursor: pointer; }
.board-write .post-form-guest .svx-intake-find:hover { border-color: var(--nb-link); color: var(--nb-link); }
@media (max-width: 600px) { .board-write .post-form-guest .svx-intake-addr { grid-template-columns: minmax(0, 1fr) auto; } .board-write .post-form-guest .svx-intake-addr > .svx-intake-addr1 { grid-column: 1/-1; } }
.board-write .post-form-guest .svx-email-split { display: flex; align-items: center; gap: 6px; }
.board-write .post-form-guest .svx-email-split > input[type=text] { flex: 1 1 0; min-width: 0; height: var(--pf-ctl-h, 44px); padding: 10px 12px; font-size: var(--pf-fs-input, 1rem); border-radius: var(--pf-ctl-r, var(--nb-r)); }
.board-write .post-form-guest .svx-email-split > input[readonly] { background: var(--nb-bg-soft); color: var(--nb-mute); }
.board-write .post-form-guest .svx-email-at { flex: 0 0 auto; color: var(--nb-mute); font-size: var(--pf-fs-text, 0.875rem); }
.board-write .post-form-guest .svx-email-sel { flex: 0 0 auto; width: auto; max-width: 132px; height: var(--pf-ctl-h, 44px); padding: 0 30px 0 12px; font-size: var(--pf-fs-text, 0.875rem); border: 1px solid var(--nb-line-2); border-radius: var(--pf-ctl-r, var(--nb-r)); background: var(--nb-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--nb-text); appearance: none; -webkit-appearance: none; cursor: pointer; }
.board-write .post-form-guest .svx-phone-split { display: flex; align-items: center; gap: 6px; }
.board-write .post-form-guest .svx-phone-split > input[type=text] { flex: 1 1 0; min-width: 0; height: var(--pf-ctl-h, 44px); padding: 10px 12px; font-size: var(--pf-fs-input, 1rem); text-align: center; border-radius: var(--pf-ctl-r, var(--nb-r)); }
.board-write .post-form-guest .svx-phone-dash { flex: 0 0 auto; color: var(--nb-mute); }
.board-write .post-form-guest .svx-phone-sel { flex: 1 1 0; min-width: 0; height: var(--pf-ctl-h, 44px); padding: 0 28px 0 12px; font-size: var(--pf-fs-input, 1rem); border: 1px solid var(--nb-line-2); border-radius: var(--pf-ctl-r, var(--nb-r)); background: var(--nb-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--nb-text); appearance: none; -webkit-appearance: none; cursor: pointer; }
@media (max-width: 600px) { .board-write .post-form-guest .svx-email-split { flex-wrap: wrap; } .board-write .post-form-guest .svx-email-sel { flex: 1 1 100%; max-width: none; } }
.board-write .post-form-guest .svx-phone-sel { flex: 1 1 0; width: 0; min-width: 0; padding-left: 10px; padding-right: 24px; background-position: right 8px center; }
/* 세 칸 같은 폭(대표님) */
.board-write .post-form-guest .svx-phone-split > input[type=text] { flex: 1 1 0; }
.board-write .post-form-guest .svx-email-split > input[name=guest_email_domain]::placeholder { font-size: var(--pf-fs-text, 0.875rem); }
.board-write .post-form-guest .svx-email-sel { font-size: var(--pf-fs-text, 0.875rem); }
.board-write .post-form-guest .svx-email-split > input[name=guest_email_local] { flex: 1.6 1 0; }
.board-write .post-form-guest .svx-phone-split { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
.board-write .post-form-guest .svx-phone-split > :is(select, input[type=text]) { width: 100%; min-width: 0; }
.board-write .post-form-guest .svx-email-sel { flex: 0 0 120px; width: 120px; padding: 0 22px 0 8px; background-position: right 6px center; }
.board-write .post-form-guest .svx-email-sel { flex: 0 0 var(--pf-ctl-h, 44px); width: var(--pf-ctl-h, 44px); padding: 0; color: transparent; background-position: center; }
.board-write .post-form-guest .svx-email-sel option { color: var(--nb-text); }
#post-form .post-form-guest .svx-email-sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Cpath d='M6 9.5h.01M9.5 9.5h.01M13 9.5h.01M16.5 9.5h.01M6 12.5h.01M9.5 12.5h.01M13 12.5h.01M16.5 12.5h.01M8 15.5h8'/%3E%3C/svg%3E"); background-size: 20px 20px; }
@media (max-width: 1024px) { .board-write .post-form-guest .svx-email-split > input[name=guest_email_local] { flex: 1 1 0; } }
#post-form .post-form-extra[hidden] { display: none !important; }
form:has(.svx-hide-extra-flag) .post-form-lead { display: none !important; }
/* 목록 비밀글 플로팅 창(§2026-10-07 대표님 «박스 그대로 · 뒤에 은은한 백드롭») — 카드는 비밀글 문과 같은 것(svndex-ui.js 가 틀을 옮겨 띄운다).
   겹침 = 사이트 위젯(최대 206000)보다 위 · 토스트(300000)보다 아래. 창 안에서는 페이지용 가운데 배치(높이·여백)를 걷는다 */
html.svx-secret-open { overflow: hidden; }
.svx-secret-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 250000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.svx-secret-modal .svx-secret-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15, 23, 42, 0.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.22s ease-out; }
:where(html[data-theme=dark], body[data-theme=dark]) .svx-secret-modal .svx-secret-backdrop { background: rgba(0, 0, 0, 0.5); }
.svx-secret-modal .board-view.board-view-secret { position: relative; display: block; width: 100%; max-width: 440px; min-height: 0; margin: 0; padding: 0; background: none; opacity: 0; transform: translateY(12px) scale(0.97); transition: opacity 0.22s ease-out, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1); }
.svx-secret-modal.is-open .svx-secret-backdrop { opacity: 1; }
.svx-secret-modal.is-open .board-view.board-view-secret { opacity: 1; transform: none; }
.svx-secret-modal .board-secret-card { box-shadow: 0 24px 60px -18px rgba(15, 23, 42, 0.38), 0 2px 8px rgba(15, 23, 42, 0.08); }
.svx-secret-modal button.board-secret-back { font: inherit; cursor: pointer; }
@media (max-width: 480px) { .svx-secret-modal { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .svx-secret-modal .svx-secret-backdrop, .svx-secret-modal .board-view.board-view-secret { transition: none; transform: none; } }
/* §2026-10-13 대표님 — 강제 비밀글 칩은 «비밀글» 세 글자만 · 설명은 올리거나 누르면 뜨는 말풍선(skin-helpers · form-parts 의 .has-tip / .svx-flag-tip)
   왼쪽 기준으로 편다(가운데 기준 + 좁은 화면이면 왼쪽 밖으로 나간다 · §12-91 폭 = 내용폭 먼저). 터치 = 칩에 tabindex 를 줘 누르면 초점이 가서 뜬다. */
:is(#post-form, .board-write) .flag-toggle.has-tip { position: relative; cursor: help; }
:is(#post-form, .board-write) .flag-toggle .svx-flag-tip { position: absolute; left: 0; bottom: calc(100% + 9px); z-index: 30; width: max-content; max-width: min(280px, 100vw - 40px); padding: 7px 11px; border-radius: 8px; background: rgba(17, 24, 39, 0.94); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left; word-break: keep-all; white-space: normal; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; pointer-events: none; }
:is(#post-form, .board-write) .flag-toggle .svx-flag-tip::after { content: ""; position: absolute; left: 22px; top: 100%; border: 6px solid transparent; border-top-color: rgba(17, 24, 39, 0.94); }
:is(#post-form, .board-write) .flag-toggle.has-tip:is(:hover, :focus, :focus-visible) .svx-flag-tip { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { :is(#post-form, .board-write) .flag-toggle .svx-flag-tip { transition: none; } }