/* 게시판 시안 a · 세그 + 카드 격자.
   viewer.css 위에 얹는 얇은 층이다. 색·간격·글자 크기는 전부 토큰이고 새 색은 없다.
   카드·본문 블록은 꿀팁(.tip-card, .tip-reader-body …)을 그대로 쓰고,
   여기에는 게시판 세그 줄·상태 알약·고지·대상 행·건의 항목만 더한다.

   260912 검수 반영:
     알약은 상태가 정보를 가질 때만 붙인다(카드 지표·글 머리·집계 줄). 항목마다 같은 알약을 반복하지 않는다.
     적용됨·반영됨은 면 없이 체크 + 글자다. 고른 칩(--pick 면)과도, 예정(--st-soon 면)과도 모양이 갈린다.
     미반영 글자는 --st-alert-fg(흰 바탕 3.71)가 아니라 같은 빨강의 글자용 --el-fire-fg(4.65)다.
     대상 블록은 면 없는 한 행이라 요약 상자와 상자가 겹쳐 서지 않는다.
     4px 스케일 밖 px 와 굵기 750 은 쓰지 않는다. */

/* ── 시안 바 ─────────────────────────────────────────── */
.mockbar-in{flex-wrap:wrap;row-gap:var(--sp-1)}
.mockbar nav{margin-left:auto}
/* _shell.css 의 고른 시안 알약은 --ink 면에 흰 글자라 다크에서 글자가 사라진다 */
[data-theme="dark"] .yk-alt a[aria-current]{color:var(--bg)}
@media (max-width:560px){
  .mockbar nav{margin-left:0}
}

/* ── 세그 글자 ────────────────────────────────────────
   viewer.css 의 .jewel-seg button 은 --sub 라 tint 트랙 위에서 2.76:1 이다.
   게시판 화면 안에서는 안 고른 칸을 --seg-off(4.54:1)로 둔다. */
.board .jewel-seg button,
.board .jewel-seg .ana-link{color:var(--seg-off)}
.board .jewel-seg button.on{color:var(--pick-fg)}
.board .jewel-seg .ana-link:hover{color:var(--ink)}

/* ── 게시판 세그 줄 ───────────────────────────────────── */
.board-bar{
  display:flex;align-items:center;gap:var(--sp-4);
  margin-bottom:var(--sp-6);
}
.board-seg{width:354px}
/* 글 수는 읽히는 정보라 --sub(3.04) 대신 --seg-off(4.54). 본문 화면에서는 맥락이 없어 숨긴다. */
.board-count{
  font-size:var(--fs-12);font-weight:700;color:var(--seg-off);white-space:nowrap;
}
.board-count.in-intro{display:none}
.board.is-detail .board-count{display:none}

/* ── 머리글 ──────────────────────────────────────────── */
.board .tips-intro{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);
  max-width:none;
}
.board .tips-intro>div{flex:1;min-width:0}
/* lead 는 한 줄이 목표다. 62ch 상한을 풀어 1440 에서 한 줄에 들어가게 하고,
   좁아져 접힐 때는 마지막 줄에 낱말 하나만 남지 않게 한다. */
.board .tips-lead{max-width:none;margin-top:var(--sp-2);text-wrap:pretty}

/* ── 상태 알약 ────────────────────────────────────────
   상태색 쌍(--st-*)을 쓴다. 글자 대비가 모자란 두 쌍만 같은 색상 계열의 글자용 토큰으로 바꾼다.
     적용됨·반영됨    → 면 없음 + 체크 + --blue7 글자 (흰 5.41 · tint 4.91 · 다크 7.1)
     미반영            → --st-alert-bg + --el-fire-fg (같은 빨강의 글자용, 4.65 · 다크는 --st-alert-fg 5.1)
     취소·재현 확인 중 → --st-mute-bg + --seg-off (tint 위 글자용 4.54)
   viewer.css 의 --st-live/--st-alert 글자 토큰을 손보면 이 예외는 없어진다(사용자 결정). */
