/* 입주민 웹앱(2026-10-10): 폰 브라우저용 한 칸 화면. 라이트·다크는 폰 설정을 따른다. */
:root{--bg:#f4f6fb;--fg:#17202e;--mut:#667085;--pri:#2563eb;--pri-fg:#fff;--bd:#d8dee9;--card:#fff;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--chip:#eef2fb;--sh:0 1px 2px rgba(16,24,40,.06)}
@media(prefers-color-scheme:dark){:root{--bg:#0f1520;--fg:#e6ebf4;--mut:#9aa6b8;--bd:#2a3445;--card:#17202e;--chip:#202b3d;--sh:none}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,'Segoe UI','Malgun Gothic',sans-serif;-webkit-text-size-adjust:100%}
body{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
#app{max-width:520px;margin:0 auto;padding:max(16px,env(safe-area-inset-top,0px)) 16px 24px}
.boot{color:var(--mut);text-align:center;margin-top:30vh}
h1{font-size:1.35rem;margin:6px 0}h2{font-size:1.05rem;margin:0 0 8px}p{margin:6px 0}
.mut{color:var(--mut);font-size:.9rem}.small{font-size:.85rem}
.top{display:flex;align-items:center;gap:8px;margin-bottom:12px}.top .grow{flex:1;min-width:0}
.top h1{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px 16px;margin-top:12px;box-shadow:var(--sh)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.sb{justify-content:space-between}
label{display:block;font-weight:600;margin:14px 0 6px}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--bd);border-radius:10px;font:inherit;background:transparent;color:inherit}
input[type=checkbox],input[type=radio]{width:auto;margin-right:8px;transform:scale(1.2)}
.check{display:flex;align-items:flex-start;gap:4px;margin:12px 0;font-weight:400}
.check input{margin-top:5px;flex:none}
.btn{display:block;width:100%;padding:13px 16px;border:0;border-radius:12px;background:var(--pri);color:var(--pri-fg);font:inherit;font-weight:700;text-align:center;cursor:pointer;text-decoration:none}
.btn.ghost{background:var(--chip);color:var(--fg)}.btn.danger{background:transparent;color:var(--bad);border:1px solid var(--bd)}
.btn.sm{display:inline-block;width:auto;padding:8px 12px;font-size:.9rem;border-radius:10px}
.btn:disabled{opacity:.55}
.link{background:none;border:0;color:var(--pri);font:inherit;cursor:pointer;padding:6px 0}
.tabs{display:flex;gap:8px;margin:14px 0 4px}.tab{flex:1;padding:10px;border:1px solid var(--bd);border-radius:12px;background:var(--card);color:var(--fg);font:inherit;font-weight:600;cursor:pointer}
.tab.on{background:var(--pri);color:var(--pri-fg);border-color:var(--pri)}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:700;background:var(--chip);color:var(--mut)}
.badge.ok{background:rgba(22,163,74,.14);color:var(--ok)}.badge.warn{background:rgba(217,119,6,.15);color:var(--warn)}.badge.bad{background:rgba(220,38,38,.12);color:var(--bad)}
.stat{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.stat .badge{font-weight:600}
.err{color:var(--bad);font-size:.92rem;margin-top:10px}.ok-t{color:var(--ok)}
.guest .nm{font-weight:700;font-size:1.05rem}.guest .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.empty{text-align:center;color:var(--mut);padding:26px 8px}
.seg{display:flex;gap:8px;margin-top:6px}.seg label{flex:1;margin:0;padding:11px 8px;border:1px solid var(--bd);border-radius:12px;text-align:center;font-weight:600;cursor:pointer;background:var(--card)}
.seg input{display:none}.seg input:checked+span{color:var(--pri)}.seg label.on{border-color:var(--pri);background:var(--chip);color:var(--pri)}
.preview{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:12px;margin-top:10px;background:#000}
.tips{background:var(--chip);border-radius:12px;padding:10px 12px;font-size:.88rem;color:var(--mut);margin-top:10px}.tips b{color:var(--fg)}
.banner{display:flex;gap:10px;align-items:flex-start;background:var(--chip);border-radius:12px;padding:10px 12px;margin-top:12px;font-size:.88rem}
.banner button{margin-left:auto;background:none;border:0;color:var(--mut);font-size:1.1rem;cursor:pointer}
#toast{position:fixed;left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));max-width:488px;margin:0 auto;background:#17202e;color:#fff;padding:12px 16px;border-radius:12px;z-index:50;box-shadow:0 6px 24px rgba(0,0,0,.25)}
#toast.bad{background:var(--bad)}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:40}
.sheet>div{background:var(--card);width:100%;max-width:520px;border-radius:18px 18px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.sheet .btn{margin-top:10px}
.lim{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.lim span{font-size:.82rem;color:var(--mut)}

.pw{position:relative}.pw input{padding-right:48px}.pw .eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:42px;height:42px;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--mut);display:flex;align-items:center;justify-content:center;cursor:pointer}.pw .eye svg{width:22px;height:22px}