/* 視覺規格見 design/設計交接說明.md。品牌色與各類型的識別色都用變數，換配色只改這一段。 */
:root {
  --brand: #5546BD;
  --brand-contrast: #FFFFFF;
  --highlight: #D9D1FF;
  --highlight-text: #2B2163;
  --page-bg: #F6F4FE;
  --surface: #FFFFFF;
  --border: #DDD7F5;
  --border-strong: #D3CCF2;
  --tag-bg: #EEEAFD;
  --text: #1F2328;
  --text-muted: #5A6070;
  --text-soft: #3B3F47;

  --type-issue: #8A4200;
  --type-policy: #0B5F7A;
  --type-event: #6B7280;
  --type-event-badge: #4B5563;
  --verdict-false: #B3261E;
  --verdict-partly-false: #F5B800;
  --verdict-partly-false-text: #3D2E00;
  --verdict-true: #2E7D32;

  --font-body: 'Noto Sans TC', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --tap-min: 44px;
  --radius-card: 14px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: var(--text);
}

a:hover {
  color: var(--text-muted);
}

h1, h2, p, ol, dl, dd, figure {
  margin: 0;
}

ol {
  padding: 0;
  list-style: none;
}

.icon {
  flex: none;
}

.date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

/* ── 頁首 ─────────────────────────────────────────── */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-header__brand {
  align-self: flex-start;
  min-height: var(--tap-min);
  display: flex;
  align-items: baseline;
  align-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  text-decoration: none;
}

.site-header__name {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--highlight-text);
  background: var(--highlight);
  padding: 2px 10px;
  border-radius: 4px;
}

.site-header__tagline {
  font-size: 13px;
  color: var(--text-muted);
}

.type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.type-tabs__tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 18px;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.type-tabs__tab--active,
.type-tabs__tab--active:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-contrast);
  font-weight: 700;
}

/* 主題籤：窄螢幕時橫向滑動，不換行 */
.topic-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.topic-chips__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 14px;
  border-radius: 999px;
  background: var(--tag-bg);
  font-size: 14px;
  text-decoration: none;
}

.topic-chips__chip--active,
.topic-chips__chip--active:hover {
  background: var(--highlight);
  color: var(--highlight-text);
  font-weight: 700;
}

/* ── 版面：動態牆欄位 + 右側欄，窄螢幕時右側欄自動排到下方 ── */

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px 16px 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}

.feed {
  flex: 999 1 560px;
  min-width: 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feed__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feed__more,
.feed__end {
  padding: 12px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

.feed__retry {
  min-height: var(--tap-min);
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
}

.pager__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  font-weight: 700;
  text-decoration: none;
}

.pager__position {
  font-size: 14px;
  color: var(--text-muted);
}

/* 無限捲動啟用後，動態牆會自己往下接，頁碼分頁不必再顯示 */
.infinite-scroll .pager {
  display: none;
}

.sidebar {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar__box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar__title {
  font-size: 16px;
  font-weight: 700;
}

.sidebar__text {
  color: var(--text-muted);
}

.sidebar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.sidebar__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-weight: 700;
}

/* ── 關於頁與方法頁的長文 ─────────────────────────── */

.prose__list {
  margin: 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prose .facts__row dd {
  margin: 0;
}

/* ── 共用的小標示 ─────────────────────────────────── */

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--text-muted);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}

/* 識別色：類型各有一色，查核跟著判定走。徽章、卡片頂部色條與查核橫幅共用 */
.tone-bg--issue {
  background: var(--type-issue);
}

.tone-bg--policy {
  background: var(--type-policy);
}

.tone-bg--event {
  background: var(--type-event-badge);
}

.card__bar.tone-bg--event {
  background: var(--type-event);
}

.tone-bg--verdict-false {
  background: var(--verdict-false);
  color: #FFFFFF;
}

.tone-bg--verdict-partly-false {
  background: var(--verdict-partly-false);
  color: var(--verdict-partly-false-text);
}

.tone-bg--verdict-true {
  background: var(--verdict-true);
  color: #FFFFFF;
}

