:root{
  /* 화면 전체가 순백에 가까우면 오래 볼 때 눈이 아프다.
     바탕뿐 아니라 표·카드·입력칸까지 한 단계 낮춰 밝기를 눌렀고,
     글자도 새까맣게 두지 않아 대비를 낮췄다. 색은 전부 여기서만 정한다. */
  --bg:#ccd6df;        /* 화면 바탕 */
  --panel:#e0e8ef;     /* 카드·표·입력칸 */
  --panel2:#d3dce4;    /* 표 머리글·잠긴 칸 */
  --hover:#c9d6e4;
  --sel:#bcd2ea;
  --line:#aab8c5; --line2:#becbd6;
  --ink:#232f3a;       /* 본문 글자 */
  --muted:#4f5e6d;
  --acc:#1d5590; --warn:#8a5006; --danger:#992b2b;
  --grp:#f2e3a0;       /* 인증을 펼친 묶음의 바탕 — 노랑 */
  --field:#ffffff;     /* 검색·선택칸 바탕 — 어둡게만 흰색을 쓸 수 없다 */
  --ok:#1a6039; --ok-line:#9ccdb4; --ok-bg:#d8eae0;
  --bad:#8b2c2a; --bad-line:#dcb0ae; --bad-bg:#ecdcdb;
  --warn-line:#d6bd84; --warn-bg:#ece3d0;
  --gnb-h:60px;
}

/* 눈보호색 — 오래 들여다볼 때 가장 편하다는 연녹색 */
:root[data-theme="green"]{
  --bg:#c2dac9; --panel:#d6e7da; --panel2:#c9dfcf; --hover:#c0dbc8;
  --sel:#addabe; --line:#9cb9a5; --line2:#b7cebd;
  --ink:#22322a; --muted:#4c6155;
  --acc:#1a6045; --warn:#7d4d08; --danger:#8f2e2a; --grp:#e9e5a2; --field:#ffffff;
  --ok:#1c5c37; --ok-line:#9cc7ab; --ok-bg:#d3e7d9;
  --bad:#8b2c2a; --bad-line:#d4b1ac; --bad-bg:#e6d9d4;
  --warn-line:#cebd88; --warn-bg:#e3e0cb;
}

/* 따뜻하게 — 종이 같은 미색. 형광등 아래 장시간 볼 때 편하다 */
:root[data-theme="warm"]{
  --bg:#d9cfbb; --panel:#eae4d6; --panel2:#ded6c5; --hover:#ded2bb;
  --sel:#d2c4a8; --line:#bdb199; --line2:#d0c6b3;
  --ink:#2f2c26; --muted:#645d4e;
  --acc:#6f5009; --warn:#82470a; --danger:#8f2c22; --grp:#f0e0a4; --field:#ffffff;
  --ok:#3a612d; --ok-line:#b8caa5; --ok-bg:#dfe6d3;
  --bad:#863226; --bad-line:#d0b3a7; --bad-bg:#e8dad1;
  --warn-line:#d0bb8e; --warn-bg:#e8ddc6;
}

/* 어둡게 — 어두운 곳에서 볼 때 */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1b2027; --panel:#232a33; --panel2:#2b333d; --hover:#2f3947;
  --sel:#33405a; --line:#3a4552; --line2:#2f3843;
  --ink:#dfe5ec; --muted:#93a1b1;
  --acc:#6ea8ff; --warn:#e0a34a; --danger:#f08a8a; --grp:#403a1e; --field:#171c22;
  --ok:#7fca9b; --ok-line:#38614a; --ok-bg:#22332a;
  --bad:#f0a0a0; --bad-line:#6a3a3a; --bad-bg:#38262a;
  --warn-line:#6b5730; --warn-bg:#37301f;
}

*{box-sizing:border-box}
/* hidden 속성이 항상 이기게 한다.
   #login{display:grid} 같은 규칙이 브라우저 기본값(display:none)을 덮어써서,
   로그인에 성공해도 로그인 화면이 목록 위를 계속 가리고 있었다 (2026-08-27 실사고). */
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:13px/1.55 "Malgun Gothic","맑은 고딕",system-ui,-apple-system,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background:var(--panel)}
input[type=checkbox],input[type=radio]{background:none}
dialog{background:var(--panel);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.38)}
::placeholder{color:var(--muted);opacity:.8}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.45}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;padding:2px 4px}
.err{color:var(--danger)}
.todo{padding:40px;color:var(--muted)}

