:root{
    --bg:#14171c; --panel:#1d2129; --panel2:#242a35; --line:#323a48;
    --txt:#e8ecf2; --sub:#9aa5b5; --accent:#e8b04b; --accent2:#4b9de8; --danger:#ff8484; --ok:#7ed49a;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif; background:var(--bg); color:var(--txt); font-size:14px; min-height:100vh;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit;}
  .hidden{display:none !important;}
  .btn{background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:8px 14px; cursor:pointer; font-size:13px; transition:all .15s;}
  .btn:hover{border-color:#4a5568; background:#2c3442;}
  .btn.small{padding:5px 10px; font-size:12px; border-radius:8px;}
  .btn.primary{background:var(--accent); color:#20180a; border-color:var(--accent); font-weight:700;}
  .btn.danger{color:var(--danger);}
  .btn.danger:hover{border-color:#a04545; background:#3a2626;}

  header{position:sticky; top:0; z-index:30; height:60px; display:flex; align-items:center; padding:0 28px; gap:14px; background:rgba(20,23,28,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
  .logo{display:flex; align-items:center; gap:10px; font-weight:900; font-size:16.5px;}
  .logo .mark{width:30px; height:30px; border-radius:8px; display:block; object-fit:contain;}
  header .spacer{flex:1;}

  main{max-width:1280px; margin:0 auto; padding:30px 28px 90px;}
  h2{font-size:20px; letter-spacing:-.4px; margin-bottom:20px;}
  h3.secT{font-size:14px; margin:26px 0 12px; color:var(--txt); letter-spacing:-.2px;}

  .tabs{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
  .tab{background:none; border:1px solid var(--line); color:var(--sub); border-radius:999px; padding:8px 18px; cursor:pointer; font-size:13.5px; font-weight:700;}
  .tab.on{background:var(--accent); color:#20180a; border-color:var(--accent);}

  .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:22px;}
  .stat{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px;}
  .stat .v{font-size:23px; font-weight:900; color:var(--accent);}
  .stat .k{color:var(--sub); font-size:12px; margin-top:3px;}
  .stat.blue .v{color:var(--accent2);}

  .panelBox{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:20px;}
  table{width:100%; border-collapse:collapse; font-size:12.5px;}
  th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap;}
  th{color:var(--sub); font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; background:var(--panel2); position:sticky; top:0;}
  tr:last-child td{border-bottom:none;}
  tr:hover td{background:rgba(255,255,255,.018);}
  .avatar{width:28px; height:28px; border-radius:50%; background:var(--panel2); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; color:var(--accent); overflow:hidden; vertical-align:middle; margin-right:8px;}
  .avatar img{width:100%; height:100%; object-fit:cover;}
  select.sel{background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:4px 7px; font-size:12px; font-family:inherit; cursor:pointer;}
  .pthumb{width:60px; height:38px; border-radius:8px; object-fit:cover; background:#10131a; border:1px solid var(--line); display:inline-block; vertical-align:middle;}
  .muted{color:var(--sub); font-size:12px;}
  .toolrow{display:flex; gap:10px; align-items:center; padding:13px 15px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
  .toolrow input[type=text]{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 12px; color:var(--txt); font-size:13px; font-family:inherit; width:250px; max-width:100%;}
  .toolrow input:focus{outline:none; border-color:var(--accent);}
  .empty{padding:30px; text-align:center; color:var(--sub);}
  .note{color:var(--sub); font-size:12px; margin-top:12px; line-height:1.7;}
  .warnBox{background:rgba(232,176,75,.08); border:1px solid rgba(232,176,75,.4); color:var(--accent); border-radius:12px; padding:13px 16px; font-size:12.5px; line-height:1.7; margin-bottom:18px;}
  .tag{font-size:10.5px; font-weight:700; border-radius:6px; padding:2px 8px;}
  .tag.pro{background:rgba(232,176,75,.15); border:1px solid rgba(232,176,75,.45); color:var(--accent);}
  .tag.free{background:var(--panel2); border:1px solid var(--line); color:var(--sub);}
  .tag.on{background:rgba(126,212,154,.12); border:1px solid rgba(126,212,154,.4); color:var(--ok);}
  .tag.off{background:var(--panel2); border:1px solid var(--line); color:var(--sub);}
  .sw{display:inline-block; width:14px; height:14px; border-radius:4px; border:1px solid var(--line); vertical-align:-2px; margin-right:5px;}

  /* 일별 활성 사용자 바 차트 */
  .bars{display:flex; align-items:flex-end; gap:5px; height:120px; padding:14px 16px 6px;}
  .bars .b{flex:1; background:linear-gradient(180deg, var(--accent2), rgba(75,157,232,.35)); border-radius:4px 4px 0 0; min-height:2px; position:relative;}
  .bars .b span{position:absolute; top:-17px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--sub);}
  .barLbls{display:flex; gap:5px; padding:4px 16px 14px;}
  .barLbls div{flex:1; text-align:center; font-size:9.5px; color:var(--sub);}

  #guard{position:fixed; inset:0; background:var(--bg); z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:var(--sub); font-size:13px;}
  .spin{width:34px; height:34px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:sp 1s linear infinite;}
  @keyframes sp{to{transform:rotate(360deg);}}
  #toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:11px 20px; font-size:13px; z-index:60; box-shadow:0 12px 30px rgba(0,0,0,.5); transition:opacity .3s;}


        #fNav{width:200px; flex:none; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:8px; position:sticky; top:76px;}
        #fNav .fn{display:flex; align-items:center; gap:8px; width:100%; background:none; border:0; color:var(--txt); border-radius:9px; padding:9px 12px; font-size:12.5px; cursor:pointer; font-family:inherit; text-align:left;}
        #fNav .fn:hover{background:var(--panel2);}
        #fNav .fn.on{background:rgba(232,176,75,.13); color:var(--accent); font-weight:800;}
        #fNav .fn .ct{margin-left:auto; font-size:10.5px; color:var(--sub); background:var(--panel2); border-radius:999px; padding:1px 8px;}
        #fNav .fn.on .ct{color:var(--accent);}
        #fNav .fdiv{font-size:10px; font-weight:800; color:var(--sub); letter-spacing:.06em; padding:12px 12px 5px;}
      

      .fbtn{background:none; border:1px solid transparent; color:var(--sub); border-radius:6px; cursor:pointer; font-size:11px; padding:2px 5px; font-family:inherit; vertical-align:1px;}
      .fbtn:hover{border-color:var(--line); background:var(--panel2);}
      .fbtn.on{color:#14161a; background:var(--accent); font-weight:800;}
      #pfDrop{position:absolute; z-index:120; background:#232936; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 46px rgba(0,0,0,.55); width:240px; padding:10px; font-size:12.5px;}
      #pfDrop .srt{display:flex; gap:6px; margin-bottom:8px;}
      #pfDrop .srt button{flex:1; background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:6px; cursor:pointer; font-size:12px; font-family:inherit;}
      #pfDrop .srt button.on{border-color:var(--accent); color:var(--accent);}
      #pfDrop input[type=text]{width:100%; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:7px 10px; color:var(--txt); font-size:12px; font-family:inherit; box-sizing:border-box; margin-bottom:8px;}
      #pfDrop .vals{max-height:190px; overflow-y:auto; border-top:1px solid var(--line); padding-top:6px;}
      #pfDrop label{display:flex; align-items:center; gap:7px; padding:4px 2px; cursor:pointer; font-size:12px; color:var(--txt);}
      #pfDrop label input{accent-color:var(--accent);}
      #pfDrop .pfa{display:flex; gap:6px; margin-top:8px;}
      #pfDrop .pfa button{flex:1; background:var(--panel2); border:1px solid var(--line); color:var(--sub); border-radius:8px; padding:6px; cursor:pointer; font-size:11.5px; font-family:inherit;}
    

        #paneS .setWrap{max-width:760px; margin:0 auto;}
        #paneS .setCard{background:var(--panel); border:1px solid var(--line); border-radius:16px; margin-bottom:14px; overflow:hidden;}
        #paneS .setHead{display:flex; align-items:center; gap:12px; padding:17px 22px; cursor:default;}
        #paneS .setHead .t{font-weight:800; font-size:13.5px;}
        #paneS .setHead .d{font-size:11.5px; color:var(--sub); margin-top:3px;}
        #paneS .setBody{border-top:1px solid rgba(50,58,72,.5); padding:18px 22px 20px;}
        #paneS .setGrid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
        #paneS .sf{display:flex; flex-direction:column; gap:5px; min-width:0;}
        #paneS .sf.w2{grid-column:1 / -1;}
        #paneS .sf>label{font-size:10.5px; font-weight:700; color:var(--sub); letter-spacing:.04em;}
        #paneS .setIn{background:#0e1218; border:1px solid #2b3340; border-radius:11px; color:var(--txt); padding:10px 13px; font-size:13px; font-family:inherit; outline:none; box-sizing:border-box; transition:border-color .15s, box-shadow .15s; width:100%;}
        #paneS .setIn:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,176,75,.12);}
        #paneS .setFoot{display:flex; gap:8px; justify-content:flex-end; margin-top:16px;}
      

#uEditWrap{position:fixed; inset:0; z-index:300; background:rgba(6,8,12,.66); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:20px;}
#uEditWrap .ueBox{background:linear-gradient(180deg,#1b202a 0%,#141922 100%); border:1px solid #2c3442; border-radius:18px; width:450px; max-width:96vw; box-shadow:0 32px 80px rgba(0,0,0,.6);}
#uEditWrap .ueHead{display:flex; align-items:center; gap:13px; padding:22px 26px 18px; border-bottom:1px solid #232a36;}
#uEditWrap .ueAv{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#e8b04b,#c98a2e); color:#14161a; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden;}
#uEditWrap .ueAv img{width:100%; height:100%; object-fit:cover;}
#uEditWrap .ueTitle{font-weight:800; font-size:15px; line-height:1.3;}
#uEditWrap .ueSub{font-size:11.5px; color:var(--sub,#8b95a5); margin-top:2px;}
#uEditWrap .ueBody{padding:20px 26px 4px; display:grid; grid-template-columns:1fr 1fr; gap:14px 12px;}
#uEditWrap .ueF{display:flex; flex-direction:column; gap:6px;}
#uEditWrap .ueF.w2{grid-column:1 / -1;}
#uEditWrap .ueF>label{font-size:10.5px; font-weight:700; color:var(--sub,#8b95a5); letter-spacing:.04em; text-transform:uppercase;}
#uEditWrap .ueIn{background:#0e1218; border:1px solid #2b3340; border-radius:11px; color:var(--txt,#e8ecf2); padding:10px 12px; font-size:13px; font-family:inherit; width:100%; outline:none; transition:border-color .15s, box-shadow .15s; box-sizing:border-box;}
#uEditWrap .ueIn:focus{border-color:var(--accent,#e8b04b); box-shadow:0 0 0 3px rgba(232,176,75,.12);}
#uEditWrap .ueIn:disabled{opacity:.45; cursor:not-allowed;}
#uEditWrap select.ueIn{-webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b95a5' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:30px; cursor:pointer;}
#uEditWrap .ueSep{grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin-top:4px; font-size:10.5px; font-weight:700; color:var(--sub,#8b95a5); letter-spacing:.05em;}
#uEditWrap .ueSep::before,#uEditWrap .ueSep::after{content:''; flex:1; height:1px; background:#232a36;}
#uEditWrap .ueNote{padding:12px 26px 0; font-size:11px; color:var(--sub,#8b95a5); line-height:1.65;}
#uEditWrap .ueFoot{display:flex; gap:10px; padding:18px 26px 22px;}
#uEditWrap .ueBtn{border-radius:11px; padding:11px 18px; font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; transition:filter .15s;}
#uEditWrap .ueBtn:hover{filter:brightness(1.12);}
#uEditWrap .ueBtnGhost{background:none; border:1px solid #2b3340; color:var(--sub,#8b95a5); flex:none;}
#uEditWrap .ueBtnGo{background:linear-gradient(135deg,#e8b04b,#d99a35); border:0; color:#14161a; flex:1;}
#uEditWrap .ueBtnGo:disabled{opacity:.55; cursor:wait;}


#mailWrap .nbtn{border:1px solid #d5dae1; background:#fff; color:#333; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;}
#mailWrap .nbtn:hover{background:#f4f6f8;}
#mailWrap .nbtn.go{border-color:#03c75a; color:#03c75a;}
#mailWrap .nbtn.go:hover{background:#f0fbf5;}
#mailWrap .mrow{display:flex; align-items:center; gap:14px; padding:10px 22px; border-bottom:1px solid #eef1f4;}
#mailWrap .mrow>label{width:64px; flex:none; font-size:13px; font-weight:700; color:#333;}
#mailWrap .mrow input[type=text]{flex:1; border:0; outline:none; font-size:13.5px; color:#222; font-family:inherit; padding:6px 0;}
#mailWrap .chip{display:inline-flex; align-items:center; gap:5px; background:#f2f4f7; border:1px solid #e0e4ea; border-radius:999px; padding:3px 6px 3px 10px; font-size:12px; color:#333; margin:2px 4px 2px 0;}
#mailWrap .chip b{font-weight:700;}
#mailWrap .chip .x{cursor:pointer; color:#98a2b0; font-weight:700; padding:0 4px;}
#mailWrap .chip .x:hover{color:#e0492e;}
#mailWrap .tbtn{border:1px solid #e0e4ea; background:#fff; color:#444; border-radius:6px; min-width:30px; height:30px; padding:0 8px; font-size:12.5px; cursor:pointer; font-family:inherit;}
#mailWrap .tbtn:hover{background:#f4f6f8;}

.prcIn{width:100%; box-sizing:border-box; background:#0e1218; border:1px solid #2b3340; border-radius:10px; color:var(--txt);
        padding:9px 10px; font-size:13px; font-weight:700; font-family:inherit; outline:none; text-align:right;}
        .prcIn:focus{border-color:var(--accent);}