*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:"Pretendard","Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:#1f1f1f;background:#111}
#view{position:fixed;left:0;top:0;bottom:0;right:340px;overflow:hidden;touch-action:none}
#view canvas{display:block;width:100%;height:100%;cursor:grab}
#view canvas.dragging{cursor:grabbing}
#panel{position:fixed;right:0;top:0;bottom:0;width:340px;background:#fff;display:flex;flex-direction:column;border-left:1px solid #ddd;z-index:5}
#panelToggle{display:none}
.phead{border-bottom:1px solid #e5e1d9}
.tabs{display:flex;flex-wrap:wrap}
.tabs button{flex:1 0 25%;border:0;background:#fff;padding:10px 0;font-size:13px;cursor:pointer;border-bottom:3px solid transparent;font-family:inherit}
.tabs button.on{border-bottom-color:#111;font-weight:700}
#lib{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.card{display:grid;grid-template-columns:72px 1fr;gap:9px;border:1px solid #e3ded5;border-radius:10px;padding:8px;background:#fff}
.card.on{border-color:#111;box-shadow:0 0 0 1px #111}
.card img,.card .noimg{width:72px;height:72px;object-fit:cover;border-radius:7px;background:#f0eee9;display:flex;align-items:center;justify-content:center;font-size:11px;color:#999}
.card .br{font-size:11px;color:#777}.card .nm{font-size:13px;font-weight:700;line-height:1.3;margin:1px 0}
.card .dm{font-size:11.5px;color:#333}.card .pr{font-size:13px;font-weight:800;margin-top:2px}
.card .act{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.card .act button,.card .act a{font-size:12px;border:1px solid #111;background:#111;color:#fff;border-radius:6px;padding:4px 9px;cursor:pointer;text-decoration:none;font-family:inherit}
.card .act a,.card .act .ghost{background:#fff;color:#111}
.card .act .del{background:#fff;color:#999;border-color:#ccc}
.pfoot{border-top:1px solid #e5e1d9;padding:10px}
#sum{font-size:13px;font-weight:700;margin-bottom:8px}
.row{display:flex;gap:6px;flex-wrap:wrap}
.row button,.row input,.row select{font-family:inherit;font-size:12.5px}
.row button{border:1px solid #111;background:#fff;border-radius:6px;padding:6px 9px;cursor:pointer}
.row button.dark{background:#111;color:#fff}
#topbar{position:absolute;left:12px;right:12px;top:12px;display:flex;gap:10px;align-items:flex-start;z-index:3;pointer-events:none}
#topbar .ttl{background:rgba(17,17,17,.82);color:#fff;border-radius:10px;padding:8px 12px;font-size:13px;white-space:nowrap;pointer-events:auto}
#topbar .ttl span{margin-left:8px;font-size:16px;font-weight:800}
#nodes{display:flex;flex-wrap:wrap;gap:5px;pointer-events:auto}
#nodes button{border:0;background:rgba(255,255,255,.88);border-radius:16px;padding:6px 11px;font-size:12.5px;cursor:pointer;font-family:inherit}
#nodes button.on{background:#111;color:#fff}
#nodes button:disabled{opacity:.45;cursor:default}
#hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:6px 12px;border-radius:14px;z-index:3;white-space:nowrap}
#minimap{position:absolute;left:12px;bottom:12px;width:300px;height:210px;background:rgba(255,255,255,.93);border-radius:10px;z-index:3;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.25)}
#minimap.big{width:min(820px,calc(100% - 24px));height:min(560px,calc(100% - 90px))}
#minimap svg{width:100%;height:100%;display:block;touch-action:none}
#mapBig{position:absolute;right:6px;top:6px;border:0;background:#111;color:#fff;border-radius:6px;width:28px;height:28px;cursor:pointer}
#selbox{position:absolute;right:12px;bottom:12px;width:300px;background:#fff;border-radius:10px;padding:10px 12px;z-index:3;display:none;box-shadow:0 2px 10px rgba(0,0,0,.25);font-size:12.5px}
#selbox h4{margin:0 0 4px;font-size:14px}
#selbox .sub{color:#777;font-size:11.5px;margin-bottom:6px}
#selbox .row{margin-top:6px}
#selbox label{color:#777}
#selbox input[type=number]{width:70px}
#loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#ddd;font-size:14px;background:#151515;z-index:6}
.spin{width:34px;height:34px;border:3px solid #444;border-top-color:#fff;border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
form.add{display:grid;grid-template-columns:1fr 1fr;gap:7px 8px;font-size:12px}
form.add label{display:flex;flex-direction:column;gap:3px;color:#666}
form.add .full{grid-column:1/-1}
form.add input,form.add select{font-family:inherit;font-size:13px;padding:6px;border:1px solid #ccc;border-radius:6px}
form.add button{grid-column:1/-1;padding:10px;background:#111;color:#fff;border:0;border-radius:7px;font-weight:700;cursor:pointer;font-family:inherit}
.box{border:1px solid #e3ded5;border-radius:10px;padding:10px;font-size:12.5px;line-height:1.55}
.box h4{margin:0 0 6px;font-size:13.5px}
.msg{font-size:12px;margin:4px 0}.warn{color:#c0392b}.ok{color:#2e8b57}.muted{color:#888}
@media (max-width:820px){
  #view{right:0}
  #panel{width:88vw;transform:translateX(100%);transition:transform .2s}
  #panel.open{transform:none}
  #panelToggle{display:block;position:fixed;right:10px;bottom:10px;z-index:6;border:0;background:#111;color:#fff;border-radius:18px;padding:9px 14px;font-size:13px}
  #minimap{width:180px;height:130px}
  #hint{display:none}
  #selbox{left:12px;right:12px;width:auto;bottom:150px}
}