/* ============================================================
   #02 AI 얼굴 인식·분석 — 테마 오버라이드 + 얼굴 전용 컴포넌트
   services/01-style.css(공통 셸·컴포넌트) 위에 로드.
   식별·본인확인 분야 색감 차용: 인디고 / 바이올렛
   ============================================================ */
:root{
  --brand:#5A47E8; --brand-2:#4636C6; --brand-3:#2C2090;
  --tint:#EEEBFE; --tint-2:#DFD9FC;
  --ok:#16A34A; --ok-t:#E7F6ED; --warn:#E8920C; --warn-t:#FCF1DD;
  --crit:#E11D48; --crit-t:#FDE7EC; --info:#5A47E8;
  --verify:#16A34A; /* 본인확인 성공 */
  --cam-bg:#161427;
}
/* thumbnail/bundler brand swatch handled inline in HTML */

/* ---------- INITIALS AVATAR (인물 = 사진 없이 깔끔하게) ---------- */
.iav{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex-shrink:0;letter-spacing:-.01em;font-family:var(--sans);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.iav.sq{border-radius:13px}
.iav.s20{width:20px;height:20px;font-size:8.5px}
.iav.s28{width:28px;height:28px;font-size:11px}
.iav.s36{width:36px;height:36px;font-size:13px}
.iav.s44{width:44px;height:44px;font-size:15px}
.iav.s84{width:84px;height:84px;font-size:28px;border-radius:18px}
/* color variants */
.c-ind{background:linear-gradient(135deg,#6D5CF0,#4636C6)}
.c-vio{background:linear-gradient(135deg,#9B5CF0,#6E2FC4)}
.c-blu{background:linear-gradient(135deg,#4D8DF5,#2A5FD0)}
.c-tea{background:linear-gradient(135deg,#21B6C4,#0E7E8C)}
.c-ros{background:linear-gradient(135deg,#F06D8E,#C43A63)}
.c-amb{background:linear-gradient(135deg,#F0A93D,#C47A0E)}
.c-gry{background:linear-gradient(135deg,#9AA6BC,#697489)}

/* ---------- FACE DETECTION BOX (over camera) ---------- */
.face{position:absolute;border:2px solid var(--brand);border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 14px rgba(90,71,232,.4);z-index:3}
.face::before,.face::after{content:"";position:absolute;width:9px;height:9px;border:2px solid #fff;opacity:.9}
.face::before{left:-2px;top:-2px;border-right:0;border-bottom:0}
.face::after{right:-2px;bottom:-2px;border-left:0;border-top:0}
.face .t{position:absolute;left:-2px;bottom:-19px;font-family:var(--mono);font-size:9px;font-weight:700;color:#fff;background:var(--brand);padding:2px 6px;border-radius:0 4px 4px 4px;white-space:nowrap}
.face.ok{border-color:var(--verify);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 14px rgba(22,163,74,.4)}.face.ok .t{background:var(--verify)}
.face.unknown{border-color:var(--warn);border-style:dashed;animation:facepulse 1.4s infinite}.face.unknown .t{background:var(--warn);color:#3a2800}
@keyframes facepulse{0%,100%{box-shadow:0 0 0 0 rgba(232,146,12,.45)}50%{box-shadow:0 0 0 5px rgba(232,146,12,0)}}
.land{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 4px #fff;z-index:4}

/* ---------- LIVE MATCH FEED ---------- */
.match{display:flex;gap:11px;padding:10px 11px;border-radius:11px;align-items:center;transition:.12s}
.match:hover{background:var(--surface-2)}
.match .who{flex:1;min-width:0}
.match .nm{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25;display:flex;align-items:center;gap:6px}
.match .su{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:2px}
.match .scorewrap{text-align:right;flex-shrink:0}
.match .score{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--brand)}
.match .res{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap;display:inline-block;margin-top:3px}
.res.allow{background:var(--ok-t);color:var(--ok)}
.res.deny{background:var(--crit-t);color:var(--crit)}
.res.unk{background:var(--warn-t);color:var(--warn)}
.vchk{width:14px;height:14px;border-radius:50%;background:var(--verify);display:inline-grid;place-items:center;flex-shrink:0}
.vchk svg{width:9px;height:9px;stroke:#fff;stroke-width:3}

/* ---------- PROFILE (인물 상세) ---------- */
.prof-wrap{display:grid;grid-template-columns:300px 1fr;gap:16px}
.prof-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center}
.prof-face{position:relative;margin-bottom:14px}
.prof-name{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.prof-role{font-size:13px;color:var(--muted);margin-top:3px}
.verify-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--verify);background:var(--ok-t);padding:5px 11px;border-radius:20px;margin-top:12px}
.verify-chip svg{width:13px;height:13px;stroke:var(--verify);stroke-width:2.6}
.prof-kv{width:100%;margin-top:16px}
.prof-kv .r{display:flex;justify-content:space-between;font-size:12.5px;padding:8px 0;border-bottom:1px solid var(--border-2)}
.prof-kv .r:last-child{border:0}.prof-kv .l{color:var(--muted)}.prof-kv .v{color:var(--ink);font-weight:500;font-family:var(--mono)}
.prof-main{display:flex;flex-direction:column;gap:14px}
/* attribute analysis tiles */
.attr-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.atile{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px}
.atile .l{font-size:11px;color:var(--muted)}
.atile .v{font-size:19px;font-weight:800;color:var(--ink);margin-top:6px;letter-spacing:-.01em}
.atile .bar{height:5px;border-radius:4px;background:var(--surface-2);margin-top:9px;overflow:hidden}
.atile .bar i{display:block;height:100%;background:var(--brand);border-radius:4px}
/* access history timeline */
.hist{display:flex;flex-direction:column}
.hrow{display:grid;grid-template-columns:62px 18px 1fr;gap:12px;padding:9px 0}
.hrow .tm{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right;padding-top:1px}
.hrow .ax{position:relative;display:flex;justify-content:center}
.hrow .ax::before{content:"";position:absolute;top:0;bottom:-18px;width:2px;background:var(--border)}
.hrow:last-child .ax::before{display:none}
.hrow .nd{width:11px;height:11px;border-radius:50%;background:#fff;border:2.5px solid var(--brand);z-index:1;margin-top:1px}
.hrow.deny .nd{border-color:var(--crit)}.hrow.gray .nd{border-color:var(--faint)}
.hrow .ev{font-size:13px;color:var(--ink);font-weight:500}
.hrow .ds{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:2px}

/* ---------- FACE SEARCH RESULTS (avatars) ---------- */
.fres .ph{aspect-ratio:1;display:grid;place-items:center;background:linear-gradient(160deg,#201d36,#13111f)}
.fres .ph .fb{position:absolute;inset:18% 22%;border:1.6px solid var(--brand);border-radius:4px;box-shadow:0 0 10px rgba(90,71,232,.4)}
.fres .pct{background:rgba(90,71,232,.9)}

/* ---------- ENROLLMENT GALLERY ---------- */
.enroll-bar{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.eg{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.ecard{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--shadow-xs);transition:.16s}
.ecard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.ecard .nm{font-size:14px;font-weight:700;color:var(--ink);margin-top:11px}
.ecard .dp{font-size:11.5px;color:var(--muted);margin-top:2px}
.ecard .st{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;margin-top:10px}
.ecard .st.act{background:var(--ok-t);color:var(--ok)}
.ecard .st.pend{background:var(--warn-t);color:var(--warn)}
.ecard .face-ok{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;background:var(--verify);display:grid;place-items:center}
.ecard .face-ok svg{width:11px;height:11px;stroke:#fff;stroke-width:3}
.ecard{position:relative}
.eadd{border:1.6px dashed var(--tint-2);background:var(--surface-2);align-items:center;justify-content:center;color:var(--brand);cursor:pointer;min-height:170px}
.eadd .plus{width:46px;height:46px;border-radius:50%;background:var(--tint);display:grid;place-items:center;font-size:24px;font-weight:300;color:var(--brand);margin-bottom:10px}
.eadd .tt{font-size:13px;font-weight:700;color:var(--brand)}
.eadd .ss{font-size:11px;color:var(--muted);margin-top:3px}

/* ---------- ATTENDANCE MINI TABLE ---------- */
.io-in{color:var(--ok);font-weight:600;font-family:var(--mono)}
.io-out{color:var(--muted);font-family:var(--mono)}
.io-late{color:var(--warn);font-weight:600;font-family:var(--mono)}

/* face terminal mini icon (devices) */
.term-mini{width:34px;height:34px;border-radius:8px;background:var(--cam-bg);display:grid;place-items:center;flex-shrink:0}
.term-mini svg{width:18px;height:18px;stroke:#8d86c9}