* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: “Pretendard”, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
color: #e0e0e0;
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
/* 별 애니메이션 배경 */
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle 3s infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
position: relative;
z-index: 1;
}
/* 헤더 */
.main-header {
text-align: center;
padding: 40px 20px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 20px;
margin-bottom: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.main-header h1 {
font-size: 48px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
}
.main-header p {
color: #b0b0b0;
font-size: 18px;
}
/* 퀵 링크 */
.quick-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.quick-link-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 25px;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
}
.quick-link-card:hover {
transform: translateY(-5px);
border-color: rgba(102, 126, 234, 0.5);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
}
.quick-link-card .icon {
font-size: 48px;
margin-bottom: 15px;
}
.quick-link-card h3 {
color: #fff;
margin-bottom: 10px;
}
.quick-link-card p {
color: #b0b0b0;
font-size: 14px;
}
/* 렘수면 계산기 */
.calculator-section {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
}
.calculator-title {
font-size: 32px;
color: #fff;
text-align: center;
margin-bottom: 30px;
}
.calc-tabs {
display: flex;
gap: 10px;
margin-bottom: 30px;
}
.calc-tab {
flex: 1;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: #b0b0b0;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.calc-tab.active {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-color: transparent;
}
.calc-content {
display: none;
}
.calc-content.active {
display: block;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
color: #e0e0e0;
margin-bottom: 8px;
font-weight: 600;
}
.input-group input,
.input-group select {
width: 100%;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: #fff;
font-size: 16px;
}
.input-group input:focus,
.input-group select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}
.calc-button {
width: 100%;
padding: 18px;
background: linear-gradient(135deg, #667eea, #764ba2);
border: none;
border-radius: 12px;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.calc-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
.result-box {
margin-top: 30px;
padding: 30px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
border-radius: 15px;
border: 1px solid rgba(102, 126, 234, 0.3);
display: none;
}
.result-box.show {
display: block;
animation: slideIn 0.5s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.result-time {
font-size: 48px;
font-weight: bold;
text-align: center;
color: #667eea;
margin-bottom: 20px;
}
.result-details {
text-align: center;
color: #e0e0e0;
}
/* 90일 챌린지 */
.challenge-section {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
}
.challenge-header {
text-align: center;
margin-bottom: 30px;
}
.challenge-header h2 {
font-size: 32px;
color: #fff;
margin-bottom: 10px;
}
.progress-ring {
width: 200px;
height: 200px;
margin: 0 auto 20px;
position: relative;
}
.progress-ring svg {
transform: rotate(-90deg);
}
.progress-ring-circle {
stroke: rgba(255, 255, 255, 0.1);
fill: none;
stroke-width: 10;
}
.progress-ring-progress {
stroke: url(#gradient);
fill: none;
stroke-width: 10;
stroke-linecap: round;
transition: stroke-dashoffset 0.5s ease;
}
.day-counter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.day-number {
font-size: 48px;
font-weight: bold;
color: #667eea;
}
.day-label {
color: #b0b0b0;
font-size: 14px;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
margin-top: 30px;
}
.calendar-day {
aspect-ratio: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.calendar-day.completed {
background: linear-gradient(135deg, #667eea, #764ba2);
border-color: transparent;
}
.calendar-day.today {
border-color: #667eea;
box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
}
.calendar-day:hover {
transform: scale(1.1);
}
/* 로그인 프롬프트 */
.login-prompt {
text-align: center;
padding: 40px;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
border: 1px dashed rgba(255, 255, 255, 0.2);
}
.login-button {
display: inline-block;
padding: 15px 40px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
text-decoration: none;
border-radius: 10px;
font-weight: bold;
margin-top: 20px;
transition: all 0.3s ease;
}
.login-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
/* 반응형 */
@media (max-width: 768px) {
.main-header h1 {
font-size: 32px;
}
.quick-links {
grid-template-columns: 1fr;
}
.calculator-section {
padding: 20px;
}
.calc-tabs {
flex-direction: column;
}
}
수면시간 계산기
90일간의 수면 혁명을 시작하세요
💤 렘수면 계산기
4 사이클 (6시간)
5 사이클 (7.5시간) – 권장
6 사이클 (9시간)
🔒
90일 챌린지에 참여하세요
회원가입 후 나만의 수면 데이터를 기록하고 분석하세요
회원가입 / 로그인
// 별 생성
function createStars() {
const starsContainer = document.getElementById(“stars”);
for (let i = 0; i t.classList.remove(“active”));
document.querySelectorAll(“.calc-content”).forEach(c => c.classList.remove(“active”));
if (tab === “wake”) {
document.querySelectorAll(“.calc-tab”)[0].classList.add(“active”);
document.getElementById(“wake-calc”).classList.add(“active”);
} else {
document.querySelectorAll(“.calc-tab”)[1].classList.add(“active”);
document.getElementById(“sleep-calc”).classList.add(“active”);
}
}
// 취침 시간 계산
function calculateBedtime() {
const wakeTime = document.getElementById(“wake-time”).value;
const cycles = parseInt(document.getElementById(“cycles”).value);
const [hours, minutes] = wakeTime.split(“:”).map(Number);
const wakeDate = new Date();
wakeDate.setHours(hours, minutes, 0, 0);
const sleepMinutes = (cycles * 90) + 14;
const bedtime = new Date(wakeDate.getTime() – sleepMinutes * 60000);
const bedHours = bedtime.getHours().toString().padStart(2, “0”);
const bedMinutes = bedtime.getMinutes().toString().padStart(2, “0”);
document.getElementById(“wake-result-time”).textContent = bedHours + “:” + bedMinutes;
document.getElementById(“wake-result-details”).innerHTML =
“
총 수면 시간: ” + (sleepMinutes / 60).toFixed(1) + “시간
” +
“
수면 사이클: ” + cycles + “회
” +
“
💡 이 시간에 누우면 ” + wakeTime + “에 개운하게 일어날 수 있습니다!
“;
document.getElementById(“wake-result”).classList.add(“show”);
}
// 기상 시간 계산
function calculateWaketime() {
const sleepTime = document.getElementById(“sleep-time”).value;
const [hours, minutes] = sleepTime.split(“:”).map(Number);
const sleepDate = new Date();
sleepDate.setHours(hours, minutes, 0, 0);
let optionsHTML = “
권장 기상 시간
“;
optionsHTML += “
“;
for (let cycle = 4; cycle <= 6; cycle++) {
const sleepMinutes = (cycle * 90) + 14;
const wakeDate = new Date(sleepDate.getTime() + sleepMinutes * 60000);
const wakeHours = wakeDate.getHours().toString().padStart(2, "0");
const wakeMinutes = wakeDate.getMinutes().toString().padStart(2, "0");
const quality = cycle === 5 ? "추천" : cycle === 6 ? "좋음" : "최소";
const bgColor = cycle === 5 ? "rgba(102, 126, 234, 0.3)" : "rgba(255, 255, 255, 0.1)";
optionsHTML += "
“;
optionsHTML += “
” + wakeHours + “:” + wakeMinutes + “
“;
optionsHTML += “
” + cycle + ” 사이클
“;
optionsHTML += “
” + (sleepMinutes / 60).toFixed(1) + “시간
“;
optionsHTML += “
” + quality + “
“;
optionsHTML += “
“;
}
optionsHTML += “
“;
document.getElementById(“sleep-result-options”).innerHTML = optionsHTML;
document.getElementById(“sleep-result”).classList.add(“show”);
}
// 스크롤 함수
function scrollToChallenge() {
document.getElementById(“challenge”).scrollIntoView({ behavior: “smooth” });
}
function scrollToArticles() {
alert(“90개의 수면 가이드 아티클이 곧 추가됩니다!”);
}