/* ============================================================
   pages/logs/page.css — 로그(관리자)

   ⭐ **이 파일은 이 화면 안쪽만 건드린다.** 다른 레일에는 영향이 없다.
   공용(토큰 · 표 · 알약 · 버튼 · 글꼴 · 색)은 styles/ 가 갖는다. 여기서는 그것을 물려받고
   이 화면에만 필요한 것만 덧쓴다. 그래서 이 화면을 고칠 때 다른 화면을 볼 일이 없다.

   @scope .log-page, .log-, #log
   ⚠️ 위 @scope 는 약속이 아니라 검사 대상이다 — 여기 적힌 것에 걸리지 않는 셀렉터를 쓰면
      tests/test_pages.js 가 실패한다. 공용 규칙을 여기서 덮어쓰지 못하게 막는 장치다.
   ============================================================ */

/* ---------- ② 로그 화면 ---------- */
.log-page{ padding:0; }
.log-page .log-card{ margin:0; padding:14px 16px; }
.log-page .log-card > h3{ padding:0 0 8px; margin:0; }
.log-desc{ font-size:var(--fs-2); color:var(--muted); margin:0 0 14px; line-height:1.7; }

.log-table{ width:100%; border-collapse:separate; border-spacing:0; }
.log-table th{
  text-align:left; white-space:nowrap; font-size:var(--fs-2); font-weight:700; color:var(--muted);
  padding:8px 12px 7px 14px;
  border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line-soft);
}
.log-table td{
  font-size:var(--fs-3); color:var(--text); vertical-align:top;
  padding:9px 12px 7px 14px;
  border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line-soft);
}
.log-table tbody tr:last-child td{ border-bottom-width:0; }
.log-table td.c-d, .log-table td.c-p, .log-table td.c-ip{ white-space:nowrap; color:var(--muted); }
.log-table td.c-note{ color:var(--text); }

/* 패치 로그 — 차수 한 덩어리 안에 레일별로 묶는다 */
.log-round{
  border-width:1px; border-style:solid; border-color:var(--line-soft);
  border-radius:var(--radius-md); padding:12px 14px; margin:0 0 var(--sp-4);
}
.log-round-h{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; margin:0 0 10px; }
.log-round-n{
  background:var(--primary); color:#fff; border-radius:var(--sk-r-sm);
  padding:3px 10px; font-size:var(--fs-2); font-weight:800;
}
.log-round-t{ font-size:var(--fs-4); font-weight:700; color:var(--text); flex:1; min-width:0; }
.log-round-d{ font-size:var(--fs-1); color:var(--muted); }
.log-rail{ display:flex; gap:var(--sp-4); padding:6px 0; }
.log-rail-n{
  width:78px; flex:0 0 78px; font-size:var(--fs-1); font-weight:800; color:var(--muted);
  padding-top:3px;
}
.log-rail-l{ margin:0; padding:0 0 0 16px; flex:1; min-width:0; }
.log-rail-l li{ font-size:var(--fs-3); color:var(--text); line-height:1.75; margin:0 0 3px; }

/* ---------- 변경 로그 필터 줄 ---------- */
.log-filter{ display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-3); flex-wrap:wrap; }
.log-filter-l{ font-size:var(--fs-2); font-weight:700; color:var(--muted); }
.log-filter select{
  height:28px; padding:0 8px; font-family:inherit; font-size:var(--fs-3); color:var(--text);
  background:#fff; border-width:1px; border-style:solid; border-color:var(--line);
  border-radius:var(--radius-sm);
}
.log-filter-n{ margin-left:auto; font-size:var(--fs-2); color:var(--muted); }

/* 로그 화면이 채널의 .ch-empty 를 빌려 쓰고 있었다. 레일마다 폴더를 가르면서 자기 것으로 바꿨다.
   빌려 쓰면 채널을 고칠 때 로그가 같이 바뀐다. */
.log-why{ color:var(--muted); }

/* ---------- 접속 통계 막대 ----------
   ⚠️ 차트 라이브러리를 쓰지 않는다. 막대 하나를 그리려고 외부 파일을 부르지 않는다.
   ⚠️ 색은 토큰에서만 온다(js 에 색을 적지 않는다 — RULES 3-6). */
.log-vis{ display:flex; flex-direction:column; gap:4px; }
.log-vis-r{ display:flex; align-items:center; gap:10px; }
.log-vis-d{ flex:0 0 92px; font-size:var(--fs-2); color:var(--muted); white-space:nowrap; }
.log-vis-b{ flex:1 1 auto; min-width:0; height:14px;
  background:var(--sk-bg2); border-radius:var(--radius-full); overflow:hidden; }
.log-vis-b i{ display:block; height:100%; background:var(--primary); border-radius:var(--radius-full); }
.log-vis-n{ flex:0 0 40px; text-align:right;
  font-size:var(--fs-2); font-weight:800; color:var(--text); }
.log-vis-note{ margin-top:10px; font-size:var(--fs-1); color:var(--muted); line-height:1.7; }