.board-pill{
  display:inline-flex;align-items:center;gap:var(--sp-1);flex:none;
  height:var(--sp-6);padding:0 var(--sp-2);border-radius:var(--r-pill);
  font-size:var(--fs-12);font-weight:700;line-height:1;white-space:nowrap;
}
.board-pill svg{width:12px;height:12px;flex:none}
.board-pill b{font-weight:800}
.board-pill.is-soon{background:var(--st-soon-bg);color:var(--st-soon-fg)}
.board-pill.is-live{padding:0;background:transparent;color:var(--blue7)}
.board-pill.is-near{background:var(--st-near-bg);color:var(--st-near-fg)}
.board-pill.is-alert{background:var(--st-alert-bg);color:var(--el-fire-fg)}
[data-theme="dark"] .board-pill.is-alert{color:var(--st-alert-fg)}
.board-pill.is-mute{background:var(--st-mute-bg);color:var(--seg-off)}
/* 카드 면(tint) 위에서는 예정 면(--st-soon-bg)이 묻힌다. 카드 안 알약은 카드 면(--card)을 준다. */
.tip-card .board-pill{background:var(--card)}
.tip-card .board-pill.is-live{background:transparent}

/* 카드 지표 칸 오른쪽 끝에 알약 */
.board .tip-card-metric .board-pill{margin-left:auto}

/* 빈 분류 · 카드가 하나도 없을 때만 보인다 */
.board-empty{
  padding:var(--sp-7) 0;font-size:var(--fs-14);line-height:1.6;color:var(--ink);
}

/* ── 집계 줄 (건의 현황) ────────────────────────────────
   상태마다 제 알약을 쓴다. 문서 안 상태색의 범례를 겸하고, 구분점 없이 접혀 줄 머리에 점이 남지 않는다. */
.board-tally{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin-bottom:var(--sp-6);
}

/* ── 본문 화면 ────────────────────────────────────────── */
.board .tips-board-detail{max-width:880px}
.board .tip-reader-toolbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);
}
.board .tip-reader-toolbar .ghost{color:var(--ink);text-decoration:none}
.board .tip-article-head .board-pill{margin-left:var(--sp-2);vertical-align:middle}
.board .tip-article-head h2{margin-top:var(--sp-3)}
/* 부제는 '무엇이 바뀌었나'를 담는 문장이라 --sub(3.04) 대신 --ink. 표 캡션은 --seg-off(5.0). */
.board .tip-article-sub{font-size:var(--fs-15);line-height:1.65;font-weight:500;color:var(--ink)}
/* 메타 줄(게시·적용일)은 12px 이라 --sub(3.04)로는 모자란다. 색상은 두고 명도만 내린 --seg-off(5.0). */
.board .tip-article-meta{color:var(--seg-off)}
.board .tip-block-cap{color:var(--seg-off)}
.board .tip-step-desc{font-weight:500;color:var(--ink)}

