eapim-portal/src/main/resources/static/sass/pages/_account-recovery.scss

@use '../abstracts/variables' as *;
@use '../abstracts/color-functions' as *;
@use '../abstracts/mixins' as *;

// -----------------------------------------------------------------------------
// Account Recovery Page Styles (Find ID / Reset Password) - Figma: 1029-2249
// Matches terms_agreements.html tab design for consistency
// -----------------------------------------------------------------------------

.account-recovery-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
  padding: 0;
  position: relative;
  min-height: auto;
  margin: 0;
}

.account-recovery-container {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  padding: $spacing-lg;
}

.account-recovery-card {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;

  @media (max-width: 576px) {
    padding: 0 20px;
  }
}

// Logo - 숨김 처리 (Figma 디자인에 없음)
.account-recovery-logo {
  display: none;
}

// Title - 숨김 처리 (페이지 타이틀 배너에서 표시)
.account-recovery-title {
  display: none;
}

// Tab Navigation (Figma 디자인: 약관 페이지와 동일)
.account-recovery-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  width: 100%;
  background: transparent;
  border-radius: 0;
  padding: 0;

  .tab-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    font-family: $font-family-primary;
    font-size: 16px;
    font-weight: 700;
    color: #8c959f;
    text-decoration: none;
    text-align: center;
    background: #eceff4;
    border-radius: 0;
    transition: all 0.3s ease;

    // 왼쪽 탭 둥근 모서리
    &:first-child {
      border-radius: 30px 0 0 0;
    }

    // 오른쪽 탭 둥근 모서리
    &:last-child {
      border-radius: 0 30px 0 0;
    }

    &:hover {
      color: #3ba4ed;
      background: #e4e8ed;
    }

    &.active {
      color: #FFFFFF;
      background: #3ba4ed;
      font-weight: 700;
    }

    @media (max-width: 576px) {
      padding: 12px 16px;
      font-size: 14px;
    }
  }
}

// Alert Messages
.account-alert {
  width: 100%;
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: 12px;
  font-family: $font-family-primary;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideDown 0.3s ease;

  i {
    font-size: 18px;
    flex-shrink: 0;
  }

  &.alert-error {
    background: rgba(255, 107, 107, 0.1);
    color: #FF6B6B;
    border: 1px solid rgba(255, 107, 107, 0.3);
  }

  &.alert-success {
    background: rgba(107, 207, 127, 0.1);
    color: #6BCF7F;
    border: 1px solid rgba(107, 207, 127, 0.3);
  }

  &.alert-info {
    background: rgba(0, 73, 180, 0.1);
    color: #0049B4;
    border: 1px solid rgba(0, 73, 180, 0.3);
  }
}

// Form Content Area (Figma: 아이디찾기BG_box)
.account-recovery-form {
  width: 100%;
  margin-bottom: 0;
  background: #F6F9FB;
  padding: 40px;
  border-radius: 0 0 12px 12px;

  @media (max-width: 576px) {
    padding: 24px 16px;
  }

  .form-group {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;

    &:last-of-type {
      margin-bottom: 0;
    }

    @media (max-width: 768px) {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
  }

  .form-label {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 170px;
    font-family: $font-family-primary;
    font-size: 15px;
    font-weight: 400;
    color: #212529;
    margin-bottom: 0;

    .required {
      color: #ed5b5b;
      margin-left: 2px;
    }

    @media (max-width: 768px) {
      width: 100%;
      font-size: 14px;
    }
  }

  .form-input {
    flex: 1;
    height: 40px;
    padding: 0 16px;
    font-family: $font-family-primary;
    font-size: 14px;
    font-weight: 400;
    color: #212529;
    background: #FFFFFF;
    border: 1px solid #dadada;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s ease;

    &::placeholder {
      color: #dadada;
    }

    &:hover {
      border-color: #3ba4ed;
    }

    &:focus {
      border-color: #3ba4ed;
      box-shadow: 0 0 0 2px rgba(59, 164, 237, 0.1);
    }

    &:disabled {
      background: #F8F9FA;
      border-color: #E2E8F0;
      color: #94A3B8;
      cursor: not-allowed;
    }

    &.error {
      border-color: #ed5b5b;
    }
  }

  .form-select {
    height: 40px;
    padding: 0 32px 0 16px;
    font-family: $font-family-primary;
    font-size: 14px;
    font-weight: 400;
    color: #515151;
    background: #FFFFFF;
    border: 1px solid #dadada;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath fill='%231D1B20' d='M5 5L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 5px;

    &:hover {
      border-color: #3ba4ed;
    }

    &:focus {
      border-color: #3ba4ed;
      box-shadow: 0 0 0 2px rgba(59, 164, 237, 0.1);
    }

    &:disabled {
      background-color: #F8F9FA;
      border-color: #E2E8F0;
      color: #94A3B8;
      cursor: not-allowed;
      opacity: 0.7;
    }

    option {
      padding: 8px;
      font-size: 14px;
    }
  }
}

// Phone Input Group (Figma: 휴대폰번호+텍스트필드)
.phone-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;

  .phone-prefix {
    width: 100px;
    flex-shrink: 0;
  }

  .phone-middle,
  .phone-last {
    width: 100px;
    flex-shrink: 0;
  }

  .phone-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 1px;
    background: #515151;
    flex-shrink: 0;
  }

  @media (max-width: 768px) {
    flex-wrap: wrap;
    gap: 6px;

    .phone-prefix,
    .phone-middle,
    .phone-last {
      flex: 1;
      min-width: 60px;
    }

    .phone-separator {
      width: 6px;
    }
  }

  @media (max-width: 576px) {
    .phone-prefix,
    .phone-middle,
    .phone-last {
      width: 100%;
    }

    .phone-separator {
      display: none;
    }
  }
}

