/**
 * AWMS+ / MOCI 數位策展人電子名片樣式系統（全中英雙語對照 · 電腦版與手機版雙模自適應一頁不滾動版）
 * 設計規範：
 * 1. 無框線層次 (No-Line Rule)：嚴禁使用 1px 實線邊框，全站依靠背景色階差異與留白區分。
 * 2. 動態漸層與紋理 (Dynamic Gradients & Noise)：隨機品牌色漸層光暈 + SVG 雜訊紙張紋理。
 * 3. 4:1 字體懸殊比例：中英同行主標題 vs 精緻內文 vs 全大寫寬字距中英雙語標籤。
 * 4. 重點強調法：使用 #ac2d7c 實心色塊背景 (Pill) 或粗底線 (Underline) 凸顯。
 * 5. 全站中英雙語對照 + 電腦版（寬版策展構圖）與手機版（直式卡片）皆鎖定一頁不滾動。
 */

/* ==========================================================================
   1. 主題模式矩陣變數定義 (Theme Matrix Tokens)
   ========================================================================== */
:root,
[data-theme="light"] {
  --backdrop-outer: #e8e3df;
  --surface-canvas: #faf9f7;          /* 暖白畫布底色 */
  --surface-tier-1: #efeae6;          /* 第一階無框線區塊底色 */
  --surface-tier-2: #e4dce0;          /* 第二階微紫暖色塊底色 */
  --surface-hero: linear-gradient(135deg, #f3ecf0 0%, #eee9e5 100%);

  --text-primary: #1a1c1b;            /* 深灰黑，嚴禁純黑 #000000 */
  --text-secondary: #4a4c4b;

  --accent-primary: #ac2d7c;          /* 品牌亮紫 (Pantone 240 CP) */
  --accent-primary-hover: #8f2266;
  --accent-primary-fg: #ffffff;

  --accent-secondary: #874669;        /* 暗粉紫 (#a56284 對比強化) */
  --watermark-color: rgba(172, 45, 124, 0.055);
  --glow-primary: rgba(172, 45, 124, 0.15);
  --glow-secondary: rgba(165, 98, 132, 0.13);
  --shadow-shell: 0 28px 80px -12px rgba(26, 28, 27, 0.22);
  --shadow-portrait: 0 14px 32px -8px rgba(26, 28, 27, 0.2);
  --logo-filter: none;
}

[data-theme="dark"] {
  --backdrop-outer: #0d0e0e;
  --surface-canvas: #1a1c1b;
  --surface-tier-1: #242726;
  --surface-tier-2: #31282e;
  --surface-hero: linear-gradient(135deg, #2b2228 0%, #232625 100%);

  --text-primary: #faf9f7;
  --text-secondary: #c9c7c3;

  --accent-primary: #e587c6;
  --accent-primary-hover: #f09fd5;
  --accent-primary-fg: #1a1c1b;

  --accent-secondary: #d494b8;
  --watermark-color: rgba(229, 135, 198, 0.06);
  --glow-primary: rgba(229, 135, 198, 0.15);
  --glow-secondary: rgba(165, 98, 132, 0.13);
  --shadow-shell: 0 28px 80px -12px rgba(0, 0, 0, 0.72);
  --shadow-portrait: 0 14px 32px -8px rgba(0, 0, 0, 0.6);
  --logo-filter: brightness(0) invert(1);
}

[data-theme="brand"] {
  --backdrop-outer: #691549;
  --surface-canvas: #ac2d7c;
  --surface-tier-1: #922167;
  --surface-tier-2: #7c1a57;
  --surface-hero: linear-gradient(135deg, #98236c 0%, #861d5e 100%);

  --text-primary: #ffffff;
  --text-secondary: #f9dfee;

  --accent-primary: #ffffff;
  --accent-primary-hover: #f5e6ef;
  --accent-primary-fg: #ac2d7c;

  --accent-secondary: #fce8f3;
  --watermark-color: rgba(255, 255, 255, 0.07);
  --glow-primary: rgba(255, 255, 255, 0.16);
  --glow-secondary: rgba(26, 28, 27, 0.2);
  --shadow-shell: 0 28px 80px -12px rgba(45, 6, 30, 0.6);
  --shadow-portrait: 0 14px 32px -8px rgba(45, 6, 30, 0.5);
  --logo-filter: brightness(0) invert(1);
}

/* ==========================================================================
   2. 單頁鎖定與基礎重設 (One-Page Viewport Lock)
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0; /* 鐵律 1：嚴禁使用 1px 實線邊框 */
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden; /* 鎖定一頁不往下滑 */
  background-color: var(--backdrop-outer);
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-text-size-adjust: 100%;
  transition: background-color 0.25s ease, color 0.25s ease;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8px;
  position: relative;
}

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

button,
a {
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

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

/* ==========================================================================
   3. 動態漸層光暈與紙張雜訊紋理 (Dynamic Gradients & Noise)
   ========================================================================== */
.ambient-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(75px);
}

.glow-primary {
  top: -8%;
  right: 15%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--glow-primary) 0%, transparent 70%);
}

