* {
   box-sizing: border-box;
}

body {
   margin: 0;
   background: #f4f6f9;
   font-family: 'Noto Sans KR','맑은 고딕','돋움',Dotum,AppleGothic,sans-serif;
   color: #222;
}

/* wrap */
#recruitWrap {
   max-width: 1100px;
   margin: 0 auto;
   padding: 50px 20px 80px;
}

/* header */
#applyHeader {
   margin-bottom: 40px;
   text-align: center;
}

.pageTitle {
   margin: 0;
   font-size: 34px;
   font-weight: 700;
   color: #111827;
}

.pageDescription {
   margin-top: 12px;
   font-size: 15px;
   color: #6b7280;
}

/* container */
.formContainer {
   background: #fff;
   border-radius: 20px;
   padding: 45px;
   box-shadow: 0 6px 30px rgba(0,0,0,0.06);
}

/* row */
.formRow {
   display: flex;
   gap: 30px;
   padding: 20px 0;
   border-bottom: 1px solid #e5e7eb;
}

   .formRow:first-child {
      padding-top: 0;
   }

   .formRow:last-child {
      border-bottom: none;
      padding-bottom: 0;
   }

/* label */
.formLabel {
   width: 180px;
   flex-shrink: 0;
   font-size: 16px;
   font-weight: 500;
   padding-top: 14px;
   color: #111827;
}

.required::after {
   content: " *";
   color: #ef4444;
}

/* content */
.formContent {
   flex: 1;
}

/* input */
.textInput {
   width: 70%;
   height: 52px;
   padding: 0 16px;
   border: 1px solid #d1d5db;
   border-radius: 12px;
   font-size: 15px;
   transition: all .2s;
   background: #fff;
}

   .textInput:focus {
      outline: none;
      border-color: #ed1d35;
      box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
   }

.inputMedium {
   max-width: 400px;
}

.marginTop {
   margin-top: 12px;
}

/* phone */
.phoneGroup {
   display: flex;
   align-items: center;
   gap: 10px;
}

.phoneInput {
   width: 80px;
}

.dash {
   font-size: 18px;
   color: #6b7280;
}

/* button */
.primaryButton {
   height: 48px;
   padding: 0 22px;
   border-radius: 12px;
   border: none;
   background: #dc001c;
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all .2s;
}

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

/* guide */
.guideText {
   font-size: 14px;
   color: #6b7280;
}

.subGuide {
   margin-top: 12px;
   font-size: 13px;
   color: #6b7280;
   line-height: 1.6;
}

.inlineArea {
   display: flex;
   align-items: center;
   gap: 16px;
}

/* submit */
.bottomArea {
   margin-top: 30px;
}

.submitButton {
   width: 100%;
   height: 60px;
   border-radius: 14px;
   border: none;
   background: #dc001c;
   color: #fff;
   font-size: 17px;
   font-weight: 700;
   cursor: pointer;
   transition: all .2s;
}

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

.validateMessage {
   margin-top: 8px;
   font-size: 13px;
   font-weight: 500;
}

.modalWrap {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.5);
   z-index: 9999;
}

.modalContainer {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 53%;
   background: #fff;
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modalHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 24px;
   border-bottom: 1px solid #e5e7eb;
}

   .modalHeader h2 {
      margin: 0;
      font-size: 20px;
   }

.modalClose {
   border: none;
   background: none;
   font-size: 28px;
   cursor: pointer;
}

.modalBody {
   padding: 24px;
}

.agreementContent {
   line-height: 1.8;
   font-size: 14px;
   color: #374151;
}

.agreementCheckArea {
   margin-top: 24px;
   display: flex;
   gap: 24px;
   place-self: center;
}

.checkLabel {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
}

.modalFooter {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   padding: 20px 24px;
   border-top: 1px solid #e5e7eb;
}

.secondaryButton {
   height: 46px;
   padding: 0 20px;
   border: none;
   border-radius: 10px;
   background: #e5e7eb;
   cursor: pointer;
}

.agreementContent {
   white-space: pre-line;
}










/* responsive */
@media (max-width:768px) {

   .formRow {
      flex-direction: column;
      gap: 14px;
   }

   .formLabel {
      width: 100%;
      padding-top: 0;
   }

   .formContainer {
      padding: 25px;
   }

   .phoneGroup {
      flex-wrap: wrap;
   }

   .phoneInput {
      width: 100px;
   }
}