.c-mypage-user-info {
  display: flex;
  gap: var(--spacing-6);
  .user-info-text {
    padding-block: var(--spacing-1);
    flex: 1;
    text-shadow: 0 4px 32px rgba(95, 45, 55, 0.75);
    .user-name {
      color: var(--color-text-inverse-high);
    }
    .user-meta {
      color: var(--color-text-inverse-middle);
    }
  }
}
.mypage-menu {
  list-style: none;
  padding-block: var(--spacing-2) var(--spacing-8);
  padding-inline: 0;
  li {
    margin: 0;
    padding: 0 0 var(--spacing-6);
  }
  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
    text-decoration: none;
    .icon-wrapper {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-round);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--color-surface-primary-light);
    }
    .icon {
      width: 24px;
      height: 24px;
      fill: var(--color-text-primary);
    }
    .label {
      font-size: var(--font-size-2);
      font-weight: bold;
      color: var(--color-text-base-high);
    }
  }
}
.l-mypage-section {
  border-top: 1px solid var(--color-border-base-middle);
  padding-block: var(--spacing-4);
  .mypage-section-header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--spacing-4);
    padding-inline: 0;
    padding-block: var(--spacing-8) var(--spacing-6);
    .title {
      flex: 1;
      text-align: left;
      font-weight: bold;
    }
    .icon {
      width: 20px;
      height: 20px;
      fill: var(--color-text-primary);
    }
  }
}
.mypage-section-content {
  padding-bottom: var(--spacing-12);
  display: grid;
  gap: var(--spacing-6);
  .mypage-introduction {
    display: grid;
    gap: var(--spacing-6);
    padding-bottom: var(--spacing-8);
  }
  .mypage-meta-card {
    margin-bottom: var(--spacing-6);
    padding-inline: var(--spacing-6);
    padding-block: var(--spacing-2) var(--spacing-4);
  }
  .user-email {
    display: flex;
    gap: var(--spacing-4);
    .email-body {
      flex: 1;
    }
  }
  .verification-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding-top: var(--spacing-1);
    .icon {
      width: 16px;
      height: 16px;
    }
    &.reviewing {
      fill: var(--color-text-info);
    }
    &.verified {
      fill: var(--color-text-success);
    }
    &.unverified {
      .icon {
        fill: var(--color-text-danger);
      }
    }
  }
}