/* 이용수칙 동의 모달 — views/reservation/include/modal/usageRulesAgreementModal.jsp
   프레임(스크롤·비활성 버튼·닫기)은 modal.css가 이미 준다. 여기서는 폭·여백과 예외 하나만 다룬다. */
.modal.usage-rules-agreement {
  .modal-popup {
    width: 100%;
    max-width: 1100px;
  }

  .popup-content {
    padding: var(--padding);

    /* .popup-content는 flex column이라 자식이 눌려 들어간다. 눌리면 scrollHeight가 clientHeight와
       같아져 스크롤이 안 생기고 아래가 잘린다(모바일에서 실제로 겪은 문제). */
    > * {
      flex-shrink: 0;
    }

    /* 페이지에서 include한 조각의 바깥 여백은 모달 패딩과 겹친다. */
    .sect {
      margin: 0;
      padding: 0;
    }
    .head {
      padding: 0 0 1.5em;
    }
  }

  /* 본문 맨 끝의 동의 확인. 스크롤을 내려야 눈에 들어온다. */
  .rules-agree-check {
    margin-top: 24px;
    padding: 16px 20px;
    background-color: var(--gray-pale);
    border-radius: 12px;
    outline: 2px solid transparent;
    outline-offset: 2px;

    label {
      font-weight: bold;
    }
  }

  /* 스크롤은 다 됐는데 체크만 안 한 채 '동의'를 누른 경우 — 어디를 봐야 하는지 잠깐 알린다. */
  .rules-agree-check.nudge {
    animation: usage-rules-nudge 1.2s ease-out;
  }

  /* 조건을 못 채운 '동의'는 비활성으로 보이되 클릭은 받는다 — 누르면 맨 아래로 데려가거나 체크를 강조한다.
     modal.css의 a.disabled는 pointer-events:none이라 이 모달에서만 푼다. */
  .btn-set a.submit.disabled {
    pointer-events: auto;
    cursor: pointer;
  }
}

@keyframes usage-rules-nudge {
  0%,
  100% {
    outline-color: transparent;
  }
  20%,
  60% {
    outline-color: var(--main);
  }
}

@media (max-width: 812px) {
  .modal.usage-rules-agreement .popup-content {
    padding: 20px;
  }
}