/* 운영 화면(js/admin.js). 버튼·포커스 링은 app.css 가 이미 맡는다 — 여기에는 행 격자만 둔다. */

/* 이 화면이 소유하는 래퍼. 존재 이유는 리스너를 걸 노드를 #view 와 분리하는 것이다(admin.js 참고). */
.ad-root > .ad:last-child { margin-bottom: 0; }

.ad { padding: 18px; margin-bottom: 16px; }
.ad-hint { color: var(--sub); font-size: 12px; margin: 6px 0 12px; }
.ad-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; }
.ad-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-slot);
}

/* 보관된 레이드도 읽을 수는 있어야 한다. --sub 아래 단계를 만들거나 opacity 로 덮으면
   반투명 패널 위에서 AA(4.5:1)를 넘지 못하므로(app.css 의 --dim 삭제 사유), 구분은
   색이 아니라 점선 테두리로만 준다. */
.ad-row.is-archived { border-style: dashed; }
.ad-row.is-archived .ad-input { color: var(--sub); }

.ad-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ad-note, .ad-role { flex: none; color: var(--sub); font-size: 12px; }
.ad-role { min-width: 48px; }

.ad-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--edge);
  border-radius: 6px;
  color: var(--ink);
}
/* 서버 번호는 4자리 고정이다. flex: 1 이면 캐릭터 이름 칸과 같은 폭을 먹는다. */
#newUserServer { flex: none; width: 86px; }

/* 자동 초기화 스위치. 켜짐·꺼짐은 색만으로 말하지 않는다 — 글자가 이미 '켜짐/꺼짐' 이고
   색은 그 위에 얹는 보조 신호다(색약 대응, 스펙 9절). */
.ad-on { color: var(--ether); font-weight: 600; }
.ad-off { color: var(--amethyst); font-weight: 600; }
.ad-toggle { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* 경고 문구는 버튼 옆에서 줄바꿈되어야 한다 — flex 항목의 기본 min-width:auto 는 줄이지 않는다. */
.ad-toggle .ad-note { flex: 1; min-width: 220px; line-height: 1.5; }

.ad-add, .ad-reset { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* 비울 범위가 안 쓰는 칸은 감춘다. 남겨 두면 "주 전체"를 고르고도 요일과 레이드가 옆에 서
   있어서, 그 둘이 지워질 범위를 좁히는 것처럼 읽힌다 — 되돌릴 수 없는 버튼에서 그 오해는
   비싸다. display:none 이라 탭 순서에서도 빠지고, 값은 남아 있어 다시 펼치면 그대로다. */
.ad-reset[data-scope="week"] .ad-when-day,
.ad-reset[data-scope="week"] .ad-when-cell,
.ad-reset[data-scope="day"]  .ad-when-cell { display: none; }
.ad-add select, .ad-reset select {
  height: 34px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--edge);
  border-radius: 6px;
  color: var(--ink);
}

/* 좁은 폭에서 버튼 4개가 한 줄에 남으면 이름 칸이 0 으로 눌린다. 행을 접어 흘린다. */
@media (max-width: 720px) {
  .ad-row { flex-wrap: wrap; }
  .ad-name, .ad-input { flex-basis: 100%; }
}