:root{
    /* 越南漆器 sơn mài：深墨漆紅底 · 哑光金 · 翡翠 */
    --paper:#190d0b;       /* 頁面：深漆墨 */
    --paper-2:#241512;     /* 卡片面板：浮起 */
    --panel-3:#2e1c17;     /* hover 提亮 */
    --ink:#efe3cd;         /* 主文：暖象牙 */
    --ink-soft:#cbb997;    /* 次文 */
    --muted:#9a8a6f;       /* 弱化文字 */
    --line:#4e392c;        /* 金棕髮絲線 */
    --line-soft:#33201a;   /* 細分隔 */
    --red:#d35b4d;         /* 必比登：暖珊瑚紅 */
    --red-deep:#c1463a;
    --gold:#c8a04c;        /* 哑光金 */
    --gold-bright:#e6c378; /* 亮金（星等） */
    --jade:#7fb194;        /* 城市/翡翠 */
    --green:#a3bf6f;       /* 綠星：鼠尾草綠 */
    --serif-cjk:"Iansui", serif;
    --serif:"Fraunces", "Iansui", Georgia, serif;
    --sans:"Be Vietnam Pro", "Iansui", system-ui, sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    font-family:var(--sans);
    background:
      radial-gradient(135% 90% at 50% -10%, #2a1813 0%, #190d0b 58%, #120807 100%) fixed;
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  ::selection{background:var(--gold);color:#190d0b}
  a{color:inherit}

  .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,52px)}

  /* ───────── Masthead ───────── */
  .masthead{padding:clamp(40px,7vw,76px) 0 clamp(26px,4vw,40px);text-align:center;position:relative}
  .mark{font-size:18px;color:var(--gold);letter-spacing:.2em;margin-bottom:18px}
  .kicker{
    font-size:clamp(10px,1.4vw,12px);font-weight:600;letter-spacing:.42em;
    text-transform:uppercase;color:var(--red);margin-bottom:clamp(12px,2vw,18px);
    padding-left:.42em;
  }
  .masthead h1{
    font-family:var(--serif-cjk);font-weight:900;
    font-size:clamp(2.7rem,8.5vw,5.4rem);line-height:.98;letter-spacing:.04em;
    color:var(--gold-bright);
  }
  .masthead .latin{
    display:block;font-family:var(--serif);font-weight:400;font-style:italic;
    font-size:clamp(.95rem,2vw,1.3rem);letter-spacing:.02em;color:var(--ink-soft);
    margin-top:clamp(14px,2vw,20px);
  }
  .rule{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:clamp(22px,3vw,30px)}
  .rule::before,.rule::after{content:"";height:1px;width:min(30vw,230px);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 55%,transparent) 40%,color-mix(in srgb,var(--gold) 70%,transparent))}
  .rule::after{transform:scaleX(-1)}
  .rule span{font-family:var(--sans);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

  /* ───────── Controls ───────── */
  .controls{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(150%) blur(9px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .controls-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.4vw,30px);padding:13px 0}

  .editions{display:flex;align-items:baseline;gap:clamp(10px,1.6vw,20px)}
  .ed{
    font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,2.2vw,1.5rem);
    color:var(--muted);background:none;border:none;cursor:pointer;padding:2px 0;
    position:relative;transition:color .2s;letter-spacing:.01em;font-feature-settings:"tnum";
  }
  .ed:hover{color:var(--ink-soft)}
  .ed.on{color:var(--ink)}
  .ed.on::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--red)}

  .vbar{width:1px;align-self:stretch;background:var(--line);margin-block:4px}

  .toggles{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
  .tg{
    font-family:var(--sans);font-size:.86rem;font-weight:500;color:var(--muted);
    background:none;border:none;cursor:pointer;padding:3px 1px;position:relative;
    display:inline-flex;align-items:center;gap:6px;transition:color .18s;letter-spacing:.02em;
  }
  .tg:hover{color:var(--ink)}
  .tg .pip{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;transition:.18s}
  .tg.on{color:var(--ink)}
  .tg.on .pip{opacity:1}
  .tg.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor}
  .tg.aw-star.on{color:var(--gold)}
  .tg.aw-bib.on{color:var(--red)}
  .tg.aw-green.on{color:var(--green)}
  .tg.city.on{color:var(--jade)}
  .tg.veg.on{color:var(--green)}

  .search{margin-left:auto;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:4px 2px;min-width:170px;transition:border-color .2s}
  .search:focus-within{border-color:var(--ink)}
  .search svg{flex:none;opacity:.45}
  .search input{border:none;background:none;font-family:var(--sans);font-size:.86rem;color:var(--ink);width:100%;letter-spacing:.01em}
  .search input::placeholder{color:var(--muted)}
  .search input:focus{outline:none}

  /* ───────── Summary line ───────── */
  .ledger{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:clamp(22px,3.4vw,34px) 0 clamp(14px,2vw,20px)}
  .ledger .said{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,2vw,1.28rem);color:var(--ink-soft);letter-spacing:.01em}
  .ledger .said b{font-style:normal;font-weight:600;color:var(--ink)}
  .ledger .said .s-star{color:var(--gold)}
  .ledger .said .s-bib{color:var(--red)}
  .ledger .said .s-green{color:var(--green)}
  .ledger .reset{font-family:var(--sans);font-size:.8rem;color:var(--muted);background:none;border:none;cursor:pointer;letter-spacing:.04em;border-bottom:1px solid transparent;transition:.18s}
  .ledger .reset:hover{color:var(--red);border-color:var(--red)}
  /* 找最近的餐廳 — 右下角浮動按鈕（FAB） */
  .fab{
    position:fixed;right:clamp(16px,3.5vw,30px);bottom:clamp(16px,3.5vw,30px);z-index:60;
    display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
    font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:.05em;
    color:#1c0f0c;background:linear-gradient(135deg,#e9ca80,#c69a43);
    border:none;border-radius:999px;padding:13px 20px;cursor:pointer;
    box-shadow:0 12px 30px -10px rgba(0,0,0,.72),0 2px 6px -2px rgba(0,0,0,.5);
    transition:transform .22s cubic-bezier(.2,.7,.15,1),box-shadow .22s,background .25s;
    animation:fabIn .5s cubic-bezier(.2,.7,.15,1) .45s both;
  }
  .fab:hover{transform:translateY(-3px);box-shadow:0 18px 38px -12px rgba(0,0,0,.78)}
  .fab:active{transform:translateY(-1px)}
  .fab .fab-i{width:16px;height:16px;flex:none;margin-top:-1px}
  .fab.on{background:linear-gradient(135deg,#a8cdb4,#79ad8f);color:#11231a}
  .fab.loading{opacity:.65;pointer-events:none}
  @keyframes fabIn{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.fab{animation:none}}
  .ph .dist{position:absolute;top:10px;left:10px;z-index:2;background:color-mix(in srgb,var(--jade) 92%,#000);color:#fbf6ec;font-size:.72rem;font-weight:600;letter-spacing:.02em;padding:3px 8px;border-radius:999px}

  /* ───────── Grid ───────── */
  .grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(250px,30vw,310px),1fr));
    gap:clamp(20px,2.6vw,38px) clamp(18px,2.2vw,30px);padding-bottom:clamp(50px,8vw,90px);
  }
  .entry{
    background:var(--paper-2);border:1px solid var(--line-soft);border-radius:3px;
    overflow:hidden;display:flex;flex-direction:column;
    transition:border-color .25s, transform .25s, box-shadow .25s;
    animation:rise .55s cubic-bezier(.2,.7,.15,1) both;animation-delay:var(--d,0ms);
  }
  .entry:hover{border-color:color-mix(in srgb,var(--gold) 65%,transparent);transform:translateY(-3px);box-shadow:0 20px 42px -22px rgba(0,0,0,.7)}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.entry{animation:none}}

  .ph{display:block;position:relative;aspect-ratio:7/5;overflow:hidden;background:var(--line-soft)}
  .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.15,1);filter:saturate(1.02)}
  .entry:hover .ph img{transform:scale(1.045)}
  .ph-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:42px;background:linear-gradient(150deg,#2e1c17,#1d100d);filter:grayscale(.2) opacity(.92)}
  .ph .rate{
    position:absolute;left:11px;bottom:11px;display:inline-flex;align-items:center;gap:5px;
    font-family:var(--sans);font-size:.78rem;font-weight:600;color:#f3e8d2;
    background:color-mix(in srgb,#100706 72%,transparent);padding:3px 9px;border-radius:2px;
    backdrop-filter:blur(3px);letter-spacing:.02em;border:1px solid color-mix(in srgb,var(--gold) 22%,transparent);
  }
  .ph .rate .st{color:var(--gold-bright)}
  .ph .rate .rv{opacity:.72;font-weight:500}

  .body{padding:15px clamp(15px,1.5vw,18px) 17px;display:flex;flex-direction:column;flex:1}
  .over{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;flex-wrap:nowrap;gap:7px;line-height:1.4;min-width:0}
  .over .aw{font-weight:700;white-space:nowrap;flex:none}
  .over .aw.star{color:var(--gold)}
  .over .aw.bib{color:var(--red)}
  .over .aw.green{color:var(--green)}
  .over .aw.veg{color:var(--green);font-weight:600}
  .over .aw.sec{font-weight:600;color:var(--green);opacity:.92}
  .over .cz{color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
  .over .div{color:var(--line);font-weight:400;flex:none}

  .name{font-family:var(--serif);font-weight:500;font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.18;color:var(--ink);letter-spacing:.005em;margin-bottom:9px}

  .where{font-size:.84rem;color:var(--ink-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .where .city{color:var(--jade);font-weight:500}
  .where .bull{color:var(--line)}
  .where .price{font-weight:600;color:var(--gold);letter-spacing:.06em}
  .where .est{font-size:.66rem;color:var(--muted);font-weight:500;letter-spacing:.04em}

  .ends{margin-top:auto;padding-top:13px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
  .hist{font-size:.68rem;color:var(--muted);line-height:1.5;letter-spacing:.01em;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5em;row-gap:2px;min-width:0}
  .hist b{color:var(--ink-soft);font-weight:600;font-feature-settings:"tnum"}
  .hist .hy{white-space:nowrap}
  .hist .hy:not(:last-child)::after{content:"·";color:var(--line);margin-left:.5em}
  .map{
    flex:none;font-size:.78rem;font-weight:600;color:var(--ink);text-decoration:none;
    border-bottom:1px solid var(--line);padding-bottom:1px;transition:.18s;white-space:nowrap;letter-spacing:.02em;
  }
  .map:hover{color:var(--red);border-color:var(--red)}
  .map .ar{font-size:.7rem;margin-left:1px}
  .links{flex:none;display:flex;align-items:flex-end;gap:12px}
  .map.blog{color:var(--jade);border-bottom-color:color-mix(in srgb,var(--jade) 35%,transparent)}
  .map.blog:hover{color:var(--green);border-color:var(--green)}

  /* ───────── Selected chip / badge / lazy sentinel ───────── */
  .tg.aw-sel.on{color:var(--ink-soft)}
  .over .aw.sel{color:var(--muted)}
  .ledger .said .s-sel{color:var(--ink-soft)}
  .sentinel{grid-column:1/-1;height:1px}

  /* ───────── Empty ───────── */
  .empty{grid-column:1/-1;text-align:center;padding:clamp(50px,9vw,90px) 20px;color:var(--muted)}
  .empty .em{font-size:38px;margin-bottom:14px;color:color-mix(in srgb,var(--gold) 60%,transparent)}
  .empty h4{font-family:var(--serif);font-weight:500;font-size:1.25rem;color:var(--ink-soft);margin-bottom:6px}
  .empty p{font-size:.88rem}

  /* ───────── Colophon ───────── */
  .colophon{border-top:1px solid color-mix(in srgb,var(--gold) 32%,transparent);background:#140a08}
  .colophon .wrap{padding:clamp(26px,4vw,40px) 20px;text-align:center}
  .colophon h5{font-family:var(--serif);font-weight:600;font-size:1.04rem;color:var(--gold);margin-bottom:11px;letter-spacing:.02em}
  .colophon p{font-size:.82rem;color:var(--ink-soft);line-height:1.75;max-width:46ch}
  .colophon a{color:var(--red);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--red) 35%,transparent)}
  .colophon a:hover{border-color:var(--red)}
  .colophon .legend{display:flex;flex-direction:column;gap:7px;font-size:.8rem;color:var(--ink-soft)}
  .colophon .legend span{display:inline-flex;align-items:center;gap:9px}
  .colophon .legend .k{width:9px;height:9px;border-radius:50%;flex:none}
  .note{font-size:.76rem;color:var(--muted);line-height:1.7;border-left:2px solid var(--gold);padding-left:13px;margin-top:14px}
  .colophon .foot-mark{font-size:.72rem;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;text-align:center;line-height:1.95}

  @media(max-width:560px){
    .grid{grid-template-columns:1fr 1fr;gap:14px}
    .body{padding:12px 12px 14px}
    .name{font-size:1rem}
    .over .cz{max-width:90px}
    /* 食記／地圖改直排靠右（食記在上、地圖在下），左側留給歷年榮譽 */
    .links{flex-direction:column;align-items:flex-end;gap:6px}
    .colophon .wrap{grid-template-columns:1fr;gap:28px}
    .colophon .foot-mark{letter-spacing:.1em;line-height:1.9}
    .ledger{gap:10px}
    /* 篩選列改為整齊的整行堆疊，移除懸空的分隔線 */
    .controls-in{gap:0;padding:11px 0}
    .vbar{display:none}
    .editions{width:100%;gap:18px;padding-bottom:11px;border-bottom:1px solid var(--line-soft)}
    #awardTg{width:100%;padding:11px 0;gap:8px 22px}
    #cityTg{width:100%;padding-bottom:4px;gap:8px 22px}
    .search{margin-left:0;width:100%;order:5;margin-top:11px}
    /* 摘要句獨佔一行；檢視切換與清除篩選撐滿第二行、兩端對齊 */
    .ledger .said{width:100%}
    .ledger-acts{width:100%;justify-content:space-between}
  }
  @media(max-width:380px){.grid{grid-template-columns:1fr}}
  /* Cookie 告知橫幅 */
  .cookie-bar{
    position:fixed;left:clamp(16px,3.5vw,30px);bottom:clamp(16px,3.5vw,30px);z-index:70;
    max-width:min(430px,calc(100vw - 32px));
    display:flex;align-items:center;gap:14px;
    background:color-mix(in srgb,var(--paper-2) 94%,#000);
    border:1px solid var(--line);border-radius:14px;padding:14px 16px;
    box-shadow:0 12px 36px rgba(0,0,0,.5);font-family:var(--sans);
    animation:cookieRise .42s cubic-bezier(.2,.7,.15,1) both;
  }
  .cookie-bar[hidden]{display:none}
  .cookie-bar p{font-size:.82rem;line-height:1.5;color:var(--ink-soft);margin:0}
  .cookie-bar a{color:var(--jade);text-decoration:underline;text-underline-offset:2px}
  .cookie-bar button{
    flex:none;font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.02em;
    color:#190d0b;background:var(--gold);border:none;border-radius:999px;padding:8px 16px;cursor:pointer;
    transition:background .18s;
  }
  .cookie-bar button:hover{background:var(--gold-bright)}
  @keyframes cookieRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.cookie-bar{animation:none}}
  @media(max-width:520px){
    .cookie-bar{left:12px;right:12px;bottom:12px;max-width:none;flex-direction:column;align-items:stretch;text-align:center}
    .cookie-bar button{width:100%}
  }

  /* ───────── 檢視切換（列表／地圖） ───────── */
  .ledger-acts{display:flex;align-items:center;gap:16px;flex:none}
  .viewtg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
  .viewtg button{
    font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.04em;
    color:var(--muted);background:none;border:none;cursor:pointer;padding:5px 14px;transition:.18s;
  }
  .viewtg button:hover{color:var(--ink)}
  .viewtg button.on{background:var(--gold);color:#190d0b}

  /* ───────── 地圖檢視 ───────── */
  .grid[hidden],.mapbox[hidden]{display:none}
  .mapbox{
    height:clamp(420px,62vh,680px);margin-bottom:clamp(50px,8vw,90px);
    border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--paper-2);
  }
  .map-err{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:.88rem}
  /* Leaflet 的 CSS 於切換地圖時才動態載入（晚於本檔），覆寫一律以 .mapbox 提高權重 */
  .mapbox.leaflet-container{background:#120807;font-family:var(--sans)}
  /* CARTO dark_all 原始太暗：提亮並往主題的暖棕色調靠（只作用於圖磚層，不影響圖釘與 popup） */
  .mapbox .leaflet-tile-pane{filter:brightness(1.5) contrast(.92) sepia(.22) saturate(1.08) hue-rotate(-8deg)}
  /* 圖釘：依榮譽分色 */
  .pin{display:block;width:14px;height:14px;border-radius:50%;border:2px solid #190d0b;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.6)}
  .pin-star{background:var(--gold-bright)}
  .pin-bib{background:var(--red)}
  .pin-green{background:var(--green)}
  .pin-sel{background:#9a8a6f}
  .pin-you{background:#6fb6ff;box-shadow:0 0 0 4px rgba(111,182,255,.28),0 2px 8px rgba(0,0,0,.6)}
  /* Popup 套用漆器主題 */
  .mapbox .leaflet-popup-content-wrapper{background:var(--paper-2);color:var(--ink);border:1px solid var(--line);border-radius:6px;box-shadow:0 16px 40px -14px rgba(0,0,0,.85);padding:0;overflow:hidden}
  .mapbox .leaflet-popup-content{margin:0;line-height:1.5}
  .mapbox .leaflet-popup-tip{background:var(--paper-2);border:1px solid var(--line)}
  .mapbox.leaflet-container a.leaflet-popup-close-button{color:var(--muted);padding-top:6px}
  .mapbox.leaflet-container a.leaflet-popup-close-button:hover{color:var(--ink)}
  .pp{width:230px}
  .pp-ph{display:block;width:100%;height:110px;object-fit:cover}
  .pp-bd{padding:11px 13px 13px}
  .pp-aws{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:5px}
  .pp-aw.star{color:var(--gold)}
  .pp-aw.bib{color:var(--red)}
  .pp-aw.green{color:var(--green)}
  .pp-aw.sel{color:var(--muted)}
  .pp-name{font-family:var(--serif);font-weight:500;font-size:1.02rem;color:var(--ink);line-height:1.2;margin:0 0 6px}
  .pp-meta{font-size:.78rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
  .pp-meta .pp-dot{color:var(--line)}
  .pp-rate{color:var(--gold-bright);font-weight:600}
  .pp-price{color:var(--gold);font-weight:600}
  .pp-dist{color:var(--jade);font-weight:600}
  .mapbox.leaflet-container a.pp-map{
    display:inline-block;margin-top:9px;font-size:.78rem;font-weight:600;color:var(--ink);
    text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;transition:.18s;
  }
  .mapbox.leaflet-container a.pp-map:hover{color:var(--red);border-color:var(--red)}
  /* 縮放鈕／版權列配色 */
  .mapbox .leaflet-bar a{background:var(--paper-2);color:var(--ink);border-bottom:1px solid var(--line-soft)}
  .mapbox .leaflet-bar a:hover,.mapbox .leaflet-bar a:focus{background:var(--panel-3);color:var(--ink)}
  .mapbox .leaflet-bar a.leaflet-disabled{background:var(--paper-2);color:var(--line)}
  .mapbox .leaflet-control-attribution{background:color-mix(in srgb,#140a08 82%,transparent)!important;color:var(--muted)}
  .mapbox .leaflet-control-attribution a{color:var(--ink-soft)}

  /* ───────── 語言切換器 ───────── */
  .lang-pick{position:absolute;top:16px;right:16px;z-index:6}
  .lang-pick select{
    appearance:none;-webkit-appearance:none;
    background:transparent;border:1px solid var(--line);border-radius:999px;
    color:var(--muted);font-family:var(--sans);font-size:11px;letter-spacing:.06em;
    padding:5px 24px 5px 12px;cursor:pointer;transition:.18s;
  }
  .lang-pick select:hover{color:var(--ink);border-color:var(--ink)}
  .lang-pick select:focus{outline:none;border-color:var(--gold)}
  .lang-pick::after{content:"▾";position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:9px;color:var(--muted)}
  .lang-pick option{background:#190d0b;color:#eee}