/* 품목별 심층 브리프 (단위글) — /food-security/commodity-outlook/<품목>/
   랜딩(commodity-outlook.css)의 디자인 토큰을 계승한 재사용 템플릿. */
/* 색은 2층이다.
   1층(지면) — ink·muted·line·paper·white. 모든 품목이 공유한다. 브리프가
     어느 품목이든 같은 기관의 문서로 읽히게 하는 층이라 절대 변조하지 않는다.
   2층(계열) — accent·sub·series. 품목 카테고리(.cob-cat-*)가 덮어쓴다.
     기본값은 식량작물(곡물 올리브)이라 카테고리 클래스가 없어도 깨지지 않는다.
   계열은 style.css 의 L1/L2 자연그린 패밀리에서 가져온다. 무지개 팔레트로
   흩어지지 않게, 다섯 계열 모두 그린·어스 축 안의 shade 변조다. */
.cob-page {
    --cob-ink: #17201d;
    --cob-muted: #56635e;
    --cob-line: #cfd7d1;
    --cob-paper: #f6f5ef;
    --cob-white: #fff;

    /* 카테고리 accent — 식량작물(기본): 곡물 올리브 그린 */
    --cob-accent: #4f7524;
    --cob-accent-deep: #2f4a14;
    --cob-accent-soft: #eef3e0;
    --cob-accent-band: #e2ebcf;
    --cob-accent-light: #9db878;
    --cob-hero-a: #22370f;
    --cob-hero-b: #3c5b1c;
    --cob-hero-c: #4f7526;
    --cob-ondark: #f0f4e8;
    --cob-ondark-muted: #c4d3ab;

    /* 보조 계열 — 두 번째 데이터 계열·요약 번호·CTA 버튼. 웜 골드가 기본이고
       과일류처럼 accent 자체가 웜인 계열에서만 쿨 톤으로 뒤집는다. */
    --cob-sub: #b68238;
    /* 밝은 면 위 글자용 — sub 원톤(#b68238)은 흰 배경에서 3.4:1 로 AA 미달이다.
       면·테두리·차트 계열엔 원톤을 쓰고, 글자에만 이 한 단계 진한 값을 쓴다. */
    --cob-sub-ink: #8f5f1c;
    --cob-sub-soft: #f1e5cc;
    --cob-sub-light: #d8c295;
    --cob-sub-hover: #cf9645;
    --cob-on-sub: #23180a;

    /* 경고(.cob-warning)는 의미색이다. 카테고리에 따라 흔들리면 '주의'라는
       신호가 약해지므로 계열과 무관하게 브릭 레드로 고정한다. */
    --cob-alert: #a3402a;
    --cob-alert-soft: #f6e0d8;
    --cob-alert-ink: #7d3a25;

    /* 표 — 헤더 행에 계열 틴트를 깔아 열 이름과 데이터를 갈라놓는다.
       행 머리 열과 짝수 행은 중립 톤으로만 눌러 계열색이 표를 지배하지 않게 한다. */
    --cob-thead-bg: var(--cob-accent-soft);
    --cob-tfoot-bg: var(--cob-accent-band);
    --cob-rowhead-bg: #faf9f4;
    --cob-zebra: rgba(23, 32, 29, .028);

    /* 차트 계열 5색 — accent → sub → accent 연톤 → sub 연톤 → 경고.
       계열 순서가 카테고리마다 같으므로 같은 도표를 다른 품목에 옮겨도
       읽는 규칙(진한 쪽이 주계열)이 유지된다. */
    --cob-ser-1: var(--cob-accent);
    --cob-ser-2: var(--cob-sub);
    --cob-ser-3: var(--cob-accent-light);
    --cob-ser-4: var(--cob-sub-light);
    --cob-ser-5: var(--cob-alert);
    /* 3단 폭 체계 — 읽는 폭(text)과 보는 폭(wide)을 분리한다.
       text  760px : 본문 17px 기준 한 줄 약 44자 (한글 장문 가독 구간)
       wide  800px : 차트·표·카드. 본문과 거의 같은 폭의 단일 컬럼 리듬
       full  100%  : 히어로·CTA 배경만. 내부 콘텐츠는 wide 에 정렬 */
    --cob-text: 760px;
    --cob-wide: 800px;
    --cob-gutter: 2.5rem;
    background: var(--cob-paper);
    color: var(--cob-ink);
    font-family: var(--wp--preset--font-family--body);
    font-size: 1.0625rem;
    line-height: 1.85;
}

