/* ═══ 財經快線 — 文章頁 · Newsprint Mobile-First（米白 × 墨藍 × 暗金）═══ */
:root {
  --paper: #f7f5f0;
  --paper2: #efebe3;
  --card: #fffefb;
  --ink: #14181c;
  --ink2: #3b4349;
  --muted: #79808a;
  --line: #e2ddd3;
  --line2: #c7c0b3;
  --brand: #123c5c;
  --brand2: #0a2b41;
  --accent: #a67c2e;
  --teal: #0d6b73;
  --up: #c0392b;
  --down: #0d7a4c;
  --serif: "Songti TC", "Noto Serif CJK TC", "Source Han Serif TC", "PMingLiU", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "PingFang SC", "Microsoft JhengHei", "Noto Sans CJK TC", "Segoe UI", sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  -webkit-text-size-adjust: 100%
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 15px;
  -webkit-font-smoothing: antialiased
}

img {
  max-width: 100%;
  display: block
}

a {
  color: inherit;
  text-decoration: none
}

::selection {
  background: rgba(18, 60, 92, .16)
}

.num {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono)
}

.loading {
  padding: 30px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: .08em
}

/* 頂欄 */
.topbar {
  background: var(--ink);
  color: var(--paper2);
  font-size: 10px;
  letter-spacing: 1.6px;
  font-family: var(--mono)
}

.topbar-inner {
  padding: 7px 16px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center
}

/* 刊頭 */
.masthead {
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  padding: 14px 16px 12px;
  position: sticky;
  top: 0;
  z-index: 30
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--brand);
  color: #f4f2ec;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 900
}

.logo-text {
  display: block;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--ink)
}

.logo-text em {
  font-style: normal;
  color: var(--brand)
}

.logo-sub {
  display: none
}

.btn-back {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
  border: 1px solid var(--line2);
  background: var(--card);
  padding: 8px 13px
}

.btn-back:active {
  background: var(--paper2)
}

main {
  padding: 0 16px 44px
}

/* ── 文章本體 ── */
.art {
  padding-top: 20px;
  min-width: 0
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  font-family: var(--mono)
}

.kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--accent)
}

.art h1 {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: .3px;
  margin-bottom: 12px
}

.dek {
  font-family: var(--serif);
  font-size: 15.5px;
  color: var(--ink2);
  line-height: 1.75;
  margin-bottom: 16px
}

.byline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted);
  padding: 11px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px
}

.byline-src {
  color: var(--brand);
  font-weight: 800;
  letter-spacing: .4px
}

.art-cover {
  margin: 0 -16px 22px;
  background: var(--paper2)
}

.art-cover img {
  width: 100%
}

.art-body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.92;
  color: var(--ink)
}

.art-body p {
  margin-bottom: 19px
}

/* 小標題分級：編號徽標 + 標題 */
.art-body h2 {
  font-size: 19.5px;
  font-weight: 900;
  color: var(--ink);
  margin: 32px 0 13px;
  line-height: 1.45;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line)
}

.art-body h2 .ht {
  display: block
}

.art-body h2.numbered {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: baseline
}

.art-body h2 .hn {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -1px;
  line-height: 1
}

.art-body h3 {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 800;
  color: var(--brand);
  margin: 24px 0 9px;
  padding-left: 10px;
  border-left: 3px solid var(--brand)
}

.art-body a {
  color: var(--brand);
  border-bottom: 1px solid rgba(18, 60, 92, .4)
}

.art-body strong,
.art-body b {
  font-weight: 800
}

.art-body .empty,
.empty {
  font-family: var(--sans);
  text-align: center;
  color: var(--muted);
  padding: 44px 0;
  font-size: 13.5px
}

.empty a {
  color: var(--brand);
  font-weight: 700
}

.art-body ul,
.art-body ol {
  margin: 0 0 19px 20px
}

.art-body li {
  margin-bottom: 7px
}