/* 머리 고지 · 라벨은 글자로, 상자는 두지 않고 위아래 선으로만 가른다. */
.board-notice{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  margin-bottom:var(--gap-block);padding:var(--sp-3) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.board-notice-label{flex:none;font-size:var(--fs-14);line-height:1.65;font-weight:800;color:var(--blue7)}
.board-notice p{font-size:var(--fs-14);line-height:1.65;color:var(--ink)}

/* 절 머리 (업데이트 글·건의 문서 공용) */
.board-sec-h{
  display:flex;align-items:baseline;gap:var(--sp-2);
  font-size:var(--fs-15);font-weight:800;letter-spacing:-.01em;color:var(--ink);
}
.board-sec-h>.num{color:var(--blue7)}
.board-sec-h b{font-weight:800}
.board-sec-lead{
  margin-top:var(--sp-2);font-size:var(--fs-14);line-height:1.65;color:var(--ink);
}
.tip-reader-body>.board-sec{margin-top:var(--gap-block)}
.tip-reader-body>.tip-summary+.board-sec{margin-top:0}
.board-sec-h+.tip-block-cap{margin-top:var(--sp-5)}
.board-sec>.tip-block-cap:first-child{margin-top:0}

/* 대상 행 · 얼굴 + 이름 + 캡션. 면을 두지 않아 요약 상자와 상자가 겹쳐 서지 않는다.
   캡션은 등급·속성을 알려 주는 유일한 문장이라 --ink 를 굵기 500 으로 낮춰 쓴다. */
.board-subject{
  display:flex;align-items:center;gap:var(--sp-4);
  margin-top:var(--sp-4);
}
.board-subject-face{
  flex:none;width:var(--sp-9);height:var(--sp-9);border-radius:var(--r-12);
  background:var(--tint);object-fit:contain;
}
.board-subject-body{min-width:0;flex:1}
.board-subject-name{display:block;font-size:var(--fs-17);font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.board-subject-cap{display:block;font-size:var(--fs-13);line-height:1.5;font-weight:500;color:var(--ink)}
.board-subject+.tip-block-cap{margin-top:var(--sp-6)}

/* 전후 비교 표 · 바뀐 값만 파랗게. 같은 값은 --ink 로 두어 눈이 변화만 좇게 한다. */
.board-diff td.is-after{font-weight:800;color:var(--blue7);white-space:nowrap}
.board-diff tr.is-same td.is-after{font-weight:600;color:var(--ink)}
.board-diff td.is-note{color:var(--ink)}
.board-diff td.num{white-space:nowrap}
.board-table-note{
  margin-top:var(--sp-3);font-size:var(--fs-13);line-height:1.6;color:var(--ink);
}

/* 링크 버튼 줄 · 꼬리 고지 */
.board-links{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--gap-block)}
.board-links .ghost{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}
.board-foot{
  margin-top:var(--gap-block);padding-top:var(--sp-4);border-top:1px solid var(--line);
  font-size:var(--fs-13);line-height:1.65;color:var(--ink);
}

/* ── 건의 회차 문서 ───────────────────────────────────── */
.board-lead{
  margin-top:var(--sp-3);font-size:var(--fs-15);line-height:1.7;color:var(--ink);
}
.board .tip-reader-body .tip-category-bar{margin-bottom:var(--sp-7)}
.board-sec+.board-sec{margin-top:var(--sp-8)}
.board-round-head{grid-column:1/-1;margin-top:var(--sp-4)}
.board-round-head:first-child{margin-top:0}
.board-item-state{margin-top:var(--sp-2)}
.board .board-held-list .board-pill{font-size:var(--fs-14);white-space:nowrap}
.board .toolbar>.tip-filter-count{display:inline;color:var(--sub)}
.tips .toolbar>.tip-filter-count{margin-left:auto}
#statusFilter{padding-top:calc((var(--touch-min) - var(--chip-h))/2);padding-bottom:calc((var(--touch-min) - var(--chip-h))/2)}
.board .tip-step.is-pred{border-style:dashed}
.board .board-table-note,.board .board-foot{font-size:var(--fs-14)}
.tips .tip-cmp-lead,.tips .tip-note-label{font-size:var(--fs-14)}
.board .board-history>summary{position:relative;min-height:var(--ctl-h);cursor:pointer;font-size:var(--fs-14);color:var(--ink)}
.board .board-history>summary::after{content:'';position:absolute;inset:calc((var(--ctl-h) - var(--touch-min))/2) 0}
.board .board-history li{font-size:var(--fs-14);color:var(--ink)}
.board .board-history{margin-top:var(--sp-2)}
.board .board-history a.ghost,.board .board-evidence .ghost{min-height:var(--touch-min)}
.board .board-status-table{table-layout:fixed}
.board .board-status-table th:first-child{width:50%}
.board .board-status-table .ghost{min-height:var(--touch-min);white-space:normal;text-align:left;justify-content:flex-start;font-size:var(--fs-14)}
.board-status-caption{display:none}
@media(max-width:560px){
  .board-status-table .board-status-meta{display:none}
  .board .board-status-table th:first-child{width:65%}
  .board-status-caption{display:block;font-size:var(--fs-14);font-weight:400;color:var(--sub)}
}
.board-items{list-style:none;margin:var(--sp-3) 0 0;padding:0}
/* 항목은 위 선으로만 가른다. 마지막 항목 아래 선을 두면 보류 상자 위 선과 겹쳐 빈 띠가 생긴다. */
.board-item{padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.board-item-head{
  display:flex;align-items:baseline;gap:var(--sp-2);
}
.board-item-no{flex:none;min-width:var(--sp-5);font-size:var(--fs-13);font-weight:800;color:var(--seg-off)}
.board-item-title{flex:1;min-width:0;font-size:var(--fs-15);line-height:1.45;font-weight:700;color:var(--ink)}
.board-item-kind{flex:none;font-size:var(--fs-12);font-weight:700;color:var(--seg-off)}
.board-item-body{
  margin-top:var(--sp-2);font-size:var(--fs-14);line-height:1.7;color:var(--ink);
}
/* 절 안 주석은 표 주석과 같은 거리로 붙인다(블록 간격보다 가깝게) */
.board-sec .tip-note{margin-top:var(--sp-5);padding-top:var(--sp-4)}

/* 보류 · 접힘. 요약줄은 [셰브론][제목 · 부제] 두 덩어리다.
   제목은 접히지 않고, 좁은 화면에서는 부제가 제 줄로 내려가며 구분점이 사라진다. */
.board-held{margin-top:var(--sp-8);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.board-held>summary{
  display:flex;align-items:flex-start;gap:var(--sp-2);
  padding:var(--sp-4) 0;cursor:pointer;list-style:none;
  font-size:var(--fs-15);line-height:1.5;font-weight:700;color:var(--ink);
}
.board-held>summary::-webkit-details-marker{display:none}
.board-held>summary svg{flex:none;width:16px;height:16px;margin-top:var(--sp-1);transition:transform var(--dur-1) var(--ease)}
.board-held[open]>summary svg{transform:rotate(90deg)}
.board-held-text{min-width:0}
.board-held-title{white-space:nowrap}
.board-held-sub{font-weight:500;color:var(--ink)}
.board-held-sub::before{content:'·';margin:0 var(--sp-2);color:var(--seg-off)}
.board-held-in{padding-bottom:var(--sp-4)}
.board-held-in>p{font-size:var(--fs-14);line-height:1.65;color:var(--ink)}
.board-held-list{list-style:none;margin:var(--sp-3) 0 0;padding:0}
.board-held-list li{
  display:flex;align-items:flex-start;gap:var(--sp-2);
  padding:var(--sp-2) 0;font-size:var(--fs-14);line-height:1.65;color:var(--ink);
}
.board-held-list li>span:first-child{flex:none;min-width:var(--sp-5);font-weight:800;color:var(--seg-off)}
.board-held-list li>span:nth-child(2){flex:1;min-width:0}
.board-closing{margin-top:var(--sp-7)}
.board-closing p{font-size:var(--fs-14);line-height:1.7;color:var(--ink)}
.board-closing p+p{margin-top:var(--sp-2)}

/* ── 좁은 화면 ────────────────────────────────────────── */
@media (max-width:860px){
  .board-seg{width:100%}
  .board-count.in-bar{display:none}
  .board-count.in-intro{display:inline}
}
@media (max-width:560px){
  /* 첫 카드가 460px 안에 들어오도록 세로 간격을 한 단계씩 줄인다 */
  .board .ana-top{margin-bottom:var(--sp-4)}
  .board-bar{margin-bottom:var(--sp-3)}
  .board .tips-intro{align-items:baseline;margin-bottom:var(--sp-3)}
  /* 제목은 두 줄까지 허용한다. 한 줄로 못 박고 말줄임하면 긴 제목이 잘린다. */
  .board .tips-title{font-size:var(--fs-20);line-height:1.25}
  .board .tips-lead{display:none}
  .board-tally{margin-bottom:var(--sp-4)}
  /* 분류 칩은 한 줄 가로 스크롤 · 칩 컨테이너만 넘치고 페이지는 넘치지 않는다 */
  .board .tip-category-bar{flex-direction:row;align-items:center;margin-bottom:var(--sp-3)}
  .board .tip-category-filter{
    display:flex;flex-wrap:nowrap;width:100%;min-width:0;gap:var(--sp-1);
    overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;
  }
  .board .tip-category-filter::-webkit-scrollbar{display:none}
  .board .tip-category-filter button{flex:none;min-height:36px;padding:0 var(--sp-3);font-size:var(--fs-13)}
  /* 좁은 화면의 글 수는 제목 옆 하나로 모은다. 분류를 고르면 그 수가 고른 분류의 수로 바뀐다. */
  .board .tip-filter-count{display:none}
  .board-held-text{display:block}
  .board-held-sub{display:block;margin-top:var(--sp-1)}
  .board-held-sub::before{content:none}
  .board-subject{gap:var(--sp-3)}
  .board-subject-face{width:var(--sp-8);height:var(--sp-8)}
}

/* Registered article artwork. Dimensions come from the WebP header at build time. */
.tip-reader-body>.board-sec-h,.board-sec>.board-sec-h{margin-top:var(--gap-block);margin-bottom:var(--sp-4)}
.board .tips-table th,.board .tips-table td{font-size:var(--fs-14)}
.board-fig{margin:0;min-width:0}
.tip-reader-body>.board-fig,.board-sec>.board-fig,.board-gallery{margin-top:var(--sp-5);margin-bottom:var(--sp-5)}
.board-fig img{display:block;max-width:100%;height:auto;margin-inline:auto;background:var(--card)}
.board-fig figcaption{margin-top:var(--sp-2);font-size:var(--fs-14);line-height:var(--lh-loose);color:var(--ink);overflow-wrap:anywhere}
.board-gallery>.tip-block-cap{font-size:var(--fs-14)}
.board-gal{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.board-gal[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.board-gal[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.board-gal[data-cols="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:560px){
  .board-gal[data-cols]{grid-template-columns:repeat(2,minmax(0,1fr))}
}