/* 로그기록 화면 — /admin 과 /center 가 함께 쓴다.
 *
 * 색을 직접 박지 않는 이유: 두 화면의 팔레트가 다르다. 관리자는 파란 --mw-* 를, 센터는
 * 따뜻한 --warm-* 을 쓴다. 그래서 색마다 따뜻한 토큰을 먼저 적고 없을 때 쓸 값으로 --mw- 토큰을
 * 겹쳐 적는다. 한 벌로 양쪽 색을 따르게 하는 방법이고, list-columns.css·account-ui.css 가
 * 이미 쓰는 방식 그대로다. 어두운 화면도 두 팔레트가 각자 토큰을 바꿔주므로 여기서 따로
 * 다룰 것이 없다.
 *
 * 폭에 대하여: 이 화면이 놓이는 .acct-sec 는 기본이 두 칸 격자라, 감싸는 쪽에서
 * acct-sec-wide 로 펴주지 않으면 여기의 어떤 규칙도 210px 칸 안에서만 놀게 된다. */

.mw-log { display: flex; flex-direction: column; gap: 12px; }

.mw-log-note {
  margin: 0; font-size: 12.5px; line-height: 1.7;
  color: var(--warm-sub, var(--mw-muted));
}

/* ---- 검색줄 ----
   칸마다 최소 폭을 주고 남는 자리를 나눠 갖게 한다. 폭이 모자라면 저절로 아래로 흘러
   폰에서도 한 칸씩 세로로 쌓인다 — 화면 폭을 세는 코드 없이 이것만으로 충분하다. */
.mw-log-search {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  padding: 14px; border-radius: 12px;
  background: var(--warm-bg, var(--mw-surface-sunken));
  border: 1px solid var(--warm-line, var(--mw-line));
}
.mw-log-search label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--warm-sub, var(--mw-muted));
}
.mw-log-search .f-q { flex: 3 1 200px; }
.mw-log-search .f-date { flex: 1 1 140px; }
.mw-log-search .f-kind { flex: 2 1 170px; }

.mw-log-search input,
.mw-log-search select {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px;
  font-family: inherit; font-size: 13px;
  color: var(--warm-ink, var(--mw-ink));
  background: var(--warm-card, var(--mw-surface));
  border: 1px solid var(--warm-line, var(--mw-line-strong));
  border-radius: 9px;
  transition: border-color var(--mw-dur) var(--mw-ease), box-shadow var(--mw-dur) var(--mw-ease);
}
/* 초점 테두리도 그 화면의 강조색을 따라야 한다 — 센터는 주황(--accent), 관리자는
   파랑(--mw-accent)이다. 한쪽으로 박아두면 다른 화면에서 이 칸만 남의 색으로 빛난다. */
.mw-log-search input:focus,
.mw-log-search select:focus {
  outline: none;
  border-color: var(--accent, var(--mw-accent));
  box-shadow: 0 0 0 3px var(--accent-soft, var(--mw-accent-soft));
}
/* 날짜 칸의 달력 아이콘은 어두운 화면에서 검은 덩어리로 남는다 — 글자색을 따르게 뒤집는다. */
:root[data-theme="dark"] .mw-log-search input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); }

/* 단추 두 개는 한 덩어리로 묶어 같이 흐르게 한다. 폰에서는 줄을 통째로 차지하며
   반씩 나눠 가져, 엄지로 누르기 좋은 크기가 된다. */
.mw-log-search .f-go { display: flex; gap: 8px; flex: 0 0 auto; }
.mw-log-search .f-go .btn { height: 38px; }

@media (max-width: 560px) {
  .mw-log-search { padding: 12px; gap: 8px; }
  .mw-log-search .f-go { flex: 1 1 100%; }
  .mw-log-search .f-go .btn { flex: 1 1 0; }
}

/* ---- 몇 건인지 ---- */
.mw-log-summary {
  font-size: 12px; font-weight: 700;
  color: var(--warm-sub, var(--mw-muted));
  font-variant-numeric: tabular-nums;
}
.mw-log-summary:empty { display: none; }

/* ---- 표 ----
   넓은 화면에서는 그대로 표다. 좁아지면 as-cards(list-columns.css)가 한 줄을 한 장의
   카드로 바꾼다 — 그 장치를 여기서 다시 만들지 않고 표에 클래스만 붙여 쓴다.
   시각이 든 칸은 자릿수가 고정이라 tabular-nums 로 세로줄을 맞춘다. */
/* 칸마다 이름을 붙여 두고 그 이름으로만 꾸민다. 자리 번호(nth-child)로 걸면 슈퍼관리자
   화면처럼 「회사」 칸이 하나 끼어드는 순간 꾸밈이 통째로 한 칸씩 밀린다. */
.mw-log-table table { table-layout: auto; }
.mw-log-table td.c-at {
  font-variant-numeric: tabular-nums;
  color: var(--warm-sub, var(--mw-muted));
  white-space: nowrap;
}
/* 「무엇을」이 이 표에서 가장 중요한 칸이다 — 나머지보다 진하게 둔다. */
.mw-log-table td.c-what { font-weight: 700; }
.mw-log-table td.c-co { color: var(--warm-ink, var(--mw-ink)); }
.mw-log-table td.c-target {
  color: var(--warm-sub, var(--mw-muted));
  word-break: break-all;
}
/* ---- 「상세」 칸 ----
   앞줄(현장·동/호수·위치·내용)은 크게, 나머지 값은 아랫줄에 작게. 이 규칙은 /admin 의
   슈퍼관리자 「관리 작업 로그」 표에도 그대로 걸린다 — 예전에는 admin/index.html 안에만
   적혀 있어서, 같은 그리기를 쓰는 센터 화면에는 꾸밈이 하나도 붙지 않았다. */
.log-detail { line-height: 1.5; }
.log-detail .log-head { font-weight: 700; color: var(--warm-ink, var(--mw-ink)); }
.log-detail .log-rest {
  font-size: 12px; margin-top: 2px;
  color: var(--warm-sub, var(--mw-ink-soft, var(--mw-muted)));
}
.log-detail .log-raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  word-break: break-all;
  color: var(--warm-sub, var(--mw-ink-soft, var(--mw-muted)));
}

/* 카드로 바뀌면 「무엇을」만 진한 것이 어색하다 — 카드에서는 전부 같은 굵기로 되돌린다. */
@media (max-width: 640px) {
  .mw-log-table td.c-what { font-weight: 600; }
  .mw-log-table td.c-at { white-space: normal; }
}

.mw-log-empty {
  padding: 28px 14px; text-align: center; font-size: 13px;
  color: var(--warm-sub, var(--mw-muted));
  background: var(--warm-bg, var(--mw-surface-sunken));
  border: 1px dashed var(--warm-line, var(--mw-line));
  border-radius: 12px;
}

/* ---- 200건 더 받기 ---- */
.mw-log-more { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mw-log-more:empty { display: none; }