<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>월정사 초파일: MZ세대와 함께한 부처님 오신 날</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans KR', sans-serif;
}
body {
background-color: #f0f2f5;
color: #333;
line-height: 1.6;
padding: 0;
margin: 0;
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
header {
background: linear-gradient(135deg, #0047AB 0%, #1E3A8A 100%);
color: white;
text-align: center;
padding: 30px 20px;
margin-bottom: 0;
position: relative;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(0, 71, 171, 0.8), rgba(30, 58, 138, 0.8)),
repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 255, 255, 0.05) 50px, rgba(255, 255, 255, 0.05) 100px),
repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 255, 255, 0.05) 50px, rgba(255, 255, 255, 0.05) 100px);
z-index: -1;
}
h1 {
font-size: 2.2rem;
margin-bottom: 10px;
font-weight: 700;
}
h2 {
font-size: 1.4rem;
margin-bottom: 20px;
font-weight: 600;
color: white;
}
.nav-bar {
background-color: #0047AB;
display: flex;
justify-content: center;
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.nav-bar a {
color: white;
text-decoration: none;
padding: 10px 20px;
margin: 0 5px;
border-radius: 5px;
transition: background-color 0.3s;
font-weight: 500;
}
.nav-bar a:hover, .nav-bar a.active {
background-color: rgba(255,255,255,0.2);
}
/* 유튜브 영상 컨테이너 */
.video-section {
background: #fff;
padding: 30px 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.video-container {
position: relative;
width: 100%;
max-width: 800px;
height: 0;
padding-bottom: 56.25%; /* 16:9 비율 */
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* 카드 뉴스 스타일 */
.card {
width: 100%;
padding: 40px;
margin: 20px 0;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
position: relative;
border-radius: 10px;
scroll-margin-top: 70px;
}
.emoji-heading {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 25px;
color: #0047AB;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.emoji {
font-size: 1.8rem;
margin: 0 5px;
vertical-align: middle;
}
.quote {
font-style: italic;
color: #666;
margin: 25px 0;
padding: 20px;
background: #f9f9f9;
border-left: 4px solid #0047AB;
border-radius: 0 5px 5px 0;
}
.highlight-text {
font-weight: 600;
color: #0047AB;
font-size: 1.2em;
margin: 20px 0;
display: flex;
align-items: center;
gap: 10px;
}
/* 활동 아이콘 */
.activities {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
margin: 30px 0;
}
.activity {
display: flex;
flex-direction: column;
align-items: center;
width: 150px;
text-align: center;
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
transition: transform 0.3s;
}
.activity:hover {
transform: translateY(-5px);
}
.activity-icon {
font-size: 2.5rem;
margin-bottom: 15px;
color: #0047AB;
}
.activity-title {
font-weight: 600;
margin-bottom: 5px;
}
/* 통계 */
.stats {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 30px 0;
justify-content: center;
}
.stat {
background: #f5f5f5;
padding: 25px;
border-radius: 10px;
flex: 1 1 200px;
text-align: center;
box-shadow: 0 3px 5px rgba(0,0,0,0.1);
max-width: 250px;
transition: transform 0.3s;
}
.stat:hover {
transform: translateY(-5px);
}
.stat-value {
font-size: 3rem;
font-weight: 700;
margin-bottom: 10px;
color: #0047AB;
}
/* 목소리 */
.voices {
background: #f5f5f5;
padding: 25px;
border-radius: 10px;
margin: 30px 0;
}
.voice {
padding: 20px;
margin-bottom: 15px;
font-style: italic;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
position: relative;
transition: transform 0.3s;
}
.voice:hover {
transform: translateX(5px);
}
.voice:before {
content: '"';
font-size: 40px;
color: #0047AB;
position: absolute;
top: -5px;
left: 5px;
opacity: 0.3;
}
/* 나눔 활동 */
.sharing-activities {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 30px 0;
justify-content: center;
}
.sharing {
background: #e8f5e9;
padding: 25px;
border-radius: 10px;
flex: 1 1 200px;
text-align: center;
box-shadow: 0 3px 5px rgba(0,0,0,0.1);
max-width: 250px;
transition: transform 0.3s;
}
.sharing:hover {
transform: translateY(-5px);
}
.sharing h4 {
margin-bottom: 15px;
color: #2e7d32;
font-size: 1.3rem;
}
.sharing-icon {
font-size: 2.5rem;
margin-bottom: 15px;
color: #2e7d32;
}
.footer-quote {
font-style: italic;
text-align: center;
margin: 30px 0;
color: #666;
padding: 25px;
background: #f9f9f9;
border-radius: 10px;
}
.final-message {
text-align: center;
margin: 0;
padding: 40px 20px;
font-style: italic;
color: white;
font-weight: 500;
font-size: 1.3rem;
background: #0047AB;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
@media (max-width: 768px) {
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.2rem;
}
.emoji-heading {
font-size: 1.8rem;
}
.nav-bar {
overflow-x: auto;
justify-content: flex-start;
padding: 10px;
}
.nav-bar a {
padding: 8px 12px;
white-space: nowrap;
margin: 0 3px;
font-size: 0.9rem;
}
.card {
padding: 20px;
}
.activities {
gap: 15px;
}
.activity {
width: 120px;
padding: 15px;
}
.stat-value {
font-size: 2.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>월정사 초파일: MZ세대와 함께한 부처님 오신 날 🌸</h1>
<h2>천년 고찰에서 펼쳐진 세대 간 축제의 현장</h2>
</header>
<!-- 네비게이션 바 -->
<div class="nav-bar">
<a href="#video">🎬 영상 보기</a>
<a href="#card1">🏮 축제의 장</a>
<a href="#card2">🔥 MZ세대 참여</a>
<a href="#card3">🙏 문화와 전통</a>
</div>
<!-- 유튜브 영상 섹션 -->
<section id="video" class="video-section">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/FRp_heALioI?si=0dKTjJHsAh02ClgL" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</section>
<!-- 카드 1: 새로운 축제의 장이 된 월정사 -->
<section id="card1" class="card">
<h3 class="emoji-heading">🏮 새로운 축제의 장이 된 월정사 🏮</h3>
<div class="quote">
"고요하던 월정사에 사람들이 가득찼습니다. 무슨 일이길래 긴 줄까지 있을까요? 오늘은 바로 부처님 오신 날."
</div>
<p>올해 초파일은 어린이 날과 겹쳐 특별했습니다. 월정사 천왕문에는 아침부터 밀려드는 발걸음으로 분주했고, 어린이부터 젊은 불자들까지 전 세대가 어우러진 축제의 장이 되었습니다. 🌈</p>
<div class="highlight-text">✨ 어린이들을 위한 다양한 체험 활동</div>
<div class="activities">
<div class="activity">
<div class="activity-icon">🌸</div>
<div class="activity-title">연꽃 만들기</div>
<div>즐거움</div>
</div>
<div class="activity">
<div class="activity-icon">🐾</div>
<div class="activity-title">동물 만나기</div>
<div>호기심</div>
</div>
<div class="activity">
<div class="activity-icon">🎨</div>
<div class="activity-title">벚꽃 페인팅</div>
<div>신남</div>
</div>
<div class="activity">
<div class="activity-icon">🎁</div>
<div class="activity-title">선물 뽑기</div>
<div>설렘</div>
</div>
<div class="activity">
<div class="activity-icon">❤️</div>
<div class="activity-title">심폐소생술</div>
<div>배움</div>
</div>
<div class="activity">
<div class="activity-icon">👶</div>
<div class="activity-title">동자승 체험</div>
<div>웃음</div>
</div>
</div>
<div class="quote" style="text-align: center; color: #e57373; font-weight: 500;">
"월정사에서 보낸 어린이 날이 절에 대한 즐거운 추억으로 남기를 바랍니다." 💫
</div>
</section>
<!-- 카드 2: SNS에서 '힙'해진 불교, MZ세대의 참여 급증 -->
<section id="card2" class="card">
<h3 class="emoji-heading">🔥 SNS에서 '힙'해진 불교 🔥</h3>
<p>올해 초파일에는 유독 젊은 얼굴들이 많았습니다. 요즘 SNS에서 '불교가 힙하다', '신기하다'며 젊은 층 사이에서 유행이라고 합니다. 📱✨</p>
<div class="highlight-text">📊 불교 트렌드, 수치로 보기</div>
<div class="stats">
<div class="stat">
<div class="stat-value">80%</div>
<div>불교방 행사 참가자 중<br>젊은 층 비율 👩🎓👨🎓</div>
</div>
<div class="stat">
<div class="stat-value">4배 ⬆️</div>
<div>예년 대비<br>사전예약자 증가</div>
</div>
</div>
<p>젊은 불자들은 손님 안내, 호두과자 굽기, 음료 나눔 등 자원봉사에 적극적으로 참여했습니다. 🙌</p>
<div class="highlight-text">🗣️ MZ세대의 목소리</div>
<div class="voices">
<div class="voice">"종교적 색채를 넘어 접근성이 용이해 편하게 다가갈 수 있어요." 🌈</div>
<div class="voice">"기본적인 마인드가 달라졌어요. 이전보다 덜 부정적으로 생각하게 됐죠." 🧘♀️</div>
<div class="voice">"명상을 시작했는데 잡생각이 사라지면서 머릿속이 깨끗해지는 걸 처음 느꼈어요." ✨</div>
</div>
<p>대학생 부스에 걸린 티셔츠형 부처님은 오늘날 젊은이들의 문화를 보여주는 상징이 되었습니다. 👕</p>
</section>
<!-- 카드 3: 종교를 넘어 문화로, 세대를 잇는 전통 -->
<section id="card3" class="card">
<h3 class="emoji-heading">🙏 종교를 넘어 문화로 🙏</h3>
<p>월정사 마당에서는 30년째 이어지는 떡 나눔 행사, 전통차와 커피 봉사, 불우이웃을 위한 성금 모금 등 나눔의 손길이 이어졌습니다. 💝</p>
<div class="highlight-text">🤲 나눔의 전통이 이어지는 월정사</div>
<div class="sharing-activities">
<div class="sharing">
<div class="sharing-icon">🍡</div>
<h4>떡 나눔</h4>
<p>30년째 이어지는 전통</p>
</div>
<div class="sharing">
<div class="sharing-icon">🍵</div>
<h4>전통차 봉사</h4>
<p>마음을 건네는 손길</p>
</div>
<div class="sharing">
<div class="sharing-icon">💰</div>
<h4>성금 모금</h4>
<p>불우이웃을 위한 마음</p>
</div>
</div>
<div class="quote">
"불교는 우리 문화에서 오래됐던 것이니까, 불교 신자든 아니든 오랫동안 잘 보존돼서 좋은 경험들이 계속 이어져 갔으면 좋겠습니다." 📜
</div>
<p>축제가 끝난 후, 월정사에는 소리로 마음을 씻는 공간이 마련되어 하루의 끝에 고요한 울림이 남았습니다. "기분이 울려요" - 편안함을 주는 체험에 방문객들은 마음의 평화를 느꼈습니다. 🔔</p>
<div class="footer-quote">
"축제가 모두 떠난 자리, 연등과 소원등만이 부처님께 어루만지시는 듯 바람에 살랑입니다. 부처님을 향한 이 마음들이 세대를 따라 조용히 이어져 가리라 믿습니다." 🏮✨
</div>
</section>
<div class="final-message">
<span>✨</span>
"내년에도 이 고요한 하늘 아래에 다시 만날 수 있기를 기원합니다."
<span>✨</span>
</div>
</div>
<script>
// 부드러운 스크롤 기능 추가
document.querySelectorAll('.nav-bar a').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
window.scrollTo({
top: targetElement.offsetTop - 60,
behavior: 'smooth'
});
// 활성 링크 표시
document.querySelectorAll('.nav-bar a').forEach(a => a.classList.remove('active'));
this.classList.add('active');
});
});
</script>
</body>
</html>