/* FEARX Food Map - map.css
 * Page-specific styles for the food map view (/).
 * Loaded after base.css. Includes layout, header, panel, list, markers, lightbox, kitchen modal (will move in Phase 2).
 */

  /* LAYOUT: desktop = side-by-side; mobile = stack with resizable panel */
  .app{position:fixed;inset:0;display:grid;grid-template-columns:400px 1fr;grid-template-rows:1fr}
  /* SPA-lite: kitchen tab → wider side panel on PC */
  .app[data-tab="kitchen"]{grid-template-columns: min(1200px, calc(100vw - var(--rail-w, 72px) - 240px)) 1fr}
  @media (max-width:860px){
    .app{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) var(--panel-h,30vh);transition:grid-template-rows .28s cubic-bezier(.32,.72,.32,1)}
    /* On mobile, kitchen tab = panel takes full content area; map area hidden */
    .app[data-tab="kitchen"]{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 0}
    .app[data-tab="kitchen"] .map-wrap{display:none}
  }
  @media (max-width:480px){
    .app{grid-template-rows:minmax(0,1fr) var(--panel-h,32vh)}
  }
  /* Side-panel loading hint while router fetches partial */
  #side-panel.panel-loading{opacity:.6;pointer-events:none;transition:opacity .15s}
  .resize-handle{display:none}
  @media (max-width:860px){
    .resize-handle{display:flex;align-items:center;justify-content:center;gap:10px;height:20px;background:var(--panel-bg);border-bottom:1px solid var(--border);cursor:ns-resize;touch-action:none;user-select:none;flex-shrink:0;position:relative;transition:height .2s}
    .rh-grab{width:40px;height:4px;border-radius:2px;background:var(--border);transition:background .15s}
    .resize-handle:hover .rh-grab,.resize-handle.dragging .rh-grab{background:var(--accent)}
    .rh-back{display:none;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:5px 12px;cursor:pointer;font-family:inherit;touch-action:manipulation;position:relative;z-index:2}
    .rh-back:hover{background:var(--bg);border-color:var(--accent);color:var(--accent-text)}
    /* when panel is expanded, show the back-to-map button and hide the grab bar */
    .app.expanded .resize-handle,.app.detail .resize-handle{height:36px;cursor:default;border-top:1px solid var(--border)}
    .app.expanded .rh-grab,.app.detail .rh-grab{display:none}
    .app.expanded .rh-back,.app.detail .rh-back{display:inline-flex}
    /* Detail mode: only the active restaurant card is shown in the list */
    .app.detail .list .list-item:not(.active){display:none}
    .app.detail .panel-head .chips,
    .app.detail .panel-head .sub-toolbar,
    .app.detail .panel-head .search-wrap{display:none}
    .app.dragging{transition:none}
  }

  /* HEADER (inside panel top) */
  .panel{background:var(--panel-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;z-index:2}
  @media (max-width:860px){
    .panel{border-right:none;border-top:1px solid var(--border);order:2}
  }
  .panel-head{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--panel-bg)}
  .head-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:8px}
  .head-top .toolbar{justify-content:flex-end;flex-shrink:0}
  /* FEARX Kitchen Menu button: prominent size, balanced padding, gray icon-btn family, left-aligned in toolbar */
  #menuBtn{padding:7px 14px;font-size:12.5px;height:auto;gap:6px;margin-right:auto}
  #menuBtn span[data-i18n="menu_btn"]{font-size:12px;font-weight:700;letter-spacing:.2px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-0.3px;min-width:0;flex:1 1 auto}
  .logo-mark{width:38px;height:38px;border-radius:9px;background:var(--surface-2) center/cover no-repeat;background-image:url('/fearx-logo.jpg');flex-shrink:0}
  .logo-text{line-height:1.15;min-width:0;overflow:hidden}
  .logo-text > span{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.4px}
  .logo-text small{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .head-top{min-width:0}
  .toolbar{flex-shrink:0}
  .spacer{flex:1}
  .toolbar{display:flex;gap:3px;align-items:center}
  .icon-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--muted);padding:0 7px;border-radius:6px;cursor:pointer;font-size:13px;line-height:1;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:3px;height:26px;box-sizing:border-box;text-decoration:none;vertical-align:middle}
  .icon-btn svg{display:block;height:14px;width:14px}
  .icon-btn:hover{color:var(--text)}
  .icon-btn.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
  :root[data-theme="light"] .icon-btn.active{color:#000}
  .icon-btn.discord{color:#5865f2;text-decoration:none}
  .icon-btn.discord:hover{background:#5865f2;color:#fff;border-color:#5865f2}
  .icon-btn.discord svg{display:block}
  .lang-menu-wrap{position:relative;display:inline-flex;align-items:center;height:26px}
  .lang-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);padding:4px;display:none;flex-direction:column;min-width:130px;z-index:500}
  .lang-menu.open{display:flex}
  .lang-opt{background:none;border:none;color:var(--text);font-family:inherit;font-size:12.5px;padding:8px 10px;text-align:left;cursor:pointer;border-radius:5px;display:flex;align-items:center;gap:8px}
  .lang-opt:hover{background:var(--surface-2)}
  .lang-opt.active{background:var(--surface-2);color:var(--accent-text);font-weight:700}
  .lang-opt .flag{font-size:14px;line-height:1}

  /* Search */
  .search-wrap{position:relative;width:100%}
  .search-input{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:9px 32px 9px 32px;color:var(--text);font-family:inherit;font-size:13px;outline:none;transition:border-color .15s}
  .search-input:focus{border-color:var(--accent)}
  .search-input::placeholder{color:var(--muted)}
  .search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:13px}
  .search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 6px;display:none}
  .search-wrap.has-value .search-clear{display:block}

  /* Category chips — wrap to new lines so all visible */
  .chips{display:flex;gap:5px;flex-wrap:wrap;padding-bottom:2px}
  .chip{flex:0 0 auto;padding:5px 10px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s;font-family:inherit}
  .chip:hover{color:var(--text)}
  .chip.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
  :root[data-theme="light"] .chip.active{color:#000}

  .sub-toolbar{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
  .count-badge{background:var(--surface-2);padding:2px 8px;border-radius:10px;font-weight:700;color:var(--accent-text)}
  .sort-wrap{margin-left:auto;display:inline-flex;align-items:center;gap:4px}
  .sort-sel{background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:11px;font-weight:600;padding:3px 8px 3px 8px;border-radius:12px;cursor:pointer;outline:none}

  /* LIST */
  .list{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  .list-item{display:flex;flex-direction:column;gap:6px;padding:14px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
  .list-item:hover{background:var(--surface-2)}
  .list-item.active{background:var(--surface-2)}
  .list-item.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
  .list-item{position:relative}
  .li-row1{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .li-name{font-size:15px;font-weight:700;letter-spacing:-0.2px;color:var(--text)}
  .name-ko{font-size:0.8em;color:var(--muted);font-weight:500;margin-left:4px;letter-spacing:0}
  .li-cat{font-size:11px;color:var(--muted);font-weight:500}
  .li-desc{font-size:12px;color:var(--muted);line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .li-addr{font-size:11px;color:var(--muted);opacity:.85}
  .ingredients{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px}
  .ing-pill{font-size:10px;line-height:1;padding:3px 7px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
  .ing-pill.alert{border-color:#f59e0b;color:#f59e0b}
  .ing-pill .emo{font-size:11px;line-height:1}
  .li-photos{display:flex;gap:4px;overflow:hidden;margin-top:4px}
  .li-photo{flex:0 0 auto;width:31%;aspect-ratio:4/3;border-radius:6px;background:var(--surface-2) center/cover no-repeat}
  .li-actions{display:flex;gap:6px;margin-top:2px;flex-wrap:wrap}
  .li-btn{display:inline-flex;align-items:center;gap:3px;padding:4px 8px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);font-size:10px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
  .li-btn:hover{color:var(--text)}
  .li-btn.google{color:#00a5ff}
  .li-btn.naver{color:#03c75a}
  .li-btn.walk{color:var(--accent-text)}
  .li-btn.cmt{color:var(--accent-2)}
  .li-comments{margin-top:8px;border-top:1px dashed var(--border);padding-top:8px}

  /* EMPTY */
  .empty{padding:40px 24px;text-align:center;color:var(--muted);font-size:13px}

  /* MAP */
  .map-wrap{position:relative;height:100%}
  @media (max-width:860px){.map-wrap{order:1}}
  #map{position:absolute;inset:0;background:var(--map-bg)}
  /* Anti-flicker: keep loaded tiles at full opacity (Leaflet's default fade-in
     can interact poorly with GPU compositing on PC, causing visible flicker on drag) */
  .leaflet-tile{opacity:1 !important}
  .leaflet-tile-container{transform:translateZ(0)}
  .leaflet-container{background:var(--map-bg) !important;font-family:inherit}
  .leaflet-popup-content-wrapper{background:var(--surface);color:var(--text);border-radius:10px;box-shadow:var(--shadow)}
  .leaflet-popup-tip{background:var(--surface)}
  .leaflet-popup-content{margin:14px 16px;width:280px !important;min-width:280px}
  .leaflet-popup-content-wrapper{max-width:312px}
  .leaflet-popup-close-button{color:var(--muted) !important}
  .leaflet-control-attribution{background:var(--overlay-bg) !important;color:var(--muted) !important;font-size:9px !important;padding:2px 6px !important}
  .leaflet-control-attribution a{color:var(--muted) !important}
  .leaflet-control-zoom a{background:var(--surface) !important;color:var(--text) !important;border-color:var(--border) !important}
  .leaflet-control-zoom a:hover{background:var(--surface-2) !important;color:var(--accent-text) !important}

  /* MARKERS */
  .marker-pin{width:30px;height:30px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg);border:2px solid var(--bg);box-shadow:0 2px 6px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;cursor:pointer}
  :root[data-theme="light"] .marker-pin{border-color:#fff}
  .marker-pin .ico{transform:rotate(45deg);font-size:13px;color:#000;font-weight:900}
  .marker-pin.cat-korean{background:#ff9e3d}
  .marker-pin.cat-shabu{background:#ffd84a}
  .marker-pin.cat-cafe{background:#a855f7}
  .marker-pin.cat-chinese{background:#ef4444}
  .marker-pin.cat-japanese{background:#22d3ee}
  .marker-pin.cat-western{background:#84cc16}
  /* Office marker = FEARX mascot inside a larger ring */
  .marker-office{width:48px;height:48px;border-radius:50%;background:#ffdf3e center/cover no-repeat;background-image:url('/fearx-logo.jpg');border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.35);cursor:pointer;position:relative}
  .marker-office::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #fff}
  :root:not([data-theme="light"]) .marker-office{border-color:#0b0b0f}
  :root:not([data-theme="light"]) .marker-office::after{border-top-color:#0b0b0f}

  /* COPY BTN */
  .copy-btn{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:4px;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;margin-left:4px;vertical-align:middle}
  .copy-btn:hover{color:var(--text);background:var(--surface-2)}
  .copy-btn.copied{color:#22c55e;border-color:#22c55e}

  /* COMMENTS */
  .pop-comments{margin-top:10px;border-top:1px solid var(--border);padding-top:8px}
  .pop-comments-head{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--text);margin-bottom:6px}
  .pop-comments-list{display:flex;flex-direction:column;gap:6px;max-height:170px;overflow-y:auto;margin:0 -2px;padding:0 2px}
  .pop-comments-list::-webkit-scrollbar{width:3px}
  .pop-comments-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
  .cm{display:flex;gap:6px;padding:6px;border-radius:6px;background:var(--surface-2)}
  .cm-avatar{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:14px;border:1px solid var(--border)}
  .cm-body{flex:1;min-width:0}
  .cm-meta{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--muted);margin-bottom:2px}
  .cm-name{font-weight:700;color:var(--text);font-size:10.5px}
  .cm-time{margin-left:auto}
  .cm-text{font-size:11.5px;color:var(--text);line-height:1.4;word-break:break-word;white-space:pre-wrap}
  .cm-actions{display:flex;gap:4px;margin-top:3px}
  .cm-act{background:none;border:none;color:var(--muted);font-size:10px;cursor:pointer;padding:0;font-family:inherit;text-decoration:underline;text-decoration-color:transparent}
  .cm-act:hover{color:var(--accent-text);text-decoration-color:currentColor}
  .cm-edited{font-size:9px;opacity:.7;font-style:italic}
  .cm-form{display:flex;flex-direction:column;gap:5px;margin-top:8px;padding:6px;border-radius:6px;background:var(--surface-2)}
  .cm-form textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:6px;color:var(--text);font-family:inherit;font-size:12px;resize:vertical;min-height:42px;outline:none}
  .cm-form textarea:focus{border-color:var(--accent)}
  .cm-form-row{display:flex;gap:5px;align-items:center}
  .cm-pin{flex:0 0 78px;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:6px;color:var(--text);font-family:inherit;font-size:12px;outline:none;text-align:center;letter-spacing:2px}
  .cm-pin:focus{border-color:var(--accent)}
  .cm-nick{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:6px 8px;color:var(--text);font-family:inherit;font-size:12px;outline:none;box-sizing:border-box}
  .cm-nick:focus{border-color:var(--accent)}
  .cm-submit{flex:1;background:var(--accent);color:var(--bg);border:none;border-radius:5px;padding:7px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit}
  :root[data-theme="light"] .cm-submit{color:#000}
  .cm-submit:hover{filter:brightness(1.05)}
  .cm-submit:disabled{opacity:.5;cursor:not-allowed}
  .cm-empty{font-size:11px;color:var(--muted);padding:6px;text-align:center}
  .cm-view-all{display:block;width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--accent-2);font-size:11px;font-weight:700;padding:6px;cursor:pointer;font-family:inherit;text-align:center;border-radius:5px;margin-top:4px}
  .cm-view-all:hover{background:var(--bg);filter:brightness(1.05)}

  /* make photos in list/popup look clickable */
  .li-photo,.pop-photo{cursor:zoom-in;transition:transform .15s}
  .li-photo:hover,.pop-photo:hover{transform:scale(1.02)}

  /* INLINE EDIT / DELETE in comment box */
  .cm.editing .cm-text,.cm.editing .cm-actions,.cm.deleting .cm-text,.cm.deleting .cm-actions{display:none}
  .cm-inline-form{display:flex;flex-direction:column;gap:5px;padding:4px 0 2px}
  .cm-inline-form textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:6px 8px;color:var(--text);font-family:inherit;font-size:11.5px;resize:vertical;min-height:38px;outline:none}
  .cm-inline-form textarea:focus{border-color:var(--accent)}
  .cm-inline-row{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
  .cm-inline-pin{flex:0 0 72px;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:6px;color:var(--text);font-family:inherit;font-size:12px;outline:none;text-align:center;letter-spacing:2px}
  .cm-inline-pin:focus{border-color:var(--accent)}
  .cm-inline-btn{flex:1;min-width:60px;padding:6px 8px;border-radius:5px;border:1px solid var(--border);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;background:var(--surface);color:var(--text)}
  .cm-inline-btn:hover{filter:brightness(1.08)}
  .cm-inline-btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
  :root[data-theme="light"] .cm-inline-btn.primary{color:#000}
  .cm-inline-btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}
  .cm-inline-btn.danger:hover{background:#dc2626}
  .cm-inline-btn:disabled{opacity:.5;cursor:not-allowed}
  .cm-inline-msg{font-size:11px;color:var(--muted);margin-bottom:3px}
  .cm-inline-err{font-size:10.5px;color:#ef4444;min-height:13px}
  .cm-error{font-size:10.5px;color:#ef4444;padding:2px 0}

  /* POPUP */
  .pop-title{font-size:15px;font-weight:800;line-height:1.3;letter-spacing:-0.2px}
  .pop-title + .pop-category{margin-top:5px}
  .pop-category{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.3px;padding:3px 8px;border-radius:10px;background:var(--surface-2);color:var(--accent-text)}
  .pop-photos{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;margin:10px -16px;padding:0 16px 4px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:thin}
  .pop-photos::-webkit-scrollbar{height:3px}
  .pop-photos::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
  .pop-photo{flex:0 0 auto;width:180px;height:120px;border-radius:8px;background:var(--surface-2) center/cover no-repeat;scroll-snap-align:start;cursor:zoom-in}
  .pop-desc{font-size:12.5px;color:var(--text);line-height:1.5;margin-top:8px;margin-bottom:0}
  .pop-photos + .pop-desc{margin-top:4px}
  .pop-desc:empty{display:none}
  .pop-section{margin-top:10px}
  .pop-addr{font-size:11.5px;color:var(--muted);line-height:1.4;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .pop-addr .addr-text{flex:1 1 auto;min-width:0}
  .pop-links{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
  .pop-links + .pop-links{margin-top:6px}
  .pop-menu-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:10px;margin-bottom:0;padding:9px 12px;background:var(--accent);color:var(--bg);border:0;border-radius:8px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:.2px}
  :root[data-theme="light"] .pop-menu-btn{color:#000}
  .pop-menu-btn:hover{filter:brightness(1.1)}
  .pop-menu-btn + .pop-links{margin-top:8px}
  .pop-link{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:8px 8px;border-radius:7px;background:var(--surface-2);border:1px solid var(--border);font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;transition:filter .12s}
  /* Place links = primary (filled, brand color) */
  .pop-link.google{color:#fff;background:#00a5ff;border-color:#00a5ff}
  .pop-link.naver{color:#fff;background:#03c75a;border-color:#03c75a}
  /* Route links = secondary (neutral outline, same look as address row copy) */
  .pop-link.dir-google{color:#00a5ff}
  .pop-link.dir-naver{color:#03c75a}
  .pop-link:hover{filter:brightness(1.08)}
  .pop-link.dir-google:hover,.pop-link.dir-naver:hover{background:var(--bg)}
  /* Service logo badges (Google "G" / Naver "N") */
  .svc-logo{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;font-weight:900;font-size:10px;flex-shrink:0;line-height:1;letter-spacing:0;font-family:Arial,sans-serif}
  .svc-logo.google{border-radius:50%}
  .svc-logo.naver{border-radius:3px}
  /* On filled colored bg → white badge with colored letter (max contrast) */
  .svc-logo.g-on-color{background:#fff;color:#00a5ff}
  .svc-logo.n-on-color{background:#fff;color:#03c75a}
  /* On neutral bg → colored badge with white letter */
  .svc-logo.g-on-neutral{background:#00a5ff;color:#fff}
  .svc-logo.n-on-neutral{background:#03c75a;color:#fff}
  /* Popup ingredients — compact pills */
  .leaflet-popup .ingredients{margin-top:8px;gap:4px}
  .leaflet-popup .ing-pill{font-size:10px;padding:2px 6px}
  /* Mobile: popup shows only photos + title + category. Full info lives in the list card. */
  @media (max-width:860px){
    .leaflet-popup-content{width:200px !important;min-width:200px;margin:10px 12px}
    .leaflet-popup-content-wrapper{max-width:224px}
    .leaflet-popup .pop-desc,
    .leaflet-popup .ingredients,
    .leaflet-popup .pop-section,
    .leaflet-popup .pop-comments{display:none}
    .leaflet-popup .pop-photo{width:140px;height:92px}
    .leaflet-popup .pop-photos{margin:8px -12px;padding:0 12px 3px}
    .leaflet-popup .pop-title{font-size:13.5px}
  }

  /* tighter chips row on mobile */
  @media (max-width:860px){
    .panel-head{padding:6px 10px;gap:6px}
    /* Title + toolbar on same row (override desktop's flex-basis:100% that wraps toolbar) */
    .head-top{flex-wrap:nowrap;align-items:center;gap:8px}
    .head-top .toolbar{flex-basis:auto;order:0;justify-content:flex-end;flex-shrink:0}
    .head-top .logo-text small{display:none}
    .logo-text > span{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .logo-mark{width:28px;height:28px;border-radius:7px}
    .logo{gap:8px;flex:1 1 auto;min-width:0}
    .icon-btn{padding:4px 6px;font-size:11px}
    /* FEARX Kitchen Menu button on mobile: slightly tighter padding (margin-right:auto inherited from base) */
    #menuBtn{padding:6px 12px}
    #menuBtn span[data-i18n="menu_btn"]{font-size:11.5px}
    .list-item{padding:10px 10px}
    .li-photo{width:31%}
    .search-input{padding:7px 28px 7px 28px;font-size:12px}
    /* Category chips: single row with horizontal scroll */
    .chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
    .chips::-webkit-scrollbar{display:none}
    .chip{padding:4px 10px;font-size:11px}
    .sub-toolbar{font-size:10.5px;gap:6px}
    .sort-sel{font-size:10.5px;padding:2px 6px}
  }