/* ── 長文版型：沿用 learn.css 的 token 與外殼，只補文章內文排版 ── */

.art-wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }

/* 麵包屑 */
.crumb {
    font-family: var(--font-mono); font-size: var(--t-label);
    color: var(--faint); letter-spacing: .04em;
    padding: clamp(5.5rem, 9vw, 7rem) 0 0;
}
.crumb a { color: var(--sub); text-decoration: none; transition: color .2s; }
.crumb a:hover { color: var(--gold); }
.crumb span { color: var(--faint); margin: 0 .5rem; }
.crumb .crumb-current { color: var(--text-hi); }

/* 標題區 */
.art-header { padding: 1.75rem 0 0; border-bottom: 1px solid var(--border); margin-bottom: 2.5rem; }
.art-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-mono); font-size: var(--t-label);
    color: var(--gold-dim); letter-spacing: .16em; text-transform: uppercase;
}
.art-title {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.22;
    color: var(--cream); margin: 1rem 0 0; letter-spacing: -.01em;
}
.art-title em { font-style: italic; color: var(--gold); }
.art-standfirst {
    font-size: var(--t-lg); line-height: 1.9; color: var(--text-hi);
    margin: 1.5rem 0 0; font-weight: 300;
}
.art-meta {
    display: flex; flex-wrap: wrap; gap: 1.25rem;
    font-family: var(--font-mono); font-size: var(--t-label);
    color: var(--faint); margin: 1.75rem 0 1.5rem;
}

/* 內文 */
.art-body { font-size: var(--t-base); line-height: 2.0; color: var(--text); }
.art-body > p { margin: 0 0 1.5rem; }
.art-body h2 {
    font-family: var(--font-body); font-weight: 500;
    font-size: var(--t-h3); color: var(--cream);
    margin: 3.25rem 0 1.25rem; letter-spacing: .01em; line-height: 1.5;
    padding-left: .9rem; border-left: 3px solid var(--gold);
}
.art-body h3 {
    font-family: var(--font-body); font-weight: 500; font-size: 1.05rem;
    color: var(--text-hi); margin: 2.25rem 0 .85rem;
}
.art-body strong { color: var(--cream); font-weight: 500; }
.art-body a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-faint); }
.art-body a:hover { border-bottom-color: var(--gold); }
.art-body ul, .art-body ol { margin: 0 0 1.5rem; padding-left: 1.4rem; }
.art-body li { margin-bottom: .7rem; }
.art-body li::marker { color: var(--gold-dim); }

/* 數據卡 */
.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px; background: var(--border); border: 1px solid var(--border);
    margin: 2rem 0;
}
.stat-cell { background: var(--ink); padding: 1.35rem 1.15rem; }
.stat-num {
    font-family: var(--font-display); font-size: 2.1rem; font-weight: 400;
    color: var(--gold); line-height: 1; display: block;
}
.stat-lab {
    font-size: var(--t-label); color: var(--sub); margin-top: .6rem;
    line-height: 1.65; display: block;
}

/* 重點引言 */
.art-pull {
    border-left: 3px solid var(--gold); background: rgba(196,162,101,.035);
    padding: 1.4rem 1.6rem; margin: 2.25rem 0;
    font-size: var(--t-lg); line-height: 1.85; color: var(--text-hi);
}
.art-pull strong { color: var(--gold); }

/* 但書／注意事項 */
.art-caveat {
    border: 1px solid var(--border-mid); background: var(--ink);
    padding: 1.35rem 1.5rem; margin: 2.25rem 0;
    font-size: var(--t-sm); line-height: 1.9; color: var(--sub);
}
.art-caveat-label {
    font-family: var(--font-mono); font-size: var(--t-label);
    color: var(--gold-dim); letter-spacing: .1em; text-transform: uppercase;
    display: block; margin-bottom: .6rem;
}

/* 表格 */
.art-table-wrap { overflow-x: auto; margin: 2rem 0; }
.art-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 420px; }
.art-table th {
    text-align: left; font-family: var(--font-mono); font-weight: 400;
    font-size: var(--t-label); color: var(--gold-dim); letter-spacing: .06em;
    padding: .8rem 1rem; border-bottom: 1px solid var(--border-mid); white-space: nowrap;
}
.art-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--border); color: var(--text); }
.art-table tr:last-child td { border-bottom: none; }
.art-table td strong { color: var(--cream); }

/* 來源標注 */
.art-source {
    font-family: var(--font-mono); font-size: var(--t-label);
    color: var(--faint); line-height: 1.8; margin: -0.6rem 0 2rem;
    padding-left: .9rem; border-left: 1px solid var(--border-mid);
}
.art-source a { color: var(--sub); border-bottom-color: var(--border-light); }

/* 頁尾導覽 */
.art-foot { border-top: 1px solid var(--border); margin-top: 4rem; padding-top: 2.5rem; }
.art-foot-label {
    font-family: var(--font-mono); font-size: var(--t-label);
    color: var(--faint); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.25rem;
}
.art-related { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.art-related a {
    background: var(--ink); padding: 1.1rem 1.35rem; text-decoration: none;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    color: var(--text-hi); font-size: var(--t-sm); transition: background .2s, color .2s;
}
.art-related a:hover { background: var(--surface); color: var(--gold); }
.art-related .arrow { color: var(--gold-dim); flex-shrink: 0; }

.art-cta {
    border: 1px solid var(--border-mid); background: var(--ink);
    padding: clamp(1.75rem, 4vw, 2.5rem); margin: 3rem 0 clamp(4rem, 8vw, 6rem); text-align: center;
}
.art-cta p { color: var(--text); font-size: var(--t-sm); line-height: 1.9; margin: 0 0 1.4rem; }
.art-cta strong { color: var(--cream); }

@media (max-width: 640px) {
    .art-body { font-size: .95rem; line-height: 1.95; }
    .stat-num { font-size: 1.8rem; }
}

/* ── 參考文獻 ── */
.art-refs { border-top: 1px solid var(--border); margin-top: 3.5rem; padding-top: 2rem; }
.ref-list { list-style: none; counter-reset: ref; padding: 0; margin: 0; }
.ref-list li {
    counter-increment: ref; position: relative;
    padding-left: 2.2rem; margin-bottom: 1.1rem;
    font-size: var(--t-sm); line-height: 1.85; color: var(--text);
}
.ref-list li::before {
    content: "[" counter(ref) "]"; position: absolute; left: 0; top: 0;
    font-family: var(--font-mono); font-size: var(--t-label); color: var(--gold-dim);
}
.ref-list em { font-style: italic; color: var(--text-hi); }
.ref-list a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-faint); }
.ref-list a:hover { border-bottom-color: var(--gold); }
.ref-note { display: block; color: var(--faint); font-size: var(--t-label); margin-top: .4rem; line-height: 1.7; }

/* 內文的引用標記 */
.ref-mark {
    font-family: var(--font-mono); font-size: .8em; color: var(--gold-dim);
    text-decoration: none; border: none !important; padding-left: .15em; vertical-align: super;
}
.ref-mark:hover { color: var(--gold); }
.art-refs li:target { background: rgba(196,162,101,.05); }