/* Compact, code-drawn counter inspired by the original online badges. */
#online-presence { box-sizing:border-box; width:100%; margin:10px auto 0; text-align:center; }
.presence-badge,.restore-footer .presence-badge { display:inline-flex; box-sizing:border-box; align-items:center; justify-content:flex-start; gap:5px; min-width:100px; height:23px; padding:1px 6px 1px 2px; border:1px solid #7b7b7b; outline:1px solid #d2d2d2; outline-offset:-3px; background:#444; color:#f3f3f3!important; font:12px/18px Gulim,Dotum,Arial,sans-serif; white-space:nowrap; vertical-align:middle; text-decoration:none!important; }
a.presence-badge:hover { background:#333; color:#fff!important; }
a.presence-badge:focus-visible { outline:2px solid #227db5; outline-offset:3px; }
.presence-person { position:relative; display:inline-block; flex:0 0 17px; width:17px; height:17px; border-radius:50%; background:#d63737; }
.presence-person::before { content:""; position:absolute; top:2px; left:7px; width:4px; height:4px; border-radius:50%; background:#fff; }
.presence-person::after { content:""; position:absolute; top:7px; left:6px; width:5px; height:6px; border-radius:2px 2px 1px 1px; background:#fff; box-shadow:-3px 1px 0 -1px #fff,3px 1px 0 -1px #fff,-1px 5px 0 -1px #fff,2px 5px 0 -1px #fff; }
.presence-value { display:inline-block; min-width:0; padding-left:1px; }
.presence-unavailable { color:#d9d9d9!important; }
.presence-admin { color:#444; font:12px/1.6 Gulim,Dotum,sans-serif; }
.presence-admin h2 { margin:0 0 10px; font-size:16px; }
.presence-admin h3 { margin:16px 0 8px; font-size:13px; }
.presence-admin-note { margin:8px 0; color:#666; overflow-wrap:anywhere; }
.presence-admin-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0; }
.presence-admin-toolbar button { box-sizing:border-box; min-height:28px; margin:0; font:12px Gulim,Dotum,sans-serif; }
.presence-admin-status { margin:0; color:#666; }
.presence-admin-status[role="alert"] { color:#a33; }
.presence-admin-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.presence-admin-card { display:flex; flex-direction:column; gap:3px; padding:10px; border:1px solid #ccdfe5; background:#f1f9fc; }
.presence-admin-card strong { font-size:19px; color:#24577a; }
.presence-admin-table-wrap { max-width:100%; overflow:auto; border:1px solid #c8d9df; }
.presence-admin-table { width:100%; border-collapse:collapse; table-layout:fixed; font:12px/1.6 Gulim,Dotum,sans-serif; }
.presence-admin-table th,.presence-admin-table td { padding:7px 8px; border-bottom:1px solid #dbe7eb; text-align:left; overflow-wrap:anywhere; }
.presence-admin-table th { background:#e6f3f8; font-weight:normal; }
.presence-admin-table tbody tr:last-child td { border-bottom:0; }
.presence-member-marker { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; background:#266ac0; vertical-align:baseline; }
.presence-member-marker[data-gender="female"] { background:#dd4242; }
.presence-member-marker[data-gender="male"] { background:#79c6e3; }
.presence-admin-empty { padding:12px; border:1px solid #dbe7eb; color:#666; }
@media(max-width:760px) {
  #online-presence { margin-top:12px; }
  .presence-admin-summary { gap:5px; }
  .presence-admin-card { padding:8px 6px; }
  .presence-admin-card strong { font-size:17px; }
  .presence-admin-table th,.presence-admin-table td { padding:7px 5px; }
  .presence-admin-toolbar button { min-height:34px; }
}