@charset "UTF-8";
/* ==========================================================================
   登録ゲートモーダル（2-3）
   <dialog> を showModal() で開く。白パネル・角丸8px・影なし（背景の幕で浮かせる）。
   ========================================================================== */
.lab-gate {
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: calc(100% - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--lab-radius-md);
  background: var(--lab-white);
  color: var(--lab-ink);
  overflow: auto;
  overscroll-behavior: contain;

  &::backdrop {
    background: rgba(34, 34, 34, .64);
  }

  & .lab-gate__panel {
    position: relative;
    padding: 48px;

    @media (max-width: 767px) {
      padding: 48px 24px 32px;
    }
  }

  & .lab-gate__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--lab-radius-sm);
    background: transparent;
    transition: background-color var(--lab-dur-fast) var(--lab-ease-out);

    &:hover {
      background: var(--lab-bg-1);
    }

    &:focus-visible {
      outline-offset: -2px;
    }
  }

  & .lab-gate__close-icon {
    position: relative;
    width: 20px;
    height: 20px;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 20px;
      height: 2px;
      background: var(--lab-ink);
    }

    &::before { transform: rotate(45deg); }
    &::after { transform: rotate(-45deg); }
  }

  & .lab-gate__state {
    display: flex;
    flex-direction: column;
    gap: 16px;

    &.lab-gate__state--done {
      align-items: center;
      gap: 16px;
      padding: 24px 0 8px;
      text-align: center;

      &:focus {
        outline: none;
      }

      & .lab-btn {
        margin-top: 8px;
      }
    }
  }

  & .lab-gate__notice {
    margin-bottom: 8px;
  }

  & .lab-gate__title {
    font-size: var(--lab-fs-h4);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    font-feature-settings: 'palt';

    @media (max-width: 767px) {
      font-size: var(--lab-fs-title);
    }
  }

  & .lab-gate__values {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    color: var(--lab-ink-3);
  }

  & .lab-gate__note {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    color: var(--lab-ink-3);
  }
}

html.is-modal-open {
  overflow: hidden;
}