/* 로그인 */
#login{display:grid;place-items:center;height:100vh}
#login form{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:28px 30px;width:320px;display:grid;gap:12px}
#login h1{font-size:17px;margin:0 0 6px;text-align:center}
#login label{display:grid;gap:5px;font-size:12px;color:var(--muted)}
#login input{padding:8px 10px;border:1px solid var(--line);border-radius:6px}
#login button{padding:9px;border:0;border-radius:6px;background:var(--acc);color:var(--panel);font-weight:600}

/* 뼈대 */
#shell{display:flex;flex-direction:column;height:100vh}
.gnb{display:flex;align-items:center;gap:26px;padding:0 20px;height:var(--gnb-h);
  background:var(--panel);border-bottom:2px solid var(--line);flex:none}
.brand{font-size:19px;font-weight:700;letter-spacing:-.3px;
  padding-right:22px;border-right:1px solid var(--line2)}
.gnb nav{display:flex;gap:6px}
/* background 에 transition 을 걸면 테마를 바꿀 때 배경만 옛 색에 멈춘다.
   어둡게에서 현재 메뉴가 밝은 파랑에 어두운 글씨로 남아 안 보였다 (2026-08-27). */
.gnb nav button{background:none;border:0;padding:9px 20px;border-radius:8px;
  color:var(--muted);font-size:15px;font-weight:600}
.gnb nav button:hover{background:var(--hover);color:var(--ink)}
.gnb nav button.on{background:var(--acc);color:var(--panel)}
.who{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px}
main{flex:1;min-height:0;display:flex;flex-direction:column}
main>section{flex:1;min-height:0;display:flex;flex-direction:column}
main>section[hidden]{display:none}

/* 필터 — 표와 같은 바탕에 얇은 선만 있어 어디까지가 검색칸인지 안 보인다는
   신고(2026-08-27). 바탕을 한 단계 낮추고 아래를 강조색 선으로 막아 띠로 만든다. */
.filters{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  padding:12px 16px;background:var(--panel2);
  border-bottom:2px solid var(--acc)}
/* 검색칸이 남는 자리를 다 차지해 지나치게 길었다 — 폭을 정해 둔다.
   바탕은 흰색(--field). 어둡게 테마만 흰색을 쓸 수 없어 짙은 색이다. */
.filters input[type=search]{flex:0 1 280px;min-width:180px;padding:7px 11px;
  border:1px solid var(--line);border-radius:6px;background:var(--field)}
/* 인증규격 칸은 가장 긴 항목('친환경인증(환경표지) …')에 맞춰 255px 까지 벌어져,
   1280 폭에서 필터 줄이 두 줄로 접혔다. 폭을 막아 한 줄에 들어오게 한다. */
.filters select{padding:7px 9px;border:1px solid var(--line);border-radius:6px;
  background:var(--field);font-weight:600;max-width:165px}
.filters input[type=search]:focus,.filters select:focus{outline:2px solid var(--acc);
  outline-offset:1px}
.filters .link{color:var(--acc);font-weight:700;font-size:12.5px}
.months{display:flex;align-items:center;gap:4px;color:var(--ink);
  font-size:12.5px;font-weight:600}
.mine{display:flex;align-items:center;gap:5px;color:var(--ink);
  font-size:12.5px;font-weight:600}

.bar{display:flex;align-items:center;gap:12px;padding:7px 16px;
  border-bottom:1px solid var(--line2);background:var(--panel)}
#count{font-weight:600}
#count em{font-style:normal;color:var(--muted);font-weight:400;margin-left:6px}
.cols{position:relative}
/* 회색 잔글씨라 눌러야 하는 자리인 줄 몰랐다는 신고(2026-08-27) — 단추처럼 보이게 한다 */
.cols summary{cursor:pointer;color:var(--acc);list-style:none;
  font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:6px;
  border:1px solid var(--acc);background:var(--panel)}
.cols summary:hover{background:var(--acc);color:var(--panel)}
.cols[open] summary{background:var(--acc);color:var(--panel)}
.cols summary::-webkit-details-marker{display:none}
.cols summary::after{content:" ▾"}
/* '표시 항목' 은 바 오른쪽 끝에 있다. left:0 으로 열면 창이 화면 밖으로 나가
   항목 이름이 잘려 보인다(2026-08-27 신고). 오른쪽에 붙여 왼쪽으로 펼친다. */
