/* 관리자모드 스타일 */
*,*::before,*::after{box-sizing:border-box}
:root{--a-ink:#12222a;--a-bg:#f4f6f6;--a-line:#e2e7e8;--a-accent:#C2762B;--a-sub:#2F8B7B;--a-red:#C8452F;--a-side:250px}
body{margin:0;background:var(--a-bg);color:var(--a-ink);font-family:'Pretendard',-apple-system,'Malgun Gothic',sans-serif;font-size:14px;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em}

/* 레이아웃 */
.side{position:fixed;left:0;top:0;bottom:0;width:var(--a-side);background:var(--a-ink);color:#c8d5d8;overflow-y:auto;z-index:50}
.side .brand{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.09)}
.side .brand b{display:block;color:#fff;font-size:16px;letter-spacing:-.02em}
.side .brand span{font-size:10.5px;letter-spacing:.18em;color:var(--a-accent);font-family:ui-monospace,monospace}
.side h6{margin:20px 20px 7px;font-size:10.5px;letter-spacing:.14em;color:#6d8087;font-weight:600;text-transform:uppercase}
.side a.mi{display:flex;align-items:center;gap:9px;padding:9px 20px;font-size:13.5px;color:#c8d5d8;border-left:3px solid transparent}
.side a.mi:hover{background:rgba(255,255,255,.05);color:#fff}
.side a.mi.on{background:rgba(194,118,43,.16);border-left-color:var(--a-accent);color:#fff;font-weight:600}
.side a.mi i{width:16px;font-style:normal;opacity:.75;text-align:center}
.side .badge{margin-left:auto;background:var(--a-accent);color:#fff;font-size:10px;padding:1px 6px;border-radius:9px;font-family:ui-monospace,monospace}
.side .foot{padding:16px 20px;font-size:11.5px;color:#6d8087;border-top:1px solid rgba(255,255,255,.09);margin-top:12px}

.main{margin-left:var(--a-side);min-height:100vh}
.topbar{background:#fff;border-bottom:1px solid var(--a-line);padding:0 24px;height:60px;display:flex;align-items:center;
  justify-content:space-between;position:sticky;top:0;z-index:40;gap:16px}
.topbar h1{font-size:17px;margin:0;font-weight:700;letter-spacing:-.02em}
.topbar .r{display:flex;align-items:center;gap:14px;font-size:13px;color:#5f7176}
.topbar .live{display:flex;align-items:center;gap:6px;background:#eef6f3;color:#2b6b52;padding:5px 11px;border-radius:20px;font-size:12px}
.topbar .live i{width:7px;height:7px;border-radius:50%;background:#2b6b52;display:block;animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.3}}
.cont{padding:24px}
.mburger{display:none;border:1px solid var(--a-line);background:#fff;width:36px;height:36px;cursor:pointer}

/* 카드/그리드 */
.card{background:#fff;border:1px solid var(--a-line);border-radius:6px;padding:20px;margin-bottom:18px}
.card>h3{margin:0 0 16px;font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.stat{background:#fff;border:1px solid var(--a-line);border-radius:6px;padding:18px 20px}
.stat span{font-size:12px;color:#7d8c90;display:block;margin-bottom:8px}
.stat b{font-size:25px;letter-spacing:-.03em;font-family:ui-monospace,monospace}
.stat small{display:block;margin-top:6px;font-size:11.5px;color:#93a1a4}
.stat.acc b{color:var(--a-accent)} .stat.sub b{color:var(--a-sub)} .stat.red b{color:var(--a-red)}

/* 표 */
table.tb{width:100%;border-collapse:collapse;background:#fff}
table.tb th,table.tb td{padding:10px 11px;border-bottom:1px solid var(--a-line);text-align:left;font-size:13px;vertical-align:middle}
table.tb thead th{background:#f8fafa;font-size:11.5px;color:#5f7176;font-weight:600;white-space:nowrap;border-top:1px solid var(--a-line)}
table.tb tbody tr:hover{background:#fafcfc}
table.tb td.num,table.tb th.num{text-align:right;font-family:ui-monospace,monospace}
table.tb td.c,table.tb th.c{text-align:center}
.tw{overflow-x:auto;border-radius:6px;border:1px solid var(--a-line)}
.tw table.tb th:first-child,.tw table.tb td:first-child{padding-left:16px}

/* 폼 */
label.fl{display:block;font-size:12px;color:#5f7176;margin-bottom:6px;font-weight:600}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=date],
input[type=datetime-local],input[type=color],select,textarea{
  width:100%;border:1px solid var(--a-line);border-radius:4px;padding:9px 11px;font-size:13.5px;background:#fff;outline:none;font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--a-accent)}
input[type=color]{padding:3px;height:38px}
textarea{resize:vertical;min-height:90px}
.fr{margin-bottom:14px}
.fr .hint{font-size:11.5px;color:#93a1a4;margin-top:5px}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
label.ck{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px}
fieldset{border:1px solid var(--a-line);border-radius:6px;padding:16px;margin:0 0 16px}
legend{font-size:12.5px;font-weight:700;padding:0 6px;color:var(--a-accent)}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border:1px solid var(--a-ink);
  background:var(--a-ink);color:#fff;border-radius:4px;font-size:13px;cursor:pointer;white-space:nowrap;transition:.15s}
.btn:hover{opacity:.86}
.btn.line{background:#fff;color:var(--a-ink)}
.btn.acc{background:var(--a-accent);border-color:var(--a-accent)}
.btn.sub{background:var(--a-sub);border-color:var(--a-sub)}
.btn.red{background:var(--a-red);border-color:var(--a-red)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.full{width:100%}
.btns{display:flex;gap:8px;flex-wrap:wrap}

/* 태그/알림 */
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;background:#eef1f1;color:#5f7176;white-space:nowrap}
.tag.on{background:#e6f2ed;color:#2b6b52}
.tag.off{background:#f2eded;color:#9a6b64}
.tag.wait{background:#fdf3e3;color:#a4700f}
.tag.red{background:#fbeceb;color:#a3392c}
.tag.blue{background:#e9f0fa;color:#2c5a91}
.msg{padding:12px 16px;border-radius:5px;margin-bottom:16px;font-size:13.5px}
.msg.ok{background:#e9f5f0;color:#23624a;border:1px solid #c6e2d6}
.msg.err{background:#fbecea;color:#9c362a;border:1px solid #f0cdc8}
.msg.info{background:#eef3f6;color:#3b5a68;border:1px solid #d3e0e6}

/* 탭 / 검색 */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--a-line);margin-bottom:18px;flex-wrap:wrap}
.tabs a{padding:9px 16px;font-size:13px;color:#6c7d81;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--a-ink);border-color:var(--a-accent);font-weight:700;background:#fff}
.filter{background:#fff;border:1px solid var(--a-line);border-radius:6px;padding:14px 16px;margin-bottom:16px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filter input,.filter select{width:auto;min-width:130px}
.pagination{display:flex;gap:4px;justify-content:center;margin-top:20px}
.pg{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--a-line);
  background:#fff;border-radius:4px;font-size:12.5px;font-family:ui-monospace,monospace}
.pg.on{background:var(--a-ink);color:#fff;border-color:var(--a-ink)}
.empty{text-align:center;padding:56px 20px;color:#93a1a4;background:#fff;border:1px solid var(--a-line);border-radius:6px}
.thumb-sm{width:42px;height:42px;object-fit:cover;border:1px solid var(--a-line);border-radius:3px;background:#f2f4f4}
.help{font-size:12.5px;color:#7d8c90;background:#f8fafa;border-left:3px solid var(--a-accent);padding:11px 14px;margin-bottom:16px;line-height:1.8}
.split{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.bar{height:7px;background:#eef1f1;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--a-accent)}

/* 로그인 */
.login-wrap{max-width:380px;margin:11vh auto;background:#fff;border:1px solid var(--a-line);border-radius:8px;padding:34px}
.login-wrap h1{font-size:20px;margin:0 0 4px}
.login-wrap p{color:#7d8c90;font-size:13px;margin:0 0 24px}

@media (max-width:980px){
  .side{transform:translateX(-100%);transition:.25s}
  .side.open{transform:none}
  .main{margin-left:0}
  .mburger{display:block}
  .g4,.g5{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}
@media (max-width:560px){
  .g2,.g4,.g5{grid-template-columns:1fr}
  .cont{padding:14px}
  input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=date],
  input[type=datetime-local],select,textarea{font-size:16px}
  .filter input,.filter select{width:100%;min-width:0}
  .topbar{padding:0 14px}
  .topbar h1{font-size:15px}
  .topbar .r{font-size:11.5px;gap:8px}
}