@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600;700;800;900&display=swap");
:root { --ink: #163d37; --mint: #248b77; --coral: #d86154; --paper: #f7f4ea; --line: rgba(22,61,55,.18); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.7 "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.search-topbar { min-height: 78px; padding: 16px clamp(20px,5vw,76px); display: flex; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid var(--line); }
.search-brand { font-weight: 900; font-size: 20px; }
.search-brand span { margin-left: 8px; color: #57736b; font-size: 13px; font-weight: 600; }
.search-topbar nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; }
.search-topbar a:hover, .search-footer a:hover { color: var(--coral); }
.search-main { max-width: 1000px; min-height: 68vh; padding: 62px 24px 90px; margin: auto; }
.search-eyebrow { margin: 0 0 12px; color: var(--mint); font: 12px ui-monospace, monospace; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(34px,5vw,56px); line-height: 1.25; }
.search-intro { color: #557269; margin: 17px 0 32px; }
#siteSearchForm label { display: block; margin-bottom: 7px; font-weight: 800; font-size: 14px; }
#siteSearchForm > div { display: flex; background: white; border: 1px solid var(--ink); box-shadow: 7px 7px 0 rgba(36,139,119,.13); }
#siteSearchInput { width: 100%; min-width: 0; padding: 16px 18px; border: 0; background: transparent; color: var(--ink); }
#siteSearchForm button { min-width: 114px; border: 0; background: var(--ink); color: white; font-weight: 900; cursor: pointer; }
#siteSearchForm button:hover { background: var(--mint); }
.search-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 19px 0 30px; color: #5b746d; font-size: 13px; }
.search-hints a { padding: 3px 11px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.search-hints a:hover { border-color: var(--mint); }
#searchStatus { min-height: 28px; font-weight: 800; }
.search-results { display: grid; gap: 12px; margin-top: 14px; }
.search-result, .search-empty { padding: 22px 25px; background: white; border: 1px solid var(--line); }
.search-result { display: block; transition: border-color .2s ease, transform .2s ease; }
.search-result:hover { border-color: var(--mint); transform: translateY(-2px); }
.search-result > span { color: var(--coral); font-size: 12px; font-weight: 900; }
.search-result h2, .search-empty h2 { margin: 5px 0; font-size: 22px; }
.search-result p, .search-empty p { margin: 0; color: #5b746d; font-size: 14px; overflow-wrap: anywhere; }
.search-result small, .search-empty a { display: inline-block; margin-top: 10px; color: var(--mint); font-weight: 800; }
.search-note { margin-top: 24px; color: #657a73; font-size: 13px; }
.search-footer { padding: 30px clamp(20px,5vw,76px); display: flex; flex-wrap: wrap; align-items: center; gap: 25px; background: var(--ink); color: white; font-size: 14px; }
@media (max-width: 620px) { .search-topbar { align-items: start; flex-direction: column; gap: 8px; } .search-main { padding-top: 40px; } #siteSearchForm > div { flex-direction: column; } #siteSearchForm button { min-height: 48px; } }