/* 한국의 농업기관 — 농정 데이터 허브  /insights/korea-agri-institutions/
 * 전용 스타일. 모든 규칙은 .kin-page 루트로 스코프한다 (page-id 셀렉터 금지).
 *
 * 원안은 독립 호스팅(Artifact)용 단일 HTML 이었다. WordPress 이식에서 바꾼 것:
 *
 *  1. 다크 토큰 3중 구조를 걷어냈다. 이 테마에는 다크 모드가 없다 —
 *     prefers-color-scheme·data-theme 선언이 style.css·theme.json 어디에도 없다(전수 확인).
 *     원안의 다크 블록을 그대로 옮기면 OS 가 다크인 방문자만 본문이 어두워지고
 *     사이트 헤더·푸터는 라이트로 남아, 원안이 막으려던 그 어긋남이 오히려 생긴다.
 *     라이트 팔레트만 옮겼고, 다크가 도입되면 원안 파일의 두 블록을 여기에 이식하면 된다.
 *  2. 차트 3색은 원안 라이트 값을 그대로 유지한다 — #0E7F58 / #B8892E / #1E79A8.
 *     KIFC 브랜드색을 색각이상 판별 기준(명도대·채도하한·CVD 분리·대비)에 맞춰
 *     채도를 올린 조합이라 임의로 흔들지 않는다. 브랜드 원색 #1B4D3E 는 텍스트·UI 전용.
 *  3. 서체를 테마 것으로 매핑했다. 원안의 Noto Serif KR·IBM Plex Sans KR·IBM Plex Mono
 *     는 이 테마가 로드하지 않는다(테마는 Manrope+Pretendard / Inter+Pretendard).
 *     페이지 하나 때문에 폰트 요청을 늘리지 않고 headline·body 프리셋 + 시스템 mono
 *     스택(landings.css 선례)을 쓴다. 숫자 정렬은 tabular-nums 로 유지된다.
 *  4. 원안의 자체 masthead·footer 는 사이트 헤더·푸터와 겹치므로 제거했다.
 *     버전 스탬프(v1.0 · 2026-08-24 · 갱신 예정)는 히어로 안 .kin-ver 로 옮겼고,
 *     하단 출처 요약은 .kin-foot 로 남겼다. 갱신 시 두 곳을 함께 올린다.
 *
 * 원안 v1.1 에서 「농업기관들」 시리즈 레일(.srail)·목록(.series/.si)이 추가됐다.
 * 미발행 편은 링크 없이 li.soon/.si.soon 로만 둔다. 각 편이 발행되면 **레일과 목록
 * 두 곳 모두** 에 링크를 걸어야 한다.
 *
 * 2026-08-24 07편(농업 전문지와 정기간행물, /insights/korea-agri-institutions/media/)이
 * 이 stylesheet 를 공유하는 첫 자식 편이다. 편 전용 파일을 만들지 않는다 —
 * .kin-page 토큰이 두 파일에 복제되고, 서버 콘텐츠 계약이 루트 클래스로 편을
 * 구분하지 못해 새 파일이 계약 밖에 남는다. 편 전용 규칙은 이 파일 맨 아래
 * 편별 블록에 .kin-page(일반 유틸) 또는 .kin-ep<N>(편 한정) 스코프로 붙인다.
 *
 * 짧은 클래스명(.seg .stat .doc .gap .tw …)은 원안 마크업을 그대로 보존하기 위해
 * 유지했다. 전역 style.css 에 같은 이름의 규칙이 없음을 전수 확인했고(.num·.dir 은
 * 이미 .fnc-* 아래로 스코프됨), 이 파일의 모든 규칙이 .kin-page 아래에 있어 양방향
 * 누출이 없다. **새 규칙을 추가할 때도 반드시 .kin-page 로 시작해야 한다.**
 */

.kin-page {
    /* ── 라이트 팔레트 (원안 :root 값) ─────────────────────── */
    --paper: #f5f6f3;
    --surface: #ffffff;
    --surface-2: #edf0ec;
    --ink: #14201b;
    --ink-2: #3d4c45;
    --muted: #5a6b5e;
    --rule: #d3dad5;
    --rule-strong: #b7c2bb;
    --brand: #1b4d3e;
    --brand-soft: #e7efe9;

    /* 차트 3색 — 값 고정 (파일 머리말 2번) */
    --d1: #0e7f58;
    --d2: #b8892e;
    --d3: #1e79a8;
    --flag: #8c3b2e;

    /* 소속 램프 10단 — 짙을수록 중앙정부에 가깝다 */
    --g1: #14312a;
    --g2: #1b4d3e;
    --g3: #226050;
    --g4: #2a7362;
    --g5: #398574;
    --g6: #529887;
    --g7: #6faa9b;
    --g8: #8fbcaf;
    --g9: #afcfc5;
    --g10: #c9e0d8;
    --gtext: #ffffff;

    --maxw: 74ch;
    --kin-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --kin-anchor: calc(var(--fnc-header-h, 81px) + 24px);

    background: var(--paper);
    color: var(--ink);
    font-family: var(--wp--preset--font-family--body);
    font-weight: 400;
    font-size: 16.5px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}
