/* 괘선(box-drawing) 표 전용 폰트 — 나눔고딕코딩은 한글:라틴:괘선 폭이 원문 표의
 * 2:1:2 가정대로 떨어져 세로 구분선이 정렬된다(detc 22736 실화면 A/B, 2026-08-07).
 * 기본 스택(Geist Mono/SF Mono)은 괘선을 1칸으로 그려 어긋난다.
 *
 * ⚠ **자체 호스팅이 계약이다** (Google Fonts @import 금지) — 광고/프라이버시
 * 차단기가 fonts.googleapis 를 막으면 로컬 설치된 코딩 폰트(Geist Mono 등,
 * 괘선=반각)로 떨어져 테두리만 반토막 나는 회귀가 사용자 실화면으로 확인됐다
 * (268731, 2026-08-07). 같은 family 명의 @font-face 라 로컬 설치본도 가린다.
 * 파일: 필수 범위(ASCII·괘선 U+2500-257F·한글·CJK 기호) 서브셋 woff2 245KB,
 * 메트릭 검증 괘선=한글=1em·ASCII=0.5em. 나눔고딕코딩은 SIL OFL 라이선스.
 * 이 파일을 로드하는 뷰어 페이지에만 적용(괘선 표 한정 — DESIGN.md 본문
 * 타이포그래피 변경 아님). */
