/* Buttons */
a { text-decoration: none; }
.btn { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 10px; gap: 4px; height: 48px; border-radius: 4px; border: 0; text-decoration: none; }

.btnMain { font-weight: 600; font-size: 16px; line-height: 150%; background-color: #3380ec; color: white; }
.btnWhite { font-weight: 600; font-size: 16px; line-height: 150%; background-color: white; color: #595959; border: 1px solid #595959; }
.btnOrange { font-weight: 600; font-size: 16px; line-height: 150%; background-color: #FF931E; color: white; }
.btnNavy { font-weight: 600; font-size: 16px; line-height: 150%; background-color: #0A2239; color: white; }
.btnText { font-weight: 600; font-size: 16px; line-height: 150%; background-color: transparent; color: #595959; text-decoration: underline; }
.btnGray { font-weight: 600; font-size: 16px; line-height: 150%; background-color: #595959; color: white; text-decoration: none; }



/*
//  승요 뱃지, 승요 그래프
*/
.winFairy { height: 20px; display: flex; flex-direction: row; padding: 3px 5px 3px 3px; background-color: #f5f6f6; border-radius: 15px; gap: 4px; color: white; font-size: 10px; font-weight: bold; justify-content: center; align-items: center; line-height: 100%; min-width: 50px; flex-shrink: 0; }
.winFairy .cheerNum { display: flex; width: 14px; height: 14px; color: white; background-color: white; border-radius: 15px; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; }

/* .winFairyStadium {} */
.winFairyStadium.winFairyLv1 { background-color: #9FF5E6 !important; }
.winFairyStadium.winFairyLv1 .cheerNum { color: #9FF5E6 !important; }
.winFairyStadium.winFairyLv2 { background-color: #82F0DD !important; }
.winFairyStadium.winFairyLv2 .cheerNum { color: #82F0DD !important; }
.winFairyStadium.winFairyLv3 { background-color: #61E9D1 !important; }
.winFairyStadium.winFairyLv3 .cheerNum { color: #61E9D1 !important; }
.winFairyStadium.winFairyLv4 { background-color: #02EBC0 !important; }
.winFairyStadium.winFairyLv4 .cheerNum { color: #02EBC0 !important; }
.winFairyStadium.winFairyLv5 { background-color: #02D4EB !important; }
.winFairyStadium.winFairyLv5 .cheerNum { color: #02D4EB !important; }
.winFairyStadium.winFairyLv6 { background-color: #029DEB !important; }
.winFairyStadium.winFairyLv6 .cheerNum { color: #029DEB !important; }
.winFairyStadium.winFairyLv7 { background-color: #277DFF !important; }
.winFairyStadium.winFairyLv7 .cheerNum { color: #277DFF !important; }

/* .winFairyUpstore {} */
.winFairyUpstore.winFairyLv1 { background-color: #F2C7FF !important; }
.winFairyUpstore.winFairyLv1 .cheerNum { color: #F2C7FF !important; }
.winFairyUpstore.winFairyLv2 { background-color: #EEB6FF !important; }
.winFairyUpstore.winFairyLv2 .cheerNum { color: #EEB6FF !important; }
.winFairyUpstore.winFairyLv3 { background-color: #DAA6FF !important; }
.winFairyUpstore.winFairyLv3 .cheerNum { color: #DAA6FF !important; }
.winFairyUpstore.winFairyLv4 { background-color: #BF87FF !important; }
.winFairyUpstore.winFairyLv4 .cheerNum { color: #BF87FF !important; }
.winFairyUpstore.winFairyLv5 { background-color: #946EFF !important; }
.winFairyUpstore.winFairyLv5 .cheerNum { color: #946EFF !important; }
.winFairyUpstore.winFairyLv6 { background-color: #8356FF !important; }
.winFairyUpstore.winFairyLv6 .cheerNum { color: #8356FF !important; }
.winFairyUpstore.winFairyLv7 { background-color: #4017B4 !important; }
.winFairyUpstore.winFairyLv7 .cheerNum { color: #4017B4 !important; }




/*
// 토글 스위치
// <label class="inputSwitch"><input type="checkbox" class="inputSwitchChkbox"><span class="inputSwitchBody"></span></label>
*/
.inputSwitch { display: flex; }
.inputSwitch .inputSwitchChkbox { display: none; }
.inputSwitch .inputSwitchBody { position: relative; cursor: pointer; display: inline-block; width: 48px; height: 28px; background: #e8ecf6; border-radius: 20px; transition: 0.2s; }
.inputSwitch .inputSwitchBody::after { content: ''; position: absolute; top: 4px; left: 3px; display: inline-block; width: 20px; height: 20px; border-radius: 20px; background: #ccd3e2; transition: 0.2s; }
.inputSwitch .inputSwitchChkbox:checked + .inputSwitchBody { background-color: #8356ff; }
.inputSwitch .inputSwitchChkbox:checked + .inputSwitchBody::after { background-color: white; left: 24px; }