/* Theme-integrated premium role permission matrix (no hard-coded colors) */
.role-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 0 16px}
.role-head .left{display:flex;flex-direction:column;gap:6px}
.role-head .kicker{font-size:12px;color:var(--muted)}
.role-head .title{font-size:20px;font-weight:900;color:var(--text)}
.role-head .right{display:flex;gap:10px;flex-wrap:wrap}

.r-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.r-card .r-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:var(--surface2);border-bottom:1px solid var(--border)}
.r-card .r-head .h-title{font-weight:900;color:var(--text);display:flex;align-items:center;gap:10px}
.r-card .r-head .pill{font-size:12px;font-weight:900;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--chip);color:var(--chipText)}
.r-card .r-body{padding:16px}

.r-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;align-items:start}
@media(max-width:1024px){.r-grid{grid-template-columns:1fr}}

.r-form{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.r-form .full{grid-column:1/-1}
@media(max-width:768px){.r-form{grid-template-columns:1fr}}

.r-field label{display:block;margin-bottom:8px;font-size:12px;font-weight:800;color:var(--muted)}
.r-field input,.r-field select,.r-field textarea{
  width:100%;height:44px;padding:0 12px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-family:"Malgun Gothic","맑은 고딕",sans-serif;outline:none;
}
.r-field textarea{height:120px;padding:10px 12px;resize:vertical}
.r-field input:focus,.r-field select:focus,.r-field textarea:focus{border-color:var(--accent)}

.r-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 14px;
  border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-weight:900;font-size:13px;cursor:pointer;text-decoration:none;transition:all .2s ease;
}
.r-btn:hover{background:var(--surface2)}
.r-btn.primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.r-btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.r-btn.ghost{background:transparent}

.perm-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.perm-tools .grow{flex:1;min-width:220px}
.perm-tools input{
  width:100%;height:40px;padding:0 12px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);color:var(--text);
}

.perm-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:auto}
.perm-table{width:100%;min-width:980px;border-collapse:collapse}
.perm-table th,.perm-table td{padding:12px;border-bottom:1px solid var(--border);font-size:13px;white-space:nowrap}
.perm-table th{position:sticky;top:0;background:var(--surface2);color:var(--muted);font-weight:900;z-index:1}
.perm-table td{color:var(--text)}
.perm-table tr:hover td{background:var(--surface2)}

.chk{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;border:1px solid var(--border);
  background:var(--chip);color:var(--chipText);font-weight:900;font-size:12px;
}
.chk input{width:18px;height:18px}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 10px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface2);color:var(--muted);font-size:12px;font-weight:900;
}
.note{
  padding:14px;border:1px dashed var(--border);border-radius:var(--radius);
  background:var(--surface2);color:var(--muted);font-size:13px;
}