/* qr — generated from Figma */
.f-qr { width: 430px; height: 932px; background: #fff; }
.f-qr p { white-space: nowrap; }
/* status bar */
.f-qr .sb { position: absolute; left: 0; top: 0; width: 430px; height: 59px; }
.f-qr .sb-in { 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-qr .sb-time { font-weight: 700; font-size: 17px; line-height: 22px; color: #030303; text-align: center; }
.f-qr .sb-icons { width: 79.67px; height: 13px; }
.f-qr .sb-island { position: absolute; left: 153px; top: 10px; width: 124px; height: 36px; background: #030303; border-radius: 33px; overflow: hidden; }
.f-qr .cv { position: absolute; }
.f-qr .cv img, .f-qr .cvi img { position: absolute; display: block; }
.f-qr .cvw { position: absolute; display: flex; align-items: center; justify-content: center; }
.f-qr .cvw > div { flex: none; }
.f-qr .cvi { position: relative; }
/* navigation */
.f-qr .nav { position: absolute; left: 0; top: 83px; width: 430px; height: 48px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.f-qr .nav-back { width: 48px; height: 48px; transform: rotate(90deg); }
.f-qr .nav-back img { width: 48px; height: 48px; }
.f-qr .nav-title { font-weight: 900; font-size: 33px; line-height: 40px; color: #f37021; text-align: center; }
.f-qr .nav-branch { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 4px 0; }
.f-qr .nav-branch img { width: 26.627px; height: 15.314px; }
/* body */
.f-qr .body { position: absolute; left: 24px; top: 143px; width: 382px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.f-qr .center { position: relative; width: 382px; height: 382px; flex-shrink: 0; border-radius: 20px; overflow: hidden; }
.f-qr .center-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.f-qr .center-line { position: absolute; left: 0; top: -0.5px; width: 382px; height: 382px; border: 1px solid #b5bcc6; border-radius: 20px; }
.f-qr .roll { position: absolute; left: 50%; bottom: 4.5px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 4px; padding: 2px 8px; border-radius: 8px; background: rgba(181,188,198,0.8); }
.f-qr .roll-on { width: 24px; height: 8px; border-radius: 20px; background: #f37021; }
.f-qr .roll img { width: 8px; height: 8px; }
.f-qr .rows { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.f-qr .row { position: relative; width: 382px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 4px 24px; border-radius: 20px; overflow: hidden; }
.f-qr .row-locker { padding-top: 8px; padding-bottom: 8px; }
.f-qr .row-black { background: #030303; }
.f-qr .row-orange { background: #f37021; }
.f-qr .row-white { background: #fff; border: 1px solid #b5bcc6; padding-left: 23px; padding-right: 3px; }
.f-qr .row-label { font-weight: 700; font-size: 15px; line-height: 18px; color: #fff; }
.f-qr .row-white .row-label { color: #030303; }
.f-qr .row-prod { display: flex; align-items: center; gap: 4px; }
.f-qr .row-info { width: 16px; height: 16px; }
.f-qr .row-qr { width: 24px; height: 24px; }
.f-qr .row-mid { font-weight: 700; font-size: 15px; line-height: 18px; color: #fff; }
.f-qr .btn { width: 96px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 20px; font-weight: 700; font-size: 13px; line-height: 16px; text-align: center; white-space: nowrap; }
.f-qr .btn-white { background: #fff; border: 1px solid #b5bcc6; color: #030303; }
.f-qr .btn-black { background: #030303; color: #fff; }
.f-qr .btn-orange { background: #f37021; color: #fff; }
/* tab bar */
.f-qr .tab { position: absolute; left: 0; top: 844px; width: 430px; height: 88px; background: #fff; }
.f-qr .tab-item { position: absolute; top: 0; width: 75px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 4px; }
.f-qr .tab-ic { width: 24px; height: 24px; }
.f-qr .tab-lb { font-weight: 700; font-size: 10px; line-height: 12px; color: #b5bcc6; text-align: center; }
.f-qr .tab-lb.tab-on { color: #030303; }
.f-qr .tab-pt { display: flex; align-items: center; justify-content: center; gap: 2px; }
.f-qr .tab-pt img { width: 2px; height: 2px; }
.f-qr .tab-hi { position: absolute; left: 148px; top: 75px; width: 134px; height: 5px; border-radius: 100px; background: #030303; }

.f-qr .dim { position: absolute; left: 0; top: 0; width: 430px; height: 932px; background: #030303; opacity: 0.3; }
.f-qr .qr-card { position: absolute; left: 23px; top: 218px; width: 382px; height: 521px; background: #fff; border-radius: 20px; overflow: hidden; }
.f-qr .qr-code { position: absolute; left: 34px; top: 44px; width: 314px; height: 314px; }
.f-qr .qr-name { position: absolute; left: 52px; top: 402px; font-weight: 700; font-size: 20px; line-height: 24px; color: #030303; }
.f-qr .qr-desc { position: absolute; left: 52px; top: 437px; width: 270px; font-weight: 700; font-size: 17px; line-height: 20px; color: #b5bcc6; white-space: normal; word-break: keep-all; }
.f-qr .qr-close { position: absolute; left: 356px; top: 193px; width: 58px; height: 58px; }
.f-qr .qr-close img { width: 58px; height: 58px; }