/* 查核的類型籤用描邊，把實心的顏色留給判定 */
.type-badge.tone-bg--fact-check {
  padding: 2px 10px;
  border: 1.5px solid var(--brand);
  background: var(--surface);
  color: var(--brand);
}

.topic {
  font-size: 14px;
  color: var(--text-muted);
}

/* 議題進度：每一種的邊框樣式、底色與圖示都不同，轉成黑白也分得出來 */
.stage {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 10px 1px 8px;
  border: 1.5px solid #4B5563;
  border-radius: 999px;
  background: var(--surface);
  color: #374151;
  font-size: 13px;
  font-weight: 700;
}

.stage--proposed {
  border-style: dashed;
}

.stage--in_review {
  background: #E5E7EB;
  color: #1F2937;
}

.stage--passed {
  border-color: #1F2937;
  background: #1F2937;
  color: #FFFFFF;
}

.stage--in_effect {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-contrast);
}

.stage--withdrawn {
  border-color: #6B7280;
  background: #F3F4F6;
  color: #4B5563;
}

.stage--under_review_court {
  border-color: var(--type-issue);
  color: var(--type-issue);
}

.party-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.party-label {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--text);
  border-radius: 4px;
  overflow: hidden;
  font-size: 13px;
}

.party-label__party {
  padding: 1px 8px;
  font-weight: 700;
}

.party-label__role {
  padding: 1px 8px;
  background: var(--text);
  color: #FFFFFF;
  font-weight: 500;
}

.source-refs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 12px;
}

.source-ref {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-mono);
  font-size: 13px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap-min);
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

.button--primary,
.button--primary:hover {
  flex: 1;
  min-height: 48px;
  padding: 0 16px;
  background: var(--brand);
  color: var(--brand-contrast);
}

.button--outline,
.button--outline:hover {
  min-height: 48px;
  padding: 0 16px;
  border: 2px solid var(--brand);
  background: var(--surface);
  color: var(--brand);
}

/* 時事狀態：樣式語彙與議題進度相同 */
.event-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 9px;
  border: 1.5px solid #4B5563;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.event-status--upcoming {
  border-style: dashed;
  background: var(--surface);
  color: #374151;
}

.event-status--ongoing {
  background: #E5E7EB;
  color: #1F2937;
}

.event-status--concluded {
  border-color: #1F2937;
  background: #1F2937;
  color: #FFFFFF;
}

/* ── 草稿與預覽頁（僅開發模式）────────────────────── */

.draft-notice,
.preview__alert {
  padding: 8px 12px;
  border: 2px dashed var(--verdict-false);
  border-radius: 8px;
  color: var(--verdict-false);
  font-weight: 700;
}

.source__unverified,
.preview__flag {
  color: var(--verdict-false);
  font-weight: 700;
}

.preview {
  max-width: 1280px;
}

.preview__phone {
  flex: none;
  width: 390px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preview__frame {
  width: 390px;
  max-width: 100%;
  height: 780px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--page-bg);
}

.preview__frame--card {
  height: 560px;
}