.glow-secondary {
  bottom: -8%;
  left: 15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--glow-secondary) 0%, transparent 70%);
}

.noise-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' fill='%23888888'/%3E%3C/svg%3E");
}

/* ==========================================================================
   4. 名片主機殼：手機版預設 (Mobile-First 425px) + 電腦版寬版策展 (Desktop 880px)
   ========================================================================== */
.curator-shell {
  position: relative;
  z-index: 1;
  width: 425px;
  max-width: 100vw;
  background-color: var(--surface-canvas);
  background-image:
    radial-gradient(ellipse at 95% 4%, var(--glow-primary), transparent 48%),
    radial-gradient(ellipse at 5% 75%, var(--glow-secondary), transparent 52%);
  border-radius: 26px;
  padding: 15px 16px 14px;
  box-shadow: var(--shadow-shell);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 11px;
  transform-origin: top center;
  will-change: transform;
}

@media (max-width: 460px) {
  body {
    background-color: var(--surface-canvas);
    padding-top: 0;
  }

  .curator-shell {
    width: 100vw;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    padding: 12px 15px 12px;
    justify-content: flex-start;
    gap: 10px;
    transform-origin: top center;
  }
}

/* 鐵律 3：全大寫寬字距英文/中英標籤 */
.editorial-tag {
  display: inline-block;
  font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-secondary);
}

/* 鐵律 4：重點強調法 - 實心色塊背景 (Pill) */
.pill-highlight {
  display: inline-flex;
  align-items: center;
  background-color: var(--accent-primary);
  color: var(--accent-primary-fg);
  font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
}

/* 鐵律 4：重點強調法 - 粗底線 (Underline) */
.underline-highlight {
  font-weight: 800;
  color: var(--text-primary);
  background-image: linear-gradient(transparent 58%, rgba(172, 45, 124, 0.28) 58%);
  padding: 0 2px;
}

[data-theme="brand"] .underline-highlight {
  background-image: linear-gradient(transparent 58%, rgba(255, 255, 255, 0.32) 58%);
}

.editorial-section {
  position: relative;
  overflow: hidden;
}

.watermark-num {
  position: absolute;
  right: 10px;
  top: -10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 66px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--watermark-color);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ==========================================================================
   5. 頂部導覽列 (Header - 中英雙語對照)
   ========================================================================== */
.editorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 2px;
}

.brand-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
  filter: var(--logo-filter);
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.quick-qr-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--surface-tier-2);
  color: var(--text-primary);
  font-size: 9.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  line-height: 1.1;
}

.quick-qr-pill small {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-left: 2px;
}

.quick-qr-pill svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--accent-primary);
  stroke-width: 2.2;
}

.quick-qr-pill:hover {
  background-color: var(--accent-primary);
  color: var(--accent-primary-fg);
}

.quick-qr-pill:hover svg {
  stroke: currentColor;
}

.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background-color: var(--surface-tier-1);
  padding: 3px;
  border-radius: 999px;
}

.theme-btn {
  background-color: transparent;
  color: var(--text-secondary);
  padding: 3px 7px;
  border-radius: 999px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}

.theme-btn span {
  font-size: 8.5px;
  font-weight: 700;
}

