/* ═══ block 13 · trinity-board-overlay ═══
   게시판 전체 화면(목록·읽기·쓰기). board-page 위에 덮는 창 하나로 살고,
   기존 챕터 전환 장치(11-chapter-navigation.js)를 건드리지 않는다.
   색·서체 변수는 .boardpage 가 이미 선언한 것을 그대로 상속받는다. */

/* 칸 안의 진입 버튼 — #box-posts 마지막 자리 */
.bov-open{
  flex:0 0 auto;appearance:none;-webkit-appearance:none;
  margin-top:clamp(6px,.9vh,10px);padding:7px 10px;
  border:2px solid var(--board-ink);background:transparent;color:var(--board-ink);
  font:600 9.5px var(--tri-ui);letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;align-self:flex-start;
  transition:background .18s var(--board-ease),color .18s var(--board-ease);
}
.bov-open:hover,.bov-open:focus-visible{background:var(--board-ink);color:var(--board-cream);outline:none}

/* 덮개 창 */
.bov{display:none;position:fixed;inset:0;z-index:31;background:var(--board-cream,#FAFAF8);color:var(--board-ink,#211D1A)}
.bov.is-open{display:block}
.bov__inner{
  width:min(100%,1180px);height:100vh;height:100dvh;margin:0 auto;
  padding:clamp(72px,8vh,94px) clamp(22px,4vw,56px) clamp(16px,2.2vh,26px);
  display:flex;flex-direction:column;overflow:hidden;
}
.bov__head{flex:0 0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding-bottom:clamp(10px,1.4vh,16px);margin-bottom:clamp(10px,1.4vh,16px);
  border-bottom:3px solid var(--board-ink)}
.bov__eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 6px;
  font:600 10px var(--tri-ui);letter-spacing:.25em;text-transform:uppercase;color:rgba(33,29,26,.54)}
.bov__eyebrow::before{content:'';width:34px;height:1px;background:var(--board-coral,#DE654B)}
.bov__title{margin:0;font-family:var(--tri-title);font-size:clamp(22px,3.2vh,34px);font-weight:600;
  line-height:1;letter-spacing:-.035em}
.bov__acts{display:flex;gap:8px;flex:0 0 auto}
.bov__btn{appearance:none;-webkit-appearance:none;padding:8px 13px;border:2px solid var(--board-ink);
  background:transparent;color:var(--board-ink);font:600 10px var(--tri-ui);letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;transition:background .18s,color .18s}
.bov__btn:hover,.bov__btn:focus-visible{background:var(--board-ink);color:var(--board-cream);outline:none}
.bov__btn--solid{background:var(--board-ink);color:var(--board-cream)}
.bov__btn--solid:hover,.bov__btn--solid:focus-visible{background:var(--board-coral,#DE654B);border-color:var(--board-coral,#DE654B);color:#fff}
.bov__btn[disabled]{opacity:.45;cursor:default}

.bov__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.bov__view{display:none}
.bov[data-view="list"]  .bov__view--list{display:block}
.bov[data-view="read"]  .bov__view--read{display:block}
.bov[data-view="write"] .bov__view--write{display:block}

/* 삭제처럼 되돌릴 수 없는 것은 경고색으로 세운다 */
.bov__btn--danger{border-color:var(--board-coral,#DE654B);color:var(--board-coral,#DE654B)}
.bov__btn--danger:hover,.bov__btn--danger:focus-visible{background:var(--board-coral,#DE654B);border-color:var(--board-coral,#DE654B);color:#fff}

/* 목록 — 칸 안의 .brow 와 달리 높이를 나눠 갖지 않는다(글이 늘어도 안 무너진다) */
.bov__row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;column-gap:12px;
  width:100%;appearance:none;-webkit-appearance:none;border:0;border-bottom:1px solid var(--board-hair,rgba(33,29,26,.15));
  background:transparent;color:inherit;text-align:left;cursor:pointer;padding:13px 8px;
  font-family:var(--tri-ui);transition:background .18s,padding-left .18s}
.bov__row:hover,.bov__row:focus-visible{background:rgba(33,29,26,.045);padding-left:14px;outline:none}
.bov__row[disabled]{cursor:default;color:rgba(33,29,26,.55)}
.bov__row[disabled]:hover{background:transparent;padding-left:8px}
.bov__no{font:600 11px var(--tri-ui);letter-spacing:.08em;color:rgba(33,29,26,.4)}
.bov__main{min-width:0;display:flex;flex-direction:column;gap:3px}
.bov__meta{font:600 8.5px var(--tri-ui);letter-spacing:.13em;text-transform:uppercase;color:rgba(33,29,26,.6)}
.bov__ti{font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bov__arr{font-size:14px;color:rgba(33,29,26,.4)}
.bov__note{padding:26px 8px;font-family:var(--tri-ui);font-size:13px;color:rgba(33,29,26,.6)}
.bov__more{margin:16px auto 4px;display:block}

/* 읽기 */
.bov__post{padding:6px 2px 30px;max-width:72ch}
.bov__ptitle{margin:0 0 8px;font-family:var(--tri-title);font-size:clamp(19px,2.6vh,26px);
  font-weight:600;line-height:1.2;letter-spacing:-.025em}
.bov__pmeta{margin:0 0 18px;font:600 9px var(--tri-ui);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(33,29,26,.55)}
.bov__pbody{margin:0;font-family:var(--tri-text);font-size:15px;line-height:1.75;
  white-space:pre-wrap;word-break:break-word;color:rgba(33,29,26,.88)}
.bov__pacts{display:flex;gap:8px;margin-top:26px;padding-top:16px;border-top:1px solid var(--board-hair,rgba(33,29,26,.15))}

/* 쓰기 */
.bov__form{padding:6px 2px 30px;max-width:60ch;display:flex;flex-direction:column;gap:14px}
.bov__field{display:flex;flex-direction:column;gap:5px}
.bov__label{font:600 9px var(--tri-ui);letter-spacing:.14em;text-transform:uppercase;color:rgba(33,29,26,.6)}
.bov__input,.bov__textarea{width:100%;padding:10px 12px;border:2px solid var(--board-ink);
  background:#fff;color:var(--board-ink);font-family:var(--tri-ui);font-size:14px;line-height:1.5}
.bov__textarea{min-height:190px;resize:vertical;font-family:var(--tri-text);line-height:1.7}
.bov__input:focus,.bov__textarea:focus{outline:2px solid var(--board-coral,#DE654B);outline-offset:1px}
.bov__hint{font-family:var(--tri-ui);font-size:11px;line-height:1.5;color:rgba(33,29,26,.55)}
.bov__consent{display:flex;align-items:flex-start;gap:9px;font-family:var(--tri-ui);font-size:12px;line-height:1.55}
.bov__consent input{margin-top:2px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--board-ink)}
.bov__msg{margin:0;font-family:var(--tri-ui);font-size:12.5px;line-height:1.55;color:var(--board-coral,#DE654B);font-weight:600}
.bov__msg:empty{display:none}
/* 허니팟 — 화면 밖. display:none 단독은 탐지된다 */
.bov__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

@media (max-width:820px){
  .bov__inner{padding:88px 16px 26px}
  .bov__head{flex-direction:column;align-items:flex-start;gap:12px}
  .bov__row{grid-template-columns:28px minmax(0,1fr) auto;padding:11px 4px}
  .bov__ti{white-space:normal;overflow:visible;text-overflow:clip}
}
@media (prefers-reduced-motion:reduce){
  .bov-open,.bov__btn,.bov__row{transition-duration:1ms!important}
}

/* ═══ 게시판 화면 칸 — 밀도를 낮추고 칸마다 스크롤을 준다 ═══
   좌열에 칸이 셋이 되며 공지가 잘렸다. 칸을 키우는 대신 글자·간격을 줄이고
   넘치는 만큼은 칸 안에서 굴린다. 한 화면 무스크롤 설계(.bgrid)는 그대로 둔다.
   ★ 폭 조건을 걸지 않는다 — 1181px 이상에만 걸었던 첫 판은 그보다 좁은 창에서
     통째로 적용되지 않았다(실측 2026-08-06). 좁은 폭에서 갈리는 것은 높이 계산뿐이므로
     밀도는 전 폭 공통으로 두고, 높이만 두 갈래로 나눈다. */

/* ── 밀도 (전 폭 공통) ── */
#board-page .bbox{padding-top:clamp(12px,1.5vh,18px);padding-bottom:clamp(12px,1.5vh,18px)}
#board-page .bbox__head{padding-bottom:clamp(7px,.9vh,11px);margin-bottom:clamp(3px,.6vh,7px)}
#board-page .bbox__title{font-size:clamp(17px,2vh,23px)}
#board-page .bbox__ic{width:clamp(28px,3.8vh,38px);height:clamp(28px,3.8vh,38px)}
#board-page .brow{min-height:0;padding-top:7px;padding-bottom:7px;column-gap:10px}
#board-page .brow__main{gap:1px;padding:0}
#board-page .brow__ch{font-size:8px;letter-spacing:.12em}
#board-page .brow__ti{font-size:clamp(12px,1.35vh,14px);line-height:1.18}
#board-page #box-notice .brow{min-height:0}
#board-page #box-notice .brow__main{padding:2px 0;gap:2px}
#board-page #box-air .brow--feature .brow__ti{font-size:clamp(13px,1.7vh,17px)}
#board-page #box-air .brow--feature .brow__shot{height:clamp(46px,7vh,78px)}

/* ── 칸 안 스크롤 (전 폭 공통) ── */
#board-page .bbox__body{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#board-page .bbox__body::-webkit-scrollbar{width:6px}
#board-page .bbox__body::-webkit-scrollbar-thumb{background:rgba(33,29,26,.22);border-radius:3px}
#board-page .bbox__body::-webkit-scrollbar-track{background:transparent}
/* 행은 칸 높이를 나눠 갖지 않고 제 크기를 지킨다 — 그래야 넘친 만큼만 굴러간다 */
#board-page .bbox__body > .brow{flex:0 0 auto}
#board-page #box-air .brow{flex:0 0 auto}

/* ── 배치 갈래 1 · 한 화면에 가두는 폭(1181px 이상) ──
   원설계(좌열 3단 + 우열 캘린더)를 그대로 둔다. 여기서 2x2 로 바꾸면 캘린더가 눌린다.
   남는 높이만 세 칸이 똑같이 나눠 갖게 한다 */
@media (min-width:1181px){
  #board-page .bcol > .bbox{flex:1 1 0;min-height:0}
}

/* ── 배치 갈래 2 · 화면이 세로로 늘어나는 폭(761~1180px) · 2x2 ──
   좌열에만 칸이 셋이라 왼쪽만 길어지고 캘린더 아래가 통째로 비었다.
   .bcol 을 display:contents 로 풀어 네 칸을 격자에 직접 놓는다 —
   마크업은 건드리지 않는다.

     공지   |  온에어     ← 목록끼리, 키가 비슷하다
     게시판 |  캘린더     ← 캘린더가 키를 정하고 게시판이 같이 받는다

   높이는 박지 않는다. 같은 줄끼리 자동으로 맞춰지고, 넘칠 때만 칸 안에서 굴러간다 */
@media (min-width:761px) and (max-width:1180px){
  #board-page .bgrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-auto-rows:auto;
    gap:clamp(14px,2vw,26px);
    align-items:stretch;
  }
  #board-page .bcol{display:contents}
  #board-page #box-notice{grid-column:1;grid-row:1}
  #board-page #box-air   {grid-column:2;grid-row:1}
  #board-page #box-posts {grid-column:1;grid-row:2}
  #board-page #box-cal   {grid-column:2;grid-row:2}
  #board-page .bgrid > .bbox{min-height:0;height:auto}
}

/* 761px 미만은 원설계 그대로 — 두 열로 나누면 오히려 좁다 */