// Auth Number Group (Figma: 인증번호+텍스트필드)
.auth-number-group {
  margin-top: 0;
}

.auth-input-group {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;

  .auth-input {
    flex: 1;
    padding-right: 60px;
  }

  .auth-timer {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: $font-family-primary;
    font-size: 14px;
    font-weight: 400;
    color: #ed5b5b;
    pointer-events: none;

    @media (max-width: 576px) {
      font-size: 12px;
      right: 12px;
    }
  }
}

// Buttons (Figma: 인증번호 받기/확인)
.auth-request-button,
.auth-verify-button {
  width: 140px;
  height: 40px;
  padding: 8px;
  font-family: $font-family-primary;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  background: #a4d6ea;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0;
  flex-shrink: 0;
  line-height: 1;

  &:hover {
    background: darken(#a4d6ea, 5%);
  }

  &:active {
    background: darken(#a4d6ea, 10%);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  @media (max-width: 576px) {
    width: 100%;
    height: 40px;
    font-size: 13px;
    margin-top: 8px;
  }
}

// Form Actions (Figma: btn_취소, btn_신청)
.account-recovery-card .form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
  padding: 32px 0;
  border-top: none;
  background: transparent;

  .cancel-button,
  .submit-button {
    width: 160px;
    height: 40px;
    padding: 8px;
    font-family: $font-family-primary;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
    // <a> 태그 지원
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .cancel-button {
    color: #5f666c;
    background: #e5e7eb;

    &:hover {
      background: darken(#e5e7eb, 5%);
    }

    &:active {
      background: darken(#e5e7eb, 10%);
    }
  }

  .submit-button {
    color: #FFFFFF;
    background: #0049B4;

    &:hover {
      background: darken(#0049B4, 5%);
    }

    &:active {
      background: darken(#0049B4, 10%);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  @media (max-width: 576px) {
    flex-direction: column;
    gap: 10px;
    padding: 20px 0;

    .cancel-button,
    .submit-button {
      width: 100%;
      height: 40px;
      font-size: 13px;
    }
  }
}

// Loading Overlay
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(237, 249, 254, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.3s ease;

  &.active {
    display: flex;
  }

  .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #DDDDDD;
    border-top-color: #0049B4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}

// Animations
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Responsive adjustments
@media (max-width: 768px) {
  .account-recovery-page {
    padding: 20px 12px;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .account-recovery-container {
    max-width: 100%;
  }
}

// NOTE: 모바일 스타일은 @include respond-to('sm') 블록에서 관리 (파일 하단)

// Result Page Styles (아이디 찾기 결과 페이지)
.account-recovery-result {
  width: 100%;
  background: #F6F9FB;
  padding: 60px 40px;
  border-radius: 0 0 12px 12px;
  text-align: center;

  @media (max-width: 576px) {
    padding: 40px 20px;
  }

  .result-header {
    margin-bottom: 40px;

    .result-icon {
      font-size: 60px;
      color: #6BCF7F;
      margin-bottom: 20px;
      display: block;

      @media (max-width: 576px) {
        font-size: 48px;
      }
    }

    .result-title {
      font-family: $font-family-primary;
      font-size: 24px;
      font-weight: 700;
      color: #212529;
      margin-bottom: 12px;

      @media (max-width: 576px) {
        font-size: 20px;
      }
    }

    .result-description {
      font-family: $font-family-primary;
      font-size: 16px;
      font-weight: 400;
      color: #5f666c;
      margin: 0;

      strong {
        color: #0049B4;
        font-weight: 700;
      }

      @media (max-width: 576px) {
        font-size: 14px;
      }
    }
  }
}

// Found Users List
.found-users-list {
  max-width: 600px;
  margin: 0 auto 40px;

  .found-user-item {
    background: #FFFFFF;
    border: 1px solid #dadada;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 12px;
    transition: all 0.3s ease;

    &:last-child {
      margin-bottom: 0;
    }

    &:hover {
      border-color: #3ba4ed;
      box-shadow: 0 2px 8px rgba(59, 164, 237, 0.15);
    }

    .user-info {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;

      @media (max-width: 576px) {
        flex-direction: column;
        gap: 6px;
      }
    }

    .user-email {
      font-family: $font-family-primary;
      font-size: 20px;
      font-weight: 700;
      color: #212529;

      @media (max-width: 576px) {
        font-size: 18px;
      }
    }

    .user-date {
      font-family: $font-family-primary;
      font-size: 16px;
      font-weight: 400;
      color: #8c959f;

      @media (max-width: 576px) {
        font-size: 14px;
      }
    }
  }
}

// Result Info Box
.result-info-box {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(0, 73, 180, 0.05);
  border: 1px solid rgba(0, 73, 180, 0.2);
  border-radius: 12px;
  padding: 16px 24px;

  .info-text {
    font-family: $font-family-primary;
    font-size: 15px;
    font-weight: 400;
    color: #5f666c;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;

    i {
      color: #0049B4;
      font-size: 16px;
    }

    .info-link {
      color: #0049B4;
      font-weight: 700;
      text-decoration: underline;
      transition: color 0.3s ease;

      &:hover {
        color: darken(#0049B4, 10%);
      }
    }

    @media (max-width: 576px) {
      font-size: 14px;
      text-align: center;
    }
  }
}

// -----------------------------------------------------------------------------
// Figma Mobile Design - node 1152-7047 (sm: 768px breakpoint)
// -----------------------------------------------------------------------------
@include respond-to('sm') {
  .account-recovery-page {
    padding: 0;
    margin: 0;
  }

  .account-recovery-container {
    padding: 20px;
  }

  .account-recovery-card {
    padding: 0;
  }

  // Figma: 탭 - 167px × 40px, 14px Bold
  .account-recovery-tabs {
    .tab-link {
      height: 40px;
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 700;

      &:first-child {
        border-radius: 8px 0 0 0;
      }

      &:last-child {
        border-radius: 0 8px 0 0;
      }
    }
  }

  // Figma: 폼 영역
  .account-recovery-form {
    padding: 20px;
    border-radius: 0 0 8px 8px;

    .form-group {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      margin-bottom: 16px;
    }

    // Figma: 라벨 - 14px Medium
    .form-label {
      width: 100%;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 0;
    }

    // Figma: 입력 필드 - 335px × 40px, border-radius 8px
    .form-input {
      flex: none;
      width: 100%;
      height: 40px;
      padding: 0 16px;
      font-size: 12px;
      border-radius: 8px;

      &::placeholder {
        color: #8c959f;
      }
    }

    // Figma: 셀렉트 - 40px 높이, 8px radius
    .form-select {
      height: 40px;
      padding: 0 32px 0 12px;
      font-size: 12px;
      border-radius: 8px;
      background-position: right 10px center;
    }
  }

  // 모바일: 휴대폰 번호 입력 - 화면 폭 채우기
  .phone-input-group {
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;

    .phone-prefix {
      flex: 1;
      min-width: 0;
      width: auto;
    }

    .phone-middle,
    .phone-last {
      flex: 1;
      min-width: 0;
      width: auto;
    }

    .phone-separator {
      display: flex;
      width: auto;
      height: auto;
      background: transparent;
      font-size: 12px;
      color: #000;

      &::before {
        content: '-';
      }
    }
  }

  // 모바일: 인증번호 입력 그룹 - 화면 폭 채우기
  .auth-input-group {
    width: 100%;

    .auth-input {
      width: 100%;
      padding-right: 60px;
    }

    // 타이머 - 12px, #ed5b5b
    .auth-timer {
      font-size: 12px;
      right: 12px;
    }
  }

  // 모바일: 인증번호 받기/확인 버튼 - 화면 폭 채우기, 다음 줄에 배치
  .auth-request-button,
  .auth-verify-button {
    width: 100%;
    height: 40px;
    padding: 10px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    margin-top: 8px;
  }

  // Figma: 하단 버튼 - 144px × 40px, gap 21px, 가로 배치
  .account-recovery-card .form-actions {
    flex-direction: row;
    gap: 21px;
    margin-top: 24px;
    padding: 24px 0;

    .cancel-button,
    .submit-button {
      flex: 1;
      min-width: 144px;
      height: 40px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 8px;
    }

    // Figma: 취소 버튼 - #e5e7eb 배경, #5f666c 텍스트
    .cancel-button {
      background: #e5e7eb;
      color: #5f666c;
    }

    // Figma: 제출 버튼 - #0049b4 배경, 흰색 텍스트
    .submit-button {
      background: #0049b4;
      color: #ffffff;
    }
  }

  // Figma: 결과 페이지
  .account-recovery-result {
    padding: 30px 20px;
    border-radius: 0 0 8px 8px;

    .result-header {
      margin-bottom: 24px;

      .result-icon {
        font-size: 40px;
        margin-bottom: 16px;
      }

      .result-title {
        font-size: 18px;
        margin-bottom: 8px;
      }

      .result-description {
        font-size: 14px;
      }
    }
  }

  // Figma: 검색 결과 목록
  .found-users-list {
    margin-bottom: 24px;

    .found-user-item {
      padding: 16px;
      border-radius: 8px;
      margin-bottom: 8px;

      .user-email {
        font-size: 16px;
      }

      .user-date {
        font-size: 12px;
      }
    }
  }

  // Figma: 결과 정보 박스
  .result-info-box {
    border-radius: 8px;
    padding: 12px 16px;

    .info-text {
      font-size: 12px;
    }
  }
}