/* ========================================================== 소우주 (Mikrokosmos) 613-709 — Coming Soon Design System & Styles ========================================================== */ /* --- Google Fonts --- 감성 텍스트: Noto Serif KR (명조) 시스템 UI: Inter (고딕) 티켓 데이터: JetBrains Mono (고정폭) ※ HTML 에서 로드 */ /* ── 디자인 토큰 ── */ :root { /* 배경: 완전 검정(#000) 금지 — 깊은 심연의 네이비 */ --bg-deep: #05050B; --bg-navy: #0B0C10; --bg-purple: #0d0a1a; /* 텍스트 */ --text-primary: #F3F4F6; /* 오프화이트/실버 */ --text-secondary: rgba(255, 255, 255, 0.55); --text-dim: rgba(255, 255, 255, 0.3); /* 5 Era 포인트 컬러 */ --era-debut: #E2E8F0; /* 은빛 */ --era-hyyh: #F472B6; /* 벚꽃 핑크 */ --era-hyyh-mint: #5EEAD4; /* 민트 */ --era-wings: #C084FC; /* 오로라 퍼플 */ --era-dynamite: #FBBF24; /* 황금 */ --era-chapter2: #6366F1; /* 딥 인디고 */ /* 글래스모피즘 */ --glass-bg: rgba(255, 255, 255, 0.04); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: 20px; /* 폰트 */ --font-serif: 'Noto Serif KR', 'Georgia', serif; --font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* 레이아웃 */ --max-width: 430px; } /* ── 리셋 & 베이스 ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); color: var(--text-primary); background: var(--bg-deep); /* 전체 스크롤 방지 — 우주 공간감 */ width: 100%; height: 100vh; height: 100dvh; overflow: hidden; display: flex; justify-content: center; align-items: center; } /* 선택 영역 색상 */ ::selection { background: rgba(192, 132, 252, 0.3); color: #fff; } /* ── 메인 컨테이너 (모바일 캔버스) ── */ .universe { position: relative; width: 100%; max-width: var(--max-width); height: 100vh; height: 100dvh; overflow: hidden; /* 네이비~퍼플 그라데이션 배경 */ background: linear-gradient( 170deg, var(--bg-deep) 0%, #0a0918 25%, #100e24 50%, #0d0820 75%, var(--bg-navy) 100% ); } /* ── 별 파티클 캔버스 (z-0) ── */ #starfield { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* ── 오로라 그라데이션 오버레이 ── */ .aurora { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.25; /* 5 Era 컬러가 느리게 흐르는 효과 */ background: radial-gradient(ellipse 60% 40% at 20% 20%, var(--era-debut), transparent), radial-gradient(ellipse 50% 50% at 80% 30%, var(--era-hyyh), transparent), radial-gradient(ellipse 55% 45% at 50% 60%, var(--era-wings), transparent), radial-gradient(ellipse 45% 35% at 30% 80%, var(--era-dynamite), transparent), radial-gradient(ellipse 50% 40% at 75% 85%, var(--era-chapter2), transparent); animation: auroraShift 25s ease-in-out infinite alternate; filter: blur(80px); } @keyframes auroraShift { 0% { transform: scale(1) translate(0, 0); opacity: 0.2; } 33% { transform: scale(1.1) translate(-3%, 5%); opacity: 0.3; } 66% { transform: scale(0.95) translate(4%, -3%); opacity: 0.22; } 100% { transform: scale(1.05) translate(-2%, 2%); opacity: 0.28; } } /* ── 노이즈 텍스처 오버레이 (아날로그 필름 감성) ── */ .noise { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 128px 128px; } /* ── 메인 콘텐츠 영역 (z-10) ── */ .content { position: relative; z-index: 10; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem; gap: 0; } /* ── 로고 & 타이틀 ── */ .logo-area { text-align: center; margin-bottom: 1.2rem; } .flight-number { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.35em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 0.8rem; } .main-title { font-family: var(--font-serif); font-size: 2rem; font-weight: 300; letter-spacing: 0.12em; color: var(--text-primary); line-height: 1.4; /* 은은한 글로우 */ text-shadow: 0 0 30px rgba(192, 132, 252, 0.15), 0 0 60px rgba(99, 102, 241, 0.08); } .main-title .accent { display: block; font-size: 0.95rem; font-family: var(--font-mono); letter-spacing: 0.5em; color: var(--text-secondary); margin-top: 0.5rem; font-weight: 400; } /* ── 타이핑 효과 오프닝 카피 ── */ .opening-copy { text-align: center; margin: 1.8rem 0 2.2rem; min-height: 5.5rem; } .opening-copy p { font-family: var(--font-serif); font-size: 0.82rem; line-height: 2; color: var(--text-secondary); letter-spacing: 0.04em; opacity: 0; transform: translateY(8px); transition: opacity 0.8s ease, transform 0.8s ease; } .opening-copy p.visible { opacity: 1; transform: translateY(0); } /* 타이핑 커서 */ .typing-cursor { display: inline-block; width: 1px; height: 1em; background: var(--era-wings); margin-left: 2px; animation: blink 1s step-end infinite; vertical-align: text-bottom; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ── 카운트다운 타이머 ── */ .countdown-section { margin-bottom: 2rem; text-align: center; } .countdown-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.3em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 0.8rem; } .countdown { display: flex; gap: 0.5rem; justify-content: center; } .countdown-item { /* 글래스모피즘 카드 */ background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: 16px; padding: 0.9rem 0.6rem 0.7rem; min-width: 62px; text-align: center; /* 미세한 인디고 빛 */ box-shadow: 0 4px 30px rgba(99, 102, 241, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .countdown-value { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; letter-spacing: 0.05em; color: var(--text-primary); line-height: 1; /* 숫자 변경 시 부드럽게 */ transition: transform 0.3s ease; } .countdown-unit { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.25em; color: var(--text-dim); text-transform: uppercase; margin-top: 0.4rem; } /* ── 5 Era 미니 행성 ── */ .era-planets { display: flex; gap: 1.2rem; justify-content: center; align-items: center; margin-bottom: 2rem; } .era-planet { position: relative; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; transition: transform 0.4s ease, box-shadow 0.4s ease; } .era-planet::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.06); /* 궤도 링 */ } /* 각 Era 색상 & 글로우 */ .era-planet[data-era="debut"] { background: radial-gradient(circle at 35% 35%, #fff, var(--era-debut)); box-shadow: 0 0 15px rgba(226, 232, 240, 0.3), 0 0 40px rgba(226, 232, 240, 0.1); } .era-planet[data-era="hyyh"] { background: radial-gradient(circle at 35% 35%, #fce4ec, var(--era-hyyh)); box-shadow: 0 0 15px rgba(244, 114, 182, 0.35), 0 0 40px rgba(244, 114, 182, 0.1); } .era-planet[data-era="wings"] { background: radial-gradient(circle at 35% 35%, #e8d5ff, var(--era-wings)); box-shadow: 0 0 15px rgba(192, 132, 252, 0.4), 0 0 40px rgba(192, 132, 252, 0.12); } .era-planet[data-era="dynamite"] { background: radial-gradient(circle at 35% 35%, #fff8dc, var(--era-dynamite)); box-shadow: 0 0 15px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.1); } .era-planet[data-era="chapter2"] { background: radial-gradient(circle at 35% 35%, #c7d2fe, var(--era-chapter2)); box-shadow: 0 0 15px rgba(99, 102, 241, 0.4), 0 0 40px rgba(99, 102, 241, 0.12); } .era-planet:hover, .era-planet:active { transform: scale(1.3); } .era-planet[data-era="debut"]:hover { box-shadow: 0 0 25px rgba(226,232,240,0.6), 0 0 60px rgba(226,232,240,0.2); } .era-planet[data-era="hyyh"]:hover { box-shadow: 0 0 25px rgba(244,114,182,0.6), 0 0 60px rgba(244,114,182,0.2); } .era-planet[data-era="wings"]:hover { box-shadow: 0 0 25px rgba(192,132,252,0.7), 0 0 60px rgba(192,132,252,0.25); } .era-planet[data-era="dynamite"]:hover { box-shadow: 0 0 25px rgba(251,191,36,0.6), 0 0 60px rgba(251,191,36,0.2); } .era-planet[data-era="chapter2"]:hover { box-shadow: 0 0 25px rgba(99,102,241,0.6), 0 0 60px rgba(99,102,241,0.2); } /* Era 이름 툴팁 */ .era-tooltip { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%) translateY(4px); font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.15em; color: var(--text-secondary); white-space: nowrap; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .era-planet:hover .era-tooltip, .era-planet:active .era-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── 하단 CTA 영역 ── */ .bottom-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 50; padding: 1.5rem 1.5rem 2.5rem; text-align: center; /* 하단 페이드 그라데이션 */ background: linear-gradient( to top, rgba(5, 5, 11, 0.95) 0%, rgba(5, 5, 11, 0.6) 50%, transparent 100% ); } .coming-soon-text { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.5em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 0.6rem; } .launch-date { font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: 0.3em; font-weight: 500; color: var(--text-primary); /* 보라빛 글로우 */ text-shadow: 0 0 20px rgba(192, 132, 252, 0.25); } .heart-icon { display: inline-block; margin-top: 0.8rem; font-size: 1rem; animation: heartPulse 2.5s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.5)); } @keyframes heartPulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.2); opacity: 1; } } /* ── 유성 (CSS 보조 — 캔버스 유성 외 추가 장식) ── */ .shooting-star { position: absolute; z-index: 1; width: 100px; height: 1px; background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.6), transparent); opacity: 0; animation: shootingStar 6s ease-in-out infinite; } .shooting-star:nth-child(1) { top: 15%; left: -10%; transform: rotate(-35deg); animation-delay: 2s; } .shooting-star:nth-child(2) { top: 40%; right: -10%; transform: rotate(-25deg); animation-delay: 8s; animation-duration: 8s; width: 70px; } .shooting-star:nth-child(3) { top: 65%; left: -5%; transform: rotate(-40deg); animation-delay: 14s; animation-duration: 7s; width: 50px; } @keyframes shootingStar { 0% { opacity: 0; transform: rotate(-35deg) translateX(0); } 5% { opacity: 0.8; } 15% { opacity: 0; transform: rotate(-35deg) translateX(400px); } 100% { opacity: 0; } } /* ── 데스크탑: 좌우 여백은 우주 배경 ── */ @media (min-width: 768px) { body { /* 데스크탑에서도 우주 배경 */ background: linear-gradient(170deg, #030308, #0a0918, #05050B); } .universe { border-left: 1px solid rgba(255, 255, 255, 0.03); border-right: 1px solid rgba(255, 255, 255, 0.03); /* 살짝 떠있는 느낌 */ box-shadow: 0 0 80px rgba(99, 102, 241, 0.04), 0 0 160px rgba(192, 132, 252, 0.02); } } /* ── 작은 모바일 보정 ── */ @media (max-height: 667px) { .main-title { font-size: 1.6rem; } .opening-copy { margin: 1.2rem 0 1.5rem; min-height: 4.5rem; } .opening-copy p { font-size: 0.75rem; } .countdown-item { padding: 0.7rem 0.5rem 0.6rem; min-width: 54px; } .countdown-value { font-size: 1.3rem; } .era-planet { width: 26px; height: 26px; } } /* ── 페이드인 진입 애니메이션 ── */ .fade-in { opacity: 0; transform: translateY(15px); animation: fadeInUp 1s ease forwards; } .fade-in-delay-1 { animation-delay: 0.3s; } .fade-in-delay-2 { animation-delay: 0.8s; } .fade-in-delay-3 { animation-delay: 1.5s; } .fade-in-delay-4 { animation-delay: 2.2s; } .fade-in-delay-5 { animation-delay: 2.8s; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }