/*
 * 아티클 본문 스타일.
 *
 * 폭·크기·간격은 anthropic.com/research 글 한 편을 260917 에 실측한 값이다
 * (본문 칼럼 640, 미디어 880, 본문 17/26.35, h2 25/600, 캡션 14).
 * 색만 우리 테마 토큰을 쓴다 — 저쪽 크림색을 그대로 가져오지 않는다.
 *
 * 여기 있는 선택자는 전부 .article-body 안쪽이다.
 * 허용 태그 목록(src/services/board/articleHtmlContract.js)에 있는 태그만 다룬다.
 */

:root {
    --article-column: 640px;
    --article-media: 880px;
    --article-gutter: 16px;

    /* 사이트가 쓰는 고딕 하나로 간다 — styles.css 의 --font-family(Pretendard).
       커뮤니티 메인 16px/1.6, 게시글 상세 16.8px/1.9 를 재서 그 사이에 맞췄다. */
    --article-sans: var(--font-family);
    --article-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    /* 본문 글자는 기본 텍스트보다 한 단 진하게 — 길게 읽는 화면이다 */
    --article-ink-light: #141413;
    --article-ink-dark: #edf0f3;
    --article-rule-light: #141413;
    --article-rule-dark: #6d6d6a;
    /* 축·눈금·축라벨의 색. 계열 색은 CSS 가 아니라 SVG 의 Okabe-Ito hex 가 갖는다
       (network_pharmacology `code/scripts/_figstyle.py` 의 규칙). */
    --article-chart-ink-light: #4a4a46;
    --article-chart-ink-dark: #b9b9b3;
    /* 코드 상자는 중성 회색이다 — 전역 --color-code-bg 는 밝은 화면에서 남색(#0f1d31),
       어두운 화면에서 바닥과 같은 #111110 이라 둘 다 쓰지 않는다(260918 실측). */
    --article-panel-light: #f7f6f4;
    --article-panel-dark: #1a1a19;
    --article-code-bg-light: #f2f1ef;
    --article-code-bg-dark: #1d1d1c;
    --article-code-ink-light: #2b2b29;
    --article-code-ink-dark: #e4e4e1;
    /* 복사 버튼 호버 — 검정을 덮지 않고 코드 상자 색에서 한 단만 내린다 */
    --article-code-hover-light: #e7e6e2;
    --article-code-hover-dark: #2b2b29;

    --article-ink: var(--article-ink-light);
    --article-rule: var(--article-rule-light);
    --article-chart-ink: var(--article-chart-ink-light);
    --article-panel: var(--article-panel-light);
    --article-code-bg: var(--article-code-bg-light);
    --article-code-ink: var(--article-code-ink-light);
    --article-code-hover: var(--article-code-hover-light);
}

body[data-theme="dark"] {
    --article-ink: var(--article-ink-dark);
    --article-rule: var(--article-rule-dark);
    --article-chart-ink: var(--article-chart-ink-dark);
    --article-panel: var(--article-panel-dark);
    --article-code-bg: var(--article-code-bg-dark);
    --article-code-ink: var(--article-code-ink-dark);
    --article-code-hover: var(--article-code-hover-dark);
}

/* ── 머리 ─────────────────────────────────────────────── */

.article-hero {
    padding: 56px var(--article-gutter) 0;
    text-align: center;
}

.article-subject {
    font-family: var(--article-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

.article-title {
    font-family: var(--article-sans);
    font-size: 34px;
    line-height: 1.22;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--article-ink);
    max-width: var(--article-media);
    margin: 0 auto 20px;
}

.article-byline {
    font-family: var(--article-sans);
    font-size: 14px;
    color: var(--color-text-muted);
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.article-hero-image {
    display: block;
    width: min(100%, var(--article-media));
    margin: 40px auto 0;
    border-radius: 4px;
}

/* ── 본문 ─────────────────────────────────────────────── */

.article-body {
    padding: 48px var(--article-gutter) 64px;
    font-family: var(--article-sans);
    font-size: 16px;
    line-height: 28px;
    color: var(--article-ink);
}

/*
 * styles.css 는 `* { font-family: … }` 로 모든 요소에 글꼴을 직접 박는다.
 * 상속이 아니라 직접 지정이라 본문에서 정한 글꼴이 문단까지 내려오지 못한다.
 * 아티클 안에서만 상속으로 되돌린다.
 */
.article-body *,
.article-hero * {
    font-family: inherit;
}

/* 기본은 읽는 칼럼. 넓게 쓰는 것만 .wide 로 빠져나간다. */
.article-body > * {
    max-width: var(--article-column);
    margin-left: auto;
    margin-right: auto;
}

.article-body > figure,
.article-body > .wide {
    max-width: var(--article-media);
}

.article-body p {
    margin: 0 auto 16px;
}

.article-body p.lead {
    font-size: 17px;
    line-height: 30px;
}

.article-body h2 {
    font-family: var(--article-sans);
    font-size: 21px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 32px auto 8px;
}

.article-body h3 {
    font-family: var(--article-sans);
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
    margin: 24px auto 6px;
}

.article-body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.article-body a:hover {
    color: var(--color-primary);
}

.article-body ul,
.article-body ol {
    margin: 0 auto 16px;
    padding-left: 24px;
}

.article-body li {
    margin-bottom: 6px;
}

.article-body blockquote {
    margin: 0 auto 16px;
    padding-left: 16px;
    border-left: 1px solid var(--color-border-default);
}

.article-body hr {
    border: 0;
    border-top: 1px solid var(--color-border-default);
    margin: 32px auto;
}

.article-body figure {
    margin: 32px auto;
}

/*
 * 본문 맨 앞의 그림은 표지다.
 * 앤트로픽 리서치 글의 표지가 가로로 긴 띠라 여기서도 2:1 로 잘라 쓴다 —
 * 원본 비율을 그대로 쓰면 첫 화면이 그림 하나로 다 찬다.
 */
.article-body > figure:first-child {
    overflow: hidden;
    border-radius: 4px;
}

.article-body > figure:first-child img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
    /* 표지 그림의 무게 중심이 오른쪽으로 치우쳐 있어 왼쪽으로 당겨 자른다.
       px 로 밀면 화면이 좁아질수록 상대적으로 더 밀리므로 비율로 민다
       (0.6% — 폭 853 에서 5px). 폭을 그만큼 늘려 오른쪽에 빈 자리가 생기지 않게 한다. */
    width: 100.6%;
    margin-left: -0.6%;
    border-radius: 0;
}

.article-body figure img,
.article-body figure video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.article-body figcaption {
    font-family: var(--article-sans);
    font-size: 13px;
    line-height: 20px;
    color: var(--color-text-muted);
    margin-top: 10px;
    /* 가운데 정렬은 한 줄짜리에서만 읽히고 두 줄부터 어그러진다 — 왼쪽으로 붙인다 */
    text-align: left;
}

/* ── 표 ───────────────────────────────────────────────── */

.article-body table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--article-sans);
    font-size: 14px;
    line-height: 22px;
    margin: 32px auto;
}

.article-body caption {
    font-family: var(--article-sans);
    font-size: 14px;
    color: var(--color-text-muted);
    text-align: left;
    padding-bottom: 10px;
}

.article-body th,
.article-body td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border-default);
}

.article-body thead th {
    /* 머리행은 배경 없이 굵기와 아래 선으로만 가른다 */
    font-weight: 600;
    border-bottom: 1px solid var(--article-rule);
}

/* theme.dark.css 는 어두운 화면의 모든 `table th` 에 배경을 준다(79행).
   아티클에서는 두 화면이 갈리지 않게 꺼 둔다. */
body[data-theme="dark"] .article-body table thead,
body[data-theme="dark"] .article-body table th {
    background: transparent;
}

.article-body tbody tr:last-child td {
    border-bottom: 1px solid var(--article-rule);
}

/*
 * ── 그래프 ───────────────────────────────────────────────
 *
 * 출처가 둘이다.
 *  (1) 색과 「군더더기를 그리지 않는다」 — network_pharmacology `code/scripts/_figstyle.py`
 *      (FIGURE_STYLE.md, Nature 스타일). 위·오른쪽 축선 없음, 세로 격자 없음, 범례 테두리 없음.
 *  (2) 지면 규칙 — 웹 도표 쪽 표준. Our World in Data 실측 · Datawrapper · Urban Institute.
 *      `docs/70_Reviews/REV 260918 웹 도표 디자인 조사 …`
 *
 * (1) 은 인쇄용이라 웹에서 그대로 쓰면 어긋나는 데가 있어서, 아래 넷은 (2) 를 따른다.
 *  - 회전한 세로 축 제목을 쓰지 않는다. 단위는 눈금값에 붙인다(`30건`)
 *  - 범례 대신 선·막대 옆에 계열 이름을 그 계열 색으로 직접 적는다(.chart-label)
 *  - 가로 격자는 연한 점선으로 허용한다(.chart-grid). 값을 직접 적었으면 격자는 뺀다
 *  - 글자는 12px 아래로 내려가지 않는다
 */

/*
 * 그래프는 확대·축소하지 않는다.
 *
 * SVG 글자는 viewBox 좌표라 컨테이너 폭에 비례해 늘고 준다. 실제로 재 보니
 * 폭 640 짜리 그림이 데스크톱에서 13.3px, 폰 375 에서 5.1px 로 찍혔다(260918 실측).
 * 그래서 640 을 넘겨 키우지 않고, 560 아래로도 줄이지 않는다. 폰에서는 옆으로 민다.
 * 글자를 읽을 수 없게 만드느니 가로로 밀게 하는 편이 낫다.
 */
.article-body figure.chart {
    /* 판 폭 640 + 좌우 안여백 16 씩 */
    max-width: 672px;
    overflow-x: auto;
}

/*
 * 그림 제목 — 판 안, 그래프 위에 굵게 가운데.
 *
 * 제목을 SVG 안에 넣으면 그림 배율을 타서 폰에서 같이 줄어든다. 그래서 HTML 로 두되,
 * 판 색과 모서리를 그래프 쪽과 이어 붙여 **두 상자가 한 장으로 보이게** 한다.
 * 상자 치수(box-sizing·width·min/max·좌우 안여백)를 svg 와 똑같이 맞춰야
 * 폰에서 옆으로 밀 때 제목과 그림이 같이 움직인다.
 *
 * 짜임의 출처는 앤트로픽 Economic Index 2026-06 「The workweek」·「Overtime」.
 * 「무엇을 그렸나」를 두세 낱말로 끊어 적는다. 설명하는 문장은 아래 캡션이 맡는다.
 */
.article-body figure.chart .chart-title {
    box-sizing: content-box;
    width: 100%;
    min-width: 560px;
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 16px 0;
    background: var(--article-panel);
    border-radius: 8px 8px 0 0;

    font-family: var(--article-sans);
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    text-align: center;
    color: var(--article-ink);
}

/*
 * 그래프는 판 위에 올린다 — 둥근 모서리, 넉넉한 안여백, 테두리 선 없음.
 * 글과 그림의 경계를 선이 아니라 바닥색으로 가른다.
 *
 * 그리고 확대·축소하지 않는다. SVG 글자는 viewBox 좌표라 컨테이너 폭에 비례해 늘고 준다.
 * 실제로 재 보니 폭 640 짜리 그림이 데스크톱 13.3px, 폰 375 에서 5.1px 로 찍혔다(260918 실측).
 * 그래서 640 을 넘겨 키우지 않고 560 아래로도 줄이지 않는다. 폰에서는 옆으로 민다.
 * box-sizing 을 content-box 로 두는 것은 안여백이 그림 폭을 갉아먹지 않게 하려는 것이다.
 */
.article-body figure.chart svg {
    display: block;
    box-sizing: content-box;
    width: 100%;
    min-width: 560px;
    max-width: 640px;
    height: auto;
    margin: 0 auto;
    padding: 20px 16px 16px;
    background: var(--article-panel);
    border-radius: 8px;
    /* svg 안의 currentColor — 축·눈금·눈금 글자가 화면 테마를 따라온다 */
    color: var(--article-chart-ink);
}

/*
 * 카드 폭(560+32=592)에 본문 좌우 여백(48)을 더하면 640 이다. 그보다 좁은 화면에서는
 * 카드가 화면을 넘어가서, 가운데 맞춘 제목이 오른쪽으로 밀려 안 보인다. 왼쪽으로 붙인다.
 * 임의로 고른 폭이 아니라 카드가 넘치기 시작하는 폭이다(실측: 폰 375 에서 카드 592 · 여백 48).
 */
@media (max-width: 639px) {
    .article-body figure.chart .chart-title {
        text-align: left;
    }
}

/* 제목이 앞에 서면 위쪽 모서리를 펴고 위 여백을 줄인다 — 이어 붙여 한 장으로 */
.article-body figure.chart .chart-title + svg {
    padding-top: 14px;
    border-radius: 0 0 8px 8px;
}

/* 주말·기간처럼 배경으로 표시하는 구간 */
.article-body figure.chart svg .chart-band {
    fill: currentColor;
    opacity: 0.09;
}

/* 글자 크기는 본문 HTML 이 아니라 여기가 정한다 — svg 의 font-size 속성은 검사기가 막는다 */
.article-body figure.chart svg text {
    font-family: var(--article-sans);
    font-size: 12px;
}

.article-body figure.chart svg .chart-label,
.article-body figure.chart svg .chart-value {
    font-weight: 600;
}

/* 가로 격자 — 있는 듯 없는 듯. 세로 격자는 쓰지 않는다 */
.article-body figure.chart svg .chart-grid {
    stroke: currentColor;
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0.3;
}

/* 축선·기준선 */
.article-body figure.chart svg .chart-axis {
    stroke: currentColor;
    stroke-width: 0.8;
}

/*
 * 어두운 화면의 계열 색.
 *
 * Okabe-Ito 는 흰 바탕 전제라 어두운 바탕에서 여덟 색 대비를 다시 쟀다.
 * 5:1 아래로 떨어지는 것은 blue(3.67)·vermillion(4.92) 둘뿐이라 그 둘만 바꾼다.
 * 글쓴이는 밝은 화면 값만 적고, 갈아 끼우는 일은 여기서 한다.
 * 짝의 산출 근거는 `articleHtmlContract.js` 의 CHART_COLORS_DARK.
 */
body[data-theme="dark"] .article-body figure.chart [fill="#0072B2" i] { fill: #0093E6; }
body[data-theme="dark"] .article-body figure.chart [stroke="#0072B2" i] { stroke: #0093E6; }
body[data-theme="dark"] .article-body figure.chart [fill="#D55E00" i] { fill: #F76D00; }
body[data-theme="dark"] .article-body figure.chart [stroke="#D55E00" i] { stroke: #F76D00; }

/* 다패널 그림의 a, b 라벨 */
.article-body figure.chart .panel-label {
    font-size: 13px;
    font-weight: 700;
}

/* 캡션 아래 재현 정보 — 값·N·출처. 캡션보다 한 단 더 물러난다 */
.article-body figure .chart-params {
    font-family: var(--article-sans);
    font-size: 12px;
    line-height: 18px;
    color: var(--color-text-muted);
    text-align: left;
    margin: 4px auto 0;
    opacity: 0.85;
}

/* ── 코드 ─────────────────────────────────────────────── */

/*
 * 코드 상자와 복사 버튼.
 * 버튼은 본문 HTML 이 아니라 화면이 붙인다 — `button` 은 허용 태그가 아니다.
 * 렌더러가 <pre> 를 .article-code 로 감싸고 버튼을 하나 넣는다.
 */
.article-body .article-code {
    position: relative;
    max-width: var(--article-column);
    margin: 24px auto;
}

.article-body pre {
    background: var(--article-code-bg);
    color: var(--article-code-ink);
    font-family: var(--article-mono);
    font-size: 13.5px;
    line-height: 20px;
    padding: 16px 18px;
    border-radius: 6px;
    overflow: auto;
    max-height: 480px;
    margin: 24px auto;
}

.article-body .article-code pre {
    margin: 0;
}

.article-code-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, background-color 0.12s ease;
}

.article-code-copy svg {
    width: 16px;
    height: 16px;
}

/* 마우스가 없는 화면에서는 늘 보인다 — 호버가 없으면 닿을 길이 없다 */
@media (hover: none) {
    .article-code-copy {
        opacity: 1;
    }
}

.article-code:hover .article-code-copy,
.article-code-copy:focus-visible {
    opacity: 1;
}

.article-code-copy:hover {
    color: var(--color-text-primary);
    background: var(--article-code-hover);
}

.article-code-copy[data-state="done"] {
    opacity: 1;
    color: var(--color-success);
}

.article-body :not(pre) > code {
    font-family: var(--article-mono);
    font-size: 0.92em;
    background: var(--article-code-bg);
    color: var(--article-code-ink);
    border-radius: 3px;
    padding: 1px 5px;
}

/* ── 상자 문단 ────────────────────────────────────────── */

/* 상자 문단은 배경만으로 구분한다 — 강조색 세로선은 쓰지 않는다 */
.article-body p.callout {
    background: var(--color-surface-alt);
    padding: 16px 18px;
    border-radius: 6px;
    margin-bottom: 24px;
}

/* ── 각주 ─────────────────────────────────────────────── */

.article-body sup {
    font-family: var(--article-sans);
    font-size: 11px;
    line-height: 0;
    vertical-align: super;
}

.article-body sup a {
    text-decoration: none;
    color: var(--color-primary);
    padding: 0 1px;
}

.article-body ol.footnotes {
    font-family: var(--article-sans);
    font-size: 13px;
    line-height: 21px;
    color: var(--color-text-muted);
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-default);
}

.article-body ol.footnotes li {
    margin-bottom: 10px;
}

.article-body ol.footnotes a {
    color: inherit;
}

.article-body .footnote-back {
    text-decoration: none;
    margin-left: 4px;
}

/* ── 목차 ─────────────────────────────────────────────── */

.article-toc {
    position: sticky;
    top: 96px;
    font-family: var(--article-sans);
    font-size: 13px;
    line-height: 19px;
    color: var(--color-text-muted);
    display: none;
}

.article-toc a {
    display: block;
    padding: 5px 0;
    color: inherit;
    text-decoration: none;
}

.article-toc a:hover {
    color: var(--color-primary);
}

/*
 * 목차는 미디어 폭(880) 바깥에 자리가 실제로 남을 때만 띄운다.
 * 필요한 폭: 880/2 + 사이 24 + 목차 180 + 바깥 여백 16 = 중앙에서 660 → 1320.
 */
@media (min-width: 1320px) {
    .article-toc {
        display: block;
        position: fixed;
        left: calc(50% - var(--article-media) / 2 - 204px);
        width: 180px;
    }
}

/* ── 좁은 화면 ────────────────────────────────────────── */

@media (max-width: 720px) {
    .article-hero {
        padding-top: 32px;
    }

    .article-title {
        font-size: 30px;
    }

    .article-body {
        padding-top: 32px;
        font-size: 17px;
    }

    .article-body h2 {
        font-size: 22px;
    }

    .article-body table {
        display: block;
        overflow-x: auto;
    }
}

/*
 * 고전 인용.
 *
 * 본문에는 주소만 적혀 있고 원문·번역·권은 볼 때 채워진다(js/article-render.js).
 * 그래서 세 가지 모양을 다 갖춰야 한다 — 채우는 중 · 채워짐 · 못 채움.
 *
 * 판(--article-panel) 위에 올린다. 그래프 카드와 같은 판이다 —
 * 「본문이 아니라 데려온 것」이 둘의 공통점이고, 독자가 그 차이를 판으로 읽는다.
 */
.article-body figure.classic {
    max-width: var(--article-column);
    margin: 28px auto;
    padding: 20px 22px;
    background: var(--article-panel);
    border-radius: 8px;
}

/* 한문 원문. 세로로 길게 읽는 글이 아니라 한 조각이므로 줄 간격을 본문보다 넓게 준다. */
.article-body figure.classic .classic-original {
    margin: 0;
    font-size: 17px;
    line-height: 30px;
    color: var(--article-ink);
    word-break: keep-all;
    /* 띄어쓰기 없이 이어지는 원문(동의보감 등)은 keep-all 이 통째로 한 낱말로 봐 판 밖으로 나간다 */
    overflow-wrap: anywhere;
}

.article-body figure.classic .classic-translation {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 27px;
    color: var(--article-chart-ink);
}

.article-body figure.classic figcaption {
    margin: 14px 0 0;
    padding: 0;
    font-size: 13px;
    line-height: 20px;
    text-align: left;
    color: var(--article-chart-ink);
}

.article-body figure.classic figcaption a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-default);
}

.article-body figure.classic figcaption a:hover { color: var(--article-ink); }

/* 문장 안의 고전 링크 — 아이콘은 렌더러가 붙인다(article-render.js decorateInlineClassics) */
.article-body a.classic-inline {
    color: inherit;
    /* 약어(abbr)의 표준 모양과 같은 점선. 기준선에 붙으면 《》 아랫부분과 겹쳐 끊기므로 띄운다 */
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    white-space: nowrap;
}

.article-body a.classic-inline i {
    margin: 0 4px;
    font-size: 0.8em;
    /* 글리프가 글자보다 1.2px 낮게 앉는다 — 0.1em 올리면 두 중심이 0.1px 안으로 맞는다 */
    vertical-align: 0.1em;
    opacity: 0.7;
}

.article-body a.classic-inline:hover i { opacity: 1; }

/* 채우기 전·못 채웠을 때 — 글쓴이가 적어 둔 고전 이름 링크가 그대로 남는다 */
.article-body figure.classic > a {
    color: var(--article-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-default);
}

.article-body figure.classic[data-state="loading"] > a { opacity: 0.55; }

.article-body figure.classic .classic-note {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--article-chart-ink);
}