/* 手機底部導覽、平板雙列頂部導覽、桌機單列頂部導覽。 */
@media screen {
 .topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;height:auto;min-height:80px;padding:12px max(24px,calc((100% - 1184px)/2));position:sticky;top:0;background:rgba(255,253,248,.97);border-bottom:1px solid #dfE5e1;z-index:25}
 .brand{width:auto;min-width:0;max-width:none;padding-right:0;flex:none;gap:10px}
 .brand-mark{width:40px;height:40px;flex:0 0 40px;transform:none}
 .brand b{font-size:18px;white-space:nowrap}.brand small{font-size:11px}
 .header-actions{position:static;inset:auto;display:flex;align-items:center;gap:8px;width:auto;min-width:0;margin:0;flex-wrap:nowrap}
 #searchOpen{display:inline-grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:#fffdf8}
 #language{height:44px;min-width:100px;max-width:148px;width:132px;padding:0 10px;border-radius:12px;background:#fffdf8;font-size:14px}
 .desktop-nav{display:flex;justify-content:center;align-items:center;height:auto;gap:6px;min-width:0}
 .desktop-nav button{min-height:44px;min-width:64px;padding:10px 15px;border-radius:12px;line-height:1.35;font-size:15px;color:#53665d;white-space:normal;overflow-wrap:anywhere}
 .desktop-nav button.active{background:#e7eee7;color:#17483b;font-weight:800}
 .desktop-nav button.active:after{left:20px;right:20px;bottom:3px;height:2px;background:#c98444}
 .desktop-nav button:hover{background:#eef2eb}
 .topbar button:focus-visible,.topbar a:focus-visible,.topbar select:focus-visible,.mobile-nav button:focus-visible{outline:3px solid #c98444;outline-offset:3px}
 .mobile-nav{display:none}
 body{padding-bottom:0}
 @media (min-width:600px) and (max-width:1000px){
  .topbar{grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;padding:12px 24px 10px}
  .desktop-nav{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;justify-content:stretch}
  .desktop-nav button{width:100%;min-height:46px;padding:10px 8px}
  .header-actions{grid-column:2;grid-row:1}
  .brand small{display:block}
  #toast{bottom:24px}
 }
 @media (max-width:599px){
  .topbar{grid-template-columns:minmax(0,1fr) auto;min-height:68px;padding:10px 12px;gap:8px}
  .brand{min-width:0;width:auto;padding:0;gap:8px}.brand-mark{width:34px;height:34px;flex-basis:34px;font-size:18px}.brand b{font-size:16px}.brand small{display:none}
  .desktop-nav{display:none}.header-actions{gap:6px}
  #language{width:108px;min-width:92px;max-width:108px;padding:0 6px;font-size:13px}
  .mobile-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;inset:auto 0 0;min-height:76px;height:auto;padding:7px 8px calc(7px + env(safe-area-inset-bottom));gap:4px;border-top:1px solid #dfe5e1;background:rgba(255,253,248,.98);z-index:30;box-shadow:0 -4px 20px #17332c08}
  .mobile-nav button{min-width:0;min-height:60px;padding:6px 3px;border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;color:#63716d;background:transparent;border:0}
  .mobile-nav button.active{background:#e7eee7;color:#17483b}
  .mobile-nav b{font-size:12px;line-height:1.3;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
  .mobile-nav .nav-symbol{flex:none;margin:0;width:22px;height:22px}
  body{padding-bottom:calc(106px + env(safe-area-inset-bottom))}
  #toast{bottom:calc(106px + env(safe-area-inset-bottom))}
 }
}