<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>수비학 운세 - 1972년 3월 2일</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&family=Song+Myung&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #e2e8f0;
}
.serif-font {
font-family: 'Song Myung', serif;
}
.card-gradient {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.number-glow {
text-shadow: 0 0 20px rgba(129, 140, 248, 0.6);
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<div class="max-w-3xl w-full">
<!-- Header -->
<header class="text-center mb-10">
<h1 class="text-4xl md:text-5xl font-bold serif-font text-indigo-300 mb-2">수비학 운세 분석</h1>
<p class="text-slate-400">Numerology Life Path Report</p>
</header>
<!-- Input Section (Pre-filled) -->
<div class="card-gradient rounded-2xl p-6 md:p-8 mb-8 shadow-2xl">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
<div>
<label class="block text-sm text-slate-400 mb-1">양력 생년월일</label>
<input type="date" id="birthDate" value="1972-03-02"
class="w-full bg-slate-800 border border-slate-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-indigo-500 transition-colors">
</div>
<div class="flex items-center space-x-2 md:pt-6">
<span class="text-slate-400 text-sm">참조 음력:</span>
<span class="text-indigo-200 font-medium">1972년 1월 17일</span>
</div>
</div>
<button onclick="calculateNumerology()" class="w-full mt-6 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition-all transform hover:scale-[1.01] shadow-lg">
다시 분석하기
</button>
</div>
<!-- Result Section -->
<div id="resultArea" class="space-y-6 animate-fade-in">
<!-- Main Number Card -->
<div class="card-gradient rounded-2xl p-8 text-center relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
<h2 class="text-xl text-slate-300 mb-6">당신의 생애수 (Life Path Number)</h2>
<div class="flex justify-center mb-6">
<div class="w-32 h-32 rounded-full border-4 border-indigo-500 flex items-center justify-center bg-slate-800 shadow-[0_0_30px_rgba(99,102,241,0.3)]">
<span id="lifePathNumber" class="text-6xl font-bold text-white number-glow">6</span>
</div>
</div>
<h3 id="keywordTitle" class="text-2xl md:text-3xl font-bold text-white mb-2 serif-font">조화와 책임의 수호자</h3>
<p id="keywords" class="text-indigo-300 mb-6">#봉사 #가족 #책임감 #예술적 #치유</p>
</div>
<!-- Detail Analysis -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Personality -->
<div class="card-gradient rounded-xl p-6">
<h4 class="text-lg font-bold text-indigo-200 mb-4 border-b border-slate-700 pb-2">💡 성격과 기질</h4>
<p id="personalityText" class="text-slate-300 leading-relaxed text-sm md:text-base">
숫자 6은 수비학에서 가장 조화롭고 안정적인 숫자 중 하나입니다. 당신은 타고난 양육자이자 보호자입니다. 타인을 돌보고 책임을 다하는 것에서 삶의 보람을 느끼며, 가족과 공동체의 평화를 무엇보다 중요시합니다. 예술적인 감각이 뛰어나고 아름다움을 사랑하는 성향이 있습니다.
</p>
</div>
<!-- Strengths & Weaknesses -->
<div class="card-gradient rounded-xl p-6">
<h4 class="text-lg font-bold text-pink-200 mb-4 border-b border-slate-700 pb-2">⚖️ 장점과 주의점</h4>
<div class="space-y-4">
<div>
<span class="text-xs font-bold text-green-400 bg-green-400/10 px-2 py-1 rounded">장점</span>
<p id="strengthText" class="mt-1 text-slate-300 text-sm">신뢰할 수 있음, 동정심이 많음, 정의로움, 가정적임.</p>
</div>
<div>
<span class="text-xs font-bold text-red-400 bg-red-400/10 px-2 py-1 rounded">주의점</span>
<p id="weaknessText" class="mt-1 text-slate-300 text-sm">과도한 희생, 타인의 문제에 지나친 간섭, 완벽주의적 성향으로 인한 스트레스.</p>
</div>
</div>
</div>
</div>
<!-- Advice -->
<div class="card-gradient rounded-xl p-6 border-l-4 border-yellow-500">
<h4 class="text-lg font-bold text-yellow-100 mb-2">🌟 인생의 조언</h4>
<p id="adviceText" class="text-slate-300 leading-relaxed italic">
"모든 짐을 혼자 짊어지려 하지 마세요. 당신 자신을 돌보는 것이 곧 타인을 더 잘 돌볼 수 있는 길입니다."
</p>
</div>
</div>
</div>
<script>
const numerologyData = {
1: {
title: "개척자와 리더",
keywords: "#독립심 #창조 #리더십 #야망",
personality: "당신은 타고난 리더입니다. 독립적이고 창의적이며, 남들이 가지 않은 길을 개척하는 것을 두려워하지 않습니다. 목표 지향적이고 결단력이 있습니다.",
strength: "추진력, 용기, 혁신적인 사고, 자립심.",
weakness: "독선적일 수 있음, 고집, 협동심 부족.",
advice: "남의 의견을 경청하는 법을 배우면 더 훌륭한 리더가 될 수 있습니다."
},
2: {
title: "조화와 평화의 중재자",
keywords: "#협력 #섬세함 #외교 #직관",
personality: "당신은 평화를 사랑하고 갈등을 싫어합니다. 뛰어난 직관과 섬세한 감수성을 지니고 있으며, 타인의 감정을 잘 이해하고 배려합니다.",
strength: "협동심, 배려, 외교적 수완, 인내심.",
weakness: "지나친 예민함, 우유부단, 의존적 성향.",
advice: "자신의 감정을 솔직하게 표현하고 거절하는 법을 배우세요."
},
3: {
title: "창의적인 예술가",
keywords: "#표현 #낙천적 #사교성 #예술",
personality: "당신은 삶의 기쁨을 전파하는 사람입니다. 언어 감각과 예술적 재능이 뛰어나며, 주변 사람들을 즐겁게 만드는 매력이 있습니다.",
strength: "창의력, 유머 감각, 친화력, 긍정적인 에너지.",
weakness: "집중력 부족, 감정 기복, 무책임함.",
advice: "재능을 낭비하지 않도록 한 가지 목표에 집중하는 훈련이 필요합니다."
},
4: {
title: "성실한 건축가",
keywords: "#질서 #안정 #노력 #실용성",
personality: "당신은 튼튼한 기초를 쌓는 사람입니다. 현실적이고 논리적이며, 계획한 일은 꾸준히 해내는 성실함을 가지고 있습니다. 질서와 규칙을 중요시합니다.",
strength: "성실함, 책임감, 조직력, 신뢰성.",
weakness: "융통성 부족, 보수적, 변화에 대한 두려움.",
advice: "가끔은 계획에서 벗어나 유연하게 삶을 즐기는 여유를 가지세요."
},
5: {
title: "자유로운 모험가",
keywords: "#자유 #변화 #호기심 #다재다능",
personality: "당신은 구속받기를 싫어하는 자유로운 영혼입니다. 호기심이 왕성하고 새로운 경험을 추구하며, 변화에 빠르게 적응합니다.",
strength: "적응력, 다재다능함, 모험심, 설득력.",
weakness: "충동적, 산만함, 무책임, 쉽게 실증냄.",
advice: "진정한 자유는 스스로에 대한 규율 안에서 완성됨을 기억하세요."
},
6: {
title: "조화와 책임의 수호자",
keywords: "#봉사 #가족 #책임감 #치유",
personality: "숫자 6은 수비학에서 가장 조화롭고 안정적인 숫자 중 하나입니다. 당신은 타고난 양육자이자 보호자입니다. 타인을 돌보고 책임을 다하는 것에서 삶의 보람을 느끼며, 가족과 공동체의 평화를 무엇보다 중요시합니다. 예술적인 감각이 뛰어나고 아름다움을 사랑하는 성향이 있습니다.",
strength: "신뢰할 수 있음, 동정심이 많음, 정의로움, 가정적임.",
weakness: "과도한 희생, 타인의 문제에 지나친 간섭, 완벽주의적 성향으로 인한 스트레스.",
advice: "모든 짐을 혼자 짊어지려 하지 마세요. 당신 자신을 돌보는 것이 곧 타인을 더 잘 돌볼 수 있는 길입니다."
},
7: {
title: "지혜로운 탐구자",
keywords: "#분석 #철학 #신비 #고독",
personality: "당신은 진리를 탐구하는 사상가입니다. 겉으로 보이는 것보다 내면의 의미를 중요하게 생각하며, 혼자만의 시간을 통해 에너지를 충전합니다.",
strength: "분석력, 통찰력, 완벽주의, 지적 호기심.",
weakness: "냉소적, 사회적 고립, 감정 표현 서툼.",
advice: "세상과 소통하며 당신의 지혜를 나누는 것이 성장의 열쇠입니다."
},
8: {
title: "권위와 풍요의 지도자",
keywords: "#성공 #권력 #물질 #조직",
personality: "당신은 목표를 현실로 만드는 능력이 탁월합니다. 비즈니스 감각이 뛰어나고 조직을 이끄는 힘이 있으며, 물질적인 성공을 중요시합니다.",
strength: "추진력, 결단력, 관리 능력, 대범함.",
weakness: "물질 만능주의, 권위적, 일 중독.",
advice: "물질적인 성공과 내면의 평화 사이에서 균형을 잃지 마세요."
},
9: {
title: "인류애를 지닌 박애주의자",
keywords: "#완성 #자비 #이상주의 #봉사",
personality: "당신은 넓은 마음을 가진 이상주의자입니다. 모든 사람을 포용하려는 자비심이 있으며, 세상을 더 나은 곳으로 만들고자 하는 사명감을 느낍니다.",
strength: "포용력, 희생정신, 예술성, 관대함.",
weakness: "현실 감각 부족, 감상적, 남에게 이용당하기 쉬움.",
advice: "과거에 얽매이지 말고 놓아주는 연습을 통해 진정한 완성을 이루세요."
}
};
function calculateLifePathNumber(dateString) {
const date = new Date(dateString);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
let total = year + month + day; // 1972 + 3 + 2 = 1977
// 더 정확한 수비학 계산 (각 자릿수를 계속 더함)
// 방법: 각 숫자를 문자열로 나열 후 합산 (1+9+7+2 + 0+3 + 0+2)
let numStr = "" + year + month + day;
let sum = 0;
// 1단계 합산
for(let char of numStr) {
sum += parseInt(char);
}
// 한 자리(또는 마스터 넘버)가 될 때까지 반복
while (sum > 9 && sum !== 11 && sum !== 22 && sum !== 33) {
let tempSum = 0;
let sumStr = sum.toString();
for(let char of sumStr) {
tempSum += parseInt(char);
}
sum = tempSum;
}
return sum;
}
function calculateNumerology() {
const dateInput = document.getElementById('birthDate').value;
if (!dateInput) return;
const number = calculateLifePathNumber(dateInput);
const data = numerologyData[number] || numerologyData[parseInt(number.toString()[0]) + parseInt(number.toString()[1])]; // 마스터 넘버 데이터가 없으면 환원
// Update UI
document.getElementById('lifePathNumber').textContent = number;
// 데이터 매핑 (기본적으로 1-9만 구현, 마스터 넘버 발생 시 합산하여 처리하거나 별도 로직 추가 가능)
// 여기서는 심플하게 1-9 매핑. (11->2, 22->4, 33->6의 성향을 강하게 띰)
let displayData = data;
if (!displayData) {
// 예외 처리 (혹시 모를 마스터 넘버 처리)
if(number == 11) displayData = numerologyData[2];
else if(number == 22) displayData = numerologyData[4];
else if(number == 33) displayData = numerologyData[6];
else displayData = numerologyData[6]; // Fallback
}
document.getElementById('keywordTitle').textContent = displayData.title;
document.getElementById('keywords').textContent = displayData.keywords;
document.getElementById('personalityText').textContent = displayData.personality;
document.getElementById('strengthText').textContent = displayData.strength;
document.getElementById('weaknessText').textContent = displayData.weakness;
document.getElementById('adviceText').textContent = `"${displayData.advice}"`;
}
// 초기 실행 (1972-03-02)
window.onload = calculateNumerology;
</script>
</body>
</html>