.cols>div{position:absolute;z-index:20;top:calc(100% + 6px);right:0;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  box-shadow:0 6px 24px rgba(0,0,0,.22);width:660px;max-width:calc(100vw - 40px);
  max-height:70vh;overflow:auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px 16px}
.cols label{display:flex;gap:6px;align-items:center;font-size:12.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:3px 5px;border-radius:5px}
.cols label:hover{background:var(--hover)}

/* 표 */
.tablewrap{flex:1;min-height:0;overflow:auto;background:var(--panel)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
thead th{position:sticky;top:0;z-index:5;background:var(--panel2);text-align:left;
  padding:7px 9px;border-bottom:1px solid var(--line);white-space:nowrap;
  font-weight:600;cursor:pointer;user-select:none}
thead th.nosort{cursor:default}
thead th .dir{color:var(--acc);margin-left:3px}
tbody td{padding:6px 9px;border-bottom:1px solid var(--line2);
  white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
/* 폭을 좁게 잡는 열 (model.py 의 LIST_NARROW) — 넘치면 … 로 줄인다.
   칸에 마우스를 올리면 전체 값이 뜬다. */
tbody td.narrow,thead th.narrow{max-width:150px;width:150px}
/* 인증별로 펼친 묶음 — 한 업체의 줄들을 바탕색으로 묶어 보여준다.
   :hover 와 .sel 이 이겨야 하므로 반드시 그 두 줄보다 위에 둔다. */
tbody tr.grp{background:var(--grp)}
tbody tr:hover{background:var(--hover)}
tbody tr.sel{background:var(--sel)}
tbody tr.grp td.pick{box-shadow:inset 3px 0 0 var(--acc)}
td.pick,th.pick{width:34px;text-align:center;padding:6px 4px}
.st{font-size:11px;padding:1px 6px;border-radius:9px;border:1px solid}
.st.유효{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.st.만료{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
.st.na{color:var(--muted);border-color:var(--line);background:var(--panel2)}
.dday.soon{color:var(--warn);font-weight:600}
/* '외 4' 는 눌러도 펼쳐지지만 색은 넣지 않는다 — 줄마다 나오는 것이라
   색을 주면 표 전체가 알록달록해진다 (2026-08-27 사용자 요청).
   펼치는 자리는 관리번호 앞 ▸ 가 알려 준다. */
.multi{color:var(--muted);font-size:11px;margin-left:4px}
button.multi{border:0;background:none;padding:0 2px;margin-left:4px;
  cursor:pointer;font-family:inherit;font-size:11px;color:var(--muted)}
button.multi:hover{text-decoration:underline}
/* 인증별로 펼쳤을 때, 윗줄과 같은 업체가 이어지는 줄의 업체 칸.
   회색으로만 흐리게 두면 '같은 업체가 이어진다'가 눈에 안 들어와,
   묶음 바탕·왼쪽 표시선과 같은 강조색을 쓴다 (2026-08-27 사용자 요청). */
.rep{color:var(--acc)}
tbody tr.cont td{border-top:0}
/* 관리번호 앞 펼침 단추 — 인증이 2건 이상인 업체에만 나온다.
   회색으로 두면 있는 줄도 모르고 지나쳐, 강조색 테두리·글씨로 눈에 띄게 한다.
   펼친 뒤에는 상단 메뉴의 '켜진 단추'와 같이 강조색으로 꽉 채운다. */
.exp{width:18px;height:18px;margin-right:4px;padding:0;
  border:1px solid var(--acc);border-radius:4px;background:var(--panel2);
  color:var(--acc);font-size:11px;font-weight:700;line-height:1;cursor:pointer;
  vertical-align:middle}
.exp:hover{background:var(--acc);color:var(--panel)}
.exp.on{background:var(--acc);color:var(--panel);transform:rotate(90deg)}
/* 접힌 단추만 바탕을 비워 노란 바탕이 그대로 보이게 한다 (펼친 것은 꽉 찬 채로) */
tbody tr.grp .exp:not(.on){background:none}
.exp:disabled{opacity:.4;cursor:default}
.exp-pad{display:inline-block;width:22px}
.empty{padding:40px;text-align:center;color:var(--muted)}

.foot{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--panel);
  border-top:1px solid var(--line);flex:none;font-size:12px}
.foot .grow{flex:1}
.foot button{padding:5px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
#sel-info{color:var(--muted)}
#sel-info.has{color:var(--acc);font-weight:600}

/* 비밀번호 변경 */
#pw-dlg{border:1px solid var(--line);border-radius:10px;padding:0;width:330px}
#pw-dlg::backdrop{background:rgba(17,24,39,.35)}
#pw-form{padding:22px 24px;display:grid;gap:11px}
#pw-form h2{margin:0;font-size:15px}
#pw-form .hint{margin:0;font-size:12px;color:var(--warn);background:var(--warn-bg);
  border:1px solid var(--warn-line);border-radius:6px;padding:7px 9px}
#pw-form label{display:grid;gap:4px;font-size:12px;color:var(--muted)}
#pw-form input{padding:7px 9px;border:1px solid var(--line);border-radius:6px}
#pw-form menu{display:flex;gap:8px;justify-content:flex-end;margin:6px 0 0;padding:0}
#pw-form button{padding:6px 14px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
#pw-form button.primary{background:var(--acc);border-color:var(--acc);color:var(--panel);font-weight:600}
#pw-form .err{margin:0;font-size:12px}

#diag-btn{justify-self:center;font-size:11px}
#diag{margin:0;padding:9px 10px;background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;font:11px/1.6 Consolas,monospace;white-space:pre-wrap;
  max-height:210px;overflow:auto}
#diag b{color:var(--danger)}

/* 비밀번호 보기 */
.showpw{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);
  cursor:pointer;margin:-4px 0 0}
.warn{margin:0;font-size:11px;color:var(--warn);background:var(--warn-bg);
  border:1px solid var(--warn-line);border-radius:6px;padding:7px 9px;line-height:1.5}

/* 지워지지 않는 오류 띠 — 로그인 후 화면이 안 뜰 때 원인을 보여준다 */
#fatal{position:fixed;inset:0 0 auto 0;z-index:9999;background:var(--bad-bg);
  border-bottom:2px solid var(--danger);color:var(--bad);padding:12px 16px;
  font:12px/1.6 Consolas,monospace;white-space:pre-wrap;max-height:45vh;overflow:auto}