.kin-page * { box-sizing: border-box; }

.kin-page h1,
.kin-page h2,
.kin-page h3 {
    font-family: var(--wp--preset--font-family--headline);
    text-wrap: balance;
    margin: 0;
    line-height: 1.35;
}
.kin-page .mono {
    font-family: var(--kin-mono);
    font-variant-numeric: tabular-nums;
}
.kin-page a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}
.kin-page a:hover { border-bottom-color: var(--brand); }
.kin-page a:focus-visible,
.kin-page button:focus-visible { outline: 2px solid var(--d3); outline-offset: 3px; }

/* ── shell ───────────────────────────────────────────────── */
.kin-page .shell { max-width: 1220px; margin: 0 auto; padding: 0 28px; }
.kin-page .grid {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
.kin-page main { min-width: 0; }
.kin-page nav.rail { min-width: 0; }
@media (max-width: 900px) {
    .kin-page .grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ── hero ────────────────────────────────────────────────── */
.kin-page .hero { padding: 56px 0 40px; border-bottom: 1px solid var(--rule); }
.kin-page .eyebrow {
    font-size: 11.5px;
    letter-spacing: 0.2em;
    color: var(--muted);
    text-transform: uppercase;
}
.kin-page .hero h1 {
    font-size: clamp(34px, 5.2vw, 56px);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 14px 0 0;
    color: var(--ink);
}
.kin-page .hero .lede {
    max-width: 62ch;
    margin: 20px 0 0;
    font-size: 18px;
    color: var(--ink-2);
    font-weight: 400;
}
.kin-page .hero .stamp {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-top: 26px;
    padding: 6px 12px;
    border: 1px solid var(--rule-strong);
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
}
.kin-page .stamp b { color: var(--brand); font-weight: 600; }
/* 원안 masthead 의 버전 스탬프 — 사이트 헤더와 겹치지 않게 히어로로 옮겼다 */
.kin-page .kin-ver {
    display: flex;
    gap: 14px;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 34px;
}
.kin-page .kin-ver .org {
    font-size: 12.5px;
    letter-spacing: 0.16em;
    color: var(--brand);
    font-weight: 600;
}
.kin-page .kin-ver .kin-ver__meta { margin-left: auto; }

/* ── taxonomy strip ──────────────────────────────────────── */
.kin-page .strip-wrap { margin: 44px 0 0; }
.kin-page .strip-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.kin-page .strip {
    display: flex;
    width: 100%;
    height: 56px;
    border: 1px solid var(--rule-strong);
    background: var(--surface);
}
.kin-page .seg {
    position: relative;
    border-right: 1px solid var(--paper);
    transition: filter 0.18s ease;
    outline-offset: -2px;
}
.kin-page .seg:last-child { border-right: 0; }
.kin-page .seg:hover,
.kin-page .seg:focus-visible { filter: brightness(1.16); }
.kin-page .seg span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--gtext);
    font-family: var(--kin-mono);
}

/* 옅은 배경 칸. 기본 .seg span 은 흰 글자라 옅은 칸에서 사라진다 — 본문색으로 되돌린다.
 * 편 한정 토큰이 아니라 범용 modifier 다(01편 R&D 가치사슬 띠, 08편 갈래 띠). */
.kin-page .seg.pale span { color: var(--ink-2); }
.kin-page .strip-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
    gap: 2px 20px;
    margin-top: 14px;
}
.kin-page .lg {
    display: flex;
    gap: 9px;
    align-items: baseline;
    font-size: 12.5px;
    color: var(--ink-2);
    padding: 3px 0;
}
.kin-page .sw { width: 11px; height: 11px; flex: none; translate: 0 1px; }
.kin-page .lg em {
    font-style: normal;
    color: var(--muted);
    margin-left: auto;
    font-family: var(--kin-mono);
}