@font-face {
    font-family: "Nanum Gothic Coding";
    src: url("../fonts/nanum-gothic-coding-tables.5630e58838c1.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 조문 구조를 가진 문서 본문의 타이포그래피.
 *
 * 소비처가 둘이다: 법령 뷰어(law_viewer.html → law_viewer.js 가 클래스를 붙인다,
 * 서버 렌더 경로인 law_xml_renderer.py 는 같은 값을 인라인 스타일로 복제한다)와
 * 행정규칙 뷰어(admrul_viewer.html → search_kr/admrul_body.py 가 줄 문법으로
 * 계층을 복원한다). 조문 구조를 가진 문서 타입은 이 둘뿐이므로
 * (article_anchors.ARTICLE_ANCHOR_DOC_TYPES) 값을 바꾸면 양쪽에 함께 적용된다.
 *
 * ⚠️ 조문번호 #B45309 은 DESIGN.md 팔레트 밖이다(blue-700; DESIGN.md 는 blue 를
 * 소장 도구 전용으로 예약한다). DESIGN.md 이전부터 있던 레거시이고, 2026-08-02
 * 행정규칙 뷰어 구조화 때 "법령과 동일하게" 유지하기로 사용자가 명시 승인했다.
 * 되돌린다면 여기 + law_xml_renderer.py 의 인라인 사본 2곳을 함께 고쳐야 한다.
 * (같은 파일의 본문 회색들도 Tailwind 기본 쿨그레이라 프로젝트의 웜스톤 gray
 * 리맵과 어긋난다 — 이 파일이 Tailwind 파이프라인 밖이라 생긴 별개 부채.)
 */

.law-section {
    font-size: 1.125rem;
    font-weight: 700;
    color: #141413;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #E6DFD8;
}

.law-article {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* 앵커 타깃은 sticky 네비바(65px) 밑에 깔리면 안 된다. 두 규칙이 같은 값을 써야
 * 하므로 한 줄에 둔다 — 섹션 쪽은 앵커 id 가 중복이라 목차 클릭이 거의 동작하지
 * 않던 동안 빠져 있던 것이 드러나지 않았을 뿐이다. */
.law-section,
.law-article {
    scroll-margin-top: 5rem;
}

.law-article-num {
    color: #B45309;
    font-weight: 600;
}

.law-article-title {
    color: #55524B;
    margin-left: 0.25rem;
}

.law-paragraph,
.law-ho,
.law-mok,
.law-plain {
    line-height: 1.75;
    margin-bottom: 0.25rem;
}

/* .law-plain = 조/항/호/목 어디에도 안 걸리는 줄(행정규칙 본문의 전문·표기 등).
 * 계층이 없으므로 들여쓰기만 빼고 나머지는 항과 같다. */
.law-paragraph,
.law-plain {
    color: #252523;
}

.law-paragraph {
    margin-left: 1rem;
}

.law-ho {
    color: #3D3D3A;
    margin-left: 2.5rem;
}

.law-mok {
    color: #3D3D3A;
    margin-left: 4rem;
}

.law-boxtable,
.law-formula,
.law-fallback {
    background: #f9fafb;
    border: 1px solid #E6DFD8;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: #252523;
    white-space: pre-wrap;
    /* DESIGN.md 정본 모노스페이스(Geist Mono)를 선두에 — 한글 글리프는 폴백이라
     * 괘선 정렬은 best-effort 다. 확신 가능한 표는 <table> 재구성이 정답인 이유. */
    font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 문자 괘선 표/도식의 보존 렌더(<pre class="law-boxtable"> — 서버 box_tables.py 와
 * JS 폴백이 같은 어휘를 방출, 판례·헌재·행정규칙·부칙·조문·별표 공용). 표는
 * 줄바꿈되는 순간 깨지므로 pre-wrap 이 아니라 pre + 가로 스크롤이다.
 * (.law-box 는 2026-08-07 box 표 정비에서 law-boxtable 로 회수 — 방출자 0.) */
.law-boxtable {
    white-space: pre;
    overflow-x: auto;
    line-height: 1.45;
    /* 파일 상단 @import 주석 참조 — 괘선 정렬은 이 폰트가 만든다 */
    font-family: "Nanum Gothic Coding", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* admrul 갈래①·법령 부칙은 .prose 안이다 — typography 플러그인이 pre 에 어두운
 * 코드블록 스타일(:where() 특이도 0)을 얹으므로 명시 재단언으로 이긴다.
 * (`not-prose` 는 못 쓴다 — 갈래② 가드 테스트가 "prose" 부분문자열 부재를 단언.) */
.prose .law-boxtable {
    background: #f9fafb;
    color: #252523;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    border-radius: 0.375rem;
}

.law-formula {
    line-height: 1.8;
}

/* 재구성된 표(<table class="law-table">)의 가로 스크롤 격리 — 원문 표는 폭
 * 80~100칸이라 모바일에서 래퍼 없이 두면 페이지 전체가 옆으로 밀린다. */
.law-table-wrap {
    overflow-x: auto;
    margin: 0.5rem 0;
}

.law-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: #252523;
}

.law-table-wrap .law-table {
    margin: 0;
}

/* ---- 도식 원본 이미지 (law_xml_renderer._figure_html) ----
 * pre 로 떨어지는 img쌍 도식은 원본 이미지가 정본 표시다. 텍스트 잔재는
 * sr-only 로 숨김 보존 — [hidden]/display:none 을 쓰면 snippet_highlight 의
 * haystack 에서 빠진다(발췌 계약). onerror 가 law-fig-broken 을 붙이면
 * 이미지 대신 텍스트가 복귀한다. */
.law-fig {
    margin: 0.5rem 0;
}

.law-fig img {
    max-width: 100%;
    height: auto;
}

.law-fig pre {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: 0;
    padding: 0;
    border: 0;
}

.law-fig-broken img {
    display: none;
}

.law-fig-broken pre {
    position: static;
    width: auto;
    height: auto;
    overflow-x: auto;
    clip: auto;
    padding: 0.75rem 1rem;
    border: 1px solid #E6DFD8;
    margin: 0.5rem 0;
}

/* ---- 별표/서식 (annex_render.py 방출 + law_viewer.html lazy 목록 공용) ---- */

.law-annex {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed #E6DFD8;
    scroll-margin-top: 5rem;
}

.law-annex-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.law-annex-label {
    font-weight: 600;
    color: #B45309;   /* 조문번호와 같은 계열 — law-article-num 주석의 레거시 승인 */
    font-size: 0.9375rem;
}

.law-annex-title {
    font-weight: 600;
    color: #141413;
}

.law-annex-rev {
    color: #6C6A64;
    font-size: 0.75rem;
}

.law-annex-links {
    margin-left: auto;
    display: inline-flex;
    gap: 0.375rem;
}

.law-annex-download {
    font-size: 0.75rem;
    color: #78716c;
    border: 1px solid #e7e5e4;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    text-decoration: none;
    background: #fafaf9;
}

.law-annex-download:hover {
    background: #f5f5f4;
}

/* 별표 산문 — 원문이 고정폭 하드랩+우측 패딩이라 재개행하면 유사표 정렬이
 * 깨진다. 표와 같은 pre + 가로 스크롤, 박스 크롬은 없이(본문의 일부다). */
.law-annex-prose {
    white-space: pre;
    overflow-x: auto;
    font-family: "Nanum Gothic Coding", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #252523;
    margin: 0.5rem 0;
}

.prose .law-annex-prose {
    background: transparent;
    color: #252523;
    padding: 0;
    margin: 0.5rem 0;
}

/* 서식 원본 이미지(페이지별 gif) — 스캔 문서라 테두리로 프레임을 준다 */
.law-annex-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.5rem 0;
    border: 1px solid #E6DFD8;
    border-radius: 0.25rem;
}

.law-annex-deleted {
    color: #A09D96;
    font-size: 0.875rem;
    padding-top: 0.5rem;
    margin-top: 0.75rem;
}

.law-annex-deleted .law-annex-label {
    color: #A09D96;
    font-weight: 500;
}

.law-annex-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.law-annex-nav a {
    color: #b45309;
    text-decoration: none;
}

.law-annex-nav a:hover {
    text-decoration: underline;
}

.law-annex-more {
    font-size: 0.8125rem;
    color: #78716c;
    border: 1px solid #e7e5e4;
    border-radius: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: #fafaf9;
    cursor: pointer;
}

.law-annex-more:hover {
    background: #f5f5f4;
}

.law-annex-more:disabled {
    opacity: 0.6;
    cursor: default;
}

.law-table th {
    background: #f3f4f6;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    border: 1px solid #d1d5db;
}

.law-table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
}

/* Citation badge + expandable panel */
.law-cite-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.75rem;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    /* 5.2:1 contrast on #fafaf9 (stone-700 vs stone-50) meets WCAG AA. */
    color: #57534e;
    background: #fafaf9;
    border: 1px solid #e7e5e4;
    border-radius: 9999px;
    cursor: pointer;
    vertical-align: middle;
    font-weight: 500;
    line-height: 1.5;
}