#fatal b{display:block;font:600 13px/1.6 "Malgun Gothic",sans-serif;margin-bottom:5px}
#fatal .x{position:absolute;top:8px;right:12px;cursor:pointer;color:var(--bad);
  background:none;border:0;font-size:16px}

/* ── 상세 패널 ───────────────────────────────────── */
#detail{position:fixed;top:var(--gnb-h);right:0;bottom:0;width:min(520px,100vw);
  background:var(--panel);border-left:1px solid var(--line);z-index:40;
  display:flex;flex-direction:column;box-shadow:-6px 0 24px rgba(0,0,0,.08)}
.dtop{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--line);flex:none}
.dtop b{font-size:15px;display:block}
#d-status{font-size:11px;color:var(--muted)}
#d-body{flex:1;min-height:0;overflow:auto;padding:4px 16px 16px}
.dfoot{display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-top:1px solid var(--line);flex:none;font-size:11px;color:var(--muted)}
.dfoot .grow{flex:1}
#d-count{color:var(--acc);font-weight:600}
#d-save{padding:6px 16px;border:0;border-radius:6px;background:var(--acc);
  color:var(--panel);font-weight:600}
#d-save:disabled{background:var(--line)}

/* 접이식 구역 */
.sec{border-bottom:1px solid var(--line2)}
.sec>summary{display:flex;align-items:center;gap:8px;padding:9px 2px;
  cursor:pointer;list-style:none;font-weight:600;font-size:12.5px}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary::before{content:"▸";color:var(--muted);font-weight:400}
.sec[open]>summary::before{content:"▾"}
.sec .tag{margin-left:auto;font-size:10.5px;font-weight:400;padding:1px 7px;
  border-radius:9px;border:1px solid}