/* ── index rail ──────────────────────────────────────────── */
.kin-page .rail {
    position: sticky;
    top: var(--kin-anchor);
    padding-top: 56px;
    font-size: 13px;
}
@media (max-width: 900px) {
    .kin-page .rail {
        position: static;
        padding: 28px 0 0;
        border-bottom: 1px solid var(--rule);
        margin-bottom: 8px;
    }
}
.kin-page .rail-t {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.kin-page .rail ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.kin-page .rail a {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    color: var(--ink-2);
}
.kin-page .rail a:hover { color: var(--brand); border-bottom-color: transparent; }
.kin-page .rail a .n { font-family: var(--kin-mono); color: var(--muted); font-size: 11.5px; }

/* ── sections ────────────────────────────────────────────── */
.kin-page section {
    padding: 56px 0;
    border-bottom: 1px solid var(--rule);
    scroll-margin-top: var(--kin-anchor);
}
.kin-page section:last-of-type { border-bottom: 0; }
.kin-page .sec-h { display: flex; gap: 14px; align-items: baseline; margin-bottom: 8px; }
.kin-page .sec-n {
    font-family: var(--kin-mono);
    font-size: 12px;
    color: var(--d2);
    font-weight: 600;
    letter-spacing: 0.08em;
}
.kin-page h2 { font-size: clamp(24px, 3vw, 31px); font-weight: 800; letter-spacing: -0.02em; }
.kin-page h3 { font-size: 18px; font-weight: 700; margin: 38px 0 10px; color: var(--ink); }
.kin-page p { max-width: var(--maxw); margin: 14px 0 0; color: var(--ink-2); }
.kin-page .sec-lede { font-size: 17px; color: var(--ink-2); max-width: 64ch; margin-top: 10px; }

/* ── figures ─────────────────────────────────────────────── */
.kin-page figure { margin: 28px 0 0; padding: 0; }
.kin-page figcaption {
    font-size: 12px;
    color: var(--muted);
    margin-top: 12px;
    line-height: 1.6;
    max-width: 70ch;
}
.kin-page .fig-t { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.kin-page .fig-sub {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 16px;
    font-family: var(--kin-mono);
}
.kin-page .bars { display: flex; flex-direction: column; gap: 10px; }
.kin-page .bar-row {
    display: grid;
    grid-template-columns: minmax(112px, 168px) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}
@media (max-width: 620px) {
    .kin-page .bar-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}
.kin-page .bar-lab { font-size: 13px; color: var(--ink-2); text-align: right; line-height: 1.35; }
@media (max-width: 620px) {
    .kin-page .bar-lab { text-align: left; font-size: 12.5px; color: var(--muted); }
}
.kin-page .bar-track {
    position: relative;
    height: 26px;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.kin-page .bar-fill {
    height: 22px;
    border-radius: 0 3px 3px 0;
    transition: filter 0.18s ease;
    flex: 0 1 auto;
    min-width: 3px;
}
.kin-page .bar-track:hover .bar-fill { filter: brightness(1.1); }
.kin-page .bar-val {
    font-family: var(--kin-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kin-page .bar-note { font-size: 11.5px; color: var(--muted); }
.kin-page .stack { display: flex; height: 26px; width: 100%; gap: 2px; }
.kin-page .stack i { display: block; height: 100%; font-style: normal; }
.kin-page .legend {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 12.5px;
    color: var(--ink-2);
}
.kin-page .legend span { display: flex; gap: 7px; align-items: center; }
.kin-page .legend b { width: 11px; height: 11px; display: block; }

/* ── tables ──────────────────────────────────────────────── */
.kin-page .tw {
    overflow-x: auto;
    margin: 24px 0 0;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
}
.kin-page table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 520px; }
.kin-page th,
.kin-page td {
    text-align: left;
    padding: 9px 14px 9px 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.kin-page tbody tr:last-child td { border-bottom: 0; }
.kin-page th {
    font-size: 11px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    padding-top: 12px;
    padding-bottom: 8px;
}
.kin-page td.num,
.kin-page th.num {
    text-align: right;
    font-family: var(--kin-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-right: 0;
}
.kin-page tr.total td { font-weight: 600; color: var(--ink); border-top: 1px solid var(--rule-strong); }
.kin-page td.grp {
    color: var(--muted);
    font-family: var(--kin-mono);
    font-size: 12px;
    white-space: nowrap;
}

/* ── stat row ────────────────────────────────────────────── */
.kin-page .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    border-top: 1px solid var(--rule-strong);
    margin-top: 32px;
}
.kin-page .stat { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--rule); }
.kin-page .stat .k {
    font-size: 11px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
}
.kin-page .stat .v {
    font-family: var(--kin-mono);
    font-size: 26px;
    font-weight: 500;
    color: var(--ink);
    margin-top: 6px;
    letter-spacing: -0.01em;
}
.kin-page .stat .u { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ── direction cards (ruled, not rounded) ────────────────── */
.kin-page .dirs {
    display: flex;
    flex-direction: column;
    margin-top: 28px;
    border-top: 1px solid var(--rule-strong);
}
.kin-page .dir {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
}
.kin-page .dir .m {
    font-family: var(--kin-mono);
    font-size: 12px;
    color: var(--d2);
    font-weight: 600;
    padding-top: 4px;
}
.kin-page .dir h4 {
    margin: 0 0 6px;
    font-family: var(--wp--preset--font-family--headline);
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
}
.kin-page .dir p { margin: 0; font-size: 14.5px; max-width: 66ch; }
.kin-page .dir .why {
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
    border-left: 2px solid var(--rule-strong);
    padding-left: 12px;
    max-width: 64ch;
}

/* ── gap list ────────────────────────────────────────────── */
.kin-page .gaps { margin-top: 24px; border-top: 1px solid var(--rule-strong); }
.kin-page .gap { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.kin-page .gap b { display: block; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.kin-page .gap span {
    display: block;
    font-size: 13.5px;
    color: var(--ink-2);
    margin-top: 4px;
    max-width: 70ch;
}

/* ── todo box ────────────────────────────────────────────── */
.kin-page .todo {
    margin-top: 34px;
    border: 1px solid var(--rule-strong);
    border-left: 3px solid var(--d2);
    background: var(--surface);
    padding: 26px 26px 8px;
    /* 카운터를 박스에 두어 세 ol 을 넘어 01~12 로 이어진다 (원안 v1.1) */
    counter-reset: t;
}
.kin-page .todo-h {
    display: flex;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.kin-page .todo-h h3 { margin: 0; font-size: 18px; font-weight: 800; }
.kin-page .todo-h .tag {
    font-family: var(--kin-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--d2);
    border: 1px solid var(--d2);
    padding: 1px 7px;
}
.kin-page .todo > p { font-size: 13.5px; color: var(--muted); max-width: 68ch; margin-top: 8px; }
.kin-page .todo h4 {
    font-family: var(--wp--preset--font-family--label);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin: 24px 0 2px;
}
.kin-page .todo ol { margin: 0; padding: 0; list-style: none; }
.kin-page .todo li {
    counter-increment: t;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    padding: 11px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
    color: var(--ink-2);
}
.kin-page .todo li:before {
    content: counter(t, decimal-leading-zero);
    font-family: var(--kin-mono);
    font-size: 11.5px;
    color: var(--muted);
    padding-top: 3px;
}
.kin-page .todo li b { color: var(--ink); font-weight: 600; display: block; max-width: 70ch; }
.kin-page .todo li em {
    font-style: normal;
    color: var(--muted);
    display: block;
    margin-top: 3px;
    font-size: 13px;
    max-width: 72ch;
    line-height: 1.65;
}

/* ── sources ─────────────────────────────────────────────── */
.kin-page .docs { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--rule-strong); }
.kin-page .doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: baseline;
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
}
.kin-page .doc b { font-weight: 600; font-size: 14.5px; color: var(--ink); display: block; }
.kin-page .doc span { font-size: 13px; color: var(--muted); display: block; margin-top: 3px; }
.kin-page .doc .v {
    font-family: var(--kin-mono);
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
}

/* ── series rail (히어로 위 한 줄) ─────────────────────────── */
.kin-page .srail { border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.kin-page .srail-in {
    max-width: 1220px;
    margin: 0 auto;
    padding: 9px 28px;
    display: flex;
    gap: 14px;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 12px;
    font-family: var(--kin-mono);
}
.kin-page .srail-cat {
    color: var(--brand);
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.kin-page .srail-cat:after { content: "\203a"; margin-left: 9px; color: var(--rule-strong); }
.kin-page .srail ul {
    display: flex;
    gap: 0 16px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.kin-page .srail li { white-space: nowrap; color: var(--muted); }
.kin-page .srail li[aria-current="page"] { color: var(--ink); font-weight: 600; }
.kin-page .srail li[aria-current="page"]:before {
    content: "\25cf";
    font-size: 7px;
    vertical-align: middle;
    margin-right: 5px;
    color: var(--d2);
}
.kin-page .srail li.soon { opacity: 0.55; }
.kin-page .srail a { color: var(--ink-2); border-bottom: 1px solid var(--rule-strong); }
.kin-page .srail a:hover { color: var(--brand); }

/* ── series index (페이지 푸터 직전) ──────────────────────── */
.kin-page .series { margin-top: 56px; padding-top: 0; }
.kin-page .series-h {
    display: flex;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.kin-page .series-h h2 { font-size: 22px; }
.kin-page .series-h .tag {
    font-family: var(--kin-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--muted);
    border: 1px solid var(--rule-strong);
    padding: 1px 7px;
}
.kin-page .series-list { margin-top: 22px; border-top: 1px solid var(--rule-strong); }
.kin-page .si {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
}
.kin-page .si .no { font-family: var(--kin-mono); font-size: 12px; color: var(--muted); }
.kin-page .si b { font-weight: 600; font-size: 14.5px; color: var(--ink); display: block; }
.kin-page .si span { font-size: 13px; color: var(--muted); display: block; margin-top: 3px; }
.kin-page .si .st {
    font-family: var(--kin-mono);
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    border: 1px solid var(--rule-strong);
    padding: 1px 7px;
}
.kin-page .si.here {
    background: var(--brand-soft);
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
}
.kin-page .si.here .no { color: var(--d2); font-weight: 600; }
.kin-page .si.soon b,
.kin-page .si.soon span { color: var(--muted); }
@media (max-width: 620px) {
    .kin-page .si { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; }
    .kin-page .si .st { grid-column: 2; }
}

/* ── page foot (사이트 푸터와 별개 — 출처 요약·버전 pill) ── */
.kin-page .kin-foot { padding: 44px 0 64px; font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.kin-page .kin-foot .rule { height: 1px; background: var(--rule-strong); margin-bottom: 26px; }
.kin-page .pill {
    display: inline-block;
    font-family: var(--kin-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    border: 1px solid var(--rule-strong);
    padding: 2px 8px;
    color: var(--muted);
    margin-right: 8px;
}
@media (prefers-reduced-motion: reduce) {
    .kin-page * { transition: none !important; animation: none !important; }
}

/* ── 07편(농업 전문지와 정기간행물)에서 새로 쓰는 유틸 ────────
 * 볼트 원본 86_랜딩페이지_농업정기간행물.html 의 두 번째 <style> 블록.
 * 시리즈가 이 stylesheet 하나를 공유하므로 편 전용 파일을 만들지 않고
 * 여기에 둔다(원안 규격은 korea-agri-media.css 분리였다 — 파일을 나누면
 * .kin-page 토큰이 두 곳에 복제되고 서버 계약이 루트 클래스로 편을
 * 구분하지 못한다). 다른 편에서도 쓸 수 있는 일반 유틸이라 .kin-page 스코프.
 */
.kin-page .nc { font-style: italic; color: var(--muted); font-size: 12.5px; }
.kin-page .sub {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.5;
}
.kin-page .note {
    margin-top: 20px;
    font-size: 13.5px;
    color: var(--ink-2);
    border-left: 2px solid var(--rule-strong);
    padding-left: 14px;
    max-width: 70ch;
}
.kin-page td b { font-weight: 600; color: var(--ink); }
/* 숫자 칸이 표 중간에 오는 첫 편이다. td.num 은 padding-right 를 0 으로 두는데
 * 뒤에 왼쪽 정렬 칸이 붙으면 「19농민신문」처럼 붙어 읽힌다. 뒤가 숫자 칸일 때는
 * (허브의 모든 num 칸이 그렇다) 오른쪽 정렬이라 간격이 필요 없으므로 건드리지 않는다. */
.kin-page th.num + th:not(.num),
.kin-page td.num + td:not(.num) { padding-left: 14px; }
.kin-page .tw + .tw { margin-top: 26px; }
.kin-page .tcap {
    font-size: 12px;
    color: var(--muted);
    margin: 26px 0 -8px;
    font-family: var(--kin-mono);
    letter-spacing: 0.04em;
}

/* ── 2단 라벨 띠 + 성과 판정표 부호 ─────────────────────
 * 01편(R&D 가치사슬 .chain)·03편(산림 소유구조 .own)·02편(농식품부 재원 .fund)이 같은
 * 규칙을 쓴다. 셋 다 「제목 + em 부제」 두 줄을 담는 높은 띠라 셀렉터를 합쳤다 — 편이
 * 늘 때마다 .kin-ep<N> 으로 복사하면 같은 선언이 여러 벌 돈다. 판별자는 편 번호가
 * 아니라 띠의 성격(.chain / .own / .fund)이다.
 * 나머지 컴포넌트(.strip .seg .stats .bars .tw .dirs .gaps .todo .docs .si …)는
 * 허브 것을 클래스만 써서 재사용한다.
 */
.kin-page .strip.chain,
.kin-page .strip.own,
.kin-page .strip.flow,
.kin-page .strip.fund { height: 78px; }
.kin-page .strip.chain .seg span,
.kin-page .strip.own .seg span,
.kin-page .strip.flow .seg span,
.kin-page .strip.fund .seg span {
    font-size: 11.5px;
    line-height: 1.45;
    padding: 0 8px;
    text-align: center;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0;
}
.kin-page .strip.chain .seg em,
.kin-page .strip.own .seg em,
.kin-page .strip.flow .seg em,
.kin-page .strip.fund .seg em {
    display: block;
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    opacity: 0.85;
    margin-top: 3px;
}
/* .seg.pale span 은 08편도 쓰므로 위 공통 컴포넌트 영역으로 옮겼다 */
/* 08편 히어로 띠의 옅은 칸만 --g8 을 쓴다. --ink-2 로는 4.31:1 로 AA(4.5:1)에 못
 * 미쳐 이 편에서만 --ink 로 내린다(g8 7.97:1 · g10 12.09:1). 01편의 옅은 칸은 전부
 * --g10 이고 --ink-2 로 6.53:1 이라 통과하므로 공용 규칙은 건드리지 않는다.
 * 한 띠 안에서 라벨 색이 갈리면 의미 있는 구분으로 읽히므로 두 칸 다 내린다. */
.kin-page.kin-ep8 .seg.pale span { color: var(--ink); }
/* 성과 4관문 판정표의 ○ △ × 부호. ? 는 색을 주지 않는다(자료 미확보).
 * 01편·03편이 같은 판정표를 쓴다 — 편별로 복사하지 않고 .kin-page 스코프에 둔다. */
.kin-page td.ok { color: var(--d1); font-weight: 600; }
.kin-page td.no { color: var(--flag); font-weight: 600; }
.kin-page td.mid { color: var(--d2); font-weight: 600; }

/* 확인 필요 항목 표(.tw.need) — 네 칸이 모두 산문인 첫 표다. 10편이 처음 쓴다.
 *
 * `.grp` 는 `white-space: nowrap` 이다. 다른 편에서 이 클래스가 받는 값은 「2 / 3」·
 * 「2008 개편」·「제57조의2」 같은 짧은 토큰이라 한 줄로 두는 편이 읽기 좋았다. 그런데
 * 10편은 같은 클래스에 107자짜리 문장을 담는다(「공개 경로 없음이 확정됐습니다 — …」).
 * nowrap 이 그 문장을 한 줄로 펴면서 표가 컨테이너 898px 를 넘어 1,245px 가 됐고,
 * 남은 폭을 나눠 가진 「항목」·「왜 필요한가」가 103px·86px 로 짓눌렸다 — 뜻을 지고
 * 있는 두 칸이 정작 대여섯 글자씩 끊어져 읽혔다.
 *
 * 그래서 이 표만 고정 레이아웃으로 칸 비율을 글자량에 맞춰 못박는다(실측 평균
 * 항목 20자 : 왜 71자 : 경로 49자). 자동 레이아웃으로 두면 가장 긴 셀 하나가
 * 다시 비율을 정하므로 행이 늘 때마다 같은 일이 반복된다.
 *
 * `.grp` 의 색·mono·12px 는 그대로 둔다 — 「조사 경로」를 메타 정보로 읽히게 하는
 * 표시이고, 문제는 서체가 아니라 줄바꿈 금지였다. */
.kin-page .tw.need table { table-layout: fixed; min-width: 640px; }
.kin-page .tw.need th.num,
.kin-page .tw.need td.num { width: 36px; }
.kin-page .tw.need th:nth-child(2),
.kin-page .tw.need td:nth-child(2) { width: 22%; }
.kin-page .tw.need th:nth-child(3),
.kin-page .tw.need td:nth-child(3) { width: 44%; }
.kin-page .tw.need td.grp { white-space: normal; line-height: 1.55; }
.kin-page .tw.need th,
.kin-page .tw.need td { word-break: keep-all; overflow-wrap: anywhere; }