/* 레지던스 앱 화면 — 폰은 640×1136 좌표를 그대로 줄이고, PC 는 창 전체를 쓴다 (app.js fit) */
html, body { margin: 0; height: 100%; background: #f3f2f1; }
body { display: flex; justify-content: center; align-items: flex-start; }
#screen { position: relative; overflow: hidden; background: #ffffff; box-shadow: 0 0 0 1px #e1dfdd; }
/* ---- 앱 화면 (Power Apps 캔버스 640×1136 그대로, 실제 앱 색) ---- */
.stage { position: absolute; left: 0; top: 0; width: 640px; height: 1136px; transform-origin: 0 0; background: #ffffff; color: #201f1e;
  font-family: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; overflow: hidden; }
.stage * { box-sizing: border-box; }
.pa-lbl { position: absolute; display: flex; align-items: center; padding: 0 5px; white-space: pre-wrap; line-height: 1.25; overflow: hidden; }
.pa-lbl.top { align-items: flex-start; padding-top: 5px; }
.pa-lbl.center { justify-content: center; text-align: center; }
.pa-lbl.auto { overflow: visible; padding: 10px 12px; align-items: flex-start; border: 1px solid #e1dfdd; }
/* 긴 글은 잘리지 않고 상자 안에서 굴림 (관리 날짜 창·달력 안내 문구) */
.pa-lbl.scroll { display: block; overflow-y: auto; overflow-x: hidden; padding-top: 5px; }
.pa-lbl.link { cursor: pointer; }
.pa-lbl.link:hover { background: #ecf1f9; }
.pa-rect { position: absolute; }
.pa-btn { position: absolute; border: 0; border-radius: 8px; background: #005fb8; color: #ffffff; font-family: inherit; font-weight: 600; cursor: pointer; padding: 0 6px; line-height: 1.2; }
.pa-btn:hover { background: #00468c; }
.pa-btn.ghost { background: #ffffff; color: #005fb8; border: 1px solid #005fb8; }
.pa-btn.ghost:hover { background: #ecf1f9; }
.pa-btn.danger { color: #c4314b; border-color: #c4314b; }
.pa-btn.dfill { background: #c4314b; color: #ffffff; }
.pa-btn.flat { border-radius: 0; background: #ffffff; color: #005fb8; border: 0; }
.pa-btn.flat.on { background: #ecf1f9; }
.pa-btn.sel { background: #005fb8; color: #ffffff; border: 1px solid #005fb8; }
.pa-btn.unsel { background: #ffffff; color: #005fb8; border: 1px solid #005fb8; }
.pa-btn.flat:hover, .pa-btn.unsel:hover { background: #ecf1f9; }
.pa-btn.dfill:hover { background: #a4262c; }
.stage .pa-btn:disabled { background: #f3f2f1; color: #797775; border: 1px solid #c8c6c4; cursor: not-allowed; }
.pa-btn:focus-visible, .pa-in:focus-visible, .pa-dd select:focus-visible { outline: 3px solid #ffb900; outline-offset: 1px; }
.pa-gal { position: absolute; overflow-y: auto; overflow-x: hidden; }
.pa-item { position: absolute; }
.pa-cell { position: absolute; cursor: pointer; }
.pa-in { position: absolute; border: 1px solid #8a8886; padding: 0 12px; font-family: inherit; color: #201f1e; background: #ffffff; }
.pa-dd { position: absolute; border: 1px solid #8a8886; background: #ffffff; }
.pa-dd select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; border: 0; border-radius: 0; padding: 0 0 0 12px; background: transparent; color: #201f1e; font-family: inherit; min-height: 0; }
.pa-dd i { position: absolute; right: 0; top: 0; bottom: 0; width: 44px; background: #005fb8; pointer-events: none; }
.pa-dd i::after { content: ""; position: absolute; left: 50%; top: 42%; width: 12px; height: 12px; margin-left: -6px; border-right: 3px solid #ffffff; border-bottom: 3px solid #ffffff; transform: rotate(45deg); }