/* ── 카테고리 계열 ─────────────────────────────────────────────
   랜딩(commodity-outlook.css)의 품목 묶음 다섯 개와 1:1 이다. 브리프 루트에
   .cob-cat-<카테고리> 를 붙이면 히어로·목차·표 헤더·차트 계열이 함께 돈다.
   루트 클래스는 scripts/setup_commodity_brief.py 의 spec["category"] 가 찍는다.
   각 accent 는 흰 배경 위 본문 대비 AA 이상, deep 은 soft 틴트 위 AAA 급이다. */

/* 식량작물 — 곡물 올리브 그린 (기본값과 동일. 명시적으로도 쓸 수 있게 둔다) */
.cob-page.cob-cat-food-crops {
    --cob-accent: #4f7524;
    --cob-accent-deep: #2f4a14;
    --cob-accent-soft: #eef3e0;
    --cob-accent-band: #e2ebcf;
    --cob-accent-light: #9db878;
    --cob-hero-a: #22370f;
    --cob-hero-b: #3c5b1c;
    --cob-hero-c: #4f7526;
    --cob-ondark: #f0f4e8;
    --cob-ondark-muted: #c4d3ab;
}

/* 축산 — 슬레이트 그린. 사육·경영의 차분한 톤 (style.css agri-management 계열) */
.cob-page.cob-cat-livestock {
    --cob-accent: #47695b;
    --cob-accent-deep: #22382e;
    --cob-accent-soft: #e8efe9;
    --cob-accent-band: #d9e4dd;
    --cob-accent-light: #8fab9c;
    --cob-hero-a: #16281f;
    --cob-hero-b: #2c473a;
    --cob-hero-c: #3d5f4e;
    --cob-ondark: #eef4f0;
    --cob-ondark-muted: #b3c8bc;
}

/* 채소 — 프레시 리프 그린. 엽채·단경기 회전의 밝은 톤 */
.cob-page.cob-cat-vegetables {
    --cob-accent: #2f7a4a;
    --cob-accent-deep: #15452a;
    --cob-accent-soft: #e4f3e9;
    --cob-accent-band: #d2ebda;
    --cob-accent-light: #7cbe95;
    --cob-hero-a: #0d3320;
    --cob-hero-b: #175734;
    --cob-hero-c: #24724a;
    --cob-ondark: #ecf6f0;
    --cob-ondark-muted: #a9d2ba;
}

/* 과일류 — 하베스트 클레이. 다섯 계열 중 유일한 웜 accent 라서
   보조 계열을 골드 대신 올리브로 뒤집는다(웜 위 웜 방지). */
.cob-page.cob-cat-fruits {
    --cob-accent: #9c4a26;
    --cob-accent-deep: #5e2a15;
    --cob-accent-soft: #f7e6dc;
    --cob-accent-band: #f0d6c6;
    --cob-accent-light: #d99a76;
    --cob-hero-a: #3d1c0e;
    --cob-hero-b: #6b3218;
    --cob-hero-c: #8a4522;
    --cob-ondark: #f8ede6;
    --cob-ondark-muted: #dfb79c;
    --cob-sub: #567f28;
    --cob-sub-ink: #4f7524;
    --cob-sub-soft: #eef3e0;
    --cob-sub-light: #9db878;
    --cob-sub-hover: #6b9633;
    --cob-on-sub: #fff;
    /* accent 가 이미 클레이라서 브릭 레드와 붙는다. 경고만 한 단계 더 진하게. */
    --cob-alert: #8f2c18;
    --cob-alert-soft: #f7dcd4;
    --cob-alert-ink: #72240f;
}

/* 특용작물 — 딥 파인. 인삼·버섯·약용의 연구 톤 (style.css agri-research 계열) */
.cob-page.cob-cat-special-crops {
    --cob-accent: #1c6e5c;
    --cob-accent-deep: #0d3a30;
    --cob-accent-soft: #dcefe8;
    --cob-accent-band: #c9e5da;
    --cob-accent-light: #74b3a0;
    --cob-hero-a: #06291f;
    --cob-hero-b: #0f4839;
    --cob-hero-c: #17604d;
    --cob-ondark: #e9f4ef;
    --cob-ondark-muted: #a5cbbe;
}

.cob-page * { box-sizing: border-box; }
.cob-page a { color: inherit; }
.cob-page a:focus-visible { outline: 3px solid var(--cob-sub); outline-offset: 3px; }
.cob-wrap { width: min(calc(100% - var(--cob-gutter)), var(--cob-wide)); margin: 0 auto; }
.cob-narrow { width: min(calc(100% - var(--cob-gutter)), var(--cob-text)); margin: 0 auto; }

/* 산문 계열은 wide 컨테이너 안에서 text 폭으로 중앙 정렬한다.
   차트·표·카드 그리드, 그리고 테두리를 가진 강조 박스(callout·warning)는
   wide 를 그대로 써서 바로 위 표·차트와 좌우 끝선을 맞춘다. */
