:root{
  --bg:#0f1115; --panel:#171a21; --line:#252a34; --text:#e8eaed; --muted:#9aa3b2;
  --danger:#e5484d; --warn:#f5a524; --ok:#3dd68c; --accent:#4a7dff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--text);
  font:16px/1.5 -apple-system,"Noto Sans KR",system-ui,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:13px}
.error{color:var(--danger);font-weight:600;margin:12px 0}

/* 상단 바 */
.bar{padding:12px 16px;font-weight:700;text-align:center;position:sticky;top:0;z-index:20}
.bar-danger{background:var(--danger);color:#fff}
.bar-warn{background:var(--warn);color:#1a1200}

.top{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:10
}
.top strong{flex:1;font-size:17px}
.icon-btn{
  background:none;border:0;color:var(--text);font-size:22px;
  padding:4px 10px;cursor:pointer
}
.pad{padding:16px}
.label{margin:22px 0 8px;font-weight:700;font-size:14px;color:var(--muted)}
.row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.site-name{font-size:22px;font-weight:800;margin-bottom:2px}
.link{background:none;border:0;color:var(--accent);font-size:14px;cursor:pointer;padding:0 6px}

/* 목록 */
.list{padding:8px 16px 32px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:10px;display:flex;align-items:center;gap:12px
}
.card .grow{flex:1;min-width:0}
.card .name{font-weight:700;font-size:17px}
.card .sub{color:var(--muted);font-size:13px;margin-top:2px}
.card.blocked{opacity:.45}
.badge{font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap}
.b-wait{background:#242a35;color:var(--muted)}
.b-prog{background:rgba(74,125,255,.18);color:#8fb0ff}
.b-need{background:rgba(229,72,77,.18);color:#ff9a9d}
.b-done{background:rgba(61,214,140,.15);color:var(--ok)}
.b-manual{background:rgba(245,165,36,.18);color:var(--warn)}

/* 버튼 */
button{font-family:inherit;font-size:16px}
.primary{
  width:100%;background:var(--accent);color:#fff;border:0;border-radius:12px;
  padding:16px;font-weight:800;cursor:pointer
}
.primary:disabled{background:#2b3140;color:#5c6473;cursor:not-allowed}
.big-btn{margin-top:28px;font-size:18px;padding:18px}
.secondary{
  width:100%;background:transparent;color:var(--text);border:1px solid var(--line);
  border-radius:12px;padding:14px;cursor:pointer;margin-top:8px
}
.start-btn{
  background:var(--accent);color:#fff;border:0;border-radius:10px;
  padding:12px 18px;font-weight:700;cursor:pointer;white-space:nowrap
}
.danger-text{color:var(--danger)}

/* D2 대면/비대면 선택 */
.choice{display:grid;gap:12px}
.choice-btn{
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  background:var(--panel);border:2px solid var(--line);border-radius:14px;
  padding:22px;color:var(--text);cursor:pointer;text-align:left
}
.choice-btn.danger{border-color:rgba(229,72,77,.5)}
.choice-btn .big{font-size:24px;font-weight:800}
.choice-btn .sub{font-size:13px;color:var(--muted)}

/* 사진 */
.photo-slot{
  display:flex;align-items:center;justify-content:center;
  min-height:200px;background:var(--panel);border:2px dashed var(--line);
  border-radius:12px;cursor:pointer;overflow:hidden
}
.photo-slot img{width:100%;display:block}
#photoHint{color:var(--muted);font-weight:700}

.check{display:flex;align-items:center;gap:12px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer}
.check input{width:24px;height:24px;accent-color:var(--ok)}

.memo{background:rgba(245,165,36,.12);border-left:3px solid var(--warn);
  padding:12px 14px;border-radius:8px;margin:14px 0;font-size:14px}

input[type=text],input[type=date],select,textarea{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:14px;color:var(--text);font-family:inherit;font-size:16px
}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.filters button{grid-column:1/-1}

/* 현황판 */
.card.warn{border-color:var(--warn);background:rgba(245,165,36,.08)}
.card.alert{border-color:var(--danger);background:rgba(229,72,77,.1)}
.elapsed{font-size:22px;font-weight:800;min-width:64px;text-align:right}
.call{background:var(--ok);color:#04150c;border:0;border-radius:10px;
  padding:10px 14px;font-weight:800;text-decoration:none}

/* 시트 */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;z-index:50}
.sheet-body{background:var(--panel);width:100%;border-radius:18px 18px 0 0;padding:20px;
  display:grid;gap:8px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.sheet-body button{width:100%;background:transparent;border:1px solid var(--line);
  color:var(--text);border-radius:10px;padding:14px;cursor:pointer}
.sheet-body .primary{border:0;background:var(--accent)}
.sheet-user{padding-bottom:8px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline}

/* 로그인 */
.login-box{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:24px;text-align:center}
.login-box h1{margin:0;font-size:26px}

.toast{position:fixed;left:16px;right:16px;bottom:24px;background:#2a3140;
  border:1px solid var(--line);border-radius:12px;padding:14px;z-index:60;text-align:center}

@media (min-width:760px){
  .screen{max-width:720px;margin:0 auto}
  .filters{grid-template-columns:repeat(4,1fr)}
  .filters button{grid-column:auto}
}