:root {
  --maxw: 1200px;
  --g: 16px;
  --bg: #ffffff;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: "Noto Sans KR", Pretendard, Arial, sans-serif;
  line-height: 1.6;
}

.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* 이미지 레이아웃 */
.image-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--g);
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* 유튜브 */
.video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 버튼 이미지 */
a.cta-schedule img {
  width: 100%; /* ✅ 다른 이미지와 동일한 폭 */
  height: auto;
  display: block;
  margin: 50px auto 80px auto; /* 위쪽 여백 살짝 */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.cta-schedule img:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.2);
}

/* 반응형 분기 */
.pc-only { display: block; }
.mo-only { display: none; }

@media (max-width: 768px) {
  .pc-only { display: none; }
  .mo-only { display: block; }
  a.cta-schedule img {
    width: 100%;
    margin: 40px auto 60px auto;
  }
}