/* 里民小幫手 Design System — 里民端閱讀與詳情頁（bulletin／eventopenlist／opendetail／storeopendetail）
   由平台核心同步到各里 assets/，請勿在各里手改；要調整請改 village-platform-core。
   規則：主文與主要操作 16px、metadata 14px、可點控制項至少 44px、可見的鍵盤焦點。
   不改版面結構、不加動畫；載入順序在各頁內嵌樣式與主題 CSS 之後，同等權重下以這裡為準。 */
:root {
  --ds-font-body: 16px;
  --ds-font-meta: 14px;
  --ds-tap: 44px;
  --ds-focus: #1d4ed8;
}

:where(a, button, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
}

body .site-branding-footer { font-size: var(--ds-font-meta); }

/* ── 公佈欄／活動（bulletin、eventopenlist）── */
.back-home {
  min-height: var(--ds-tap);
  display: inline-flex;
  align-items: center;
  font-size: var(--ds-font-meta);
}
.masthead-stat, .masthead-kicker, .dateline, .cate-tab .n, .kicker-line, .tag,
.views, .rank-num, .evt-quota, .evt-quota span, .evt-note, .rail-empty,
.evt-line, .evt-line b, .evt-line span, .story .evt-line, .sublead .evt-line,
.story .evt-quota, .sublead .evt-quota, .evt-facts dt {
  font-size: var(--ds-font-meta);
}
.masthead-lead, .lead-excerpt, .story-excerpt, .sublead-excerpt, .lead-more,
.rank-name, .rail-link, .rail-empty strong, .evt-facts dd, .evt-cta,
.modal-content, .modal-content p, .modal-content li, .modal-title {
  font-size: var(--ds-font-body);
}
.cate-tab { min-width: var(--ds-tap); min-height: var(--ds-tap); font-size: var(--ds-font-body); }
.cate-tab .n { font-size: var(--ds-font-meta); }
.sublead h3, .story h4, .lead h3 { font-size: 17px; line-height: 1.45; }
.evt-cta { min-height: var(--ds-tap); }
.evt-facts dd a, .modal-source a, .source-link {
  min-height: var(--ds-tap);
  display: inline-flex;
  align-items: center;
}
.modal-close { min-width: var(--ds-tap); min-height: var(--ds-tap); }

/* 長標題／長地址／長內容不撐爆手機：grid／flex 子項可縮，文字可在任意位置斷行 */
.clickable, .clickable > *, .lead > *, .sublead > *, .story > *, .feed, .feed > * { min-width: 0; }
.lead h3, .sublead h3, .story h4, .lead-excerpt, .story-excerpt, .sublead-excerpt,
.evt-line span, .evt-facts dd, .modal-title, .modal-content, .modal-content p, .rank-name {
  overflow-wrap: anywhere;
}

/* ── 詳情頁（opendetail、storeopendetail）── */
.back-btn, .report-btn {
  min-height: var(--ds-tap);
  padding-left: 14px;
  padding-right: 14px;
  font-size: var(--ds-font-body);
}
.page-title { font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-btn, .report-btn { flex-shrink: 0; white-space: nowrap; }
.card-header, .info-lbl, .pd-badge, .cate-badge, .photo-label, .offer-label,
.lb-counter {
  font-size: var(--ds-font-meta);
}
.info-lbl { width: 84px; line-height: 1.6; }
.info-val, .paragraph-list p, .desc, .offer-box, .state-wrap p, .store-phone-hero {
  font-size: var(--ds-font-body);
}
.info-val { line-height: 1.7; overflow-wrap: anywhere; }
.case-main-title { font-size: 20px; overflow-wrap: anywhere; }
.store-name { font-size: 22px; overflow-wrap: anywhere; }
.store-phone-hero a, .info-val a {
  min-height: var(--ds-tap);
  display: inline-flex;
  align-items: center;
}
.pd-badge { min-height: 28px; }
.photo-label { margin-bottom: 8px; }
.photo-empty { margin: 0; font-size: var(--ds-font-body); color: var(--lbl, #4e7260); line-height: 1.7; }
.offer-label { font-weight: 700; margin-bottom: 6px; opacity: .85; }
.state-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.state-btn {
  text-decoration: none;
  min-height: var(--ds-tap);
  padding: 0 20px;
  border: 1px solid var(--border, #bdd9ca);
  border-radius: 8px;
  background: var(--card, #fff);
  color: var(--lbl, #4e7260);
  font: inherit;
  font-size: var(--ds-font-body);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* 照片：按鈕包住縮圖，可用鍵盤開啟燈箱 */
.photo-btn {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  min-height: var(--ds-tap);
}
.photo-btn img { cursor: pointer; }

/* 燈箱與輪播控制項 */
.lb-close {
  width: var(--ds-tap); height: var(--ds-tap);
  top: 10px; right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lb-prev, .lb-next, .carousel-btn { width: var(--ds-tap); height: var(--ds-tap); }
button.carousel-slide {
  padding: 0; border: 0; background: none; color: inherit; font: inherit;
  width: 100%;
}
.carousel-dots { pointer-events: none; }
.carousel-dot { pointer-events: none; }