.tag.rw{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.tag.ro{color:var(--muted);border-color:var(--line);background:var(--panel2)}
.sec .sub{font-weight:400;color:var(--muted);font-size:11.5px}

.flds{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:4px 0 12px}
.fld{display:grid;gap:3px;min-width:0}
.fld.wide{grid-column:1 / -1}
.fld label{font-size:11px;color:var(--muted)}
.fld input,.fld textarea{width:100%;padding:5px 7px;border:1px solid var(--line);
  border-radius:5px;font:inherit;font-size:12px}
.fld textarea{resize:vertical;min-height:56px}
.fld input:disabled,.fld textarea:disabled{background:var(--panel2);color:var(--muted)}
.fld.changed input,.fld.changed textarea{border-color:var(--acc);background:var(--sel)}
.fld .was{font-size:10.5px;color:var(--muted)}

/* 충돌 안내 */
.conflict{border:1px solid var(--bad-line);background:var(--bad-bg);border-radius:8px;
  padding:10px 12px;margin:10px 0;font-size:12px}
.conflict h4{margin:0 0 6px;font-size:12.5px;color:var(--bad)}
.conflict table{width:100%;font-size:11.5px;margin-bottom:8px}
.conflict td{padding:3px 6px;border-bottom:1px solid var(--bad-line);vertical-align:top;
  white-space:normal}
.conflict td:first-child{color:var(--muted);width:32%}
.conflict menu{display:flex;gap:8px;margin:0;padding:0}
.conflict button{padding:5px 12px;border:1px solid var(--line);border-radius:6px;
  background:var(--panel);font-size:12px}
.conflict button.primary{background:var(--acc);border-color:var(--acc);color:var(--panel)}

/* ── 삭제 · 휴지통 · 신규등록 ─────────────────────── */
#del-dlg,#trash-dlg{border:1px solid var(--line);border-radius:10px;padding:0}
#del-dlg::backdrop,#trash-dlg::backdrop{background:rgba(17,24,39,.4)}
#del-form,#trash-inner{padding:22px 24px;display:grid;gap:11px;width:min(520px,92vw)}
#del-form h2,#trash-inner h2{margin:0;font-size:15px}
#del-form label{display:grid;gap:4px;font-size:12px;color:var(--muted)}
#del-form input{padding:7px 9px;border:1px solid var(--line);border-radius:6px}
#del-list,#trash-list{max-height:240px;overflow:auto;border:1px solid var(--line2);
  border-radius:6px;padding:8px 10px;font-size:12px;line-height:1.9}
#del-list div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#del-form menu,#trash-inner menu{display:flex;gap:8px;justify-content:flex-end;
  margin:4px 0 0;padding:0}
#del-form button,#trash-inner button{padding:6px 14px;border:1px solid var(--line);
  border-radius:6px;background:var(--panel)}
#del-form button.danger{background:var(--danger);border-color:var(--danger);
  color:var(--panel);font-weight:600}
#del-form button.danger:disabled{background:var(--line);border-color:var(--line)}

.trow{display:flex;align-items:center;gap:10px;padding:5px 0;
  border-bottom:1px solid var(--line2)}
.trow .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow small{color:var(--muted)}
.trow button{padding:3px 10px;font-size:11.5px}

.newwrap{padding:16px 20px;overflow:auto;flex:1;min-height:0}
.newwrap h2{margin:0 0 4px;font-size:15px}
.hint2{margin:0 0 12px;color:var(--muted);font-size:12px}
.newfoot{display:flex;align-items:center;gap:10px;padding:12px 0 0;
  border-top:1px solid var(--line);margin-top:12px;font-size:12px}
.newfoot .grow{flex:1}
#new-save{padding:7px 18px;border:0;border-radius:6px;background:var(--acc);
  color:var(--panel);font-weight:600}
#new-save:disabled{background:var(--line)}
#new-msg{color:var(--danger)}
#new-msg.ok{color:var(--ok)}
.dup{color:var(--danger);font-size:11px}
.dup.ok{color:var(--ok)}

/* ── 대시보드 ────────────────────────────────────── */
.dashwrap{padding:16px 20px;overflow:auto;flex:1;min-height:0}
.dashwrap h3{margin:20px 0 8px;font-size:13.5px}
.dashwrap h3 small{font-weight:400;color:var(--muted);font-size:11.5px;margin-left:6px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
.kpi b{display:block;font-size:22px;line-height:1.3}
.kpi span{color:var(--muted);font-size:11.5px}
.kpi.ok b{color:var(--ok)}
.kpi.bad b{color:var(--danger)}
.kpi.warn b{color:var(--warn)}

.soonwrap{background:var(--panel);border:1px solid var(--line);border-radius:9px;
  max-height:320px;overflow:auto}
#soon td{padding:6px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
#soon tr{cursor:pointer}
#soon tr:hover{background:var(--hover)}
#soon .dd{font-weight:600;color:var(--warn);width:70px}

.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.bar{display:grid;grid-template-columns:150px 1fr 46px;gap:8px;align-items:center;
  font-size:11.5px;margin-bottom:3px}
.bar i{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--muted)}
.bar u{text-decoration:none;height:14px;background:var(--acc);border-radius:3px;
  display:block;min-width:2px}
