:root{
  --bg1:#0b1220;
  --bg2:#05070d;
  --card: rgba(17, 25, 40, 0.72);
  --card2: rgba(12, 18, 30, 0.75);
  --border: rgba(255,255,255,0.08);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.60);
  --muted2: rgba(255,255,255,0.45);
  --shadow: 0 12px 40px rgba(0,0,0,0.45);
  --radius: 18px;
  --page-pad: clamp(14px, 3vw, 32px);
  --row-pad-y: 10px;
  --row-gap-y: 6px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 30% 0%, #12213f 0%, var(--bg1) 45%, var(--bg2) 100%);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    Arial;
}

/* TOPBAR */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px var(--page-pad) 10px;
}

.brand .title{ font-size:20px; font-weight:800; }
.brand .subtitle{ margin-top:4px; font-size:12px; color:var(--muted); }

.meta{
  display:flex;
  gap:10px;
  align-items:center;
  white-space:nowrap;
}

.pill{
  max-width:240px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.25);
  color:var(--muted);
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* MAIN GRID */
.container{ padding:0 var(--page-pad) var(--page-pad); }

.layout-3{
  display:grid;
  grid-template-columns: 1.1fr 1.2fr 1.4fr;
  gap:24px;
}

@media (max-width:1200px){
  .layout-3{ grid-template-columns:1fr; }
}

/* CARD */
.card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--card),var(--card2));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  min-width:0;
}

.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 14px 12px;
  border-bottom:1px solid var(--border);
}

.card-title{ font-size:15px; font-weight:800; }
.card-desc{ margin-top:4px; font-size:12px; color:var(--muted2); }

.card-body{
  flex:1;
  min-height:0;
}

/* BADGE */
.badge{
  display:inline-block;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.25);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

/* FORM */
.form{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.label{ font-size:12px; color:var(--muted); }

.input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.25);
  color:var(--text);
}

.row{ display:flex; gap:10px; align-items:center; }

.hint{
  margin:6px 0 0;
  padding-left:18px;
  font-size:12px;
  color:var(--muted2);
}

/* BUTTONS */
.btn{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.25);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
}

.btn-sm{ padding:8px 10px; font-size:12px; }

.btn-primary{
  background:linear-gradient(135deg,rgba(46,129,255,.9),rgba(88,206,255,.6));
}
.btn-secondary{ background:rgba(255,255,255,.06); }
.btn-warn{
  background:linear-gradient(135deg,rgba(255,186,73,.95),rgba(255,125,65,.65));
}
.btn-danger{
  background:linear-gradient(135deg,rgba(255,77,106,.95),rgba(255,74,74,.55));
}

.btn-ghost{
  background:rgba(255,255,255,.06);
}

/* USERS TABLE */
.users{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.users-head{
  display:grid;
  grid-template-columns: 1.2fr 2.2fr .9fr .7fr 160px;
  gap:10px;
  padding:10px 14px;
  font-size:12px;
  color:var(--muted);
  border-bottom:1px solid var(--border);
}

.users-body{
  flex:1;
  padding:10px 14px;
  display:flex;
  flex-direction:column;
  gap:var(--row-gap-y);
  overflow-y:auto;
}

.user-row{
  display:grid;
  grid-template-columns: 1.2fr 2.2fr .9fr .7fr 160px;
  gap:10px;
  align-items:center;
  padding:var(--row-pad-y) 12px;
  border-radius:14px;
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.06);
}

.user-row.pending-delete{
  border:1px dashed rgba(255,77,106,.45);
  background:rgba(255,77,106,.08);
}

.user-name{
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.user-mount{
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.user-cell.actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* STATUS CHIP */
.chip{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  font-weight:800;
}

.chip.enabled{ color:#a9ffcb; }
.chip.disabled{ color:#ffb0b0; }
.chip.pending{ color:#ffd17a; }
.chip.delete{ color:#ff9aa8; }

/* TREE */
.tree{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:0 14px 14px;
  min-height:0;
}

.tree-head{
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
}

.tree-body{
  flex:1;
  overflow-y:auto;
  min-height:180px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(0,0,0,.2);
  padding:8px;
}

.tree-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
  line-height:1.3;
  white-space:nowrap;
}

.tree-row:hover{
  background:rgba(255,255,255,.06);
}

.tree-row svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:block;
}

.ico path{ fill:#ffd36a; }

.caret{
  transition:transform .15s ease;
  opacity:.8;
}
.caret.open{ transform:rotate(90deg); }
.caret path{
  stroke:rgba(255,255,255,.8);
  stroke-width:2;
  fill:none;
}

.caret-spacer{
  width:16px;
  height:16px;
  flex:0 0 16px;
}

.tree-label{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}

/* =====================================================
   LOGS TABLE ALIGNMENT (추가)
   - Time: YYYY-MM-DD <br> HH:MM:SS 표시를 위해 줄바꿈 허용
   - User/IP/Action 컬럼 정렬을 고정해서 보기 편하게
===================================================== */

/* logs 카드 안의 테이블만 4컬럼으로 강제 */
.logs .users-head{
  display:grid;
  grid-template-columns: 170px 1fr 140px 220px; /* Time / User / IP / Action */
  gap:10px;
}

.logs .user-row{
  display:grid;
  grid-template-columns: 170px 1fr 140px 220px; /* Time / User / IP / Action */
  gap:10px;
}

/* 헤더/로우 정렬 통일 */
.logs .users-head > div:nth-child(1),
.logs .user-row > .user-cell:nth-child(1){
  text-align:left;
}

.logs .users-head > div:nth-child(2),
.logs .user-row > .user-cell:nth-child(2){
  text-align:left;
}

.logs .users-head > div:nth-child(3),
.logs .user-row > .user-cell:nth-child(3){
  text-align:right; /* IP 오른쪽 정렬 */
}

.logs .users-head > div:nth-child(4),
.logs .user-row > .user-cell:nth-child(4){
  text-align:left;
}

/* Time은 2줄 표시(<br>)되므로 줄바꿈 허용 */
.logs .log-ts{
  line-height:1.15;
  white-space:normal;
}

/* 나머지 컬럼은 한 줄 유지 + ... 처리 */
.logs .log-user,
.logs .log-ip,
.logs .log-action{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}