.preview__main {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.preview__hint {
  font-size: 14px;
  color: var(--text-muted);
}

.preview__status {
  padding: 1px 8px;
  border: 1.5px solid var(--text);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
}

.preview__status--draft {
  border-style: dashed;
  border-color: var(--verdict-false);
  color: var(--verdict-false);
}

.preview__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

.preview__table th,
.preview__table td {
  padding: 8px 10px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.preview__compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.preview__compare dd {
  margin: 0;
  font-weight: 700;
}

.preview__items,
.preview__problems {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.preview__item,
.preview__problems li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.preview__item--flagged,
.source--flagged {
  border: 2px solid var(--verdict-false);
  background: #FDECEA;
}

.source__excerpt {
  margin: 6px 0 2px;
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--border-strong);
  font-size: 14px;
  color: var(--text-soft);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.preview__item-section {
  padding: 0 6px;
  border-radius: 4px;
  background: var(--tag-bg);
  font-size: 13px;
  font-weight: 700;
}

.preview-card {
  padding: 12px;
}

/* ── 相關貼文 ─────────────────────────────────────── */

.related {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.related__heading {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
}

.related__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-height: var(--tap-min);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

/* ── 下架頁 ───────────────────────────────────────── */

.takedown__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 16px 24px;
}

.takedown__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1.5px solid #4B5563;
  border-radius: 6px;
  background: #F3F4F6;
  color: #374151;
  font-size: 14px;
  font-weight: 700;
}

.takedown__note {
  font-size: 14px;
  color: var(--text-muted);
}

.button--block {
  flex: none;
  align-self: stretch;
}

.button--archive,
.button--archive:hover {
  flex: none;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--brand);
  font-size: 14px;
}

/* ── 卡片 ─────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 顏色來自識別色（tone-bg--*），這裡不設底色，免得蓋掉它 */
.card__bar {
  height: 4px;
}

.card__meta {
  padding: 14px 16px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.card .party-labels {
  padding: 10px 16px 0;
}

.card__title {
  padding: 10px 16px 0;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
}

.card__summary {
  padding: 14px 16px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.card__summary-label {
  flex: none;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--tag-bg);
  font-size: 14px;
  font-weight: 700;
}

.card__actions {
  flex-wrap: wrap;
  padding: 14px 16px 16px;
  display: flex;
  gap: 8px;
}

/* ── 詳細頁 ───────────────────────────────────────── */

.back-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-min);
  padding: 0 14px 0 10px;
  font-weight: 700;
  text-decoration: none;
}

.detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail__banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.detail__tags .type-badge {
  padding: 4px 12px;
  font-size: 15px;
}

.detail__title {
  font-size: 26px;
  line-height: 1.35;
  font-weight: 900;
}

.detail__summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--highlight);
}

.detail__summary-label {
  font-size: 13px;
  font-weight: 700;
}

.detail__summary-text {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
}

.detail__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail__heading {
  font-size: 18px;
  font-weight: 700;
}

.point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
}

.point__number {
  flex: none;
  width: 24px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
}

.point__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.point__notes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
}

.projection-tag {
  padding: 0 6px;
  border: 1px solid var(--text-muted);
  border-radius: 4px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
}

.timeline__entry {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.timeline__date {
  flex: none;
  width: 88px;
}

.timeline__body {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
}

.stance {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 0;
  border-radius: 10px;
  background: var(--page-bg);
}

.stance__actor {
  font-weight: 700;
}

.sources {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.source__main {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.source__number {
  flex: none;
  margin-top: 10px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--brand);
  color: var(--brand-contrast);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}

.source__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.source__name {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.source__meta {
  font-size: 13px;
  color: var(--text-muted);
}

.source__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-soft);
}

.source__verified .date {
  color: inherit;
}

.detail__footer {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

/* ── 個人言行：與政黨作為的方角籤明顯不同 ─────────── */

.conduct-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 10px 1px 8px;
  border: 1.5px dashed var(--text-muted);
  border-radius: 999px;
  background: #F3F4F6;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
}

.conduct-actor {
  font-size: 14px;
  font-weight: 700;
}

.party-member {
  padding: 1px 10px;
  border: 1.5px dashed var(--text-muted);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 500;
}

.conduct-note {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── 表決紀錄：顏色避開政黨代表色，四種票別另有紋樣與文字可分辨 ── */

.votes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.votes__total {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--page-bg);
}

.votes__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.votes__party {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
}

.votes__seats {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

.votes__direction {
  padding: 0 8px;
  border: 1.5px solid var(--text);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
}

.votes__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.votes__track {
  border-radius: 4px;
  background: var(--page-bg);
}

.votes__bar {
  display: flex;
  gap: 2px;
  height: 16px;
}

.votes__total .votes__bar {
  height: 20px;
}

.votes__segment {
  flex: 1 1 0%;
  min-width: 4px;
  border-radius: 3px;
}

.votes__segment--yes,
.votes__swatch--yes {
  background: var(--brand);
}

.votes__segment--no,
.votes__swatch--no {
  background: repeating-linear-gradient(45deg, #C2410C 0 4px, #7A2805 4px 6px);
}

.votes__segment--abstain,
.votes__swatch--abstain {
  background: #9CA3AF;
}

.votes__segment--absent,
.votes__swatch--absent {
  background: var(--surface);
  border: 1.5px dashed var(--text-muted);
}

.votes__counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.votes__count {
  display: flex;
  flex-direction: column;
}

.votes__count-label {
  font-size: 13px;
  color: var(--text-muted);
}

.votes__count-number {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}

.votes__total .votes__count-number {
  font-size: 22px;
}

.votes__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--text-soft);
}

.votes__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.votes__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.votes__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

/* ── 查核 ─────────────────────────────────────────── */

.verdict-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
}