.bar b{text-align:right;font-weight:600}

/* ── 계정 관리 ───────────────────────────────────── */
#users-dlg{border:1px solid var(--line);border-radius:10px;padding:0}
#users-dlg::backdrop{background:rgba(17,24,39,.4)}
#users-inner{padding:22px 24px;display:grid;gap:11px;width:min(780px,94vw)}
#users-inner h2{margin:0;font-size:15px}
#users-list{max-height:340px;overflow:auto;border:1px solid var(--line2);
  border-radius:6px}
.urow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;
  border-bottom:1px solid var(--line2);font-size:12px}
.urow .who2{width:150px;min-width:150px}
.urow .who2 b{display:block}
.urow .who2 small{color:var(--muted)}
.urow .secs{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.urow .secs label{display:flex;align-items:center;gap:4px;white-space:nowrap}
.urow input[type=text],.urow input:not([type]){padding:5px 8px;border:1px solid var(--line);
  border-radius:5px;font-size:12px}
.urow button{padding:4px 10px;border:1px solid var(--line);border-radius:6px;
  background:var(--panel);font-size:11.5px}
.urow.off{opacity:.5}
.urow .badge{font-size:10.5px;padding:1px 6px;border-radius:9px;
  border:1px solid var(--line);color:var(--muted)}
.urow .badge.adm{color:var(--acc);border-color:var(--acc);background:var(--sel)}
#new-user summary{cursor:pointer;font-size:12px;color:var(--acc)}
#users-inner menu{display:flex;gap:8px;margin:4px 0 0;padding:0;align-items:center}
#users-inner menu .grow{flex:1}
#users-inner menu button,#trash-inner menu button{padding:6px 14px;
  border:1px solid var(--line);border-radius:6px;background:var(--panel)}
#trash-inner menu{display:flex;align-items:center}
#trash-inner menu .grow{flex:1}

/* 테마 고르기 */
#theme{padding:4px 8px;border:1px solid var(--line);border-radius:6px;
  background:var(--panel2);color:var(--muted);font-size:11.5px}

/* ── 변경 이력 ───────────────────────────────────── */
.histlist{font-size:11.5px;overflow:auto}
.hrow{display:grid;grid-template-columns:104px 62px 1fr 148px;gap:8px;
  padding:5px 6px;border-bottom:1px solid var(--line2);align-items:baseline}
.hrow:hover{background:var(--hover)}
.hwhen{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.hact{font-size:10px;text-align:center;padding:1px 0;border-radius:9px;
  border:1px solid var(--line);color:var(--muted);background:var(--panel2)}
.hact.등록,.hact.인증추가{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.hact.인증삭제,.hact.휴지통,.hact.영구삭제{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
.hwhat{overflow-wrap:anywhere}
.hwhat b{font-weight:600}
.hwho{color:var(--muted);text-align:right;overflow-wrap:anywhere}
.hkey{color:var(--acc);cursor:pointer;text-decoration:underline}
.empty{color:var(--muted);font-style:normal;opacity:.75}
.via{font-size:10px;padding:0 5px;border-radius:8px;border:1px solid var(--line)}
.via.bot{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.via.ago{color:var(--muted);background:var(--panel2)}

#hist-inner{padding:18px 20px;width:min(1020px,94vw)}
#hist-inner h2{margin:0 0 4px;font-size:15px}
.histbar{display:flex;gap:8px;align-items:center;margin:10px 0 6px;padding:0}
.histbar input{flex:1;max-width:340px;padding:6px 9px;
  border:1px solid var(--line);border-radius:6px}
#hist-list{max-height:min(60vh,560px);border:1px solid var(--line);
  border-radius:8px;background:var(--panel)}
#d-hist{max-height:280px}
#d-hist-sec .hrow{grid-template-columns:100px 58px 1fr 110px}