/* 生活資訊 /info 主題分區（垃圾車、停水停電、便民公告、緊急與醫療）。類名 lh-。
   沿用全站數據語言（--dl-*）；尺寸照介面標準：按鈕 36px（小 30px）、標籤 22px 間 6px、底色框內容離邊至少 8px、上下對稱。 */
.lh-page { padding-top: 12px; padding-bottom: 40px; }
.lh { --lh-g: var(--dl-sea, #0c7078); --lh-r: #8fc3c6; --lh-w: #3d6f9e; --lh-p: #d08a1e; --lh-card: #fff; min-width: 0; }
.lh *, .lh *::before, .lh *::after { box-sizing: border-box; }
.lh-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--dl-hair, #e3ded3); scrollbar-width: none; }
.lh-tabs::-webkit-scrollbar { display: none; }
.lh-tab { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: 999px; color: var(--dl-ink, #10242a);
  text-decoration: none; font: 600 14px/1 var(--dl-sans); white-space: nowrap; }
.lh-tab.is-on { background: var(--dl-ink, #10242a); color: #fff; }
.lh-tab:focus-visible, .lh-chip:focus-visible, .lh-btn:focus-visible { outline: 2px solid var(--dl-sea, #0c7078); outline-offset: 2px; }

.lh-head { padding: 20px 0 10px; }
.lh-title { font-size: clamp(26px, 4.4vw, 40px) !important; margin: 0; }
.lh-sub { margin: 6px 0 0; font-size: 13px; color: var(--dl-ink2, #56676c); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.lh-src { position: relative; display: inline-block; }
.lh-src summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px;
  border: 1px solid var(--dl-hair, #e3ded3); font-size: 12px; color: var(--dl-ink2, #56676c); background: #fff; }
.lh-src summary::-webkit-details-marker { display: none; }
.lh-src ul { position: absolute; z-index: 20; left: 0; top: 28px; width: min(420px, calc(100vw - 32px)); margin: 0; padding: 8px 12px; list-style: none;
  background: #fff; border: 1px solid var(--dl-hair, #e3ded3); border-radius: 12px; box-shadow: 0 8px 24px rgba(16, 36, 42, .1); }
.lh-src li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--dl-hair, #e3ded3); font-size: 12.5px; }
.lh-src li:last-child { border-bottom: 0; }
.lh-src li a { color: var(--dl-ink, #10242a); }
.lh-src li span { color: var(--dl-ink3, #8a9699); white-space: nowrap; }

.lh-card { background: var(--lh-card, #fff); border: 1px solid var(--dl-hair, #e3ded3); border-radius: 16px; padding: 14px 16px; margin: 0 0 14px; min-width: 0; }
.lh-card__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 10px; }
.lh-card__h h3 { margin: 0; font: 700 17px/1.4 var(--dl-sans); color: var(--dl-ink, #10242a); }
.lh-card__v { font-size: 12.5px; color: var(--dl-ink2, #56676c); }
.lh-h4 { margin: 16px 0 8px; font: 700 15px/1.4 var(--dl-sans); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.lh-h4 small { font-weight: 400; font-size: 12.5px; color: var(--dl-ink2, #56676c); }
.lh-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--dl-ink2, #56676c); }
.lh-empty { margin: 4px 0; font-size: 14px; line-height: 1.7; color: var(--dl-ink2, #56676c); }
.lh-stamp { margin: 6px 0 14px; font-size: 12px; color: var(--dl-ink3, #8a9699); }

.lh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--dl-ink, #10242a);
  background: var(--dl-ink, #10242a); color: #fff; font: 600 14px/1 var(--dl-sans); cursor: pointer; white-space: nowrap; }
.lh-btn--loc { background: #fff; color: var(--dl-ink, #10242a); }
.lh-chips, .lh-vills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; align-items: center; }
.lh-vills { margin: 12px 0 0; }
.lh-vills__k { font-size: 12.5px; color: var(--dl-ink2, #56676c); margin-right: 4px; }
.lh-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--dl-hair, #e3ded3);
  background: #fff; color: var(--dl-ink, #10242a); text-decoration: none; font: 600 13px/1 var(--dl-sans); white-space: nowrap; }
.lh-chip small { font-weight: 400; font-size: 11.5px; color: var(--dl-ink3, #8a9699); }
.lh-chip.is-on { background: var(--lh-g); border-color: var(--lh-g); color: #fff; }
.lh-chip.is-on small { color: #d8ecec; }

/* 鄉鎮選單 */
.lh-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 2px 0 14px; }
.lh-pick__l { font-size: 13px; color: var(--dl-ink2, #56676c); }
.lh-sel { height: 36px; min-width: 150px; max-width: 100%; padding: 0 10px; border: 1px solid var(--dl-ink, #10242a); border-radius: 10px; background: #fff;
  font: 600 15px/1 var(--dl-sans); color: var(--dl-ink, #10242a); }
.lh-loc-msg { flex-basis: 100%; margin: 0; }

/* 數字卡 */
.lh-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.lh-num { background: #fff; border: 1px solid var(--dl-hair, #e3ded3); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.lh-num b { font: 600 26px/1.15 var(--dl-mono); color: var(--dl-ink, #10242a); }
.lh-num small { margin-left: 4px; font-size: 12px; color: var(--dl-ink2, #56676c); }
.lh-num span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--dl-ink2, #56676c); }
@media (max-width: 720px) { .lh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 圖例 */
.lh-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--dl-ink2, #56676c); }
.lh-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.lh-leg i.g { background: var(--lh-g); } .lh-leg i.r { background: var(--lh-r); } .lh-leg i.w { background: var(--lh-w); } .lh-leg i.p { background: var(--lh-p); }

/* 今天幾點有車：48 格細柱 */
.lh-tl__plot { position: relative; display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 1px; height: 96px; align-items: end;
  border-bottom: 1px solid var(--dl-ink, #10242a); }
.lh-tl__c { position: relative; height: 100%; display: flex; flex-direction: column-reverse; }
.lh-tl__c i { display: block; width: 100%; }
.lh-tl__c i.g { background: var(--lh-g); } .lh-tl__c i.r { background: var(--lh-r); }
.lh-tl__now { position: absolute; top: -4px; bottom: 0; width: 0; border-left: 2px solid var(--dl-stop, #c0392b); }
.lh-tl__now em { position: absolute; top: -2px; left: 4px; font: 600 11px/1 var(--dl-mono); font-style: normal; color: var(--dl-stop, #c0392b); white-space: nowrap; }
.lh-tl__ax { display: flex; justify-content: space-between; margin-top: 4px; font: 500 11px/1 var(--dl-mono); color: var(--dl-ink3, #8a9699); }

/* 找清運點 */
.lh-q { display: flex; gap: 8px; flex-wrap: wrap; }
.lh-in { flex: 1 1 220px; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--dl-hair-strong, #c9c3b6); border-radius: 10px; font: 15px/1 var(--dl-sans); }
.lh-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 14px 0 0; }
.lh-next__i { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: var(--dl-paper2, #f6f4ef); }
.lh-next__i b { font: 600 20px/1.2 var(--dl-mono); }
.lh-next__i span:last-child { font-size: 14px; }
.lh-next__i small { margin-left: 6px; color: var(--dl-ink2, #56676c); font-size: 12px; }
.lh-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 600 12px/1 var(--dl-sans); font-style: normal; white-space: nowrap;
  background: #eef3f2; color: var(--dl-ink, #10242a); }
.lh-tag.is-g { background: var(--lh-g); color: #fff; } .lh-tag.is-r { background: #d9eeee; color: #0a4e55; }
.lh-tag.is-w { background: #e1ebf5; color: #26476b; } .lh-tag.is-p { background: #f8ecd8; color: #7a4d0a; }
.lh-tag.is-c-stop, .lh-tag.is-c-safety { background: #fbe4dc; color: #8f2f12; }
.lh-tag.is-c-traffic, .lh-tag.is-c-works { background: #f8ecd8; color: #7a4d0a; }
.lh-tag.is-c-outage { background: #e1ebf5; color: #26476b; }
.lh-tag.is-c-health, .lh-tag.is-c-env { background: #e4f0e0; color: #34561f; }
.lh-tag.is-c-aid { background: #ece9f5; color: #4a3f7a; }

.lh-week { width: 100%; border-collapse: collapse; font-size: 14px; }
.lh-week th, .lh-week td { padding: 6px 8px; border-bottom: 1px solid var(--dl-hair, #e3ded3); text-align: left; font-variant-numeric: tabular-nums; }
.lh-week thead th { font-size: 12px; font-weight: 600; color: var(--dl-ink2, #56676c); }
.lh-week tbody th { width: 64px; font-weight: 700; }
.lh-week tbody th small { margin-left: 4px; font-weight: 400; font-size: 11px; color: var(--dl-stop, #c0392b); }
.lh-week tr.is-today { background: #f3f8f7; }

.lh-days { display: inline-flex; gap: 2px; margin-right: 6px; }
.lh-days i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font: 600 10.5px/1 var(--dl-sans); font-style: normal;
  color: var(--dl-ink3, #b3bbbd); background: #f1efea; }
.lh-days i.is-on.is-g { background: var(--lh-g); color: #fff; }
.lh-days i.is-on.is-r { background: var(--lh-r); color: #0a4e55; }

.lh-stops { list-style: none; margin: 0; padding: 0; }
.lh-stops li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "t n d" "t w w"; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--dl-hair, #e3ded3); }
.lh-stops__t { grid-area: t; font: 600 15px/1.4 var(--dl-mono); }
.lh-stops__n { grid-area: n; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.lh-stops__n b { font-size: 15px; overflow-wrap: anywhere; }
.lh-stops__n a { font-size: 12.5px; color: var(--dl-ink2, #56676c); }
.lh-stops__d { grid-area: d; }
.lh-stops__w { grid-area: w; font-size: 12.5px; color: var(--dl-ink2, #56676c); }
@media (max-width: 600px) { .lh-stops li { grid-template-areas: "t n" "t d" "t w"; grid-template-columns: 52px minmax(0, 1fr); } }

.lh-rstops { margin: 12px 0 0; padding: 0; list-style: none; columns: 3 240px; column-gap: 20px; }
.lh-rstops li { break-inside: avoid; display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 14px; border-bottom: 1px dotted var(--dl-hair, #e3ded3); }
.lh-rstops li small { color: var(--dl-ink3, #8a9699); font-size: 11.5px; }
.lh-rstops li.is-past { color: var(--dl-ink3, #8a9699); }

/* 路線表 */
.lh-rt { display: block; }
.lh-rt__h, .lh-rt__r { display: grid; grid-template-columns: 78px minmax(0, 1.4fr) 110px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--dl-hair, #e3ded3); }
.lh-rt__h { font-size: 12px; color: var(--dl-ink2, #56676c); padding-top: 0; }
.lh-rt__r { color: inherit; text-decoration: none; }
.lh-rt__r:hover { background: #f8f7f3; }
.lh-rt__n { min-width: 0; display: flex; flex-direction: column; }
.lh-rt__n b { font-size: 14.5px; overflow-wrap: anywhere; }
.lh-rt__n small { font-size: 12px; color: var(--dl-ink2, #56676c); }
.lh-rt__t { font: 600 14px/1.3 var(--dl-mono); }
.lh-st { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font: 600 12px/1 var(--dl-sans); font-style: normal; white-space: nowrap;
  background: #f1efea; color: var(--dl-ink2, #56676c); }
.lh-st.is-run { background: var(--dl-go, #2e7d4f); color: #fff; } .lh-st.is-wait { background: #e3f0ef; color: #0a4e55; }
.lh-st.is-done { background: #f1efea; color: var(--dl-ink3, #8a9699); } .lh-st.is-off { background: transparent; color: var(--dl-ink3, #8a9699); border: 1px dashed var(--dl-hair, #e3ded3); }
@media (max-width: 720px) {
  .lh-rt__h { display: none; }
  .lh-rt__r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n t" "s s" "g g" "r r"; }
  .lh-rt__r > span:nth-child(1) { grid-area: s; } .lh-rt__n { grid-area: n; } .lh-rt__t { grid-area: t; }
  .lh-rt__r > span:nth-child(4) { grid-area: g; } .lh-rt__r > span:nth-child(5) { grid-area: r; }
  .lh-rt__r > span[data-k]::before { content: attr(data-k); display: inline-block; width: 64px; font-size: 12px; color: var(--dl-ink2, #56676c); }
}

/* 停水停電 */
.lh-d14__plot { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; }
.lh-d14__c { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.lh-d14__bar { position: relative; width: 100%; max-width: 26px; height: 80px; display: flex; flex-direction: column-reverse; background: #f4f2ed; border-radius: 4px 4px 0 0; overflow: hidden; }
.lh-d14__bar i { display: block; width: 100%; } .lh-d14__bar i.w { background: var(--lh-w); } .lh-d14__bar i.p { background: var(--lh-p); }
.lh-d14__c b { font: 600 12px/1 var(--dl-mono); min-height: 12px; }
.lh-d14__c em { font: 500 11px/1.2 var(--dl-mono); font-style: normal; color: var(--dl-ink2, #56676c); text-align: center; }
.lh-d14__c em small { display: block; font-family: var(--dl-sans); font-size: 10.5px; }
.lh-d14__c.is-today em { color: var(--dl-stop, #c0392b); font-weight: 700; }
.lh-ot__h, .lh-ot__r { display: grid; grid-template-columns: 170px 74px minmax(0, 1.6fr) minmax(0, 1fr) 128px; gap: 4px 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--dl-hair, #e3ded3); font-size: 14px; }
.lh-ot__h { font-size: 12px; color: var(--dl-ink2, #56676c); padding-top: 0; }
.lh-ot__w { font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.lh-ot__p { min-width: 0; display: flex; flex-direction: column; }
.lh-ot__p small { font-size: 12.5px; color: var(--dl-ink2, #56676c); overflow-wrap: anywhere; }
.lh-ot__r.is-end { color: var(--dl-ink3, #8a9699); }
.lh-ext { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--dl-ink, #10242a); }
@media (max-width: 720px) {
  .lh-ot__h { display: none; }
  .lh-ot__r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "w k" "p p" "y y" "s s"; }
  .lh-ot__w { grid-area: w; } .lh-ot__r > span:nth-child(2) { grid-area: k; } .lh-ot__p { grid-area: p; } .lh-ot__y { grid-area: y; font-size: 12.5px; color: var(--dl-ink2, #56676c); }
  .lh-ot__r > span:nth-child(5) { grid-area: s; }
}
.lh-more summary { cursor: pointer; font: 600 14px/36px var(--dl-sans); }

/* 便民公告 */
.lh-nl { list-style: none; margin: 0; padding: 0; }
.lh-nl li { display: grid; grid-template-columns: 44px 72px minmax(0, 1fr); grid-template-areas: "d c t" "d c s"; gap: 2px 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--dl-hair, #e3ded3); }
.lh-nl time { grid-area: d; font: 600 13px/1.5 var(--dl-mono); color: var(--dl-ink2, #56676c); }
.lh-nl .lh-tag { grid-area: c; justify-self: start; }
.lh-nl a { grid-area: t; color: var(--dl-ink, #10242a); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.lh-nl small { grid-area: s; font-size: 12px; color: var(--dl-ink3, #8a9699); }
@media (max-width: 600px) { .lh-nl li { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "d c" "t t" "s s"; } .lh-nl .lh-tag { justify-self: start; } }
.lh-bars { display: grid; gap: 4px; margin-bottom: 6px; }
.lh-bars__r { display: grid; grid-template-columns: 96px minmax(0, 1fr) 36px; gap: 8px; align-items: center; min-height: 30px; text-decoration: none; color: inherit; border-radius: 6px; padding: 0 4px; }
.lh-bars__r.is-on { background: #eef6f5; }
.lh-bars__n { font-size: 13px; }
.lh-bars__t { height: 10px; background: #f1efea; border-radius: 5px; overflow: hidden; }
.lh-bars__t i { display: block; height: 100%; background: var(--lh-p); border-radius: 5px; }
.lh-bars__v { font: 600 13px/1 var(--dl-mono); text-align: right; }
.lh-dl { list-style: none; margin: 0; padding: 0; }
.lh-dl li { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "d b" "d s"; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--dl-hair, #e3ded3); }
.lh-dl__d { grid-area: d; font: 600 13px/1.5 var(--dl-mono); color: var(--dl-ink2, #56676c); }
.lh-dl b { grid-area: b; font-size: 14px; overflow-wrap: anywhere; }
.lh-dl small { grid-area: s; font-size: 12px; color: var(--dl-ink2, #56676c); overflow-wrap: anywhere; }
@media (max-width: 600px) { .lh-dl li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "d" "b" "s"; } }

/* 待確認事項 */
.lh-gaps { margin: 22px 0 0; padding: 12px 16px; border-top: 2px solid var(--dl-ink, #10242a); background: var(--dl-paper2, #f6f4ef); border-radius: 0 0 12px 12px; }
.lh-gaps h3 { margin: 0 0 6px; font: 700 15px/1.4 var(--dl-sans); }
.lh-gaps ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.75; color: var(--dl-ink2, #56676c); }
.lh-vsel { margin-top: 10px; align-items: center; }
.lh-vsel .lh-sel { flex: 1 1 220px; font-weight: 500; font-size: 14px; }
@media (max-width: 600px) { .lh-week th, .lh-week td { padding: 6px 4px; font-size: 12.5px; white-space: nowrap; } .lh-week tbody th { width: 44px; } }
.lh-title .dl-title__cl { white-space: normal; }