@import url('/static/pbot_ui.css');
:root{--admin-red:#fb7185}
body{font-feature-settings:"tnum" 1,"ss01" 1}
nav{position:sticky!important;top:0;z-index:40;background:rgba(7,7,12,.91)!important;border-bottom:1px solid rgba(139,92,246,.14)!important;box-shadow:0 12px 32px rgba(0,0,0,.14)}
nav .max-w-7xl{max-width:1480px!important}nav h1{letter-spacing:-.025em}nav h1:before{content:"P BOT · ";color:#a78bfa;font-size:.72em;letter-spacing:.02em}nav .bg-red-500{background:rgba(251,113,133,.12)!important;border:1px solid rgba(251,113,133,.28)!important;color:#fda4af!important;border-radius:999px!important}
.nav,.pbot-nav,nav a[href^="/admin"]{background:#14151f!important;border:1px solid #282a3a!important;padding:.55rem .76rem!important;border-radius:10px!important;color:#c8cad6!important;font-size:.78rem!important;font-weight:800!important;white-space:nowrap}.nav:hover,.pbot-nav:hover,nav a[href^="/admin"]:hover{background:#1d1f2c!important;color:#fff!important;border-color:#41445a!important}nav a.bg-indigo-600,nav a.bg-violet-600,.pbot-nav-active{background:linear-gradient(135deg,#7c3aed,#5b21b6)!important;color:#fff!important;border-color:#8b5cf6!important;box-shadow:0 8px 24px rgba(124,58,237,.16)}nav button[onclick*="logout"]{background:rgba(127,29,29,.11)!important;border-color:rgba(251,113,133,.25)!important;color:#fda4af!important;border-radius:10px!important;font-size:.78rem!important;font-weight:800!important}
main.max-w-7xl,main.max-w-6xl{max-width:1480px!important;position:relative;z-index:1}.panel{padding:20px!important}.card{min-height:104px;padding:16px!important}.card p{font-size:.69rem!important;color:#898c9e!important;letter-spacing:.04em!important}.card strong{font-size:1.7rem!important;color:#e9e4ff}.card span{display:block;margin-top:.25rem}
.pbot-kpi{background:linear-gradient(180deg,#11121c,#0c0d14);border:1px solid #26283a;border-radius:15px;padding:14px 15px}.pbot-kpi .label{font-size:.7rem;color:#85889b;font-weight:800}.pbot-kpi .value{font-size:1.55rem;line-height:1.2;font-weight:950;margin-top:.3rem}
.pbot-table,table{border-collapse:separate;border-spacing:0;width:100%}table thead th{position:sticky;top:0;background:#0d0e16!important;color:#9295a8!important;font-size:.69rem!important;font-weight:900!important;z-index:2;letter-spacing:.025em}table td,table th{border-bottom:1px solid rgba(55,58,78,.6)!important;padding:.72rem .68rem!important}table tbody tr:hover{background:rgba(124,58,237,.045)!important}
.pbot-toolbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.pbot-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;border-radius:10px;border:1px solid #303246;background:#171925;padding:.55rem .75rem;font-size:.78rem;font-weight:800;color:#e4e4e7}.pbot-btn:hover{background:#202231;border-color:#45485f}.pbot-btn-primary,.btn-primary{background:linear-gradient(135deg,#7c3aed,#5b21b6)!important;border:1px solid #8b5cf6!important;color:#fff!important;box-shadow:0 8px 22px rgba(124,58,237,.14)}.pbot-btn-danger{background:#281116;border-color:#5b2029;color:#fda4af}.pbot-btn-good{background:#10251c;border-color:#1f5a3b;color:#86efac}
.filter-btn,.filter,.tiny,.btn{background:#171925!important;border:1px solid #303246!important;color:#d8d9e2!important;border-radius:9px!important}.filter-btn.active,.expiry-filter.bg-violet-600{background:#6d28d9!important;border-color:#8b5cf6!important;color:white!important}
.label{display:block;font-size:.72rem!important;color:#a6a8b7!important;font-weight:800!important;margin-bottom:.35rem}.check{font-size:.78rem;color:#c7c8d2}.check input{accent-color:#7c3aed}
details.panel>summary{cursor:pointer;list-style:none;font-weight:900;color:#e8e7ef}details.panel>summary::-webkit-details-marker{display:none}details.panel>summary:after{content:"＋";float:right;color:#8b5cf6}details.panel[open]>summary:after{content:"−"}details.panel[open]>summary{padding-bottom:12px;border-bottom:1px solid #252737;margin-bottom:12px}
#message:not(.hidden),#load-error:not(.hidden){box-shadow:0 10px 30px rgba(0,0,0,.16)}
@media(max-width:900px){nav .max-w-7xl{gap:.7rem!important}nav .flex-wrap{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;max-width:100%;padding-bottom:.3rem;scrollbar-width:none}nav .flex-wrap::-webkit-scrollbar{display:none}.card{min-height:92px}.panel{padding:15px!important}}
@media(max-width:640px){main.max-w-7xl,main.max-w-6xl{padding:14px!important}.card{padding:13px!important}.card strong{font-size:1.38rem!important}nav h1:before{display:block;margin-bottom:2px}.pbot-mobile-hide{display:none!important}}

/* P BOT 관리자 UI 보강: 기존 스타일은 유지하고 아래 규칙만 추가한다. */
.pbot-pagination{display:flex;align-items:center;justify-content:flex-end;gap:.35rem;flex-wrap:wrap}.pbot-pagination button{min-width:34px;height:34px;padding:0 .55rem;border-radius:9px;border:1px solid #303246;background:#151722;color:#b9bbc8;font-size:.76rem;font-weight:900}.pbot-pagination button:hover{background:#202231;border-color:#4c4f68;color:#fff}.pbot-pagination button.active{background:linear-gradient(135deg,#7c3aed,#5b21b6);border-color:#8b5cf6;color:#fff;box-shadow:0 7px 18px rgba(124,58,237,.17)}
.pbot-mobile-bot-card{background:linear-gradient(180deg,#11121b,#0b0c13);border:1px solid #292b3c;border-radius:15px;padding:13px;display:grid;gap:10px}.pbot-mobile-bot-card.is-problem{border-color:rgba(251,146,60,.35)}.pbot-mobile-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.pbot-mobile-stat-grid>div{background:#080910;border:1px solid #232536;border-radius:10px;padding:8px}.pbot-mobile-stat-grid span{display:block;font-size:.62rem;color:#75788a;font-weight:800;margin-bottom:3px}.pbot-mobile-stat-grid b{display:block;font-size:.73rem;color:#ddddea;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbot-bot-viewbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px;background:#090a10;border:1px solid #282a39;border-radius:13px}.pbot-view-btn{border:1px solid #303246;background:#151722;color:#aeb0be;border-radius:9px;padding:.5rem .7rem;font-size:.75rem;font-weight:900}.pbot-view-btn.active{background:linear-gradient(135deg,#7c3aed,#5b21b6);border-color:#8b5cf6;color:#fff}.pbot-owner-search{max-width:320px!important;padding:.5rem .7rem!important;font-size:.76rem!important}.pbot-owner-card{background:#0b0c13;border:1px solid #292b3b;border-radius:14px;overflow:hidden}.pbot-owner-card>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;cursor:pointer;list-style:none}.pbot-owner-card>summary::-webkit-details-marker{display:none}.pbot-owner-card>summary:hover{background:rgba(124,58,237,.05)}.pbot-owner-card[open]>summary{background:rgba(124,58,237,.065);border-bottom:1px solid #292b3b}.pbot-owner-title{font-size:.9rem;font-weight:950;color:#f0ecff}.pbot-owner-sub{font-size:.68rem;color:#7f8294;margin-top:3px}.pbot-owner-counts{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;font-size:.67rem;color:#8f92a4}.pbot-owner-counts span{background:#12141f;border:1px solid #282a3b;border-radius:999px;padding:.25rem .48rem}.pbot-owner-counts b{color:#c4b5fd}.pbot-owner-bots{padding:9px;display:grid;gap:8px}.pbot-owner-bot-row{background:#080910;border:1px solid #232536;border-radius:12px;padding:11px}.pbot-owner-meta{display:flex;gap:6px 12px;flex-wrap:wrap;margin-top:7px;font-size:.67rem;color:#777a8d}.pbot-owner-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.pbot-owner-actions .mini{padding:.38rem .58rem!important;font-size:.68rem!important}

@media(max-width:900px){
  nav .flex-wrap{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
  nav .flex-wrap>a,nav .flex-wrap>button{scroll-snap-align:start;flex:0 0 auto}
  nav a[href^="/admin"],nav .nav,nav .pbot-nav,nav button[onclick*="logout"]{padding:.47rem .62rem!important;border-radius:9px!important;font-size:.72rem!important}
  section:has(#bot-page-summary) .flex.flex-wrap.gap-2:has(.filter-btn){display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;max-width:100%;padding-bottom:.3rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  section:has(#bot-page-summary) .flex.flex-wrap.gap-2:has(.filter-btn)::-webkit-scrollbar{display:none}
  section:has(#bot-page-summary) .filter-btn{flex:0 0 auto}
  .pbot-bot-viewbar{align-items:stretch;flex-direction:column}.pbot-owner-search{max-width:none!important;width:100%!important}
}
@media(max-width:767px){
  nav{padding:9px 11px!important}nav .max-w-7xl{gap:.55rem!important}nav h1{font-size:1rem!important;line-height:1.15!important}nav h1:before{font-size:.63em!important}nav .flex-wrap{margin-inline:-2px;padding:2px 2px 5px!important;gap:.35rem!important}
  section:has(#bot-page-summary) .overflow-x-auto:has(#bot-table){display:none!important}#bot-mobile-list{display:grid!important}
  .pbot-pagination{justify-content:center}.pbot-pagination button{min-width:32px;height:32px;padding:0 .45rem}
  .pbot-owner-card>summary{padding:11px;align-items:flex-start}.pbot-owner-counts span{display:none}.pbot-owner-bots{padding:7px}.pbot-owner-bot-row{padding:10px}.pbot-owner-meta{display:grid;grid-template-columns:1fr;gap:4px;margin-top:8px}
}

/* P BOT 모바일 관리자 상단/간격 압축 보강
   기존 HTML/기능은 그대로 두고 모바일에서만 높이와 줄바꿈을 줄인다. */
@media(max-width:767px){
  /* 상단 페이지 제목 영역은 모바일에서 숨기고 메뉴 탭만 한 줄로 유지 */
  nav{
    padding:6px 8px!important;
    min-height:0!important;
  }
  nav>.max-w-7xl,
  nav>.pbot-shell{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }
  nav>.max-w-7xl>:first-child,
  nav>.pbot-shell>:first-child{
    display:none!important;
  }
  nav>.max-w-7xl>.flex-wrap,
  nav>.pbot-shell>.flex-wrap{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:5px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0 0 2px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
  }
  nav>.max-w-7xl>.flex-wrap::-webkit-scrollbar,
  nav>.pbot-shell>.flex-wrap::-webkit-scrollbar{
    display:none!important;
  }
  nav>.max-w-7xl>.flex-wrap>a,
  nav>.max-w-7xl>.flex-wrap>button,
  nav>.pbot-shell>.flex-wrap>a,
  nav>.pbot-shell>.flex-wrap>button{
    flex:0 0 auto!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:32px!important;
    height:32px!important;
    padding:0 9px!important;
    border-radius:8px!important;
    font-size:.69rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  /* 본문도 모바일에서 좌우/위아래 여백을 과하게 먹지 않도록 압축 */
  main.max-w-7xl,
  main.max-w-6xl{
    padding:10px!important;
  }
  main.space-y-4>:not([hidden])~:not([hidden]){
    margin-top:.75rem!important;
  }
  .panel{
    padding:12px!important;
    border-radius:13px!important;
  }

  /* 봇 관리의 상단 등록/배정 버튼이 여러 줄로 너무 길어지는 현상 완화 */
  #new-bot-registration>.flex.items-center.justify-between{
    align-items:flex-start!important;
    gap:8px!important;
  }
  #new-bot-registration>.flex.items-center.justify-between>.flex.gap-1{
    flex:0 0 auto!important;
    max-width:52%!important;
    overflow-x:auto!important;
    padding-bottom:2px!important;
    scrollbar-width:none!important;
  }
  #new-bot-registration>.flex.items-center.justify-between>.flex.gap-1::-webkit-scrollbar{
    display:none!important;
  }
  #new-bot-registration>.flex.items-center.justify-between>.flex.gap-1>button{
    flex:0 0 auto!important;
  }

  /* 회원별 보기 전환 버튼도 두 줄 대신 가로 한 줄 유지 */
  .pbot-bot-viewbar>.flex.gap-2{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  .pbot-bot-viewbar>.flex.gap-2::-webkit-scrollbar{
    display:none!important;
  }
  .pbot-view-btn{
    flex:0 0 auto!important;
    min-height:34px!important;
    padding:.45rem .62rem!important;
    font-size:.7rem!important;
  }

  /* 대량 가져오기 버튼은 모바일에서 2열로 유지해 세로 길이 과증가 방지 */
  .pbot-import-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  .pbot-import-actions>*{
    width:100%!important;
    min-width:0!important;
    justify-content:center!important;
    text-align:center!important;
  }
}

@media(max-width:380px){
  nav>.max-w-7xl>.flex-wrap>a,
  nav>.max-w-7xl>.flex-wrap>button,
  nav>.pbot-shell>.flex-wrap>a,
  nav>.pbot-shell>.flex-wrap>button{
    min-height:30px!important;
    height:30px!important;
    padding:0 8px!important;
    font-size:.66rem!important;
  }
  .pbot-import-actions{
    grid-template-columns:1fr!important;
  }
}