/* ========================================
   RISK_NOTE - 유틸리티 클래스
   ======================================== */

/* ── 건너뛰기 링크 (KWCAG 2.4.1) — 포커스 시에만 노출, 반복 네비 건너뛰어 본문(#u-main)으로 ── */
.u-skip-nav {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    padding: 8px 16px; background: var(--u-accent); color: var(--u-on-accent);
    font-size: 0.875rem; font-weight: 600;
}
.u-skip-nav:focus { left: 0; }

/* ── 스크린리더 전용 (시각적으로 숨김, 보조기기엔 노출) — 표 <caption>·보조 라벨 등 KWCAG ── */
/* 숨김은 clip-path 한 벌. 옛 clip 은 absolute 인 요소에만 먹었다. */
.u-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 표 캡션은 요소가 아니라 안쪽 span 에 이 클래스를 건다.
 *
 *      <caption><span class="u-sr-only">평가 개요</span></caption>
 *
 *   `<caption class="u-sr-only">` 는 성립하지 않는다 — absolute 면 Chromium 의 table-layout:fixed 열 너비와
 *   Flying Saucer(PDF) 캡션 처리가 깨지고, static 이면 숨김이 풀린다(core/shell CONTRACT.md §2-D-4).
 *   인쇄 본문(common/print/*_body.jsp)은 외부 CSS 를 안 싣고 자기 <style> 의 `.u-sr-only{display:none}` 을 쓴다.
 */

/* ============================================================
   정본 유틸리티 (u-) — 2026-07-21 네임스페이스 통일.
   옛 비-u(d-flex·gap-·mb-·text-red 등) 를 u- 로 수렴(사용자 결정).
   셸중립 토큰(u-sp·u-fw·색) 참조 -> 양 셸(common 로드) 작동.
   비-u 정의는 JSP/JS 스위프 완료 후 제거된다.
   CSS 주석에 별표+슬래시 조합 금지(조기종료 버그, 재발 3회째).
   ============================================================ */
/* Display */
.u-flex { display: flex; }
.u-block { display: block; }
.u-show { display: block; }
.u-hidden { display: none !important; }
/* Flex 정렬 */
.u-items-center { align-items: center; }
.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-end { justify-content: flex-end; }
.u-flex-col { flex-direction: column; }
.u-flex-wrap { flex-wrap: wrap; }
.u-flex-1 { flex: 1; }
/* Gap */
.u-gap-4  { gap: var(--u-sp-4); }
.u-gap-6  { gap: 6px; }
.u-gap-8  { gap: var(--u-sp-8); }
.u-gap-12 { gap: var(--u-sp-12); }
.u-gap-16 { gap: var(--u-sp-16); }
/* Margin top */
.u-mt-4  { margin-top: var(--u-sp-4); }
.u-mt-8  { margin-top: var(--u-sp-8); }
.u-mt-12 { margin-top: var(--u-sp-12); }
.u-mt-16 { margin-top: var(--u-sp-16); }
/* Margin bottom */
.u-mb-0  { margin-bottom: 0; }
.u-mb-4  { margin-bottom: var(--u-sp-4); }
.u-mb-8  { margin-bottom: var(--u-sp-8); }
.u-mb-12 { margin-bottom: var(--u-sp-12); }
.u-mb-16 { margin-bottom: var(--u-sp-16); }
.u-mb-24 { margin-bottom: var(--u-sp-24); }
/* Padding */
.u-p-8  { padding: var(--u-sp-8); }
.u-p-24 { padding: var(--u-sp-24); }
/* Text align */
.u-text-center { text-align: center; }
.u-text-left   { text-align: left; }
/* Letter spacing — 문서형 표 라벨 «현장명»을 4자 폭에 맞춰 벌린다(문구는 번들 한 벌 · 자간은 CSS · 인쇄 본문은 자기 <style> 에 같은 이름) */
.u-ls-wide { letter-spacing: 0.5em; }
/* Font weight */
.u-fw-semibold { font-weight: var(--u-fw-semibold); }
.u-fw-bold     { font-weight: var(--u-fw-bold); }
/* Font size */
.u-text-xs { font-size: 0.6875rem; }
.u-text-sm { font-size: 0.8125rem; }
/* Text color (의미 이름 — 옛 text-red 등이 실제론 accent 라 역할명으로 정본화) */
.u-text-accent  { color: var(--u-accent); }
.u-text-muted   { color: var(--u-ink-light); }
.u-text-success { color: var(--u-success); }
.u-text-info    { color: var(--u-info-strong); }
.u-text-warning { color: var(--u-warning-strong); }
/* Width */
.u-w-full { width: 100%; }
/* Cursor */
.u-clickable { cursor: pointer; }
/* 긴 표·목록 세로 스크롤 */
.u-scroll-tall { max-height: min(85vh, 800px); overflow-y: auto; }
/* 인쇄 시 숨김 — 범용(양 셸 로드). 인쇄버튼·네비·입력영역 등. 여러 페이지 CSS에 흩어져 있던 걸 common으로. */
@media print { .no-print { display: none !important; } }

/* ── 유지: u- 미전환(JS 토글·별도 처리 예정) ── */
.hidden { display: none !important; }
.show { display: block; }
.pointer { cursor: pointer; }

/* 목록 카드 그리드 — 8개 도메인 목록(.u-mo 모바일 카드뷰)의 id별 복제(assess/impl/member/opinion/report/tbm/weekly_list.css)
   를 흡수한 공용 단일 출처(2026-07-21). 정본 breakpoint = ≥600px 2단(카드그리드 전용, 7벌 동일값). member 만 ≥1200px 3단. */
#assessCards, #implCards, #memberCards, #memberPendingCards,
#boardCards, #reportCards, #tbmCards, #weeklyCards {
    display: grid; grid-template-columns: 1fr; gap: 8px;
}
@media (min-width: 600px) {
    #assessCards, #implCards, #memberCards, #memberPendingCards,
    #boardCards, #reportCards, #tbmCards, #weeklyCards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
    #memberCards, #memberPendingCards { grid-template-columns: repeat(3, 1fr); }
}