:root { --bg:#F4EFE6; --bg2:#EDE6DA; --card:#FBF8F2; --line:#D8D0C2; --text:#1E1B18; --muted:#857D72; --red:#D23F2B; --red-soft:#F2D9D2; --green:#2E7D4F; --amber:#B9770E; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; background:var(--bg); color:var(--text); font-family: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; font-size:16px; }
body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
header.top { position: sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line); padding: calc(10px + env(safe-area-inset-top)) 16px 10px; display:flex; align-items:center; justify-content:space-between; }
header.top .brand { font-weight:700; font-size:17px; }
header.top .brand em { font-family: Georgia, serif; font-style: italic; color: var(--red); font-weight: normal; font-size: 14px; margin-left: 6px; }
header.top .date { color:var(--muted); font-size:13px; }
main { padding: 14px 14px 20px; max-width: 980px; margin: 0 auto; }
h1 { font-size: 24px; margin: 6px 0 2px; letter-spacing: -0.5px; }
h1 em { font-family: Georgia, serif; font-style: italic; color: var(--red); font-weight: normal; font-size: 17px; margin-left: 8px; }
.sub { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.kpis { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.kpi.red { background:var(--red); border-color:var(--red); color:#fff; }
.kpi .t { font-size:12px; color:var(--muted); letter-spacing:1px; } .kpi.red .t { color:#fff; opacity:.9; }
.kpi .v { font-size:24px; font-weight:700; letter-spacing:-1px; margin-top:2px; }
.kpi .s { font-size:12px; color:var(--muted); } .kpi.red .s { color:#fff; opacity:.9; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; margin-top:12px; }
.card h2 { font-size:15px; margin:0 0 10px; display:flex; align-items:center; gap:8px; }
.card h2 em { font-family: Georgia, serif; font-style: italic; color: var(--red); font-weight: normal; font-size: 13px; }
.row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #EDE6DA; gap:10px; }
.row:last-child { border-bottom: none; }
.row .n { font-weight:600; } .row .m { color:var(--muted); font-size:13px; }
.lv-위험 { color: var(--red); font-weight:700; } .lv-주의 { color: var(--amber); font-weight:700; } .lv-확인 { color: var(--muted); }
.pill { display:inline-block; padding:3px 9px; border-radius:12px; font-size:12px; background:var(--bg2); color:var(--text); }
.pill.in { background:#DCEFE3; color:var(--green); } .pill.out { background:var(--bg2); color:var(--muted); } .pill.absent { background:var(--red-soft); color:var(--red); }
.btn { border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:8px; padding:10px 14px; font-size:15px; cursor:pointer; }
.btn.primary { background:var(--red); color:#fff; border-color:var(--red); font-weight:600; }
.btn.small { padding:7px 10px; font-size:13px; }
.btn:disabled { opacity:.5; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--muted); }
input, select { font: inherit; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; width:100%; }
input:focus { outline: 2px solid var(--red); border-color: var(--red); }
.search { margin-bottom: 10px; }
.tip { background:#FFFBEA; border-radius:8px; padding:10px 12px; font-size:13px; line-height:1.55; }
nav.tabs { position:fixed; left:0; right:0; bottom:0; background:var(--bg2); border-top:1px solid var(--line); display:flex; padding-bottom: env(safe-area-inset-bottom); z-index:10; }
nav.tabs button { flex:1; border:none; background:transparent; padding:10px 4px 8px; font-size:12px; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:3px; }
nav.tabs button .ic { font-size:20px; line-height:1; }
nav.tabs button.on { color:var(--red); font-weight:700; }
.toast { position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:#1E1B18; color:#fff; padding:10px 16px; border-radius:8px; font-size:14px; z-index:20; max-width:90vw; }
.toast.err { background:var(--red); }
.login { max-width: 360px; margin: 14vh auto; text-align:center; }
.login .logo { font-size: 26px; font-weight:700; } .login .logo span { color: var(--red); }
.login input { font-size:24px; text-align:center; letter-spacing:8px; margin:16px 0 10px; }
.login .btn { width:100%; padding:14px; font-size:17px; }
.err { color: var(--red); font-size:13px; min-height: 18px; }
.kiosk { position:fixed; inset:0; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; z-index:30; }
.kiosk img { width:min(72vw, 70vh); border:1px solid var(--line); border-radius:16px; background:#fff; padding:14px; }
.kiosk .big { font-size: clamp(22px, 4vw, 34px); font-weight:700; margin: 10px 0; }
.kiosk .big em { font-family: Georgia, serif; font-style: italic; color: var(--red); font-weight:normal; }
.kiosk .hint { font-size: clamp(16px, 2.6vw, 24px); margin-top: 16px; }
.kiosk .small { color: var(--muted); font-size: 14px; margin-top: 8px; }
.kiosk .exit { position:absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; }
canvas.radar { width:100%; max-width:360px; height:auto; display:block; margin:0 auto; }
.bar { height:8px; background:#E7E0D3; border-radius:4px; overflow:hidden; margin-top:4px; } .bar i { display:block; height:100%; background:var(--red); }
.grid2 { display:grid; grid-template-columns:1fr; gap:12px; } @media (min-width: 760px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.muted { color: var(--muted); } .right { text-align:right; } .center { text-align:center; }
.seg { display:flex; gap:6px; margin: 8px 0 12px; } .seg button { flex:1; }
.seg button.on { background:var(--text); color:#fff; border-color:var(--text); }
.empty { color: var(--muted); text-align:center; padding: 24px 0; }