/* ============================================================
   KFortunes — "Nova" Design System (shared)
   Dark luxe + single gold accent. No purple, no neon, no #000.
   Pairs with: Tailwind CDN + Pretendard + Outfit + Cormorant + Iconify Solar.
   Canonical reference page: index.html
   ============================================================ */

:root { color-scheme: dark;
  --ink:#0B0B0D; --ink2:#111114; --surface:#17171C;
  --line:rgba(236,234,228,0.09); --cream:#ECEAE4; --muted:#9C988C;
  --gold:#D7B26B; --goldhi:#EAD09A; --golddim:#8C7438;
  --wood:#5FB87A; --fire:#E07B5A; --earth:#D9A441; --metal:#C9CBD2; --water:#5AA6E0;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--ink); color:var(--cream); font-family:'Outfit','Pretendard',system-ui,sans-serif; -webkit-font-smoothing:antialiased; margin:0; }

.font-display { font-family:'Outfit',sans-serif; }
.font-serif-accent { font-family:'Cormorant Garamond',Georgia,serif; }
.keep-all { word-break:keep-all; }
.ease-nova { transition-timing-function:cubic-bezier(0.16,1,0.3,1); }
.gold-text { background:linear-gradient(180deg,var(--goldhi),var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
iconify-icon { display:inline-block; vertical-align:-0.125em; }

/* ---- Backgrounds: gradient mesh + grain ---- */
.mesh { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.mesh::before, .mesh::after { content:''; position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.mesh::before { width:55vw; height:55vw; top:-18vw; right:-12vw; background:radial-gradient(circle, rgba(215,178,107,0.16), transparent 60%); animation:drift1 22s ease-in-out infinite; }
.mesh::after  { width:48vw; height:48vw; bottom:-16vw; left:-12vw; background:radial-gradient(circle, rgba(140,116,56,0.14), transparent 60%); animation:drift2 26s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-3vw,4vh)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(4vw,-3vh)} }
.grain { position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.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.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- Glass + double-bezel cards ---- */
.glass { background:rgba(236,234,228,0.04); border:1px solid rgba(236,234,228,0.09); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.bezel { background:rgba(236,234,228,0.05); border:1px solid rgba(236,234,228,0.10); border-radius:1.9rem; padding:.4rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 60px -30px rgba(0,0,0,0.8); }
.bezel-core { background:linear-gradient(180deg,#15151A,#101014); border:1px solid rgba(236,234,228,0.06); border-radius:1.55rem; box-shadow: inset 0 1px 1px rgba(255,255,255,0.05); }

/* ---- Pill CTAs (magnetic hover) ---- */
.pill { display:inline-flex; align-items:center; gap:.6rem; border-radius:9999px; padding:.95rem 1.6rem; font-weight:600; cursor:pointer; text-decoration:none; transition:transform .5s, box-shadow .5s, border-color .5s; transition-timing-function:cubic-bezier(0.16,1,0.3,1); }
.pill-gold { background:linear-gradient(180deg,#E7CD92,var(--gold)); color:#241B07; box-shadow:0 14px 30px -12px rgba(215,178,107,0.5); border:none; }
.pill-gold:hover { transform:scale(1.03) translateY(-1px); box-shadow:0 20px 44px -14px rgba(215,178,107,0.6); }
.pill-ghost { border:1px solid rgba(236,234,228,0.16); color:var(--cream); background:transparent; }
.pill-ghost:hover { transform:scale(1.02); border-color:rgba(215,178,107,0.5); }
.pill .ico { display:grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:9999px; background:rgba(0,0,0,0.10); transition:transform .5s cubic-bezier(0.16,1,0.3,1); }
.pill:hover .ico { transform:translateX(3px); }

/* ---- Scroll reveal + perpetual motion ---- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s, transform .8s; transition-timing-function:cubic-bezier(0.16,1,0.3,1); transition-delay:calc(var(--i,0)*80ms); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal{opacity:1;transform:none;transition:none} .floaty,.orbit,.marquee-track,.mesh::before,.mesh::after{animation:none} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.floaty { animation:float 6s ease-in-out infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.orbit { animation:spin 40s linear infinite; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-track { display:flex; width:max-content; animation:marquee 38s linear infinite; }

/* ---- Form controls ---- */
.nv-select, .nv-input { width:100%; background:#0E0E12; border:1px solid rgba(236,234,228,0.12); color:var(--cream); border-radius:.85rem; padding:.8rem .9rem; font-size:.95rem; outline:none; transition:border-color .3s; }
.nv-select:focus, .nv-input:focus { border-color:rgba(215,178,107,0.6); }
.gender-btn { display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.8rem; border-radius:.85rem; border:1px solid rgba(236,234,228,0.12); background:#0E0E12; color:#C9C6BC; cursor:pointer; transition:all .3s cubic-bezier(0.16,1,0.3,1); font-weight:500; }
.gender-btn:hover { border-color:rgba(215,178,107,0.4); }
.gender-btn.selected { border-color:var(--gold); background:rgba(215,178,107,0.12); color:var(--goldhi); }
.form-error, #form-error, #compatibility-form-error { color:#FCA5A5; background:rgba(239,68,68,0.10); border:1px solid rgba(239,68,68,0.20); border-radius:.6rem; padding:.6rem .8rem; font-size:.9rem; }

/* ---- Nav ---- */
header.nav { position:fixed; top:0; left:0; right:0; z-index:40; transition:all .4s cubic-bezier(0.16,1,0.3,1); }
header.nav.scrolled .nav-inner { background:rgba(11,11,13,0.72); border-color:rgba(236,234,228,0.10); }
.nav-inner { transition:all .4s cubic-bezier(0.16,1,0.3,1); border:1px solid transparent; }
.navlink { color:#B9B6AC; font-size:.9rem; transition:color .25s; text-decoration:none; }
.navlink:hover, .navlink.active { color:var(--goldhi); }
.mobile-nav-overlay { position:fixed; inset:0; z-index:50; background:rgba(11,11,13,0.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }
.mobile-nav-overlay.show { opacity:1; visibility:visible; }
.mobile-nav-overlay a { font-size:1.5rem; color:var(--cream); font-weight:600; text-decoration:none; }
.hamburger-btn { display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem; }
.hamburger-btn span { width:24px; height:2px; background:var(--cream); border-radius:2px; transition:.3s; }
.hamburger-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2){ opacity:0; }
.hamburger-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.lang-switcher select { background:#0E0E12; color:#C9C6BC; border:1px solid rgba(236,234,228,0.12); border-radius:9999px; padding:.3rem .7rem; font-size:.8rem; }

/* ---- Editorial / article prose (blog, element, saju, stars, policy) ---- */
.nova-prose { color:#CFCCC3; line-height:1.85; font-size:1.05rem; }
.nova-prose > * + * { margin-top:1.1rem; }
.nova-prose h2 { font-family:'Outfit',sans-serif; font-weight:700; font-size:1.9rem; letter-spacing:-0.01em; color:var(--cream); margin-top:2.6rem; }
.nova-prose h3 { font-family:'Outfit',sans-serif; font-weight:600; font-size:1.35rem; color:var(--cream); margin-top:1.8rem; }
.nova-prose a { color:var(--goldhi); text-decoration:underline; text-underline-offset:3px; }
.nova-prose strong { color:var(--cream); }
.nova-prose ul, .nova-prose ol { padding-left:1.3rem; }
.nova-prose li { margin-top:.5rem; }
.nova-prose blockquote { border-left:2px solid var(--gold); padding-left:1rem; color:#B9B6AC; font-style:italic; }
.nova-prose img { border-radius:1rem; }
.nova-prose table { width:100%; border-collapse:collapse; }
.nova-prose th, .nova-prose td { border:1px solid var(--line); padding:.6rem .8rem; text-align:left; }
.nova-prose th { background:rgba(236,234,228,0.04); color:var(--cream); }

/* Eyebrow tag */
.eyebrow { display:inline-flex; align-items:center; gap:.4rem; border-radius:9999px; padding:.25rem .75rem; font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); border:1px solid rgba(215,178,107,0.3); background:rgba(215,178,107,0.06); }

/* ---- Saju result components (consumed by app.js displayResult markup) ---- */
.pillar { text-align:center; padding:1rem .5rem; border:1px solid var(--line); border-radius:1rem; background:rgba(236,234,228,0.03); }
.pillar-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.pillar-korean { font-size:.9rem; color:var(--cream); margin-top:.35rem; }
.pillar-animal { font-size:.75rem; color:var(--gold); margin-top:.2rem; }
.element-bar-container { margin-bottom:.8rem; }
.element-label { display:flex; justify-content:space-between; font-size:.85rem; color:var(--muted); margin-bottom:.35rem; }
.element-bar { height:8px; border-radius:6px; background:rgba(236,234,228,0.06); overflow:hidden; }
.element-bar-fill { height:100%; border-radius:6px; transition:width 1s cubic-bezier(0.16,1,0.3,1); }
.tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.tag { display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .75rem; border-radius:9999px; font-size:.8rem; background:rgba(236,234,228,0.05); border:1px solid var(--line); color:var(--cream); }

/* ---- Compatibility score circle (consumed by app.js) ---- */
.score-circle { position:relative; width:200px; height:200px; margin:0 auto; }
.score-circle svg { transform:rotate(-90deg); }
.score-circle-bg { fill:none; stroke:rgba(236,234,228,0.08); stroke-width:14; }
.score-circle-fill { fill:none; stroke-width:14; stroke-linecap:round; transition:stroke-dasharray 1.2s cubic-bezier(0.16,1,0.3,1); }
.score-value { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.score-value .number { font-family:'Outfit',sans-serif; font-weight:800; font-size:2.4rem; }

/* ---- Share modal ---- */
.share-modal { position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.share-modal.show { display:flex; }

/* ---- Utility ---- */
.container-nova { max-width:80rem; margin:0 auto; padding-left:1rem; padding-right:1rem; }
@keyframes fadeInUp { from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translate(-50%,0)} }
@keyframes fadeOut { to{opacity:0} }