/* 랜딩페이지: 모바일 우선 반응형 (Notion iframe + 하단 고정 CTA) */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

/* 뷰포트 높이: 모바일 주소창 대응 (dvh 우선, vh 폴백) */
:root {
  --cta-height: 64px;
}

/* iframe 영역: CTA 높이 + safe-area 제외 */
.notion-wrap {
  width: 100%;
  min-height: 0;
  display: block;
  /* 모바일: 동적 뷰포트에서 CTA·safe-area 제외 (dvh = 주소창 숨김 시 높이) */
  height: calc(100vh - var(--cta-height) - env(safe-area-inset-bottom, 0px));
  height: calc(100dvh - var(--cta-height) - env(safe-area-inset-bottom, 0px));
}

.notion-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* 하단 고정 CTA — 모바일 우선 (터치 영역 48px 이상) */
.cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--cta-height);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  z-index: 1000;
}

.cta-bar #cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 14px 20px;
  background: #FEE500; /* 카카오톡 노란색 */
  color: #191919;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  transition: opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.cta-bar .cta-kakao-icon {
  flex-shrink: 0;
  display: block;
}

.cta-bar .cta-text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.25em;
}

.cta-bar .cta-sub {
  font-size: 0.8em;
  font-weight: 500;
  opacity: 0.9;
}

/* 인스타 버튼: 정사각형 (가로=세로) */
.cta-bar .cta-instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  transition: opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.cta-bar .cta-instagram svg {
  display: block;
}

.cta-bar a:hover {
  opacity: 0.9;
}

.cta-bar a:active {
  opacity: 0.85;
}

/* 태블릿 이상: 모바일 중심 유지, CTA만 약간 여유 */
@media (min-width: 480px) {
  :root {
    --cta-height: 72px;
  }

  .cta-bar #cta-link {
    max-width: 360px;
    font-size: 16px;
    padding: 14px 24px;
  }

  .cta-bar .cta-instagram {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
  }
}

/* 데스크탑: iframe 전체 가로, CTA만 최대 너비 제한 */
@media (min-width: 768px) {
  .notion-wrap {
    width: 100%;
    height: calc(100vh - var(--cta-height) - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - var(--cta-height) - env(safe-area-inset-bottom, 0px));
  }

  .cta-bar {
    max-width: 480px;
    left: 50%;
    transform: translateX(-50%);
  }

  .cta-bar #cta-link {
    max-width: 320px;
  }

  .cta-bar .cta-instagram {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
  }
}