.verdict-banner__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.verdict-banner__note {
  font-size: 13px;
  font-weight: 500;
}

.verdict-banner__verdict {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 900;
}

/* 網傳說法：標籤用中性深色，屬實的貼文才不會被讀成謠言 */
.claim-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 2px dashed #A79FD6;
  border-radius: 10px;
  background: var(--tag-bg);
}

.claim-box__label,
.truth-box__label {
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--text);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
}

.claim-box__content {
  color: var(--text-soft);
}

/* ── 素材：圖片 4:5，多張時橫向輪播（scroll-snap，不需要 JavaScript） ── */

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.card .gallery {
  margin-top: 12px;
}

.detail .gallery {
  border-radius: 8px;
}

.gallery__slide,
.claim-image {
  flex: none;
  width: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.media-frame {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #D9DBD5;
}

.claim-image .media-frame {
  border-radius: 8px;
}

.media-frame img,
.media-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.gallery__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
  padding: 4px 16px 0;
  font-size: 13px;
  color: var(--text-muted);
}

.detail .gallery__caption {
  padding: 4px 0 0;
}

.gallery__count {
  font-family: var(--font-mono);
}

.media-origin a {
  color: inherit;
  overflow-wrap: anywhere;
}

/* ── 分享 ─────────────────────────────────────────── */

.share[open] {
  flex-basis: 100%;
}

.share__toggle {
  cursor: pointer;
  list-style: none;
}

.share__toggle::-webkit-details-marker {
  display: none;
}

.share[open] .share__toggle {
  display: none;
}

.share__panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: var(--page-bg);
}

.share__option,
.share__option:hover {
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.detail__share .share {
  align-self: flex-start;
}

.detail__share .share[open] {
  align-self: stretch;
}

/* 戳記：疊在原圖中央，約佔圖寬七成 */
.stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  display: flex;
  align-items: center;
  gap: 0.12em;
  white-space: nowrap;
  font-weight: 900;
}

.stamp--false {
  padding: 0.04em 0.2em 0.04em 0.25em;
  border: 0.06em solid #FFFFFF;
  border-radius: 0.12em;
  box-shadow: 0 0 0 0.05em var(--verdict-false);
  background: var(--verdict-false);
  color: #FFFFFF;
  font-size: clamp(48px, 18cqw, 120px);
  letter-spacing: 0.12em;
  line-height: 1.25;
}

.stamp--partly-false {
  padding: 0.06em 0.25em 0.06em 0.3em;
  border: 0.08em solid var(--verdict-partly-false-text);
  border-radius: 0.14em;
  box-shadow: 0 0 0 0.07em var(--verdict-partly-false);
  background: var(--verdict-partly-false);
  color: var(--verdict-partly-false-text);
  font-size: clamp(32px, 11.5cqw, 78px);
  letter-spacing: 0.1em;
  line-height: 1.35;
}

.truth-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 2px solid var(--brand);
  border-radius: 10px;
  background: var(--surface);
}

.truth-box__label {
  background: var(--brand);
}

.truth-box__content {
  font-weight: 500;
}

.facts {
  display: flex;
  flex-direction: column;
}

.facts__row {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.facts__row dt {
  flex: none;
  width: 88px;
  color: var(--text-muted);
}

.facts__row dd {
  min-width: 0;
}