.theme-btn small {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.theme-btn.active {
  background-color: var(--accent-primary);
  color: var(--accent-primary-fg);
}

/* ==========================================================================
   6. 01 / 人物主視覺色塊卡 (Hero Card - 單行中英姓名 + 雙語按鈕)
   ========================================================================== */
.hero-card {
  background: var(--surface-hero);
  border-radius: 18px;
  padding: 13px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.kicker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

/* 中英姓名同一條線並排不換行 */
.hero-name {
  margin: 0 0 8px;
  color: var(--text-primary);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  position: relative;
  padding-bottom: 8px;
}

.hero-name::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 4.5px;
  border-radius: 999px;
  background-color: var(--accent-primary);
}

.name-zh {
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 900;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.name-en {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.role-title {
  margin: 0 0 2px;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.role-en {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.company-name {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* 藝廊拱門肖像畫框 */
.portrait-frame {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portrait-arch {
  width: 96px;
  aspect-ratio: 4 / 5;
  border-radius: 50px 50px 12px 12px;
  overflow: hidden;
  background-color: var(--surface-canvas);
  box-shadow: var(--shadow-portrait);
}

.portrait-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.portrait-caption {
  margin-top: 4px;
  font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-secondary);
  white-space: nowrap;
}

/* 行動呼籲按鈕列 (中英雙語堆疊) */
.hero-actions {
  display: grid;
  grid-template-columns: 1.25fr 1.1fr 0.85fr;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.btn-primary-pill,
.btn-surface-pill,
.btn-share-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  min-height: 40px;
}

.btn-primary-pill {
  background-color: var(--accent-primary);
  color: var(--accent-primary-fg);
}

.btn-primary-pill:hover {
  background-color: var(--accent-primary-hover);
}

.btn-surface-pill,
.btn-share-pill {
  background-color: var(--surface-canvas);
  color: var(--text-primary);
}

.btn-surface-pill:hover,
.btn-share-pill:hover {
  background-color: var(--surface-tier-2);
}

.bilingual-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.12;
}

.bilingual-btn-text b {
  font-size: 11.5px;
  font-weight: 700;
}

.bilingual-btn-text small {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.82;
}

.btn-primary-pill svg,
.btn-surface-pill svg,
.btn-share-pill svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ==========================================================================
   7. 02 / 2x2 直接聯絡矩陣 (Compact 2x2 Contact Grid)
   ========================================================================== */
.contact-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.contact-cell {
  background-color: var(--surface-tier-1);
  border-radius: 13px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.contact-cell:hover {
  background-color: var(--surface-tier-2);
}

.cell-link {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.cell-link strong {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-copy {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background-color: var(--surface-canvas);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cell-copy svg {
  width: 11.5px;
  height: 11.5px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.cell-copy:hover {
  background-color: var(--accent-primary);
  color: var(--accent-primary-fg);
}

/* ==========================================================================
   8. 03 / 三欄並排社群通訊列 (3-Column Bilingual Social Bar)
   ========================================================================== */
.social-exhibition {
  background-color: var(--surface-tier-1);
  border-radius: 14px;
  padding: 9px 11px;
}

.social-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.qr-inline-link {
  background: transparent;
  padding: 0;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent-primary);
}

.social-row-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.social-pill-btn {
  background-color: var(--surface-canvas);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 6px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
}

.social-pill-btn:hover {
  background-color: var(--surface-tier-2);
}

.bilingual-social-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  text-align: left;
}

.bilingual-social-text b {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.bilingual-social-text small {
  font-size: 8px;
  font-weight: 600;
  opacity: 0.8;
  white-space: nowrap;
}

.social-pill-btn.wechat-highlight {
  background-color: var(--accent-primary);
  color: var(--accent-primary-fg);
}

.social-pill-btn.wechat-highlight .social-svg {
  filter: brightness(0) invert(1);
}

[data-theme="dark"] .social-pill-btn.wechat-highlight .social-svg,
[data-theme="brand"] .social-pill-btn.wechat-highlight .social-svg {
  filter: none;
}

.social-svg {
  width: 15px;
  height: 15px;
  filter: var(--logo-filter);
  flex-shrink: 0;
}

/* ==========================================================================
   9. 04 / 雙據點同時完整並列展示 (Dual Locations Section)
   ========================================================================== */
.locations-dual {
  background-color: var(--surface-tier-1);
  border-radius: 15px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loc-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.loc-hq {
  background-color: var(--surface-canvas);
  border-radius: 10px;
  padding: 6px 9px;
}

.loc-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.loc-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.loc-map-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--accent-primary);
  color: var(--accent-primary-fg);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.loc-map-pill svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.loc-copy-inline {
  background: transparent;
  padding: 0;
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-primary);
  white-space: nowrap;
}

.loc-text {
  margin: 0;
  font-size: 10px;
  line-height: 1.38;
  color: var(--text-secondary);
}

/* ==========================================================================
   10. 05 / 品牌橫條視覺與頁尾 (Brand Banner Footer)
   ========================================================================== */
.editorial-footer-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-banner-wrap {
  border-radius: 11px;
  overflow: hidden;
  background-color: #ffffff;
  width: 100%;
}

.footer-banner-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  color: var(--text-secondary);
  font-size: 9px;
}

.footer-slogan {
  font-weight: 700;
  color: var(--text-primary);
}

.footer-slogan em {
  font-style: normal;
  font-weight: 800;
}

.footer-meta small {
  font-size: 8px;
}

/* ==========================================================================
   11. 電腦版寬螢幕策展構圖 (Desktop Editorial Widescreen Layout >= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  body {
    align-items: center;
    padding-top: 0;
  }

  .curator-shell {
    width: 860px;
    max-width: 94vw;
    padding: 26px 34px 22px;
    border-radius: 30px;
    gap: 15px;
    transform-origin: center center;
  }

  .brand-logo {
    height: 34px;
  }

  .quick-qr-pill {
    padding: 6px 14px;
    font-size: 11px;
  }

  .theme-btn {
    flex-direction: row;
    gap: 5px;
    padding: 6px 12px;
  }

  .theme-btn span {
    font-size: 11px;
  }

  .theme-btn small {
    font-size: 9px;
  }

  .hero-card {
    padding: 20px 26px 18px;
    border-radius: 22px;
    gap: 14px;
  }

  .hero-main {
    grid-template-columns: minmax(0, 1fr) 136px;
    gap: 28px;
  }

  .editorial-tag {
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .pill-highlight {
    font-size: 10px;
    padding: 4px 12px;
  }

  .hero-name {
    gap: 14px;
    padding-bottom: 12px;
    margin-bottom: 10px;
  }

  .hero-name::after {
    width: 64px;
    height: 6px;
  }

  .name-zh {
    font-size: 42px;
  }

  .name-en {
    font-size: 38px;
  }

  .role-title {
    font-size: 17px;
    gap: 10px;
  }

  .role-en {
    font-size: 14px;
  }

  .company-name {
    font-size: 12.5px;
  }

  .portrait-arch {
    width: 136px;
    border-radius: 72px 72px 14px 14px;
  }

  .portrait-caption {
    font-size: 8.5px;
    margin-top: 6px;
  }

  .hero-actions {
    grid-template-columns: auto auto auto;
    justify-content: flex-start;
    gap: 10px;
  }

  .btn-primary-pill,
  .btn-surface-pill,
  .btn-share-pill {
    padding: 9px 20px;
    min-height: 44px;
    gap: 9px;
  }

  .bilingual-btn-text {
    flex-direction: row;
    align-items: baseline;
    gap: 7px;
  }

  .bilingual-btn-text b {
    font-size: 13.5px;
  }

  .bilingual-btn-text small {
    font-size: 9.5px;
  }

  /* 電腦版聯絡格：4 欄一列或寬敞 2x2 */
  .contact-grid-2x2 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .contact-cell {
    padding: 12px 14px;
    border-radius: 15px;
  }

  .cell-link strong {
    font-size: 14px;
  }

  .social-exhibition {
    padding: 12px 16px;
    border-radius: 16px;
  }

  .social-row-3col {
    gap: 10px;
  }

  .social-pill-btn {
    padding: 9px 14px;
    min-height: 44px;
    gap: 10px;
  }

  .bilingual-social-text {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }

  .bilingual-social-text b {
    font-size: 13px;
  }

  .bilingual-social-text small {
    font-size: 10px;
  }

  .social-svg {
    width: 18px;
    height: 18px;
  }

  /* 電腦版雙據點：左右雙欄並排 */
  .locations-dual {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 16px;
    align-items: stretch;
  }

  .loc-item {
    justify-content: space-between;
    padding: 4px 2px;
  }

  .loc-hq {
    padding: 10px 14px;
    border-radius: 12px;
  }

  .loc-text {
    font-size: 11.5px;
    line-height: 1.5;
  }

  /* 電腦版底部橫幅與版權：完整顯示橫幅不裁切 */
  .editorial-footer-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: center;
  }

  .footer-banner-wrap {
    width: 100%;
  }

  .footer-banner-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .footer-meta {
    font-size: 11px;
  }

  .footer-meta small {
    font-size: 10px;
  }
}

/* ==========================================================================
   12. 彈窗與提示 (Dialog & Toast - 全中英雙語)
   ========================================================================== */
.curator-dialog {
  padding: 0;
  border-radius: 22px;
  background-color: var(--surface-canvas);
  color: var(--text-primary);
  max-width: 350px;
  width: 90vw;
  box-shadow: 0 32px 100px rgba(26, 28, 27, 0.45);
}

.curator-dialog::backdrop {
  background-color: rgba(26, 28, 27, 0.72);
  backdrop-filter: blur(6px);
}

.dialog-inner {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.dialog-title {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 800;
}

.dialog-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--surface-tier-1);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dialog-close svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
}

.qr-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background-color: var(--surface-tier-1);
  padding: 4px;
  border-radius: 11px;
}

.qr-tab {
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 3px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.qr-tab.active {
  background-color: var(--accent-primary);
  color: var(--accent-primary-fg);
}

.qr-stage {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  max-height: 210px;
  margin: 0 auto;
  width: 100%;
}

.qr-stage img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.qr-caption {
  margin: 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary);
}

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

.full-width {
  width: 100%;
}

.curator-toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--text-primary);
  color: var(--surface-canvas);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 12px 32px rgba(26, 28, 27, 0.28);
  z-index: 100;
  white-space: nowrap;
}

.curator-toast[hidden] {
  display: none;
}

.toast-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--accent-primary);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}