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

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

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

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

/* segmented */
.f-locker_avail .seg { position: relative; flex: none; width: 234px; height: 40px; background: #fff; border: 1px solid #b5bcc6; border-radius: 20px; overflow: hidden; }
.f-locker_avail .seg p { font-weight: 700; font-size: 13px; text-align: center; }
.f-locker_avail .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_avail .seg-off { left: 174px; }
.f-locker_avail .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_avail .seg-on-l { left: 1px; }

/* floor chips */
.f-locker_avail .chips { position: relative; flex: none; width: 382px; height: 89px; overflow: hidden; }
.f-locker_avail .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_avail .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_avail .chip p { font-weight: 700; font-size: 10px; color: #b5bcc6; text-align: center; }
.f-locker_avail .chip-on { background: #f37021; }
.f-locker_avail .chip-on p { color: #fff; }

/* locker grid */
.f-locker_avail .grid { flex: none; width: 380px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; }
.f-locker_avail .lk { position: relative; flex: none; width: 68px; height: 68px; border-radius: 20px; background: #fff; border: 1px solid #b5bcc6; }
.f-locker_avail .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_avail .lk-on { background: #030303; border: 0; }
.f-locker_avail .lk-lock { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
.f-locker_avail .spacer { flex: none; width: 100%; height: 64px; }

/* avail: 사용 가능 보기 active (orange pill right) */
.f-locker_avail .bg-top { position: absolute; left: 0; top: 0; width: 430px; height: 231px; background: #fff; }
.f-locker_avail .seg-off-l { left: 58.5px; }
.f-locker_avail .seg-on-r { right: 1px; left: auto; background: #f37021; }
.f-locker_avail .grid { width: 382px; }