.cob-head,
.cob-body,
.cob-source,
.cob-legal { max-width: var(--cob-text); margin-left: auto; margin-right: auto; }
.cob-kicker { margin: 0; color: var(--cob-accent); font-family: var(--wp--preset--font-family--headline); font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.cob-kicker::before { display: inline-block; width: 1.5rem; height: 2px; margin: 0 .65rem .22rem 0; background: currentColor; content: ""; }

/* ── breadcrumb + hero ─────────────────────────────────────── */
/* 콘텐츠 페이지 히어로 — 제목 블록 + 자료 기준(.cob-meta) 까지 담는다.
   핵심 지표(.cob-metrics)만 히어로 밖 첫 데이터 블록으로 둔다. */
.cob-hero {
    position: relative;
    padding: 2.6rem 0 3.4rem;
    background: linear-gradient(135deg, var(--cob-hero-a) 0%, var(--cob-hero-b) 55%, var(--cob-hero-c) 100%);
    color: var(--cob-ondark);
}
.cob-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 2.2rem; color: var(--cob-ondark-muted); font-size: .78rem; }
.cob-breadcrumb a { text-decoration: none; }
.cob-breadcrumb a:hover { text-decoration: underline; }
.cob-breadcrumb strong { color: #fff; font-weight: 700; }
.cob-hero .cob-kicker { color: var(--cob-ondark-muted); }
.cob-hero h1 { max-width: 18ch; margin: 1rem 0 1.25rem; color: #fff; font-family: var(--wp--preset--font-family--headline); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.16; }
.cob-hero__lede { max-width: var(--cob-text); margin: 0; color: var(--cob-ondark); font-size: 1.05rem; }

/* 자료 기준 — 히어로 안, 리드문 아래 가로 한 줄.
   짙은 배경 위이므로 흰 박스가 아니라 헤어라인으로만 구분한다. */
.cob-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.24); }
.cob-meta div { padding: 0 1.3rem; border-right: 1px solid rgba(255,255,255,.16); }
.cob-meta div:first-child { padding-left: 0; }
.cob-meta div:last-child { border-right: 0; }
.cob-meta span { display: block; margin-bottom: .3rem; color: var(--cob-ondark-muted); font-size: .74rem; font-weight: 700; }
.cob-meta strong { color: #fff; font-family: var(--wp--preset--font-family--headline); font-size: .92rem; }

/* 히어로 직후 데이터 블록 — 핵심 지표.
   자료 기준이 히어로로 올라갔으므로 상단 여백을 여기서 준다. */
.cob-topdata { padding: 2.6rem 0 0; background: var(--cob-paper); }
.cob-metrics { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--cob-line); border-bottom: 0; background: var(--cob-white); color: var(--cob-ink); }
.cob-metrics div { padding: 1.15rem 1.2rem 1.3rem; border-right: 1px solid var(--cob-line); }
.cob-metrics div:last-child { border-right: 0; }
.cob-metrics span { display: block; color: var(--cob-muted); font-size: .72rem; font-weight: 700; }
.cob-metrics strong { display: block; margin: .35rem 0 .1rem; color: var(--cob-accent-deep); font-family: var(--wp--preset--font-family--headline); font-size: 1.55rem; font-weight: 800; letter-spacing: -.04em; }
.cob-metrics strong em { font-size: .78rem; font-style: normal; font-weight: 700; }
.cob-metrics small { color: var(--cob-muted); font-size: .7rem; }

/* ── in-page rail ──────────────────────────────────────────── */
/* 본문 섹션 11개를 알약 버튼으로 노출한다. CTA·참고문헌은 목차에서 제외 —
   읽는 흐름의 목적지가 아니라 글 끝의 부속이다.
   버튼으로 감싸면 800px 안에서 두 줄, 모바일에서는 네 줄까지 늘어나
   sticky 바가 화면을 잡아먹는다. 그래서 줄바꿈 대신 한 줄 + 가로 스크롤. */
/* top:0 으로 두면 sticky 사이트 헤더(z-index 50)가 레일을 통째로 덮어
   스크롤 중에 목차가 보이지 않는다. --fnc-header-h 는 assets/glass-nav.js 가
   헤더 실측 높이로 채운다. 폴백 81px = 데스크톱 한 줄 메뉴 기준. */
