/* 아슈 채팅봇 유저관리 — AI 오피스 연핑크·크림 톤과 같은 색 */
:root {
  --bg: #fbf4ef;
  --panel: #fffdfb;
  --line: #f0e2da;
  --line-strong: #e6d2c6;
  --pink: #f5c4cc;
  --pink-soft: #fcebee;
  --pink-ink: #c9707f;
  --wood: #d9ab78;
  --ink: #4c3d38;
  --ink-soft: #8d7a72;
  --ink-faint: #b5a59d;
  --ok: #5fa46a;
  --ok-soft: #e5f3e7;
  --warn: #dd9f3c;
  --warn-soft: #fbf0dc;
  --bad: #d2766a;
  --bad-soft: #fae6e2;
  --mint: #5fc9a4;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(120, 80, 60, 0.08);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.86em; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 18px 16px 40px; }

/* 헤더 */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.top h1 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.top h1 .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mint); flex: none; }
.top .sp { flex: 1; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); background: var(--panel);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; text-decoration: none; color: var(--ink);
  white-space: nowrap; font-size: 13px;
}
.btn:hover { background: var(--pink-soft); border-color: var(--pink); }
.btn.warm { background: var(--pink); border-color: var(--pink); color: #5a3138; font-weight: 700; }
.btn.small { padding: 3px 10px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: default; }

.status { font-size: 12px; color: var(--ink-soft); margin: -4px 0 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.status b { color: var(--ink); font-weight: 600; }
.status .bad { color: var(--bad); }

/* 카드 */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; min-width: 0;
}
.card .k { font-size: 12px; color: var(--ink-soft); }
.card .v { font-size: 28px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.card .v.none { font-size: 18px; color: var(--ink-faint); font-weight: 700; }
.card .n { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.card.accent { border-top: 4px solid var(--pink); }

.notice {
  background: var(--warn-soft); border: 1px solid #f0d9ae; border-radius: 12px;
  padding: 10px 14px; font-size: 12.5px; color: #7a5a24; margin-bottom: 14px;
}
.notice b { color: #5d4214; }

/* 탭 */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tab {
  border: 1px solid var(--line-strong); background: var(--panel); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; font-size: 13px;
}
.tab.on { background: var(--pink); border-color: var(--pink); color: #5a3138; font-weight: 700; }
.tab small { color: var(--ink-soft); margin-left: 4px; }
.tab.on small { color: #6d3c44; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
.panel h2 { font-size: 15px; margin: 0 0 4px; }
.panel .desc { font-size: 12px; color: var(--ink-soft); margin: 0 0 10px; }

/* 필터 */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 10px; }
.filters label { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--ink-soft); min-width: 0; }
.filters input, .filters select {
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 6px 9px; background: #fff; min-width: 0; font-size: 13px;
}
.filters .q { flex: 1 1 220px; }
.filters .q input { width: 100%; }

.mini-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mini-stats span { background: var(--pink-soft); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.mini-stats b { font-variant-numeric: tabular-nums; }

/* 표 */
.tbl-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th, td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 13px; }
th { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; background: #fff8f4; position: sticky; top: 0; }
td { overflow-wrap: anywhere; word-break: break-word; }
tr:hover td { background: #fffaf7; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.clamp.open { -webkit-line-clamp: unset; display: block; }
.dim { color: var(--ink-soft); font-size: 12px; }
.none { color: var(--ink-faint); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.chip { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; background: #f3ece8; white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: #3d7a47; }
.chip.warn { background: var(--warn-soft); color: #8c6215; }
.chip.bad { background: var(--bad-soft); color: #9b4639; }
.chip.pink { background: var(--pink-soft); color: var(--pink-ink); }
td .chip { white-space: normal; }
.empty { padding: 28px 10px; text-align: center; color: var(--ink-soft); }

.pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; }

.foot { margin-top: 18px; font-size: 11.5px; color: var(--ink-faint); }

/* 열 너비 (PC) */
col.c-time { width: 128px; } col.c-user { width: 20%; } col.c-chat { width: 14%; } col.c-type { width: 140px; }
col.c-reason { width: auto; } col.c-rel { width: 130px; } col.c-src { width: 120px; }
col.c-word { width: auto; } col.c-n { width: 70px; } col.c-on { width: 80px; }

/* 로그인 */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.login {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; width: min(360px, 100%); display: flex; flex-direction: column; gap: 10px;
}
.login h1 { margin: 0; font-size: 17px; }
.login p { margin: 0; font-size: 12px; color: var(--ink-soft); }
.login input { border: 1px solid var(--line-strong); border-radius: 9px; padding: 9px 10px; }
.login .msg { color: var(--bad); font-weight: 700; min-height: 1.2em; font-size: 12.5px; }

/* 태블릿 */
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 모바일: 표를 카드 목록으로 */
@media (max-width: 640px) {
  .wrap { padding: 12px 12px 30px; }
  .top h1 { font-size: 16px; flex-basis: 100%; }
  .top .sp { display: none; }
  .card .v { font-size: 23px; }
  .filters label { flex: 1 1 calc(50% - 8px); }
  .filters .q { flex-basis: 100%; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  colgroup, thead { display: none; }
  tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; padding: 6px 10px; background: #fff; }
  td { border: 0; padding: 3px 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
  td::before { content: attr(data-label); font-size: 11px; color: var(--ink-soft); padding-top: 1px; }
  tr:hover td { background: transparent; }
  .pager { justify-content: center; }
}