/* 로어키퍼 Activity — 규칙 문서 conventions/activity_ui.md §2~§5 가 정본. 값 추가는 문서 먼저. 외부 폰트 0. */
:root {
  --bg: #313338; --panel: #2b2d31; --raised: #383a40; --line: #3f4147;
  --text: #dbdee1; --muted: #949ba4;
  --accent: #5865f2; --accent-soft: rgba(88, 101, 242, .18);
  --ok: #23a55a; --warn: #f0b232; --danger: #f23f43;
  /* 안전 영역 — 디스코드 주입값 우선, 없으면 기기 값 */
  --sait: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --saib: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sail: var(--discord-safe-area-inset-left, env(safe-area-inset-left, 0px));
  --sair: var(--discord-safe-area-inset-right, env(safe-area-inset-right, 0px));
  --nav-h: 60px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 400 14px/1.55 "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; }
.icon { flex: none; display: block; }
b { font-weight: 600; }

/* ---------- 머리줄 · 탭 (PC: 위, 아이콘 + 글자) ---------- */
header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: calc(8px + var(--sait)) calc(12px + var(--sair)) 8px calc(12px + var(--sail));
  background: var(--panel); border-bottom: 1px solid var(--line); }
#tabs { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
#tabs button { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--muted);
  border: 0; border-radius: 6px; padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
#tabs button:hover { color: var(--text); background: var(--raised); }
#tabs button.on { color: var(--text); background: var(--accent-soft); }
#tabs button .icon { width: 18px; height: 18px; }
#refresh { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto;
  background: transparent; color: var(--muted); border: 0; border-radius: 6px; cursor: pointer; }
#refresh:hover { color: var(--text); background: var(--raised); }

/* ---------- 본문 ---------- */
main { padding: 16px 16px calc(16px + var(--saib)); max-width: 980px; margin: 0 auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin: 0 0 12px; }
.card-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.card-title .icon { color: var(--muted); }
.card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px;
  font-size: 13px; font-weight: 600; color: var(--muted); }
.page-title { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.meta { display: flex; align-items: center; gap: 8px; color: var(--muted); margin: 0 0 12px; font-size: 13px; }
.state { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.state.error { color: var(--danger); }
.comment { margin: 4px 0; color: var(--muted); }
.chip { font-size: 12px; font-weight: 400; color: var(--muted); background: var(--raised);
  border-radius: 999px; padding: 0 8px; }
pre.body { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; }
pre.code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--muted); }

/* 이름–값 행: PC 2열 */
.rows { margin: 0; }
.row { display: grid; grid-template-columns: minmax(80px, 30%) 1fr; gap: 12px; padding: 8px 0;
  border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; padding-top: 0; }
.row dt { color: var(--muted); font-size: 13px; }
.row dd { margin: 0; min-width: 0; }
.v-line { white-space: pre-wrap; word-break: break-word; }

/* 게이지 — 규칙 §5 (≥40% accent · 15~40% warn · <15% danger) */
.gauge { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 2px 0; max-width: 520px; }
.g-label { min-width: 32px; }
.g-track { height: 6px; background: var(--raised); border-radius: 999px; overflow: hidden; }
.g-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.g-fill.low { background: var(--warn); }
.g-fill.bad { background: var(--danger); }
.g-num { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* 인물: PC = 왼쪽 목록 + 오른쪽 본문 */
.people { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.plist { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 72px;
  max-height: calc(100vh - 96px); overflow-y: auto; }
.plist button { display: flex; align-items: center; gap: 8px; text-align: left; background: transparent; color: var(--text);
  border: 0; border-radius: 6px; padding: 8px 12px; font: inherit; cursor: pointer; }
.plist button .icon { color: var(--muted); }
.plist button:hover { background: var(--raised); }
.plist button.on { background: var(--accent-soft); }
.plist button.mine .icon { color: var(--warn); }

/* ---------- 폰(<640): 탭 = 아래 내비 바(아이콘 위 · 글자 아래), 위는 디스코드가 덮는다 ---------- */
@media (max-width: 639px) {
  header { justify-content: flex-end; background: var(--bg); border-bottom: 0;
    padding-left: calc(8px + var(--sail)); padding-right: calc(8px + var(--sair)); }
  #tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0; overflow: visible; background: var(--panel); border-top: 1px solid var(--line);
    padding: 4px calc(4px + var(--sair)) calc(4px + var(--saib)) calc(4px + var(--sail)); }
  #tabs button { flex-direction: column; justify-content: center; gap: 2px; height: var(--nav-h); padding: 4px 0;
    border-radius: 8px; font-weight: 400; }
  #tabs button .icon { width: 22px; height: 22px; }
  #tabs button.on { background: transparent; color: var(--text); }
  #tabs button.on .icon { background: var(--accent-soft); border-radius: 999px; padding: 2px 14px; width: 52px; }
  .tab-label { font-size: 11px; }
  main { padding: 8px 12px calc(var(--nav-h) + 24px + var(--saib)); }
  .row { grid-template-columns: 1fr; gap: 2px; }
  .row dt { font-size: 12px; }
  .people { grid-template-columns: 1fr; }
  .plist { position: static; flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 4px; }
  .plist button { white-space: nowrap; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; }
}
/* 폰: 디스코드가 위에 채널 이름·나가기 버튼을 얹는다(10-22 실관측). 안전 영역 값이 그보다 작으면 72px 확보 */
.is-mobile header { padding-top: max(calc(8px + var(--sait)), 72px); }