.cob-rail { position: sticky; top: var(--fnc-header-h, 81px); z-index: 5; border-bottom: 1px solid var(--cob-line); background: rgba(246,245,239,.94); backdrop-filter: blur(.4rem); }
.cob-rail .cob-wrap { display: flex; gap: .35rem; padding: .5rem 0; overflow-x: auto; scrollbar-width: none; }
.cob-rail .cob-wrap::-webkit-scrollbar { display: none; }
/* padding 은 11개가 800px 안에 다 들어가는 값으로 조인다. 넘치면 가로
   스크롤로 자연히 흘러가고, 잘린 알약이 더 있다는 신호가 된다. */
.cob-rail a { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 2.75rem; padding: 0 .65rem; border: 1px solid var(--cob-line); border-radius: 999px; background: var(--cob-white); color: var(--cob-muted); font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; }
.cob-rail a:hover { border-color: var(--cob-accent); background: var(--cob-accent-soft); color: var(--cob-accent-deep); }

/* 앵커 착지점 = 헤더 + 레일(61px) 아래. 두 sticky 요소의 합이다. */
.cob-section, .cob-hero { scroll-margin-top: calc(var(--fnc-header-h, 81px) + 61px); }

/* ── sections ──────────────────────────────────────────────── */
.cob-section { padding: 5.5rem 0; border-bottom: 1px solid var(--cob-line); }
.cob-section--tint { background: var(--cob-white); }
.cob-section--moss { border-bottom: 0; background: var(--cob-accent-deep); color: var(--cob-ondark); }
.cob-head { margin-bottom: 2.6rem; }
.cob-head h2 { margin: .9rem 0 .9rem; font-family: var(--wp--preset--font-family--headline); font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.cob-head p { margin: 0; color: var(--cob-muted); font-size: 1.02rem; }
.cob-section--moss .cob-kicker { color: var(--cob-sub); }
.cob-section--moss .cob-head p { color: var(--cob-ondark-muted); }

.cob-body > p { margin: 0 0 1.35em; }
.cob-body > p:last-child { margin-bottom: 0; }
.cob-body strong { color: var(--cob-accent-deep); }
.cob-section--moss .cob-body strong { color: var(--cob-sub-soft); }

/* 요약 — 1열 가로 밴드.
   2열(칸당 388px)에서는 주장 문장이 두 줄로 접혀 '다섯 문장'이라는 전제가
   깨졌다. 800px 전체 폭을 쓰면 주장은 한 줄, 근거는 그 아래 한두 줄로
   떨어져 번호 → 문장 → 근거가 순서대로 읽힌다.
   번호를 고정폭 열로 빼서 01~05 가 같은 축에 정렬되게 한다. */
/* padding:0 — ul 기본 padding-left 40px 를 리셋하지 않으면 밴드가 오른쪽으로
   밀려 컬럼이 760px 가 되고, 오른쪽만 wide 끝선에 맞는 비대칭이 된다. */
.cob-summary { display: grid; grid-template-columns: 1fr; gap: .55rem; margin: 0; padding: 0; }
.cob-summary li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; gap: 0 .5rem; padding: 1rem 1.3rem; border: 1px solid var(--cob-line); border-left: 3px solid var(--cob-sub); border-radius: .7rem; background: var(--cob-white); list-style: none; }
.cob-summary b { color: var(--cob-sub-ink); font-family: var(--wp--preset--font-family--headline); font-size: .8rem; }
.cob-summary p { margin: 0; font-size: .93rem; }
.cob-summary p em { display: block; margin-top: .3rem; color: var(--cob-muted); font-size: .82rem; font-style: normal; }

/* 그림·표 자동 넘버링 — 문서 순서로 매겨지므로 중간에 하나를 끼워 넣어도
   뒤 번호가 스스로 밀린다. 캡션에 번호를 하드코딩하지 않는 이유다.
   그림과 표는 각각 별도 카운터라 그림 1~5 · 표 1~4 로 독립 증가한다. */
.cob-page { counter-reset: cob-figure cob-table; }

/* 그림/차트 */
.cob-figure { margin: 3rem 0 0; padding: 1.5rem 1.6rem 1.2rem; border: 1px solid var(--cob-line); border-radius: .9rem; background: var(--cob-white); counter-increment: cob-figure; }
.cob-figure__title { margin: 0 0 .3rem; font-family: var(--wp--preset--font-family--headline); font-size: .98rem; font-weight: 800; }
.cob-figure__title::before { margin-right: .1rem; color: var(--cob-accent); content: "그림 " counter(cob-figure) ". "; }
.cob-figure__sub { margin: 0 0 1.2rem; color: var(--cob-muted); font-size: .8rem; }
.cob-figure svg { display: block; width: 100%; height: auto; }
.cob-figure figcaption { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--cob-line); color: var(--cob-muted); font-size: .76rem; }
.cob-scroll { overflow-x: auto; }
.cob-scroll svg { min-width: 40rem; }

