body {
   margin: 0;
   background: #e5e7eb;
   font-family: 'Malgun Gothic',sans-serif;
}

.pageBg {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   padding-top: 80px;
}

.cardBox {
   background: #fff;
   border-radius: 24px;
   padding: 13% 15%;
   box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px;
   width: 80%;
}

.mainPageWrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   gap: 40px;
}

.logoArea img {
   max-width: 220px;
   height: auto;
}

.mainButtonArea {
   display: flex;
   gap: 16px;
}

.mainButton,
.subButton {
   min-width: 180px;
   height: 58px;
   border: none;
   border-radius: 14px;
   font-size: 17px;
   font-weight: 700;
   cursor: pointer;
   width: 50%;
}

.mainButton {
   background: #dc001c;
   color: #fff;
}

   .mainButton:hover {
      opacity: .94;
      background: #fff;
      color: #dc001c;
      border: 1px solid #dc001c;
   }

.subButton {
   background: #111827;
   color: #fff;
}

   .subButton:hover {
      opacity: .94;
      background: #ffffff;
      color: #000000;
      border: 1px solid #b7b7b7;
   }


.recruitSelectArea {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.recruitLabel {
   font-size: 15px;
   font-weight: 700;
   color: #111827;
}

.recruitSelect {
   width: 100%;
   height: 56px;
   padding: 0 18px;
   border: 1px solid #d1d5db;
   border-radius: 16px;
   background: #fff;
   font-size: 15px;
   font-weight: 500;
   color: #111827;
   outline: none;
   transition: all .15s;
}

   .recruitSelect:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
   }

.mainButtonArea {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.recruitSelectArea {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.buttonGroup {
   width: 100%;
   display: flex;
   gap: 16px;
}