/* 揪出門：字大、對比高、按鈕大。只做淺色主題，所有顏色都明確指定。 */
:root {
  color-scheme: light;
  --bg: #f6f4ee;
  --surface: #ffffff;
  --ink: #111a17;
  --muted: #45524d;
  --line: #cbd6d1;
  --pine: #17574b;
  --pine-dark: #0f3f36;
  --pine-soft: #e0eeea;
  --sun: #f2b33d;
  --sun-soft: #fdf2d6;
  --sun-ink: #6b4a00;
  --gov: #1c4b91;
  --gov-soft: #e2ebf8;
  --npo: #1a5532;
  --npo-soft: #dff0e5;
  --warn-soft: #fff4d6;
  --line-green: #06c755;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(17, 26, 23, .06), 0 2px 8px rgba(17, 26, 23, .05);
  --tap: 56px;
  font-size: 20px;
}
/* 類別顏色：--cat 是色條與圖示底色，--cat-soft 淺底，--cat-ink 淺底上的字（對比都在 7:1 以上） */
[data-cat="learning"] { --cat: #3b63c4; --cat-soft: #e7edfb; --cat-ink: #1d3a82; }
[data-cat="sports"] { --cat: #d4622a; --cat-soft: #fde9df; --cat-ink: #80290c; }
[data-cat="health"] { --cat: #2f8a4f; --cat-soft: #e1f2e6; --cat-ink: #14502c; }
[data-cat="arts"] { --cat: #8e4bb5; --cat-soft: #f2e7f8; --cat-ink: #561f71; }
[data-cat="digital"] { --cat: #1d8a9a; --cat-soft: #ddf2f4; --cat-ink: #0c4a56; }
[data-cat="volunteer"] { --cat: #c24169; --cat-soft: #fbe5eb; --cat-ink: #7f1b3b; }
[data-cat="social"] { --cat: #d99a1e; --cat-soft: #fcf0d4; --cat-ink: #624400; }
[data-cat="career"] { --cat: #5a6b85; --cat-soft: #e7eaef; --cat-ink: #27354a; }
html[data-size="l"] { font-size: 23px; }
html[data-size="xl"] { font-size: 26px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
  line-height: 1.6;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { max-width: 100%; height: auto; }
a { color: var(--pine); text-underline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.3; text-wrap: balance; margin: 0; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; }
html:not(.js) .js-only { display: none !important; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.05em; height: 1.05em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; }
.skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 20; }

.wrap { max-width: 760px; margin: 0 auto; padding-inline: 16px; }
main.wrap { display: flex; flex-direction: column; gap: 20px; padding-block: 12px 32px; }

/* 頁首 */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 4px 12px rgba(17, 26, 23, .04);
}
.logo { display: inline-flex; align-items: center; gap: 8px; font-size: 1.35rem; font-weight: 800; color: var(--pine);
  text-decoration: none; letter-spacing: .02em; white-space: nowrap; flex-shrink: 0; }
.logo .mark { width: 36px; height: 36px; }
.logo b { color: var(--sun-ink); }
/* 標誌不跟著「大字」放大（固定一般大小），讓出空間給內容與「目前地區」按鈕 */
html[data-size] .logo { font-size: 27px; }
html[data-size] .logo .mark { width: 36px; height: 36px; }
/* 字放大、螢幕窄、頁首又有地區按鈕時，收起小圖示，「揪出門」三個字一定留著 */
@media (max-width: 480px) {
  html[data-size="l"] .top:has(.area-btn) .logo .mark,
  html[data-size="xl"] .top:has(.area-btn) .logo .mark { display: none; }
  /* 放不下三個按鈕：「大字」收進選單（選單裡有「字的大小」），留給「目前地區」 */
  .top:has(.area-btn) .size-btn { display: none; }
}
.top-actions { display: flex; gap: 8px; align-items: center; min-width: 0; }
.area-btn, .size-btn, .menu-btn {
  min-height: 48px; border-radius: 999px; border: 2px solid var(--pine); background: var(--surface);
  color: var(--pine); font-weight: 700; padding: 4px 14px; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.size-btn { padding: 4px 12px; flex-shrink: 0; }
.menu-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; flex-shrink: 0; text-decoration: none; }
.menu-btn .ic { width: 1.2em; height: 1.2em; }
html:not(.js) .nojs-hide, .js .js-hide { display: none !important; }

.crumbs { font-size: .9rem; color: var(--muted); }

/* 按鈕 */
.btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--tap); padding: 10px 16px; border-radius: var(--radius);
  font-weight: 700; font-size: 1.05rem; text-decoration: none; cursor: pointer; border: 2px solid transparent;
}
.btn.with-icon { gap: 10px; }
.btn.with-icon .ic { width: 1.25em; height: 1.25em; }
.btn:active, .tile:active, .date-btn:active, .cat-btn:active, .card-link:active { transform: translateY(1px); }
.btn.primary { background: var(--pine); color: #fff; box-shadow: 0 2px 0 var(--pine-dark); }
.btn.primary:disabled { background: var(--line); color: var(--muted); cursor: default; }
.btn.ghost { background: var(--surface); color: var(--pine); border-color: var(--pine); }
.btn.line { background: var(--line-green); color: #03220f; box-shadow: 0 2px 0 #04913e; }
.btn.line .ic { fill: #03220f; stroke: none; }
.btn.small { font-size: .95rem; min-height: 50px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 首頁 */
.hero {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; margin-top: 4px;
  padding: 18px 16px; border-radius: 20px;
  background: linear-gradient(160deg, #fff8e6 0%, #e6f2ec 100%);
}
.hero p { grid-column: 1 / -1; color: var(--muted); }
.hero-art { width: 110px; height: 88px; }
.region { font-size: .9rem; color: var(--muted); font-weight: 800; margin: 6px 0 -4px; display: flex; align-items: center; gap: 8px; }
.region::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pick, .counties, .about-short, .links { display: flex; flex-direction: column; gap: 12px; }
.about-short { background: var(--warn-soft); border-radius: var(--radius); padding: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile {
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  min-height: 64px; padding: 6px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line);
  color: var(--ink); font-weight: 700; text-decoration: none; cursor: pointer; width: 100%; box-shadow: var(--shadow);
}
.tile:hover { border-color: var(--pine); }
.tile small { font-weight: 400; color: var(--muted); font-size: .72rem; }
.tile.small { min-height: 56px; font-size: .95rem; }
.tile.on, .tile[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: #fff; }
.tile.on small { color: #e6f2ee; }
.cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none;
  color: var(--ink); font-weight: 700; font-size: .85rem; text-align: center;
}
button.cat-tile { width: 100%; min-height: var(--tap); padding: 4px 0; background: none; border: 0; cursor: pointer; font-family: inherit; }
.pick .msg { background: var(--sun-soft); color: var(--sun-ink); border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.glyph {
  width: 52px; height: 52px; border-radius: 50%; background: var(--cat-ink, var(--pine)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 800;
  box-shadow: 0 0 0 4px var(--cat-soft, var(--pine-soft));
}
.glyph.small { width: 30px; height: 30px; font-size: .85rem; box-shadow: none; }

/* 篩選列 */
.filters { display: flex; flex-direction: column; gap: 12px; }
.dates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.date-btn {
  min-height: var(--tap); border-radius: 12px; border: 2px solid var(--line); background: var(--surface);
  font-weight: 700; font-size: .95rem; line-height: 1.2; padding: 4px 2px; cursor: pointer; color: var(--ink);
}
.date-btn small { display: block; font-weight: 400; font-size: .68rem; color: var(--muted); margin-top: 2px; }
.date-btn[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: #fff; }
.date-btn[aria-pressed="true"] small { color: #e6f2ee; }
.cat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cat-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: var(--tap); padding: 6px 2px;
  border-radius: 12px; border: 2px solid var(--cat-soft); background: var(--surface); color: var(--cat-ink);
  font-weight: 700; font-size: .85rem; line-height: 1.2; cursor: pointer;
}
.cat-btn .glyph.small { width: 26px; height: 26px; font-size: .78rem; }
.cat-btn small { font-weight: 400; font-size: .68rem; color: var(--muted); }
.cat-btn[aria-pressed="true"] { background: var(--cat-ink); border-color: var(--cat-ink); color: #fff; }
.cat-btn[aria-pressed="true"] .glyph { background: #fff; color: var(--cat-ink); }
.cat-btn[aria-pressed="true"] small { color: #fff; }
.cat-btn .cat-short { display: none; }
/* 大字、特大字：四個字會斷行，改顯示兩個字（學習、運動…），完整名稱在 aria-label */
[data-size] .cat-btn .cat-name { display: none; }
[data-size] .cat-btn .cat-short { display: inline; }
.pick { scroll-margin-top: 84px; }
.chosen { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 14px; border-radius: 999px;
  background: var(--pine-soft); color: var(--pine-dark); border: 0; font-weight: 700; font-size: .9rem; cursor: pointer;
}
.chip.edit { background: var(--surface); border: 2px solid var(--pine); color: var(--pine); }
.chip.edit .ic { width: 1.2em; height: 1.2em; }
.count { font-weight: 700; }
.count b { font-size: 1.2em; }
.fee-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0;
  padding: 10px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.fee-hint .btn { min-height: 40px; padding: 6px 14px; font-size: 1rem; }

/* 卡片 */
.cards { display: flex; flex-direction: column; gap: 10px; }
.card-link {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start;
  padding: 14px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  border-left: 6px solid var(--cat, var(--line)); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none;
}
.card-link:hover { border-color: var(--cat, var(--pine)); }
.card-link:has(.card-thumb:not([hidden])) { grid-template-columns: 64px 1fr 72px; }
.card-date {
  display: flex; flex-direction: column; align-items: center; background: var(--pine-soft); color: var(--pine-dark);
  border-radius: 12px; padding: 6px 2px; line-height: 1.15; font-weight: 700; text-align: center;
}
.card-date b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.card-date span { font-size: .7rem; }
.card-date.weekend { background: var(--sun-soft); color: var(--sun-ink); }
.card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-cat { font-size: .75rem; font-weight: 800; color: var(--cat-ink, var(--muted)); letter-spacing: .04em; }
.card-title { font-weight: 800; font-size: 1.08rem; line-height: 1.35; overflow-wrap: anywhere; }
.card-meta { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.card-meta .ic { margin-top: .2em; color: var(--cat-ink, var(--muted)); }
.card-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--pine-soft); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { font-size: .75rem; font-weight: 800; border-radius: 6px; padding: 1px 8px; }
.badge.gov { background: var(--gov-soft); color: var(--gov); }
.badge.npo { background: var(--npo-soft); color: var(--npo); }
.badge.free { background: var(--sun-soft); color: var(--sun-ink); }
.badge.cat { background: var(--pine-soft); color: var(--pine-dark); }
.more-wrap:empty, .suggest:empty { display: none; }
.suggest { display: flex; flex-direction: column; gap: 10px; }
.empty { background: var(--surface); border-radius: var(--radius); padding: 16px; }
.empty-box {
  display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; border-radius: 20px;
  background: var(--sun-soft); border-top: 6px solid var(--sun); box-shadow: var(--shadow);
}
.empty-title { font-size: 1.3rem; }
.empty-tips { list-style: disc; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.empty-alts { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.empty-alts:empty { display: none; }

/* 活動詳情 */
.event { display: flex; flex-direction: column; gap: 16px; }
.event-head {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px;
  background: var(--cat-soft, var(--pine-soft)); border-top: 6px solid var(--cat, var(--pine));
}
.event-cat { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--cat-ink, var(--pine-dark)); font-size: .95rem; }
.poster { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.poster-btn { padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); cursor: zoom-in; }
.poster-btn img { display: block; width: 100%; }
.poster figcaption { font-size: .8rem; color: var(--muted); }
.facts { margin: 0; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.facts > div { display: grid; grid-template-columns: 4.4em 1fr; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--muted); font-weight: 700; display: flex; align-items: flex-start; gap: 6px; }
.facts dt .ic { margin-top: .25em; color: var(--cat-ink, var(--pine)); }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.ext .ic { width: .9em; height: .9em; margin-left: 4px; vertical-align: -.05em; }
.nw { white-space: nowrap; }
.org-more { display: flex; flex-direction: column; gap: 10px; }
.phone { font-size: 1.1em; font-weight: 800; user-select: all; }
.warn { background: var(--warn-soft); border-left: 6px solid var(--sun); padding: 12px 14px; border-radius: 8px; font-weight: 700; }
.ended { background: var(--gov-soft); color: var(--gov); padding: 12px 14px; border-radius: 8px; font-weight: 700; }
.actions { display: flex; flex-direction: column; gap: 10px; }
.desc { display: flex; flex-direction: column; gap: 8px; }
.source { font-size: .85rem; }
.related { display: flex; flex-direction: column; gap: 12px; }
.prose { display: flex; flex-direction: column; gap: 14px; }
.prose ul { list-style: disc; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }

/* 對話框 */
dialog.sheet {
  width: min(640px, 100vw); max-width: 100vw; max-height: 92vh; margin: auto auto 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border: 0; border-radius: 20px 20px 0 0; background: var(--surface); color: var(--ink); overflow-y: auto;
}
@media (min-width: 700px) { dialog.sheet { margin: auto; border-radius: 20px; } }
dialog::backdrop { background: rgba(10, 20, 16, .55); }
dialog.fallback[open] { position: fixed; inset: auto 0 0 0; z-index: 50; box-shadow: 0 -8px 40px rgba(0, 0, 0, .35); }
.sheet { display: none; }
.sheet[open] { display: flex; flex-direction: column; gap: 14px; }
/* 選單：從右邊滑出 */
dialog.drawer {
  width: min(340px, 88vw); max-width: 88vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border: 0; background: var(--surface); color: var(--ink); overflow-y: auto;
}
.drawer { display: none; }
.drawer[open] { display: flex; flex-direction: column; gap: 8px; animation: drawer-in .2s ease-out; }
dialog.drawer.fallback[open] { inset: 0 0 0 auto; height: 100vh; box-shadow: -8px 0 40px rgba(0, 0, 0, .35); }
@keyframes drawer-in { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .drawer[open] { animation: none; } }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list a, .menu-list button {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 4px;
  border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink);
  font: inherit; font-size: 1.1rem; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-list .ic { width: 1.35em; height: 1.35em; color: var(--pine); }
.menu-list [aria-current="page"] { color: var(--pine); }
.menu-list.sub { margin-top: 12px; }
.menu-list.sub a { font-weight: 400; min-height: 52px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.close { min-width: 48px; min-height: 48px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font-size: 1.1rem; cursor: pointer; }
.sheet-foot { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; position: sticky; bottom: 0; background: var(--surface); padding-top: 8px; }
.sheet-foot:has(> :only-child) { grid-template-columns: 1fr; }
.notice-box { background: var(--warn-soft); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 1.05rem; }
#filter-form { display: flex; flex-direction: column; gap: 20px; }
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
legend { font-weight: 800; margin-bottom: 8px; padding: 0; }
.seg { display: grid; gap: 6px; }
.seg-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg button {
  min-height: 52px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface);
  font-weight: 700; font-size: .95rem; cursor: pointer; color: var(--ink); padding: 4px 2px;
}
.seg button[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: #fff; }
#f-kw { min-height: var(--tap); border: 2px solid var(--line); border-radius: 12px; padding: 8px 14px; width: 100%; background: var(--surface); }
.confirm { border: 2px solid var(--pine); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 1.1rem; }
.area-step { display: flex; flex-direction: column; gap: 12px; }
.msg { background: var(--warn-soft); padding: 10px 12px; border-radius: 10px; }

/* 月曆 */
.cal { display: flex; flex-direction: column; gap: 8px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.cal-head button { min-width: 52px; min-height: 48px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.cal-grid .dow { font-size: .8rem; color: var(--muted); font-weight: 700; }
.cal-grid button { min-height: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.cal-grid button:disabled { color: #9aa6a1; background: transparent; border-color: transparent; cursor: default; }
.cal-grid button.in { background: var(--pine-soft); }
.cal-grid button.edge { background: var(--pine); color: #fff; border-color: var(--pine); }

/* 海報放大 */
dialog.viewer { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; background: #000; overflow: auto; touch-action: pinch-zoom pan-x pan-y; }
dialog.viewer img { display: block; width: 100%; height: auto; }
dialog.viewer .close { position: sticky; top: 8px; left: 8px; margin: 8px; background: #fff; color: #000; padding: 0 12px; }

.foot { padding-block: 20px 40px; border-top: 1px solid var(--line); margin-top: 8px; font-size: .9rem; display: flex; flex-direction: column; gap: 8px; color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }

@media (max-width: 380px) {
  :root { font-size: 18px; }
  .hero-art { width: 84px; height: 68px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }