/* 금은방 상권분석 시스템 */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;color:#222;background:#0e0f12}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font:inherit}
h1,h2,h3{margin:0}

/* Topbar */
.topbar{position:fixed;top:0;left:0;right:0;height:64px;background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);color:#fff;display:flex;align-items:center;padding:0 20px;gap:20px;z-index:100;border-bottom:2px solid #d4af37;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand .logo{font-size:32px;filter:drop-shadow(0 2px 6px rgba(212,175,55,.55))}
.brand h1{font-size:18px;font-weight:700;letter-spacing:-.3px;color:#d4af37}
.brand small{display:block;font-size:11px;color:#aaa;margin-top:2px}
.searchbar{flex:1;display:flex;gap:8px;max-width:600px}
.searchbar input{flex:1;height:40px;padding:0 16px;border-radius:20px;border:1px solid #444;background:#1a1a1a;color:#fff;font-size:14px;outline:none;transition:border .2s}
.searchbar input:focus{border-color:#d4af37;box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.searchbar button{height:40px;padding:0 22px;border-radius:20px;background:#d4af37;color:#1a1a1a;font-weight:700}
.searchbar button:hover{background:#e4bf47}
.hambtn{display:none;font-size:24px;color:#fff;width:40px;height:40px}

/* Layout */
.layout{position:fixed;top:64px;left:0;right:0;bottom:0;display:flex}
.sidebar{width:340px;flex-shrink:0;background:#1a1a1a;color:#e8e8e8;overflow-y:auto;border-right:1px solid #333}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:#444;border-radius:3px}

.panel{padding:18px 18px 14px;border-bottom:1px solid #2a2a2a}
.panel.small{padding:14px 18px}
.panel h2{font-size:13px;font-weight:700;color:#d4af37;margin-bottom:12px;letter-spacing:-.2px;text-transform:uppercase}

.stats{display:flex;flex-direction:column;gap:6px;font-size:13px}
.stat-row{display:flex;justify-content:space-between;padding:6px 10px;background:#222;border-radius:6px}
.stat-row span{color:#aaa}
.stat-row b{color:#fff;font-variant-numeric:tabular-nums}

/* Categories */
.cat-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.cat-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#222;border-radius:6px;cursor:pointer;transition:background .15s}
.cat-item:hover{background:#2a2a2a}
.cat-item input{margin:0;cursor:pointer;accent-color:#d4af37}
.cat-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:1.5px solid rgba(255,255,255,.25)}
.cat-name{flex:1;font-size:13px}
.cat-count{font-size:11px;color:#888;font-variant-numeric:tabular-nums}
.cat-actions{display:flex;gap:6px;flex-wrap:wrap}
.cat-actions button{padding:6px 10px;background:#333;border-radius:5px;color:#ddd;font-size:12px;flex:1}
.cat-actions button:hover{background:#444;color:#d4af37}

/* Radius */
.radius-control{margin-bottom:10px;font-size:13px;color:#ccc}
.radius-control label{display:block;margin-bottom:6px;font-weight:600}
.radius-control label span{color:#d4af37;font-weight:700}
.radius-control input[type=range]{width:100%;accent-color:#d4af37}
.radius-actions{display:flex;gap:6px;margin-bottom:10px}
.radius-actions button{flex:1;padding:8px;background:#2d2d2d;border:1px solid #444;border-radius:6px;color:#ddd;font-size:12px}
.radius-actions button:hover{background:#d4af37;color:#1a1a1a;border-color:#d4af37}
.radius-result{font-size:12px;color:#bbb;line-height:1.6;background:#0f0f0f;border-radius:6px;padding:10px;min-height:0}
.radius-result:empty{padding:0}
.radius-result h4{margin:0 0 6px;color:#d4af37;font-size:12px}
.radius-result .row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dotted #2a2a2a}
.radius-result .row:last-child{border-bottom:0}
.radius-result .row b{color:#fff}

/* AI 상권추천 */
.ai-panel{background:linear-gradient(135deg,rgba(212,175,55,.06),rgba(229,57,53,.04))}
.ai-desc{font-size:12px;color:#aaa;margin:0 0 10px;line-height:1.5}
.ai-desc b{color:#d4af37}
.ai-controls{display:flex;gap:6px;margin-bottom:10px}
.ai-controls select{flex:1;padding:7px 10px;background:#222;border:1px solid #444;border-radius:5px;color:#ddd;font-size:12px;cursor:pointer}
.ai-controls select:hover{border-color:#d4af37}
.ai-btn{padding:7px 14px;background:linear-gradient(135deg,#d4af37,#b8941f);color:#1a1a1a;font-weight:700;border-radius:5px;font-size:12px;flex-shrink:0}
.ai-btn:hover{background:linear-gradient(135deg,#e4bf47,#c8a42f);transform:translateY(-1px)}
.ai-result{font-size:12px;color:#ccc;line-height:1.5;background:#0f0f0f;border-radius:6px;min-height:0;overflow:hidden}
.ai-result:empty{padding:0}
.ai-result.has{padding:10px}
.ai-loading{padding:14px;text-align:center;color:#d4af37;font-weight:600;font-size:12px}
.ai-loading::after{content:'…';animation:dots 1s infinite}
@keyframes dots{0%,80%,100%{content:'.'}40%{content:'..'}60%{content:'...'}}
.ai-rec-item{padding:10px;background:#1a1a1a;border-left:3px solid #d4af37;border-radius:5px;margin-bottom:6px;cursor:pointer;transition:all .15s}
.ai-rec-item:hover{background:#252525;transform:translateX(2px)}
.ai-rec-item:last-child{margin-bottom:0}
.ai-rec-rank{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;background:#d4af37;color:#1a1a1a;border-radius:50%;font-weight:700;font-size:11px;margin-right:6px}
.ai-rec-rank.r1{background:#ffd700}
.ai-rec-rank.r2{background:#c0c0c0}
.ai-rec-rank.r3{background:#cd7f32}
.ai-rec-name{font-weight:700;color:#fff;font-size:13px}
.ai-rec-meta{margin-top:4px;display:flex;gap:8px;font-size:11px;color:#888;flex-wrap:wrap}
.ai-rec-meta span{display:inline-flex;gap:3px;align-items:center}
.ai-rec-meta b{color:#d4af37}
.ai-rec-score{display:inline-block;padding:2px 7px;background:rgba(212,175,55,.15);color:#d4af37;border-radius:8px;font-size:10px;font-weight:600;margin-left:6px}

/* Sido list */
.sido-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sido-btn{padding:8px;background:#222;border-radius:5px;color:#ddd;font-size:12px;text-align:center}
.sido-btn:hover{background:#d4af37;color:#1a1a1a}
.sido-btn b{display:block;font-size:11px;color:#888;margin-top:2px}
.sido-btn:hover b{color:#1a1a1a}

/* Hints */
.hint{margin:0;padding-left:18px;color:#999;font-size:12px;line-height:1.7}
.hint li{margin-bottom:3px}
.hint b{color:#d4af37}

.foot{padding:18px;text-align:center;color:#666;font-size:11px;line-height:1.5}

/* Map */
.map{flex:1;height:100%;background:#222;position:relative}

/* Loading overlay */
.loading-overlay{position:absolute;inset:0;background:rgba(0,0,0,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;color:#d4af37;font-weight:600;gap:18px}
.loading-overlay.hidden{display:none}
.spinner{width:50px;height:50px;border:4px solid #333;border-top-color:#d4af37;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Legend */
.legend{position:absolute;right:14px;top:14px;background:rgba(26,26,26,.96);border:1px solid #444;border-radius:8px;padding:12px 14px;color:#eee;font-size:12px;backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.4);z-index:5}
.legend.hidden{display:none}
.legend h3{font-size:12px;color:#d4af37;margin-bottom:8px}
.legend-row{display:flex;align-items:center;gap:8px;margin:4px 0}

/* Info window */
.iw{padding:12px 14px;min-width:240px;font-size:13px;line-height:1.5}
.iw .iw-name{font-weight:700;font-size:15px;color:#1a1a1a;margin-bottom:6px}
.iw .iw-cat{display:inline-block;padding:2px 8px;border-radius:10px;background:#d4af37;color:#1a1a1a;font-size:11px;font-weight:600;margin-bottom:8px}
.iw .iw-row{display:flex;gap:6px;margin:4px 0;color:#444;font-size:12px}
.iw .iw-row b{color:#888;min-width:36px;flex-shrink:0}
.iw .iw-acc{margin-top:8px;padding:6px 8px;border-radius:4px;font-size:11px;line-height:1.4}
.iw .iw-acc.approx{background:#fff3cd;color:#856404;border:1px solid #ffeaa7}
.iw .iw-acc.real{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.iw .iw-real-btn{display:block;width:100%;margin-top:8px;padding:7px;background:#1e88e5;color:#fff;border:0;border-radius:4px;font-weight:600;font-size:12px;cursor:pointer}
.iw .iw-real-btn:hover{background:#1976d2}
.iw .iw-real-btn:disabled{background:#999;cursor:wait}
.iw .iw-actions{margin-top:10px;display:flex;gap:6px}
.iw .iw-actions a{flex:1;padding:6px 8px;border-radius:5px;background:#1a1a1a;color:#fff;text-align:center;font-size:12px;text-decoration:none}
.iw .iw-actions a:hover{background:#d4af37;color:#1a1a1a}

/* Cluster customization */
.cluster-marker{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border:3px solid rgba(255,255,255,.8);box-shadow:0 2px 8px rgba(0,0,0,.3);font-size:13px}

/* Mobile */
@media(max-width:768px){
  .topbar{height:auto;padding:10px 12px;flex-wrap:wrap;gap:10px}
  .brand h1{font-size:15px}
  .brand small{font-size:10px}
  .searchbar{order:3;width:100%}
  .searchbar input{height:36px;font-size:13px}
  .searchbar button{height:36px;padding:0 14px;font-size:13px}
  .hambtn{display:flex;align-items:center;justify-content:center;background:#333;border-radius:6px}
  .layout{top:auto;display:block;height:calc(100vh - 110px)}
  .layout{top:110px}
  .sidebar{position:fixed;top:110px;bottom:0;left:-340px;width:300px;z-index:90;transition:left .25s}
  .sidebar.open{left:0;box-shadow:4px 0 16px rgba(0,0,0,.6)}
  .map{height:100%}
  .legend{font-size:10px;padding:8px 10px}
}