:root{
    --bg:#ffffff;
    --bg-2:#fafafa;
    --ink:#0a0a0a;
    --ink-2:#404040;
    --ink-3:#737373;
    --line:#e5e5e5;
    --line-2:#f0f0f0;
    --hover:#f5f5f5;
    --shadow:0 8px 30px rgba(0,0,0,.10);
    --me-dot:#0a0a0a;
    --me-halo:rgba(10,10,10,.10);
    --serif:"Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --sans:"Inter", "Hiragino Sans", "Yu Gothic", -apple-system, sans-serif;
    --mono:"JetBrains Mono", ui-monospace, monospace;
    --safe-top:env(safe-area-inset-top, 0px);
    --safe-bottom:env(safe-area-inset-bottom, 0px);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{
    margin:0; padding:0; height:100%; overflow:hidden;
    background:var(--bg); color:var(--ink);
    font-family:var(--sans); font-weight:400; -webkit-font-smoothing:antialiased;
    transition:background .25s ease, color .25s ease;
  }
  button{font-family:inherit; color:inherit;}

#app{
  height:100dvh;
  display:flex;
  flex-direction:column;
  padding-top:var(--safe-top);
}

header{
  position:relative;
  z-index:9999;
  flex-shrink:0;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:11px 14px;
  display:flex;
  align-items:center;
  gap:8px;
}
  /* アイコンはタイトル行に揃える（2行目の案内文には影響させない） */
  .brand{display:flex; align-items:flex-start; gap:9px; flex:1; min-width:0;}
  .brand .mark{
    /* i-logo は viewBox 24 のうち家の実描画が約18/24。
       タイトル(19px)と見た目の高さを合わせるため 24px に拡大し、
       タイトル行の中央に来るよう上下を微調整する。 */
    width:24px; height:24px; flex-shrink:0; color:var(--ink);
    align-self:flex-start;
    margin-top:-2px;
  }
  .brand-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
  /* タイトル下のみんまちDROP案内（旧 .drop-guide の白帯をヘッダー内に移設） */
  .brand-note{
    margin:0;
    font-size:11px; line-height:1.5; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .brand-note a{
    color:#4da3ff; text-decoration:underline; font-weight:500; white-space:nowrap;
  }
  @media (max-width:400px){
    .brand-note{font-size:10px;}
  }
  .brand h1{
    font-family:var(--serif); font-weight:500;
    font-size:19px; letter-spacing:.04em; margin:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    line-height:1;
  }
  .brand .sub{
    font-family:var(--mono); font-size:9px; color:var(--ink-3);
    letter-spacing:.18em; text-transform:uppercase;
    border-left:1px solid var(--line); padding-left:8px;
    white-space:nowrap;
  }
  @media (max-width:540px){
    .brand .sub{display:none;}
    .brand h1{font-size:17px;}
    .brand .mark{width:22px; height:22px; margin-top:-2px;}
  }
  .icon-btn{
    background:transparent; border:1px solid var(--line);
    width:38px; height:38px; padding:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .icon-btn:hover{background:var(--hover); border-color:var(--ink-3);}
  .icon-btn.active{background:var(--ink); color:var(--bg); border-color:var(--ink);}
  .icon-btn svg{width:18px; height:18px; display:block;}
  .icon-btn.loading svg{animation:spin 1s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  #panel{
    position:absolute; left:0; right:auto; bottom:0;
    top:calc(61px + var(--safe-top));
    width:340px; max-width:88%;
    background:var(--bg);
    border-right:1px solid var(--line);
    z-index:1050; overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1), background .25s ease;
    padding-bottom:var(--safe-bottom);
    -webkit-overflow-scrolling:touch;
  }
  #panel.open{transform:translateX(0); box-shadow:var(--shadow);}
  .panel-section{padding:20px; border-bottom:1px solid var(--line);}
  .panel-label{
    font-family:var(--mono); font-size:10px; color:var(--ink-3);
    letter-spacing:.2em; text-transform:uppercase; margin-bottom:14px;
    display:flex; justify-content:space-between; align-items:center;
  }
  .panel-label .count{color:var(--ink);}
  .action-row{display:flex; gap:8px; margin-bottom:14px;}
  .action-row button{
    flex:1; background:transparent; border:1px solid var(--line);
    padding:9px 10px; font-size:11px; cursor:pointer; color:var(--ink);
    font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase;
    transition:all .15s ease;
  }
  .action-row button:hover, .action-row button:active{
    background:var(--ink); color:var(--bg); border-color:var(--ink);
  }
  .cat-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);}
  .cat-item{
    display:flex; align-items:center; gap:12px;
    padding:13px 14px; background:var(--bg);
    cursor:pointer; font-size:13px; user-select:none;
    transition:background .12s ease;
  }
  .cat-item:hover{background:var(--hover);}
  .cat-item input{
    appearance:none; -webkit-appearance:none;
    width:15px; height:15px; border:1px solid var(--ink-3);
    margin:0; flex-shrink:0; position:relative; cursor:pointer;
    background:var(--bg);
  }
  .cat-item input:checked{background:var(--ink); border-color:var(--ink);}
  .cat-item input:checked::after{
    content:""; position:absolute; left:3.5px; top:0.5px;
    width:4px; height:8px; border:solid var(--bg);
    border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
  }
  .cat-swatch{
    width:10px; height:10px; flex-shrink:0;
    border:1px solid rgba(125,125,125,.4);
  }
  .cat-name{flex:1; letter-spacing:.02em;}
  .cat-num{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
  .cat-item.off .cat-name, .cat-item.off .cat-num{opacity:.4;}
  .cat-item.off .cat-swatch{opacity:.3;}
  .about{font-size:11px; color:var(--ink-3); line-height:1.75;}
  /* About 見出し「みんまちDROPとは」＋本文（見出しの後は1行あける） */
  .about-title{
    display:block;
    font-size:12px; font-weight:600; color:var(--ink);
    letter-spacing:.02em; margin-bottom:1.75em;
  }
  .about p{margin:0;}
  .about p + p{margin-top:.6em;}

#map{
  flex:1;
  min-height:0;
  width:100%;
  background:var(--bg-2);
}
  .leaflet-container{font-family:var(--sans); background:var(--bg-2) !important;}
  .leaflet-control-zoom{
    border:1px solid var(--line) !important; box-shadow:none !important;
    margin-right:14px !important;
  }
  .leaflet-control-zoom a{
    background:var(--bg) !important; color:var(--ink) !important;
    border-bottom:1px solid var(--line) !important;
    font-weight:300 !important; width:36px !important; height:36px !important;
    line-height:36px !important;
  }
  .leaflet-control-zoom a:hover{background:var(--hover) !important;}
  .leaflet-control-attribution{
    background:rgba(255,255,255,.85) !important;
    font-size:9px !important; color:var(--ink-3) !important;
    font-family:var(--mono);
  }
  .leaflet-control-attribution a{color:var(--ink-2) !important;}
  .poi-marker{
    width:30px; height:38px; position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .poi-marker svg{width:100%; height:100%; display:block; overflow:visible;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
  .me-marker{
    width:16px; height:16px; border-radius:50%;
    background:var(--me-dot); border:2.5px solid var(--bg);
    box-shadow:0 0 0 1.5px var(--me-dot), 0 0 0 10px var(--me-halo);
    position:relative;
  }
  .me-marker::after{
    content:""; position:absolute; inset:-10px; border-radius:50%;
    background:var(--me-dot); opacity:.18; animation:pulse 2s ease-out infinite;
  }
  @keyframes pulse{
    0%{transform:scale(.5); opacity:.4;}
    100%{transform:scale(1.6); opacity:0;}
  }
  .leaflet-popup-content-wrapper{
    border-radius:0 !important; box-shadow:var(--shadow) !important;
    border:1px solid var(--line);
    background:var(--bg) !important; color:var(--ink) !important;
  }
  .leaflet-popup-content{margin:0 !important; width:270px !important;}
  .leaflet-popup-tip{box-shadow:none !important; background:var(--bg) !important;}
  .leaflet-popup-close-button{
    color:var(--ink-2) !important; padding:8px 10px 0 0 !important;
    font-size:20px !important;
  }
  .pop{padding:0;}
  .pop-thumb{
    width:100%; height:150px; object-fit:cover; display:block;
    background:var(--bg-2);
  }
  .pop-body{padding:15px 16px 16px;}
  .pop-cat{
    display:flex; align-items:center; gap:8px; margin-bottom:8px;
    font-family:var(--mono); font-size:10px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink-2);
  }
  .pop-cat .dot{width:8px; height:8px; flex-shrink:0;}
  .pop-title{
    font-family:var(--serif); font-weight:500; font-size:19px;
    line-height:1.3; margin:0 0 6px; letter-spacing:.01em; color:var(--ink);
    /* Cormorant Garamond は既定でオールドスタイル数字（4 などがベースライン下に
       はみ出す）になるため、ライニング数字に固定して英数字の高さを揃える。 */
    font-variant-numeric:lining-nums proportional-nums;
    font-feature-settings:"lnum" 1, "onum" 0, "pnum" 1;
  }
  .pop-addr{
    font-size:11px; color:var(--ink-3); margin-bottom:10px;
    padding-bottom:10px; border-bottom:1px solid var(--line);
    line-height:1.5;
  }
  .pop-desc{
    font-size:12px; color:var(--ink-2); line-height:1.65;
    max-height:120px; overflow-y:auto; margin-bottom:12px;
  }
  .pop-link{
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 13px; background:var(--ink); color:var(--bg) !important;
    text-decoration:none; font-family:var(--mono); font-size:10px;
    letter-spacing:.18em; text-transform:uppercase;
    transition:opacity .15s ease;
  }
  .pop-link:hover{opacity:.85;}
  .pop-link svg{width:11px; height:11px;}

  /* ===== Google Maps InfoWindow を Leaflet popup と同じ見た目に揃える ===== */
  .gm-style .gm-style-iw-c{
    border-radius:0 !important; padding:0 !important;
    box-shadow:var(--shadow) !important; border:1px solid var(--line);
    background:var(--bg) !important;
  }
  /* Google の InfoWindow は中身が地図の高さを超えると、この要素に
     インラインで overflow:auto / max-height を付けてスクロールさせる。
     ここで overflow:hidden を当てるとスクロール不能になるため auto にする。 */
  .gm-style .gm-style-iw-d{
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;       /* 端まで行っても地図側に伝播させない */
    /* --- スクロールバーを常時表示する（Firefox / 旧Edge） --- */
    scrollbar-width:thin;
    scrollbar-color:#9e9e9e transparent;
    -ms-overflow-style:auto;
  }
  /* --- スクロールバーの見た目（Chrome / Edge / Safari） ---
     幅・色を変えたい場合はこのブロックだけ調整してください。 */
  .gm-style .gm-style-iw-d::-webkit-scrollbar{
    width:8px; height:8px;
    -webkit-appearance:none;
  }
  .gm-style .gm-style-iw-d::-webkit-scrollbar-track{
    background:transparent;
  }
  .gm-style .gm-style-iw-d::-webkit-scrollbar-thumb{
    background:#9e9e9e;                /* つまみの色 */
    border-radius:4px;
    border:2px solid var(--bg);        /* 左右に余白を作って細く見せる */
    background-clip:padding-box;
    min-height:40px;
  }
  .gm-style .gm-style-iw-d::-webkit-scrollbar-thumb:hover{
    background:#6f6f6f;
    background-clip:padding-box;
  }
  /* スマホ等で自動的に消えるのを防ぎ、常に出しておく */
  .gm-style .gm-style-iw-d::-webkit-scrollbar-thumb{
    -webkit-box-shadow:none;
  }
  .gm-style .gm-style-iw-t::after{background:var(--bg) !important;}
  /* Google版では InfoWindow 全体を1つのスクロール領域にする。
     説明文側の入れ子スクロール（.pop-desc）は二重スクロールになり
     指が止まって見えるため、こちらでは解除する。 */
  .gm-style .pop-desc{max-height:none; overflow:visible;}
  .gm-style .pop{width:270px;}
  /* InfoWindow は「地図の高さ」から使える高さが決まるため、サムネイルが高いと
     カテゴリ・タイトル・住所が入りきらない。タイトルが2行になる施設も多いので、
     高さは map-google.js 側で実測して画像を自動で縮める（--pop-thumb-h）。
     ここでは既定値と下限だけ決めておく。 */
  .gm-style .pop-thumb{
    height:var(--pop-thumb-h, 118px);
    min-height:64px;
  }
  .gm-style .pop-body{padding:12px 16px 16px;}
  /* タイトルは省略せず必要なだけ折り返す（2行でも3行でも全部出す） */
  .gm-style .pop-title{
    font-size:18px; margin-bottom:5px;
    overflow:visible; display:block; overflow-wrap:anywhere;
  }
  .gm-style .pop-addr{
    margin-bottom:9px; padding-bottom:9px;
    overflow:visible; white-space:normal;
  }
  .gm-style .gm-ui-hover-effect{top:2px !important; right:2px !important;}
  .gmap-pin{
    width:30px; height:38px; transform:translate(-50%,-100%);
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
  }
  .gmap-me{
    width:16px; height:16px; border-radius:50%;
    background:var(--me-dot); border:2.5px solid var(--bg);
    box-shadow:0 0 0 1.5px var(--me-dot), 0 0 0 10px var(--me-halo);
    transform:translate(-50%,-50%);
  }

  #toast{
    position:absolute; left:50%; bottom:calc(28px + var(--safe-bottom));
    transform:translateX(-50%) translateY(20px);
    background:var(--ink); color:var(--bg);
    padding:10px 18px; font-size:11px; letter-spacing:.15em;
    text-transform:uppercase; font-family:var(--mono);
    z-index:2000; opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    white-space:nowrap;
  }
  #toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .modal-backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.45);
    z-index:10000;
    display:none; align-items:center; justify-content:center;
    backdrop-filter:blur(3px);
    padding:20px;
  }
  .modal-backdrop.show{display:flex;}
  .modal{
    background:var(--bg); border:1px solid var(--line);
    max-width:340px; width:100%;
    box-shadow:var(--shadow);
    animation:modalIn .22s cubic-bezier(.4,0,.2,1);
  }
  @keyframes modalIn{
    from{opacity:0; transform:translateY(8px);}
    to{opacity:1; transform:translateY(0);}
  }
  .modal-body{padding:24px 22px 18px;}
  .modal-title{
    font-family:var(--serif); font-size:18px; font-weight:500;
    margin:0 0 10px; color:var(--ink); letter-spacing:.02em;
  }
  .modal-text{
    font-size:12.5px; line-height:1.7; color:var(--ink-2); margin:0;
  }
  .modal-actions{
    display:flex; border-top:1px solid var(--line);
  }
  .modal-actions button{
    flex:1; background:transparent; border:0;
    padding:14px 10px; font-size:11px; cursor:pointer; color:var(--ink);
    font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase;
    transition:background .15s ease, opacity .15s ease;
  }
  .modal-actions button:hover{background:var(--hover);}
  .modal-actions button.primary{background:var(--ink); color:var(--bg);}
  .modal-actions button.primary:hover{opacity:.85; background:var(--ink);}
  .modal-actions button + button{border-left:1px solid var(--line);}

  #loading{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:var(--bg); border:1px solid var(--line);
    padding:18px 28px; z-index:2000;
    font-family:var(--mono); font-size:11px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--ink-2);
  }
  #overlay{
    position:absolute; inset:calc(61px + var(--safe-top)) 0 0 0;
    background:rgba(0,0,0,.35); z-index:1040;
    opacity:0; pointer-events:none; transition:opacity .25s ease;
    backdrop-filter:blur(2px);
  }
  #overlay.show{opacity:1; pointer-events:auto;}
  .map-controls{
    position:absolute; right:14px; bottom:calc(70px + var(--safe-bottom));
    display:flex; flex-direction:column; gap:8px; z-index:1000;
  }
  .map-controls .icon-btn{
    background:var(--bg);
    box-shadow:var(--shadow);
    width:44px; height:44px;
  }
  .map-controls .icon-btn svg{width:20px; height:20px;}
  @media (hover:none){
    .icon-btn{min-width:44px; min-height:44px;}
    .cat-item{padding:14px;}
  }
.location-guide{
  background:var(--bg);
  color:var(--ink);
  border-bottom:1px solid var(--line);
  text-align:center;
  padding:8px 30px 8px 12px;
  font-size:11px;
  line-height:1.5;
  position:relative;
}
.guide-close{
    position:absolute;
    right:8px;
    top:6px;
    border:none;
    background:none;
    color:var(--ink);
    font-size:18px;
    cursor:pointer;
    padding:0 4px;
}
.location-guide a{
  color:#4da3ff;
  text-decoration:underline;
  font-weight:500;
}
/* PCでは白帯を表示しない */
@media screen and (min-width:768px){
  #locationGuide{
    display:none !important;
  }
}