.cities{padding-block:12px}.cities .app{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:16px;height:calc(100vh - 73px);height:calc(100dvh - 73px);min-height:480px}.cities .panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;min-height:0;min-width:0}.cities .controls{padding:14px 16px 12px;display:grid;gap:14px;border-bottom:1px solid var(--line)}.cities .searchrow{display:flex;gap:8px}.cities #q{flex:1;min-width:0;width:auto}.cities .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.cities .chips.first{margin-top:0}.cities .chip.kanji{border-radius:6px;padding:2px 0;width:2.1em;font-size:var(--fs-md);font-weight:700}.cities .chip .n{font-size:var(--fs-xs);opacity:.75;margin-left:4px;font-variant-numeric:tabular-nums}.cities .summary{padding:10px 16px;border-bottom:1px solid var(--line)}.cities .count{margin:0;font-size:var(--fs-sm);color:var(--muted)}.cities .count b{font-size:var(--fs-lg);color:var(--fg);font-variant-numeric:tabular-nums}.cities .list{overflow-y:auto;padding:4px 0 12px;min-height:0;flex:1}.cities .grp h3{margin:0;padding:10px 16px 4px;font-size:var(--fs-xs);color:var(--muted);letter-spacing:.08em;position:sticky;top:0;background:var(--surface);display:flex;justify-content:space-between}.cities .items{display:flex;flex-wrap:wrap;gap:4px;padding:2px 12px 4px}.cities .item{border:1px solid transparent;background:transparent;border-radius:6px;padding:3px 6px;cursor:pointer;text-align:left;display:inline-flex;flex-direction:column;line-height:1.3}.cities .item:hover{background:var(--bg);border-color:var(--line)}.cities .item.on{border-color:var(--sel)}.cities .item .nm{font-weight:700}.cities .item .kn,.cities .item .pf{font-size:var(--fs-xs);color:var(--muted)}.cities .empty{padding:18px 16px;color:var(--muted);font-size:var(--fs-sm);margin:0}.cities .mapbox{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--sea);min-width:0;touch-action:none}.cities #map{display:block;position:absolute;inset:0;width:100%;height:100%;cursor:grab}.cities #map:active{cursor:grabbing}.cities .pref{fill:var(--land);stroke:var(--coast);stroke-width:.7px;vector-effect:non-scaling-stroke;stroke-linejoin:round}.cities .pref.on{fill:var(--land-hit)}.cities .frame{fill:none;stroke:var(--coast);stroke-dasharray:4 3;stroke-width:1px;vector-effect:non-scaling-stroke}.cities .dot{fill:var(--dot)}.cities .dot.hit{fill:var(--hit);stroke:var(--hit-stroke)}.cities .selring{fill:none;stroke:var(--sel)}.cities .lb text{fill:var(--muted);paint-order:stroke;stroke:var(--halo);stroke-linejoin:round;text-anchor:middle;pointer-events:none;font-family:var(--font)}.cities .lb.hit text.nm{fill:var(--fg);font-weight:700}.cities .lb.hit text.kn{fill:var(--fg)}.cities .lb.sel text{fill:var(--sel)}.cities .lb.sel text.nm{font-weight:700}.cities .mapctl{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px}.cities .mapctl button{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:var(--fs-lg);line-height:1}.cities .mapctl button.wide{font-size:var(--fs-xs);padding:0}.cities .tip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-size:var(--fs-sm);white-space:nowrap;transform:translate(-50%,calc(-100% - 12px))}.cities .tip small{color:var(--muted);margin-left:6px}.cities .card{position:absolute;left:10px;bottom:10px;max-width:min(320px,calc(100% - 20px));background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px 12px;display:grid;gap:2px}.cities .card .pf{font-size:var(--fs-xs);color:var(--muted);letter-spacing:.08em}.cities .card .nm{font-size:var(--fs-lg);font-weight:700;line-height:1.3;padding-right:20px}.cities .card .kn{font-size:var(--fs-sm);color:var(--muted)}.cities .card .same{font-size:var(--fs-sm);margin-top:4px}.cities .card .links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px}.cities .card a{font-size:var(--fs-sm);color:var(--sel)}.cities .card .x{position:absolute;top:6px;right:6px;border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:var(--fs-lg);width:28px;height:28px}@media(max-width:860px){.cities .app{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}.cities .mapbox{order:-1;height:62vh;min-height:360px}.cities .list{overflow:visible}}