/* iJANUS 데모 — 콘솔과 동일 아이덴티티(문턱/황동/아카이벌) */
:root{
  --ink:#12161C; --slate:#1A222D; --hair-d:#28313D;
  --paper:#FAFAF7; --card:#FFFFFF; --line:#E7E4DC;
  --text:#1A2029; --muted:#6B7681; --dim:#9AA3AD;
  --brass:#B0803C; --brass-d:#8A6329; --brass-wash:#F3EADA;
  --seal:#2F7D51; --seal-wash:#E7F1EA; --deny:#B23B33; --deny-wash:#F7EBEA;
  --hold:#9A6A18; --hold-wash:#FAF0DC;
  --shadow:0 1px 2px rgba(20,26,34,.05), 0 8px 26px -12px rgba(20,26,34,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Apple SD Gothic Neo','Pretendard','Noto Sans KR',sans-serif;background:var(--paper);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:0}
input,select{font-family:inherit;font-size:13px}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.topbar{display:flex;align-items:center;gap:12px;padding:15px 26px;background:var(--ink);color:#AEB7C1;font-size:12px}
.topbar .mark{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:#fff;letter-spacing:-.02em}
.topbar .mark svg{width:20px;height:20px}
.topbar a{color:#8A95A1;border:1px solid var(--hair-d);padding:5px 11px;border-radius:7px;text-decoration:none;transition:.12s}
.topbar a:hover{color:#fff;border-color:var(--dim)}
.spacer{margin-left:auto}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3B4754;margin-right:6px;vertical-align:1px}
.dot.on{background:#43C07E;box-shadow:0 0 7px rgba(67,192,126,.7)}

.eyebrow{font-size:10px;font-weight:750;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.card{background:var(--card);color:var(--text);border-radius:12px;padding:17px 18px;border:1px solid var(--line);box-shadow:var(--shadow)}
.card h2{font-size:14px;font-weight:800;letter-spacing:-.01em}
.card h3{font-size:13.5px;font-weight:800}
.cap{font-size:11px;color:var(--muted)}
label{font-size:10.5px;color:var(--muted);display:block;margin:11px 0 4px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
input[type=text],input[type=email],input[type=password],select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);transition:border-color .12s}
input:focus,select:focus{border-color:var(--brass);outline:none}

.btn{width:100%;margin-top:9px;padding:11px;border-radius:9px;background:var(--ink);color:#fff;font-size:13px;font-weight:650;letter-spacing:-.01em;transition:transform .08s,background .12s}
.btn:hover{background:#000}.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line)}
.btn.brass{background:var(--brass)}.btn.brass:hover{background:var(--brass-d)}
.btn.ok{background:var(--seal)}
.btn.sm{width:auto;padding:6px 12px;font-size:11.5px;margin-top:0;border-radius:7px}
.btn:disabled{opacity:.4;cursor:default}

.chip{display:inline-block;font-size:10.5px;padding:4px 11px;border-radius:20px;border:1px solid var(--line);color:var(--muted);cursor:pointer;background:#fff;margin:3px 4px 0 0;transition:.12s;font-weight:600}
.chip:hover{border-color:var(--brass)}
.chip.on{background:var(--seal-wash);border-color:#CBE3D5;color:var(--seal)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;padding:3px 9px;border-radius:20px;font-weight:700}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.pending{background:var(--hold-wash);color:var(--hold)}
.pill.approved{background:var(--seal-wash);color:var(--seal)}
.pill.rejected{background:var(--deny-wash);color:var(--deny)}

.out,.msg{margin-top:10px;padding:9px 11px;border-radius:8px;background:#F4F3EF;font-size:11.5px;min-height:32px;word-break:break-all;color:var(--text);border:1px solid var(--line)}
.out.ok,.msg.ok{background:var(--seal-wash);color:#1E5A38;border-color:#CBE3D5}
.out.bad,.msg.bad{background:var(--deny-wash);color:#8A2B25;border-color:#EAD0CD}
.ok{color:var(--seal)}.bad{color:var(--deny)}
code{font-family:'SF Mono',ui-monospace,monospace;font-size:.86em;background:#F1EFE9;padding:2px 6px;border-radius:5px}

/* 카메라 */
.cam{position:relative;border-radius:10px;background:#0E141B;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#7FDCA0;border:1px solid var(--hair-d)}
.cam video{width:100%;display:block;transform:scaleX(-1)}
.cam .ava{font-size:52px;padding:18px 0}
.cam .badge{position:absolute;right:8px;bottom:6px;font-size:9px;letter-spacing:.1em;color:#7FDCA0;opacity:.85;font-family:ui-monospace,monospace}
.cam.scan::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:rgba(176,128,60,.75)}
@media (prefers-reduced-motion: no-preference){ .cam.scan::after{animation:scan 1s linear} }
@keyframes scan{from{top:0}to{top:100%}}
.avasel{display:flex;gap:6px;margin-top:8px}
.avasel button{flex:1;font-size:22px;padding:7px 0;border-radius:8px;border:1px solid var(--line);background:#fff;transition:.12s}
.avasel button.on{border-color:var(--brass);background:var(--brass-wash)}

.minilog{margin-top:12px;background:#0E141B;border:1px solid var(--hair-d);color:#8FA6BC;font:10px/1.7 'SF Mono',ui-monospace,monospace;border-radius:9px;padding:9px 11px;height:88px;overflow:auto;white-space:pre-wrap}
.foot{padding:13px 26px;font-size:10px;color:var(--dim)}
table{width:100%;border-collapse:collapse;font-size:12px}
th{font-size:10px;color:var(--dim);text-align:left;padding:0 6px 7px;border-bottom:1px solid var(--line);letter-spacing:.05em;text-transform:uppercase;font-weight:700}
td{padding:8px 6px;border-bottom:1px solid #F0EEE8;font-variant-numeric:tabular-nums}