body.is-modal-open {
  #second-step-join-btn {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

#join {
  margin-top: 13.6rem;

  .select-input__select-box,
  .email-input__domain-select-box {
    background-color: #fff;
    z-index: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-radius: 0.8rem;
    overflow-y: auto;
    
    li {
      padding: 1.2rem 1.6rem;
      font-size: 1.4rem;
      line-height: 1.5;
      color: #333;
      cursor: pointer;
      background-color: #fff;
      border-bottom: 1px solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      &:hover, &:active {
        background-color: #f9f9f9;
      }
    }
  }

  .main {
    position: relative; 
    
    .first-step-join {
      display: flex;
      justify-content: center;
      width: 100%;
      .first-step-join__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 48rem;
        width: 100%;
        padding-inline: var(--spacing-xl);
        .first-step-join__header {
          .square-checkbox-input {
            justify-content: flex-end;
          }
          .square-checkbox-input__label {
            color: var(--color-font-primary);
            font-size: var(--font-body-large-size);
            font-weight: var(--font-body-large-m-weight);
            line-height: var(--font-body-large-line-height);
            letter-spacing: var(--font-body-large-letter-spacing);
          }
        }
        .first-step-join__terms {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-lg);
          width: 100%;
          padding-block: var(--spacing-xl);
          margin-top: var(--spacing-lg);
          margin-bottom: var(--spacing-md);
          border-top: 0.1rem solid var(--color-border-primary);
          .square-checkbox-input {
            justify-content: space-between;
          }
        }
        .first-step-join__btn {
          color: var(--color-gray-400);
          background-color: var(--color-gray-500);
        }
        .first-step-join__btn--active {
          color: var(--color-white);
          background-color: var(--color-button-primary);
        }
      }
    }
    .first-step-join--hidden {
      display: none;
    }

    .second-step-join {
      display: flex;
      justify-content: center;
      width: 100%;
      .second-step-join__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 48rem;
        width: 100%;
        padding-block: var(--spacing-lg);
        padding-inline: var(--spacing-xl);

        .second-step-join__btn {
          margin-top: var(--spacing-md);
          color: var(--color-gray-400);
          background-color: var(--color-gray-500);
          position: static !important;
          z-index: auto !important;
        }
        .second-step-join__btn--active {
          color: var(--color-white);
          background-color: var(--color-button-primary);
        }

        .email-input__wrapper {
          display: flex;
          align-items: center;
          gap: 0.8rem;
        }
        .email-input__user-wrapper,
        .email-input__domain-wrapper {
          flex: 1 1 0;
          min-width: 0;
        }
        .email-input__user-wrapper input,
        .email-input__domain-wrapper input {
          width: 100%;
          box-sizing: border-box;
          line-height: 1.4;
          min-height: 3.6rem;
          padding-block: 0.8rem;
          padding-inline: 1.6rem;
          border: 0;
          outline: 0;
          background: transparent;
        }

        #subscription-path {
          box-sizing: border-box;
          width: 100%;
          padding-left: 1.6rem;
          padding-right: 4.0rem; 
          line-height: 1.4;
          min-height: 3.6rem;
          resize: none;
          overflow: hidden;   
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        #subscription-path-input {
          position: relative; 
        }

        #subscription-path-input,
        #subscription-path-input .select-input__wrapper,
        #subscription-path-input .select-input__select {
          overflow: visible; 
        }

        #subscription-path-input .select-input__select-box {
          position: absolute;
          left: 0;
          right: 0;
          top: 100%;
          z-index: 500; 
          max-height: 28rem; 
        }

        #subscription-path-input.select-input--dropup .select-input__select-box {
          top: auto;
          bottom: 100%;
          margin-bottom: 0.6rem;
          box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
        }
      }
    }
    .second-step-join--hidden {
      display: none;
    }

    .join__notice {
      margin-top: var(--spacing-md);
    }
    .join__notice-warning {
      line-height: 1.5;
      font-size: var(--font-label-small-size);
      font-weight: var(--font-label-small-weight);
      line-height: var(--font-label-small-line-height);
      letter-spacing: var(--font-label-small-letter-spacing);
      color: var(--color-warning); 
      margin: 0;
      padding: 0.4rem 1.6rem;
      word-break: keep-all;
    }

    .inicis-modal-overlay {
      display: flex;
      visibility: hidden; 
      opacity: 0;
      position: fixed; 
      top: 0; left: 0; right: 0; bottom: 0; 
      width: 100%; 
      height: 100%; 
      background: rgba(0, 0, 0, 0.6); 
      z-index: 999999; 
      flex-direction: column;
      justify-content: flex-end; 
      align-items: center;
      transition: opacity 0.3s ease, visibility 0.3s ease;

      &.is-active {
        visibility: visible;
        opacity: 1;
      }

      .inicis-modal-content {
        background: #fff;
        width: 100%;
        max-width: 480px;
        border-radius: 24px 24px 0 0;
        max-height: calc(var(--vh, 1vh) * 85); 
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
        padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 40px);
        box-shadow: 0 -10px 30px rgba(0,0,0,0.15);

        @media screen and (max-width: 768px) {
          padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 160px);
        }

        .modal-drag-area {
          width: 100%;
          padding: 12px 0;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          user-select: none;
          -webkit-user-select: none;
          
          .modal-handle {
            width: 40px; height: 4px; background: #e8e8e8;
            border-radius: 2px;
          }
        }

        .inicis-modal-header {
          padding: 0px 24px 15px; 
          text-align: left; flex-shrink: 0;
          .title { font-size: 20px; font-weight: 800; color: #111; margin: 0 0 4px 0; }
          .desc { font-size: 14px; color: #888; margin: 0; }
        }

        .inicis-modal-body {
          padding: 0 24px 15px;
          overflow-y: auto; 
          -webkit-overflow-scrolling: touch; 
          flex: 1; 

          .inicis-card-wrapper { display: flex; flex-direction: column; gap: 12px; }
          .inicis-card {
            display: flex; justify-content: space-between; align-items: center;
            padding: 18px 20px; border-radius: 12px; border: 1px solid #e8e8e8;
            background: #fff; cursor: pointer; transition: 0.2s;
            &:active { background: #f9f9f9; transform: scale(0.98); }
            &.pass { border-color: #c8e6c9; background: #f1f8e9; }
            .card-text-area { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
            .card-title { font-size: 16px; font-weight: 700; color: #222; }
            .card-desc { font-size: 14px; color: #888; font-weight: 500; }
            .card-badge { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 20px; }
            .badge-green { border: 1px solid #c8e6c9; background: #fff; color: #2e7d32; }
            .badge-gray { border: 1px solid #d9d9d9; background: #fff; color: #666; }
          }
        }

        .inicis-modal-footer {
          padding: 10px 24px 15px; 
          flex-shrink: 0;
          width: 100%;
          box-sizing: border-box;

          .inicis-modal-close-btn {
            width: 100%; 
            box-sizing: border-box;
            padding: 15px; 
            background: #f2f4f6; 
            border: none;
            border-radius: 14px; 
            color: #4e5968; 
            font-size: 15px; 
            font-weight: 700;
            cursor: pointer;
            margin: 0;
            text-align: center; 
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
    
    .inicis-modal-overlay.is-active .inicis-modal-content {
      transform: translateY(0);
    }
  }
}