:root{
  --paper:#faf8f4;
  --card:#ffffff;
  --line:#e3e0d4;
  --ink:#232620;
  --ink-soft:#6b7268;
  --navy:#1c3144;
  --gold:#b9822f;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans TC","Inter",sans-serif;
  line-height:1.6;
}

header{
  background:var(--navy);
  color:#f4f1e8;
  padding:44px 20px 36px;
}
.header-inner{
  max-width:880px;
  margin:0 auto;
}
.eyebrow{
  font-family:"Inter",sans-serif;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#d8b877;
  margin-bottom:10px;
}
h1{
  font-family:"Noto Serif TC",serif;
  font-weight:700;
  font-size:clamp(24px,5.5vw,34px);
  margin:0 0 12px;
  line-height:1.5;
}
.desc{
  font-size:14px;
  color:#cfd3c9;
  max-width:600px;
  line-height:1.9;
}
.stats{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:28px;
}
.stat{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:10px;
  padding:14px 18px;
  min-width:120px;
  flex:1 1 140px;
}
.stat .n{
  font-family:"Inter",sans-serif;
  font-size:26px;
  font-weight:600;
  color:#e7c583;
  line-height:1;
}
.stat .l{
  font-size:12px;
  color:#c7cbc0;
  margin-top:6px;
}

main{
  max-width:880px;
  margin:0 auto;
  padding:28px 20px 80px;
}

.note{
  font-size:13px;
  line-height:1.9;
  color:var(--ink-soft);
  background:#f1eee1;
  border-radius:8px;
  padding:14px 16px;
  margin-bottom:22px;
}

.toolbar{
  display:flex;
  gap:10px;
  margin-bottom:16px;
}
#search{
  flex:1;
  padding:12px 16px;
  border:1.5px solid var(--line);
  border-radius:8px;
  font-size:15px;
  background:var(--card);
  font-family:"Noto Sans TC",sans-serif;
  color:var(--ink);
}
#search:focus{outline:none; border-color:var(--gold);}
#count-live{
  font-family:"Inter",sans-serif;
  font-size:12.5px;
  color:var(--ink-soft);
  white-space:nowrap;
  align-self:center;
  padding-right:2px;
}

/* directory list — works on any screen width */
.list{
  border-top:1px solid var(--line);
}
.item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 4px;
  border-bottom:1px solid var(--line);
}
.item:hover{background:rgba(185,130,47,0.05);}
.idx{
  font-family:"Inter",sans-serif;
  font-size:13px;
  color:var(--gold);
  font-weight:600;
  width:28px;
  flex:none;
  padding-top:2px;
}
.body{
  flex:1;
  min-width:0;
}
.name{
  font-family:"Noto Serif TC",serif;
  font-weight:600;
  font-size:16px;
  color:var(--navy);
  margin-bottom:3px;
}
.addr{
  font-size:13.5px;
  color:var(--ink-soft);
}
.tag{
  flex:none;
  font-family:"Inter",sans-serif;
  font-size:11px;
  font-weight:500;
  color:#8a5a1a;
  background:#f3e6cd;
  border-radius:20px;
  padding:5px 11px;
  white-space:nowrap;
  align-self:center;
}

@media (max-width: 560px){
  .item{ flex-wrap:wrap; }
  .tag{ margin-left:42px; }
}

footer{
  max-width:880px;
  margin:0 auto;
  padding:0 20px 60px;
  font-family:"Inter",sans-serif;
  font-size:11.5px;
  color:#9a9c8f;
  line-height:1.8;
}