.search-shell{
  width:min(1100px,calc(100% - 32px));
  margin:0 auto;
  padding:clamp(46px,7vw,82px) 0 72px;
}
.search-shell .eyebrow{
  margin:0 0 12px;
  color:#6b746f;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.search-shell h1{
  margin:0;
  color:#202420;
  font-family:var(--font-serif,"Noto Serif TC","PMingLiU",serif);
  font-size:clamp(34px,5vw,58px);
  font-weight:600;
  line-height:1.12;
}
.search-shell .lead{
  max-width:680px;
  margin:14px 0 30px;
  color:#69736e;
  font-size:13px;
  line-height:1.8;
}
.controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,260px);
  gap:10px;
}
.search-box,
.controls select{
  width:100%;
  min-height:54px;
  padding:0 15px;
  border:1px solid #d4dbd7;
  border-radius:0;
  background:#fff;
  color:#202420;
  font:inherit;
  outline:none;
}
.search-box:focus,
.controls select:focus{
  border-color:#aeb8b3;
  box-shadow:0 0 0 3px rgba(52,59,58,.05);
}
.hint,
#count{
  color:#69736e;
  font-size:10.5px;
  line-height:1.7;
}
.hint{margin:12px 0 4px}
#count{margin:0}
.results{
  display:grid;
  gap:10px;
  margin-top:24px;
}
.result{
  display:grid;
  grid-template-columns:130px minmax(0,1fr) 26px;
  grid-template-areas:
    "cat title arrow"
    "cat summary arrow";
  gap:4px 18px;
  align-items:center;
  padding:18px 20px;
  border:1px solid #e1e5e2;
  border-radius:0;
  background:#fff;
  color:inherit;
  text-decoration:none;
  box-shadow:none;
}
.result::after{
  content:"→";
  grid-area:arrow;
  color:#343b3a;
  font-size:16px;
  justify-self:end;
}
.result small{
  grid-area:cat;
  color:#6e7974;
  font-size:10px;
  font-weight:700;
}
.result h2{
  grid-area:title;
  margin:0;
  color:#202420;
  font-family:var(--font-serif,"Noto Serif TC","PMingLiU",serif);
  font-size:17px;
  font-weight:600;
}
.result p{
  grid-area:summary;
  margin:0;
  color:#69736e;
  font-size:11px;
  line-height:1.65;
}
.result:hover,
.result[aria-selected="true"],
.result:focus-visible{
  border-color:#bcc6c1;
  outline:none;
  box-shadow:0 8px 20px rgba(41,49,45,.045);
}
.empty{
  padding:40px 20px;
  border:1px solid #e1e5e2;
  background:#fff;
  color:#69736e;
  text-align:center;
}
.recommend-label{
  margin:10px 0 0;
  padding:10px 0 4px;
  color:#343b3a;
  font-size:11px;
  font-weight:700;
}
.recent{margin:1rem 0}
.recent div{display:flex;flex-wrap:wrap;gap:.5rem}
.recent button{
  padding:.45rem .7rem;
  border:1px solid #d4dbd7;
  border-radius:999px;
  background:#fff;
  color:#343b3a;
  cursor:pointer;
}
@media(max-width:700px){
  .search-shell{width:calc(100% - 28px);padding:34px 0 52px}
  .controls{grid-template-columns:1fr}
  .result{
    grid-template-columns:78px minmax(0,1fr) 20px;
    gap:4px 10px;
    padding:15px 14px;
  }
  .result h2{font-size:15px}
  .result p{font-size:10.5px}
}
@media(max-width:390px){
  .search-shell{width:calc(100% - 24px)}
}