:root{
    --space:#0A0D13; --panel:#131922; --panel-2:#0F141C; --line:#232B38; --line-soft:#1A212C;
    --moonlight:#E7C878; --moonlight-dim:#8A7A4E; --selenite:#8FB9CC;
    --ink:#E9ECF1; --ink-dim:#9AA2B0; --ink-faint:#626B7A; --bad:#D98A8A;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Hiragino Mincho ProN","Yu Mincho",serif;
    --sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{background:#05070b; color:var(--ink); font-family:var(--sans); overflow:hidden}
  #map{position:absolute; inset:0; z-index:1; transition:opacity .4s}
  #globe{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(78vmin,560px); height:min(78vmin,560px);
    z-index:1; touch-action:none; cursor:grab; transition:opacity .4s}
  #globe.grabbing{cursor:grabbing}
  .hidden{opacity:0!important; pointer-events:none!important}
  .leaflet-container{background:#05070b; font-family:var(--mono)}
  .leaflet-control-attribution{background:rgba(10,13,19,.7)!important; color:var(--ink-faint)!important}
  .leaflet-control-attribution a{color:var(--ink-dim)!important}
  .leaflet-control-scale-line{background:rgba(10,13,19,.6); color:var(--ink); border-color:var(--line-soft)}
  .feat-label{pointer-events:none; overflow:visible}
  .feat-label .d{position:absolute; left:0; top:0; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:#dfe4ec; box-shadow:0 0 0 1px rgba(0,0,0,.6)}
  .feat-label .t{position:absolute; left:7px; top:-8px; font-family:var(--mono); font-size:11px; color:#eef1f6; text-shadow:0 1px 2px #000,0 0 3px #000; white-space:nowrap}

  .zoomctl{position:absolute; top:14px; right:14px; z-index:1000; display:flex; flex-direction:column; gap:6px}
  .zoomctl button{width:38px; height:38px; padding:0; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:9px; cursor:pointer; box-shadow:0 6px 18px -8px #000}
  .zoomctl button:hover{border-color:#4a5566; background:#1b2431}
  .zoomctl button:active{transform:translateY(1px)}
  .zoomctl button:focus-visible{outline:2px solid var(--selenite); outline-offset:2px}
  .zoomctl button:disabled{opacity:.32; cursor:default; pointer-events:none; box-shadow:none}
  .zoomctl input[type=range]{ writing-mode:vertical-lr; direction:rtl; width:24px; height:130px; accent-color:var(--selenite); cursor:pointer; margin:2px auto }
  #globeBtn{font-size:16px}

  .panel{
    position:absolute; top:14px; left:14px; z-index:1000; width:min(340px, calc(100vw - 28px));
    background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
    border:1px solid var(--line); border-radius:14px; padding:18px 18px 20px;
    box-shadow:0 24px 60px -30px #000; backdrop-filter:blur(3px);
  }
  h1{font-family:var(--serif); font-weight:500; font-size:20px; margin:0 0 14px; letter-spacing:.02em}
  .label{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 7px}
  .addr{font-family:var(--serif); color:var(--moonlight); font-weight:500; font-size:23px; line-height:1.3; letter-spacing:.02em; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; row-gap:2px}
  .addr .grp{white-space:nowrap}
  .addr .dot{color:var(--moonlight-dim); margin:0 .04em}
  .chip{display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:3px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(143,185,204,.06); color:var(--selenite); font-family:var(--mono); font-size:12px}
  .chip .d{width:6px;height:6px;border-radius:50%;background:var(--selenite)}
  .coords{margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .coords .val{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:16px}
  .coords .val small{color:var(--ink-dim); font-size:11px; margin-left:2px}
  .find{margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft)}
  .field{display:flex; gap:7px; margin-top:8px}
  input[type=text]{flex:1; min-width:0; background:#0b0f16; border:1px solid var(--line); color:var(--ink); font-family:var(--serif); font-size:15px; padding:9px 11px; border-radius:8px}
  input[type=text]:focus{outline:none; border-color:var(--selenite); box-shadow:0 0 0 3px rgba(143,185,204,.14)}
  input::placeholder{color:var(--ink-faint); font-family:var(--sans); font-size:13px}
  .err{color:var(--bad); font-size:12px; margin-top:7px; min-height:1em}
  button.primary{font-family:var(--sans); font-size:12.5px; font-weight:600; cursor:pointer; border-radius:8px; padding:9px 12px; border:1px solid var(--selenite); background:var(--selenite); color:#08131a}
  button.primary:hover{background:#a3c8d8}
  .toast{position:absolute; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); z-index:1200; background:var(--ink); color:var(--space); font-size:13px; font-weight:600; padding:9px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:.25s}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
  .hint{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:900; font-family:var(--mono); font-size:11px; color:var(--ink-dim); background:rgba(10,13,19,.5); padding:5px 12px; border-radius:999px; border:1px solid var(--line-soft); pointer-events:none; transition:opacity .3s}
  @media(max-width:560px){
    /* 上：検索だけ（元の左上に）。backdrop-filterを切らないと中のfixedが画面基準にならない */
    .panel{ top:8px; left:8px; right:58px; width:auto; padding:12px 14px; backdrop-filter:none; }  /* 右にズーム列の余白 */
    h1{ font-size:16px; margin-bottom:8px }
    .find{ margin-top:0; padding-top:0; border-top:none }
    /* 下：住所・座標の表示だけを下部固定 */
    #readout{ position:fixed; left:0; right:0; bottom:0; z-index:1001;
      background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
      border-top:1px solid var(--line); border-radius:14px 14px 0 0;
      padding:12px 14px calc(14px + env(safe-area-inset-bottom));
      box-shadow:0 -12px 40px -20px #000; }
    .addr{ font-size:20px }
    #globe{ top:44% }          /* 上下パネルの間に月が来るよう調整 */
    .hint{ display:none }
  }