/* ==========================================================================
   masterkey-gate-modals.css — 학습 메뉴 권한 모달 (로그인 안내 / 구매 안내)
   2026-05-13 개편 3차: /preview 잠금 레이어 대체
   - 톤: 대문(home-door) 베이지 #F8F2E5, 코랄 #993C1D과 일관성
   - 모든 셀렉터에 .mk-gate-modal prefix로 격리 (다른 화면 무영향)
   ========================================================================== */

.mk-gate-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

.mk-gate-modal[style*="display:none"] {
  pointer-events: none;
}

/* 백드롭 — 화면은 선명하게 보이되 조작만 막는 약한 딤 */
.mk-gate-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35, 28, 18, 0.24);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: mkGateFadeIn 0.22s ease-out;
}

/* 패널 — 카드 */
.mk-gate-modal__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #FDFAF3;
  border-radius: 20px;
  padding: 36px 32px 28px;
  box-shadow:
    0 10px 30px rgba(74, 51, 30, 0.18),
    0 30px 60px rgba(74, 51, 30, 0.12);
  text-align: center;
  animation: mkGatePop 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  color: #3A332A;
}

/* 닫기 X 버튼 */
.mk-gate-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: #8B7B5E;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.mk-gate-modal__close:hover {
  background: rgba(74, 51, 30, 0.06);
  color: #3A332A;
}
.mk-gate-modal__close svg {
  width: 18px;
  height: 18px;
}

/* 상단 원형 아이콘 */
.mk-gate-modal__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk-gate-modal__icon svg {
  width: 32px;
  height: 32px;
}
.mk-gate-modal__icon--login {
  background: #F5DBC7;
  color: #993C1D;
}
.mk-gate-modal__icon--purchase {
  background: #DCEDE3;
  color: #0F6E56;
}

/* 타이틀 */
.mk-gate-modal__title {
  font-size: 22px;
  font-weight: 600;
  color: #3A332A;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* 본문 */
.mk-gate-modal__body {
  font-size: 18px;
  line-height: 1.6;
  color: #6B6357;
  margin: 0 0 28px;
  word-break: keep-all;
  text-align: center;
}
.mk-gate-modal__body strong {
  color: #3A332A;
  font-weight: 600;
}

/* 액션 버튼 영역 */
.mk-gate-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 공통 버튼 */
.mk-gate-modal__btn {
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mk-gate-modal__btn:hover {
  transform: translateY(-1px);
}
.mk-gate-modal__btn:active {
  transform: translateY(0);
}

/* 1차 CTA — nav teal과 톤 통일 (회의안 후속: 색상 일관성) */
.mk-gate-modal__btn--primary {
  background: #1F5F5B;
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(31, 95, 91, 0.24);
}
.mk-gate-modal__btn--primary:hover {
  background: #174845;
  box-shadow: 0 8px 20px rgba(31, 95, 91, 0.30);
}

/* 2차 CTA — 부드러운 베이지 (프로그램 소개 보기) */
.mk-gate-modal__btn--soft {
  background: #F0E6D2;
  color: #3A332A;
}
.mk-gate-modal__btn--soft:hover {
  background: #E5D8BC;
}

/* 3차 CTA — 텍스트만 (닫기, 나중에) */
.mk-gate-modal__btn--ghost {
  background: transparent;
  color: #8B7B5E;
  min-height: 40px;
  font-size: 14px;
  font-weight: 500;
}
.mk-gate-modal__btn--ghost:hover {
  color: #3A332A;
  background: rgba(74, 51, 30, 0.04);
}

/* 모바일 */
@media (max-width: 480px) {
  .mk-gate-modal__panel {
    padding: 30px 24px 22px;
    max-width: 100%;
  }
  .mk-gate-modal__title {
    font-size: 19px;
  }
  .mk-gate-modal__body {
    font-size: 16px;
    margin-bottom: 22px;
  }
}

/* 애니메이션 */
@keyframes mkGateFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mkGatePop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}