.cob-chart-grid line { stroke: #e3e7e2; stroke-width: 1; }
.cob-chart-axis text { fill: #7b877f; font-size: 13.5px; }
.cob-chart-label text { fill: #4a564f; font-size: 14px; font-weight: 700; }
.cob-bar-a { fill: var(--cob-ser-1); }
.cob-bar-b { fill: var(--cob-ser-2); }
.cob-bar-c { fill: var(--cob-ser-3); }
.cob-bar-d { fill: var(--cob-ser-4); }
.cob-bar-e { fill: var(--cob-ser-5); }
.cob-line-a { fill: none; stroke: var(--cob-ser-5); stroke-width: 2.5; stroke-linejoin: round; }
.cob-line-b { fill: none; stroke: var(--cob-ser-1); stroke-width: 2.5; stroke-linejoin: round; }
.cob-line-dash { stroke-dasharray: 6 4; }
.cob-dot-a { fill: var(--cob-ser-5); }
.cob-dot-b { fill: var(--cob-ser-1); }
/* 쌀 그림 1: 재배면적 선·점은 범례 lg-b와 같은 wheat 계열로 맞춘다. */
.cob-rice-page #five-year .cob-line-b { stroke: var(--cob-sub); }
.cob-rice-page #five-year .cob-dot-b { fill: var(--cob-sub); }
.cob-value text { fill: #17201d; font-size: 13.5px; font-weight: 800; }
.cob-stack text { fill: #fff; font-size: 13.5px; font-weight: 800; }
.cob-stack text.cob-stack-dark { fill: #2f3a34; }

.cob-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.cob-legend li { display: flex; align-items: center; gap: .45rem; color: var(--cob-muted); font-size: .78rem; font-weight: 700; }
.cob-legend i { display: inline-block; width: .85rem; height: .85rem; border-radius: .2rem; }
.cob-legend .lg-a { background: var(--cob-ser-1); }
.cob-legend .lg-b { background: var(--cob-ser-2); }
.cob-legend .lg-c { background: var(--cob-ser-3); }
.cob-legend .lg-d { background: var(--cob-ser-4); }
.cob-legend .lg-e { background: var(--cob-ser-5); }
.cob-legend .lg-line { width: 1.4rem; height: .2rem; border-radius: 0; background: var(--cob-ser-5); }

/* 표 — single-report의 학술지형 표 포맷을 page-brief에서도 그대로 사용한다.
   새 표는 figure.fnc-data-table + figcaption.fnc-table-caption + table +
   aside.fnc-source-note 구조가 표준이다. 기존 품목 브리프의 cob-table 마크업도
   같은 외형으로 렌더해 템플릿 안에서 표 디자인이 갈리지 않게 한다. */
.cob-page figure.wp-block-table,
.cob-page figure.fnc-data-table,
.cob-table-wrap {
    margin: 2rem 0 2.25rem;
    padding: 0;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--cob-ink);
    -webkit-overflow-scrolling: touch;
}
/* 전역 style.css 의 `figure.fnc-data-table > figcaption.fnc-table-caption`
   (0,2,2 · .8rem 라벨 폰트)가 `.cob-page .fnc-table-caption`(0,2,0)을 이긴다.
   page-brief 캡션을 실제로 적용하려면 여기서 특정성을 더 높여야 한다. */
.cob-page figure.fnc-data-table > figcaption.fnc-table-caption,
.cob-page figure.wp-block-table > figcaption.fnc-table-caption,
.cob-page .fnc-table-caption,
.cob-table caption {
    margin: 0 0 .45rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #171b19;
    font-family: 'Pretendard', 'Inter', system-ui, sans-serif;
    /* 표 캡션은 그림 캡션 제목(.cob-figure__title .98rem)과 같은 위계로 읽혀야
       한다. 15px 는 본문(.95rem)과 구분되지 않아 표의 머리글로 보이지 않았다. */
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
}
.cob-table { counter-increment: cob-table; }
.cob-table caption::before { margin-right: .25rem; color: inherit; content: "표 " counter(cob-table) "."; }
.cob-page .fnc-table-caption__num { margin-right: .25rem; color: inherit; font: inherit; }
.cob-page figure.wp-block-table > figcaption.fnc-table-caption + table,
.cob-page figure.fnc-data-table > figcaption.fnc-table-caption + table {
    margin-top: 0;
}
.cob-page figure.wp-block-table table,
.cob-page figure.fnc-data-table table,
.cob-table {
    width: 100%;
    min-width: 38rem;
    margin-bottom: 0;
    border: 0;
    border-top: 2px solid #17463f;
    border-bottom: 1px solid #9aa49d;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 0;
    background: #fff;
    font-size: .9375rem;
    line-height: 1.55;
}
.cob-page figure.wp-block-table thead th,
.cob-page figure.fnc-data-table thead th,
.cob-table thead th {
    padding: .65rem .8rem;
    border: 0;
    border-bottom: 1px solid #17463f;
    background: #17463f;
    box-shadow: none;
    color: #fff;
    font-size: inherit;
    font-weight: 700;
    text-align: left;
}
.cob-page figure.wp-block-table tbody th,
.cob-page figure.wp-block-table tbody td,
.cob-page figure.fnc-data-table tbody th,
.cob-page figure.fnc-data-table tbody td,
.cob-table tbody th,
.cob-table tbody td {
    padding: .65rem .8rem;
    border: 0;
    border-bottom: 1px solid #d9ded9;
    background: transparent;
    color: #171b19;
    font-weight: 400;
    text-align: left;
    vertical-align: top;
}
.cob-page figure.wp-block-table tbody th,
.cob-page figure.fnc-data-table tbody th,
.cob-table tbody th { font-weight: 700; }
.cob-page figure.wp-block-table tbody tr:last-child > *,
.cob-page figure.fnc-data-table tbody tr:last-child > *,
.cob-table tbody tr:last-child > * { border-bottom: 0; }
.cob-table tfoot th,
.cob-table tfoot td {
    padding: .65rem .8rem;
    border: 0;
    border-top: 1px solid #9aa49d;
    background: #fff;
    color: #171b19;
    font-weight: 700;
    text-align: left;
}
.cob-table .cob-em { color: inherit; font-weight: 800; }
.cob-page aside.fnc-source-note,
.cob-source {
    display: block;
    margin: .3rem 0 0;
    padding: 0;
    color: #747c75;
    font-size: .75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
}
.cob-section--moss .cob-source { color: var(--cob-ondark-muted); }
/* 표 각주 바로 뒤에 본문이 이어질 때 붙어 보이지 않게 띄운다. */
.cob-source + .cob-body,
.cob-figure + .cob-body,
.cob-table-wrap + .cob-body,
.cob-source + .cob-callout,
.cob-source + .cob-cards { margin-top: 3rem; }

/* 강조 박스 */
.cob-callout { margin: 2.2rem 0 0; padding: 1.4rem 1.6rem; border: 1px solid var(--cob-sub); border-radius: .9rem; background: var(--cob-sub-soft); color: var(--cob-ink); }
/* 제목용 strong 만 블록으로 — 자식 선택자로 좁히지 않으면 본문 <p> 안의
   인라인 강조까지 줄바꿈돼 문장이 토막난다. */
.cob-callout > strong { display: block; margin-bottom: .45rem; font-family: var(--wp--preset--font-family--headline); font-size: 1rem; }
.cob-callout p strong { color: var(--cob-accent-deep); }
.cob-callout p { margin: 0; font-size: .92rem; }
.cob-callout ul { margin: .7rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
.cob-callout li { margin-bottom: .35rem; }

.cob-warning { margin: 2.2rem 0 0; padding: 1.4rem 1.6rem; border: 1px solid var(--cob-alert); border-radius: .9rem; background: var(--cob-alert-soft); }
.cob-warning > strong { display: block; margin-bottom: .45rem; font-family: var(--wp--preset--font-family--headline); font-size: 1rem; color: var(--cob-alert-ink); }
.cob-warning p strong, .cob-warning li strong { color: var(--cob-alert-ink); }
.cob-warning ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.cob-warning li { margin-bottom: .35rem; }
.cob-warning li:last-child { margin-bottom: 0; }

/* 링크 카드 (관세 페이지 연결) */
.cob-linkcard { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: 2.2rem; padding: 1.5rem 1.7rem; border: 1px solid var(--cob-accent); border-radius: .9rem; background: var(--cob-accent-soft); }
.cob-linkcard p { margin: 0; }
.cob-linkcard span { display: block; color: var(--cob-accent); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cob-linkcard b { font-family: var(--wp--preset--font-family--headline); font-size: 1.08rem; }
.cob-linkcard a { padding: .7rem 1.2rem; border-radius: 999px; background: var(--cob-accent-deep); color: #fff; font-size: .84rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cob-linkcard a:hover { background: var(--cob-accent); }

/* 산지 카드 */
.cob-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.2rem; }
.cob-cards article { padding: 1.4rem 1.5rem; border: 1px solid var(--cob-line); border-top: 3px solid var(--cob-accent); border-radius: .8rem; background: var(--cob-white); }
.cob-cards h3 { margin: .2rem 0 .5rem; font-family: var(--wp--preset--font-family--headline); font-size: 1.12rem; font-weight: 800; }
.cob-cards p { margin: 0; color: var(--cob-muted); font-size: .88rem; }
.cob-cards b { display: block; margin-top: .8rem; color: var(--cob-accent-deep); font-family: var(--wp--preset--font-family--headline); font-size: .92rem; }

/* 대응책 트랙 */
/* 사슬 4단계 — 박스 없이 1열로 쌓아 순서가 읽히게 한다. */
.cob-tracks { max-width: var(--cob-text); margin: 2.4rem auto 0; padding: 0; list-style: none; }
.cob-tracks li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 1.2rem; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.16); }
.cob-tracks li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.cob-tracks span { color: var(--cob-sub); font-family: var(--wp--preset--font-family--headline); font-size: 1.02rem; font-weight: 800; line-height: 1.5; }
.cob-tracks h3 { margin: 0 0 .45rem; color: #fff; font-family: var(--wp--preset--font-family--headline); font-size: 1.14rem; font-weight: 800; letter-spacing: -.02em; }
.cob-tracks p { margin: 0; color: var(--cob-ondark-muted); font-size: .95rem; }

/* 대응 방향 — 시점별 불릿
   800px wide 안에서 3열은 한 칸이 250px 남짓이라 한글 불릿이 무너진다.
   시점 블록이 정확히 3개일 때만 앞의 둘을 2열로 두고 마지막(장기)을
   가로 한 줄 박스로 펼친다. 2개·4개인 브리프는 기본 2열 흐름을 그대로 쓴다. */
.cob-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: 2.2rem; }
.cob-actions > section { padding: 1.5rem 1.6rem; border: 1px solid var(--cob-line); border-top: 3px solid var(--cob-sub); border-radius: .8rem; background: var(--cob-white); }
.cob-actions > section:nth-child(3):last-child { grid-column: 1 / -1; }
/* 가로 박스는 항목도 가로로 흘린다 — 800px 한 줄 산문이 되는 것을 막는다. */
.cob-actions > section:nth-child(3):last-child ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.6rem; }
.cob-actions > section:nth-child(3):last-child li { margin-bottom: 0; }
.cob-actions h3 { margin: 0 0 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--cob-line); color: var(--cob-accent-deep); font-family: var(--wp--preset--font-family--headline); font-size: 1rem; font-weight: 800; }
.cob-actions ul { margin: 0; padding: 0; list-style: none; }
.cob-actions li { margin-bottom: 1.05rem; color: var(--cob-muted); font-size: .88rem; line-height: 1.6; }
.cob-actions li:last-child { margin-bottom: 0; }
.cob-actions b { display: block; margin-bottom: .2rem; color: var(--cob-ink); font-family: var(--wp--preset--font-family--headline); font-size: .93rem; }
.cob-actions b::before { display: inline-block; width: .38rem; height: .38rem; margin: 0 .5rem .18rem 0; border-radius: 50%; background: var(--cob-sub); content: ""; }

/* CTA — 현장 의견 요청 */
.cob-cta { border-bottom: 0; background: linear-gradient(135deg, var(--cob-hero-a) 0%, var(--cob-hero-b) 60%, var(--cob-hero-c) 100%); color: var(--cob-ondark); }
.cob-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3.4rem; align-items: center; }
.cob-cta .cob-kicker { color: var(--cob-sub); }
.cob-cta h2 { margin: .9rem 0 1rem; max-width: 22ch; color: #fff; font-family: var(--wp--preset--font-family--headline); font-size: clamp(1.55rem, 2.9vw, 2.1rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.22; }
.cob-cta p { margin: 0; max-width: 62ch; color: var(--cob-ondark-muted); font-size: .96rem; }
.cob-cta__actions { display: flex; flex-direction: column; gap: .7rem; }
.cob-btn { display: block; padding: .92rem 1.4rem; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; color: #fff; font-family: var(--wp--preset--font-family--headline); font-size: .9rem; font-weight: 700; text-align: center; text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.cob-btn:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.cob-btn--primary { border-color: var(--cob-sub); background: var(--cob-sub); color: var(--cob-on-sub); }
.cob-btn--primary:hover { border-color: var(--cob-sub-hover); background: var(--cob-sub-hover); color: var(--cob-on-sub); }

/* 출처 */
/* 참고문헌 — single-report의 학술 참고문헌 footer 포맷을 공유한다. */
.cob-page .fnc-report-refs {
    max-width: var(--cob-text);
    margin: 0 auto;
    padding-top: 2rem;
    border-top: 2px solid #17463f;
}
.cob-page .fnc-report-refs h2 {
    margin: 0 0 1.25rem;
    color: #17463f;
    font-family: 'Manrope', 'Pretendard', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.cob-page .fnc-report-refs ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.cob-page .fnc-report-refs li,
.cob-page .fnc-report-refs p {
    margin: 0 0 .5rem;
    padding-left: 1.25rem;
    color: #4a524d;
    font-size: .875rem;
    line-height: 1.7;
    text-indent: -1.25rem;
    overflow-wrap: anywhere;
}
.cob-page .fnc-report-refs li::before {
    margin-right: .65rem;
    color: #17463f;
    font-weight: 800;
    text-indent: 0;
    content: "·";
}
.cob-page .fnc-report-refs a {
    color: #2f6f62;
    text-decoration: underline;
    text-underline-offset: .12em;
}
.cob-page .fnc-report-refs .fnc-reference-limit {
    margin-bottom: 1.25rem;
    padding-left: 0;
    color: #747c75;
    font-size: .8rem;
    text-indent: 0;
}
/* 레거시 품목 브리프가 아직 쓰는 출처 링크 구조. 신규 page-brief는 위
   fnc-report-refs 포맷을 사용하고, 기존 원고는 점진 이관한다. */
.cob-sources { max-width: var(--cob-text); margin: 2rem auto 0; }
/* 발행처를 고정폭 라벨 열로 두어 설명이 한 줄씩 같은 축에서 시작하게 한다.
   11rem = 가장 긴 발행처('국가데이터처(통계청)' + ↗) 기준. */
.cob-sources a { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; gap: 0 1.2rem; padding: .8rem 0; border-top: 1px solid var(--cob-line); text-decoration: none; }
.cob-sources a:last-child { border-bottom: 1px solid var(--cob-line); }
.cob-sources a:hover strong { color: var(--cob-accent); text-decoration: underline; }
.cob-sources strong { font-family: var(--wp--preset--font-family--headline); font-size: .93rem; }
.cob-sources strong::after { margin-left: .4rem; color: var(--cob-muted); font-size: .8rem; font-weight: 400; content: "↗"; }
.cob-sources span { color: var(--cob-muted); font-size: .84rem; }
.cob-legal { margin: 1.6rem 0 0; max-width: 90ch; color: #6b716f; font-size: .76rem; }
/* prev/next 이동 링크 — 출처 목록·법적 고지와 같은 text 폭에 정렬한다. */
.cob-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; max-width: var(--cob-text); margin: 2rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--cob-line); font-size: .86rem; font-weight: 700; }
/* 섹션 맨 위에 놓이면 구분선을 아래로 뒤집는다 — 위쪽에 선이 뜨는 것을 막는다. */
.cob-nav:first-child { margin: 0 auto 2.6rem; padding: 0 0 1.4rem; border-top: 0; border-bottom: 1px solid var(--cob-line); }

@media (max-width: 980px) {
    .cob-hero__grid { grid-template-columns: 1fr; gap: 2.4rem; }
    .cob-hero__meta { max-width: 28rem; }
    .cob-metrics { grid-template-columns: repeat(2, 1fr); }
    .cob-metrics div { border-bottom: 1px solid var(--cob-line); }
    .cob-metrics div:nth-child(2n) { border-right: 0; }
    .cob-summary, .cob-cards, .cob-actions { grid-template-columns: 1fr; }
    .cob-actions > section:nth-child(3):last-child ul { grid-template-columns: 1fr; gap: 1.05rem; }
    .cob-cta__inner { grid-template-columns: 1fr; gap: 2rem; }
    .cob-cta__actions { flex-direction: row; flex-wrap: wrap; }
    .cob-btn { flex: 1 1 12rem; }
}
@media (max-width: 720px) {
    .cob-page { --cob-gutter: 2.5rem; }
    .cob-section { padding: 3.5rem 0; }
    /* 자료 기준 — 좁은 폭에서는 라벨:값을 한 줄에 붙여 3행으로 접는다.
       3열을 유지하면 '2021~2026년산' 이 칸을 넘는다. */
    .cob-meta { grid-template-columns: 1fr; gap: .55rem; }
    .cob-meta div { display: flex; gap: .55rem; padding: 0; border-right: 0; }
    .cob-meta span { margin-bottom: 0; }
    .cob-metrics { grid-template-columns: 1fr; }
    .cob-metrics div { border-right: 0; }
    .cob-figure { padding: 1.1rem 1rem 1rem; }
    .cob-linkcard { flex-direction: column; align-items: flex-start; }
    /* 좁은 폭에서는 발행처 라벨 열을 접어 두 줄로 되돌린다. */
    .cob-sources a { grid-template-columns: 1fr; gap: .25rem; }
}