/* locker_pw */
.f-locker_pw { background: #fff; }
.f-locker_pw p { line-height: 1.19; white-space: nowrap; }

/* status bar */
.f-locker_pw .sb { position: absolute; left: 0; top: 0; width: 430px; height: 59px; }
.f-locker_pw .sb-row { position: absolute; left: 0; top: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px 16px 52px; }
.f-locker_pw .sb-time { font-weight: 700; font-size: 17px; line-height: 22px; color: #030303; text-align: center; }
.f-locker_pw .sb-wrap { width: 79.67px; height: 13px; }
.f-locker_pw .sb-cam { position: absolute; left: 153px; top: 10px; width: 123px; height: 36px; background: #030303; border-radius: 33px; overflow: hidden; }
.f-locker_pw .cv { position: absolute; }
.f-locker_pw .cv img { position: absolute; display: block; width: 100%; height: 100%; }
.f-locker_pw .cv57 { left: 94px; top: 14px; width: 3px; height: 8px; }
.f-locker_pw .cv57 img, .f-locker_pw .cv60 img { left: -62.43%; top: -23.41%; width: 224.86%; height: 146.82%; }
.f-locker_pw .cv59 { left: 94.75px; top: 15.85px; width: 1.5px; height: 4.308px; }
.f-locker_pw .cv59 img, .f-locker_pw .cv61 img { left: -124.86%; top: -43.48%; width: 349.72%; height: 186.96%; }
.f-locker_pw .cv58, .f-locker_pw .cv62 { width: 1.984px; height: 4.879px; display: flex; align-items: center; justify-content: center; }
.f-locker_pw .cv58 { left: 94.97px; top: 15.02px; }
.f-locker_pw .cv62 { left: 100.05px; top: 15.02px; }
.f-locker_pw .cv58 .cv-in, .f-locker_pw .cv62 .cv-in { position: relative; flex: none; width: 1.273px; height: 4.804px; }
.f-locker_pw .cv58 .cv-in { transform: rotate(5.81deg) skewX(-2.78deg); }
.f-locker_pw .cv62 .cv-in { transform: rotate(174.19deg) skewX(2.78deg) scaleY(-1); }
.f-locker_pw .cv58 img, .f-locker_pw .cv62 img { left: -98.07%; top: -25.99%; width: 296.14%; height: 151.98%; }
.f-locker_pw .cv60 { left: 100px; top: 14px; width: 3px; height: 8px; }
.f-locker_pw .cv61 { left: 100.75px; top: 15.85px; width: 1.5px; height: 4.308px; }
.f-locker_pw .cv60 .cv-in, .f-locker_pw .cv61 .cv-in { position: absolute; inset: 0; transform: rotate(180deg) scaleY(-1); }

/* navigation */
.f-locker_pw .nav { position: absolute; left: 0; top: 83px; width: 430px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.f-locker_pw .nav-back { position: relative; width: 48px; height: 48px; }
.f-locker_pw .nav-back img { position: absolute; inset: 0; width: 48px; height: 48px; transform: rotate(90deg); }
.f-locker_pw .nav-title { font-weight: 900; font-size: 33px; color: #f37021; text-align: center; }
.f-locker_pw .nav-r { width: 48px; height: 48px; }

/* body column */
.f-locker_pw .body { position: absolute; left: 24px; top: 143px; width: 382px; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* segmented */
.f-locker_pw .seg { position: relative; flex: none; width: 234px; height: 40px; background: #fff; border: 1px solid #b5bcc6; border-radius: 20px; overflow: hidden; }
.f-locker_pw .seg p { font-weight: 700; font-size: 13px; text-align: center; }
.f-locker_pw .seg-off { position: absolute; top: 1px; height: 36px; width: 110px; margin-left: -55px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #b5bcc6; }
.f-locker_pw .seg-off { left: 174px; }
.f-locker_pw .seg-on { position: absolute; top: 1px; width: 123px; height: 36px; border-radius: 20px; background: #030303; display: flex; align-items: center; justify-content: center; padding: 8px 24px; color: #fff; }
.f-locker_pw .seg-on-l { left: 1px; }

/* floor chips */
.f-locker_pw .chips { position: relative; flex: none; width: 382px; height: 89px; overflow: hidden; }
.f-locker_pw .chips-in { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 382px; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; justify-content: center; gap: 8px 4px; }
.f-locker_pw .chip { width: 72px; height: 24px; border-radius: 20px; background: #f4f5f7; display: flex; align-items: center; justify-content: center; padding: 1px 3px; overflow: hidden; }
.f-locker_pw .chip p { font-weight: 700; font-size: 10px; color: #b5bcc6; text-align: center; }
.f-locker_pw .chip-on { background: #f37021; }
.f-locker_pw .chip-on p { color: #fff; }

/* locker grid */
.f-locker_pw .grid { flex: none; width: 380px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; }
.f-locker_pw .lk { position: relative; flex: none; width: 68px; height: 68px; border-radius: 20px; background: #fff; border: 1px solid #b5bcc6; }
.f-locker_pw .lk-num { position: absolute; left: calc(50% - 0.5px); top: calc(50% - 10px); width: 41px; height: 20px; transform: translateX(-50%); font-weight: 700; font-size: 17px; color: #b5bcc6; text-align: center; }
.f-locker_pw .lk-on { background: #030303; border: 0; }
.f-locker_pw .lk-lock { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
.f-locker_pw .spacer { flex: none; width: 100%; height: 64px; }

/* pw: dim + password alert + 확인방법 prompt */
.f-locker_pw .bg-top { position: absolute; left: 0; top: 0; width: 430px; height: 231px; background: #fff; }
.f-locker_pw .grid { width: 382px; }
.f-locker_pw .dim { position: absolute; left: 0; top: -0.5px; width: 430px; height: 932px; background: #030303; opacity: 0.25; }
.f-locker_pw .pop { position: absolute; left: 38px; top: 284px; width: 354px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.f-locker_pw .al { flex: none; width: 354px; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 2px 2px 8px 0 rgba(0,0,0,0.2); display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 32px 12px 12px; }
.f-locker_pw .al-title { width: 100%; font-weight: 700; font-size: 23px; color: #030303; text-align: center; }
.f-locker_pw .al-pw { background: #fff; border: 1px solid #b5bcc6; border-radius: 20px; padding: 16px 36px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.f-locker_pw .al-pw p { font-weight: 700; font-size: 23px; color: #030303; text-align: center; }
.f-locker_pw .al-ok { width: 330px; height: 52px; border-radius: 20px; background: #f37021; display: flex; align-items: center; justify-content: center; padding: 8px 24px; }
.f-locker_pw .al-ok p { font-weight: 700; font-size: 13px; color: #fff; text-align: center; }
.f-locker_pw .pr { flex: none; background: #f4f5f7; border-radius: 20px; overflow: hidden; box-shadow: 2px 2px 8px 0 rgba(0,0,0,0.2); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; }
.f-locker_pw .pr-head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.f-locker_pw .pr-head p { font-weight: 700; font-size: 13px; color: #030303; }
.f-locker_pw .pr-head .pr-k { color: #f37021; }
.f-locker_pw .pr-im { position: relative; width: 330px; height: 52px; }
.f-locker_pw .pr-btn { position: absolute; left: 0; top: 0; width: 330px; height: 44px; border-radius: 20px; background: #f37021; opacity: 0.6; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 8px 24px; }
.f-locker_pw .pr-btn > p { font-weight: 700; font-size: 15px; color: #fff; }
.f-locker_pw .pr-sub { width: 96px; height: 36px; border-radius: 20px; background: #030303; display: flex; align-items: center; justify-content: center; padding: 8px 24px; }
.f-locker_pw .pr-sub p { font-weight: 700; font-size: 13px; color: #fff; text-align: center; }
.f-locker_pw .pr-hand { position: absolute; left: calc(50% + 3.5px); top: calc(50% + 5px); width: 59.875px; height: 62.631px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.f-locker_pw .pr-hand-in { position: relative; flex: none; width: 33px; height: 54px; transform: rotate(-39.68deg); }
.f-locker_pw .pr-hand-in img { position: absolute; inset: 0; width: 100%; height: 100%; }