#map{height:80vh;width:100%;}
.tabs{display:flex;gap:0.4em;padding:10px;background:#f9fafb;flex-wrap:wrap;align-items:center;justify-content:center;}
.tab-btn,.tab-item{padding:0.4em 0.6em;border:1px solid #ccc;background:white;cursor:pointer;border-radius:4px;font-size:0.8em;display:inline-flex;justify-items:center;align-items:center;line-height:1.2;position:relative;}
.tab-btn{color:#666;}
.tab-btn.active{background:var(--theme-ui-colors-black);color:white;border-color:none;}
.tab-count{font-weight:700;font-size:0.9em;margin-right:0.4em;display:inline-flex;color:var(--theme-ui-colors-black);justify-items:center;align-items:center;}
.tab-btn.active .tab-count{color:var(--theme-ui-colors-white);}

#modal-body .tabs{display:flex;gap:0;padding:0.4em 0;background:none;justify-content:center;}
.tab-item{margin:0 0.2em 0.2em 0;padding:0.3em 0.6em;}

.address-filter{width:300px;padding:0.4em;font-size:0.9em;margin:auto;text-align:center;}
.address-filter input{border-radius:50px;border:2px solid var(--theme-ui-colors-main);outline:none;}
.search-input{width:100%;height:40px;padding:0.2em 2.4em 0.2em 1em;box-sizing:border-box;}

#clear-search{position:absolute;right:calc(20% - 2.4em);top:50%;transform:translateY(-50%);border:none;background:transparent;font-size:18px;cursor:pointer;padding:0;color:#999;}
#clear-search:hover{color:#333;}
.search-results{max-height:180px;font-size:0.85em;width:auto;margin-top:6px;border-radius:0.5em;border:1px solid var(--theme-ui-colors-main);overflow-y:auto;background-color:white;position:absolute;z-index:10000;box-shadow:0 0 30px 0 rgb(0 0 0 / 8%);text-align:left;}

.result-item{padding:0.6em 0.8em;border-bottom:1px solid #ddd;}
.result-item:last-child{border:none;}
.result-item:hover{background-color:#f0f0f0;}

.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:99999;}
.modal-content{background:white;padding:20px;width:400px;max-width:90%;border-radius:8px;position:relative;border:1px solid #ccc;}

.chart-tooltip{white-space:nowrap;position:absolute;background:rgba(0, 0, 0, 0.75);color:white;padding:6px 10px;border-radius:4px;font-size:0.8em;pointer-events:none;opacity:0;transition:opacity 0.2s;z-index:9999999;}

.close-button{position:absolute;top:10px;right:14px;font-size:24px;cursor:pointer;}

body.modal-open{overflow:hidden;}
#info-modal{display:none;position:fixed;inset:0;background:rgba(255,255,255,0.6);z-index:99999;justify-content:center;align-items:center;backdrop-filter:blur(.1em);-webkit-backdrop-filter:blur(0.1em);}
#info-modal.active{display:flex;}
#modal-title{font-size:1.4em;margin:0 0 0em 0;}
.school-name.en{font-size:0.9em;font-weight:500;color:#000;}
.address{margin:0.4em 0;padding-top:0.4em;font-size:0.8em;border-top:1px solid #ccc;color:#666;}

#bar-chart{width:100%;max-width:600px;}

svg.responsive-svg{width:100%;height:auto;display:block;}

.legend{padding:1em;font-size:0.85em;display:flex;justify-content:center;align-items:center;}
.chart-legend{padding:0 1em;color:#666;display:flex;justify-content:center;align-items:center;gap:20px;}
.legend-color-box{width:15px;height:15px;border-radius:50%;display:inline-block;}

.legend-1km{background:#3681d3;}
.legend-2km{background:#94c5fa;}
.no-vacancy-circle{background:#000000;}
.vacancy-circle{background:#ffde00;}
.oversub-circle{background:#fd606b;}


@media (min-width:320px) and (max-width:767px){
.legend{padding:0.8em;display:block;}
.chart-legend{padding:0.4em 0;}
.modal-content{width:90%;height:80vh;overflow-y:auto;}
}

.onemap-credit,.leaflet-control-attribution{display:inline-flex;align-items:center;}
.leaflet-control-attribution a:first-child,.leaflet-control-attribution span:first-child{display:none;}


.leaflet-popup-content-wrapper{border-radius:0.6em;box-shadow:0 3px 14px rgba(0,0,0,0);background:var(--theme-ui-colors-main);color:var(--theme-ui-colors-white);}
.leaflet-popup-content{margin:0.6em 1.8em 0.6em 1em;}
.leaflet-popup-tip{background:var(--theme-ui-colors-main);}
.leaflet-container a.leaflet-popup-close-button{color:var(--theme-ui-colors-white);}
.leaflet-interactive{width:20px;height:20px;}

.leaflet-tooltip{padding:0.2em 0.6em;box-shadow:0 2px 4px rgba(0,0,0,0.2);z-index:1000000000;}