.art-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-family: var(--sans);
  font-size: 13px;
  background: var(--card);
  border: 1px solid var(--line)
}

.art-body th {
  background: var(--paper2);
  text-align: left;
  padding: 9px 11px;
  font-size: 11.5px;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--line2);
  font-weight: 800
}

.art-body td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  color: var(--ink2)
}

.art-body tr:last-child td {
  border-bottom: none
}

.art-body blockquote {
  margin: 0 0 20px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--teal);
  color: var(--ink2);
  font-style: italic
}

.art-body img {
  margin: 4px 0 20px;
  border: 1px solid var(--line)
}

.disclaimer {
  margin-top: 30px;
  padding: 14px 15px;
  background: var(--paper2);
  border-left: 3px solid var(--line2);
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.8
}

/* ── 相關報道 ── */
.related {
  margin-top: 32px;
  border-top: 2px solid var(--ink);
  padding-top: 14px
}

.related h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .5px;
  margin-bottom: 6px
}

.rel-item {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line)
}

.rel-item:last-child {
  border-bottom: none
}

.rel-item h4 {
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 4px
}

.rel-item span {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono)
}

/* 搜索結果模式 */
.search-item {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--line)
}

.search-item h4 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 5px;
  line-height: 1.5
}

.search-item p {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.7;
  margin-bottom: 5px
}

.search-item span {
  font-size: 11px;
  color: var(--brand);
  font-weight: 700
}

/* 頁腳 */
.site-footer {
  border-top: 1px solid var(--line2);
  background: var(--paper2)
}

.site-footer-inner {
  padding: 20px 16px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.7
}

.site-footer a {
  color: var(--brand);
  font-weight: 700
}

/* ═══ 平板 ≥640px ═══ */
@media(min-width:640px) {
  body {
    font-size: 16px
  }

  main {
    padding: 0 24px 56px
  }

  .masthead {
    padding: 18px 24px 14px
  }

  .topbar-inner {
    padding: 8px 24px
  }

  .logo-text {
    font-size: 31px
  }

  .brand-mark {
    width: 40px;
    height: 40px;
    font-size: 23px
  }

  .art h1 {
    font-size: 33px
  }

  .art-cover {
    margin: 0 0 26px;
    border: 1px solid var(--line)
  }

  .art-body {
    font-size: 17.5px
  }
}

/* ═══ 桌面 ≥1000px ═══ */
@media(min-width:1000px) {

  .topbar-inner,
  .masthead-inner,
  main,
  .site-footer-inner {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto
  }

  .masthead {
    position: static;
    padding: 24px 24px 16px
  }

  .logo-text {
    font-size: 36px;
    letter-spacing: 2px
  }

  .logo-sub {
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 3.5px;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 5px
  }

  .brand-mark {
    width: 46px;
    height: 46px;
    font-size: 26px
  }

  .btn-back {
    padding: 10px 18px;
    transition: all .15s
  }

  .btn-back:hover {
    color: var(--brand);
    border-color: var(--brand)
  }

  main {
    padding: 0 24px 70px;
    display: grid;
    grid-template-columns: minmax(0, 720px) 320px;
    gap: 0 48px;
    justify-content: center;
    align-items: start
  }

  .art {
    padding-top: 36px
  }

  .art h1 {
    font-size: 38px;
    letter-spacing: .5px
  }

  .dek {
    font-size: 17px
  }

  .art-body h2 {
    font-size: 23px
  }

  .art-body h2 .hn {
    font-size: 29px
  }

  .related {
    margin-top: 36px;
    position: sticky;
    top: 24px;
    height: max-content
  }

  .rel-item h4 {
    color: var(--ink2);
    transition: color .15s
  }

  .rel-item:hover h4 {
    color: var(--brand)
  }

  .search-item:hover h4 {
    color: var(--brand)
  }

  .site-footer-inner {
    flex-direction: row;
    justify-content: space-between;
    padding: 26px 24px
  }
}