.law-cite-badge:hover {
    background: #f5f5f4;
}

.law-cite-panel {
    background: #fafaf9;
    border: 1px solid #e7e5e4;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0 0.5rem 0;
}

.law-cite-panel[hidden] {
    display: none;
}

.law-cite-item {
    display: block;
    font-size: 0.8125rem;
    padding: 0.1875rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.law-cite-item[href] {
    color: #b45309;
    text-decoration: none;
}

.law-cite-item:not([href]) {
    color: #78716c;
}

.law-cite-item-name {
    color: #78716c;
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

/* "외 N건 더 보기" — SSR 인라인 패널의 추가 로드 버튼 (law_viewer.js 위임 핸들러).
   DESIGN.md 더보기 관례: stone-500 → hover stone-700, underline offset, 모션 금지. */
.law-cite-more {
    display: block;
    padding: 0.1875rem 0;
    font-size: 0.75rem;
    color: #78716c;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-align: left;
}

.law-cite-more:hover {
    color: #44403c;
}

.law-cite-more[disabled] {
    cursor: default;
    text-decoration: none;
}

.law-cite-type {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.25rem;
    margin-right: 0.375rem;
}

.law-cite-type-prec {
    color: #0f766e;
    background: #ccfbf1;
}

.law-cite-type-detc {
    color: #be123c;
    background: #ffe4e6;
}

.law-cite-type-expc {
    color: #c2410c;
    background: #ffedd5;
}

.law-cite-type-admrul {
    color: #0369a1;
    background: #e0f2fe;
}

.law-cite-type-ordin {
    color: #6d28d9;
    background: #ede9fe;
}

.law-cite-count-prec {
    color: #0f766e;
}

.law-cite-count-detc {
    color: #be123c;
}

.law-cite-count-expc {
    color: #c2410c;
}

.law-cite-count-admrul {
    color: #0369a1;
}

.law-cite-count-ordin {
    color: #6d28d9;
}

/* 법령은 중립색 — 나머지 외부 문서 타입과 달리 "이 페이지와 같은 종류"임을 나타낸다. */
.law-cite-type-law {
    color: #44403c;
    background: #f5f5f4;
}

.law-cite-count-law {
    color: #44403c;
}

/* Degraded rendering */
.law-fallback {
    line-height: 1.75;
    color: #3D3D3A;
}

/* Narrow viewports: default indent margins overflow on <=640px. */
@media (max-width: 640px) {
    .law-paragraph { margin-left: 0.5rem; }
    .law-ho { margin-left: 1.25rem; }
    .law-mok { margin-left: 2rem; }
}