:root{--bg:#0f0a1f;--bg2:#1a1033;--ink:#f6f2ff;--mute:#b9b0d6;--pink:#ff4fa3;--cyan:#3ef0ff;--lime:#b6ff5c;--gold:#ffd166;--card:#1f1540;--r:22px;
--font:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--cyan)}img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
header.site{position:sticky;top:0;z-index:20;background:rgba(15,10,31,.75);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.2rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.logo i{width:30px;height:30px;border-radius:9px;background:conic-gradient(from 200deg,var(--pink),var(--gold),var(--lime),var(--cyan),var(--pink));display:grid;place-items:center;font-style:normal;transform:rotate(-8deg)}
nav a{color:var(--mute);text-decoration:none;margin-left:20px;font-weight:700;font-size:.95rem}
nav a:hover,nav a[aria-current]{color:var(--ink)}
.hero{position:relative;overflow:hidden;padding:110px 0 120px;background:radial-gradient(60% 80% at 15% 20%,#ff4fa355,transparent 60%),radial-gradient(50% 70% at 85% 30%,#3ef0ff44,transparent 60%),radial-gradient(60% 60% at 50% 110%,#b6ff5c33,transparent 60%),linear-gradient(160deg,#1a0f3a,#0f0a1f)}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.08;margin:0 0 18px;font-weight:900;letter-spacing:-.04em}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--pink),var(--gold),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:1.15rem;color:var(--mute);max-width:560px}
.chip{display:inline-block;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);font-weight:800;font-size:.85rem;margin-bottom:18px}
.btn{display:inline-block;margin-top:22px;padding:14px 26px;border-radius:99px;font-weight:900;text-decoration:none;color:#14092b;background:linear-gradient(90deg,var(--gold),var(--pink));box-shadow:0 8px 30px #ff4fa366;transition:transform .2s}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.float{position:absolute;inset:0;pointer-events:none}
.float span{position:absolute;font-size:2.6rem;animation:bob 6s ease-in-out infinite;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.hw{position:absolute;width:58px;height:88px;border-radius:8px;background:#e8322f;border:3px solid #fff3;animation:bob 7s ease-in-out infinite;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.hw::after{content:"";position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle,#ffd166 30%,transparent 32%),radial-gradient(circle at 50% 80%,#111 40%,transparent 42%)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-18px) rotate(calc(var(--r,0deg) + 6deg))}}
section{padding:80px 0}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:900;letter-spacing:-.03em;margin:0 0 10px}
.sub{color:var(--mute);margin:0 0 36px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:26px;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 18px 40px rgba(0,0,0,.45);border-color:var(--cyan)}
.card .ic{font-size:2rem}.card h3{margin:10px 0 6px;font-size:1.2rem}.card p{color:var(--mute);margin:0}
.show{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;border-radius:32px;padding:40px;background:linear-gradient(135deg,#3a1460,#1b2a6b 60%,#0e3b4a);border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden}
.show:hover{border-color:var(--gold)}
.show .tags span{display:inline-block;margin:0 6px 6px 0;padding:4px 12px;border-radius:99px;font-size:.8rem;font-weight:800;background:rgba(255,255,255,.1)}
.age{background:#e8322f!important}
.zodiac{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.zodiac div{aspect-ratio:1;border-radius:18px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:2rem;transition:transform .2s,background .2s}
.zodiac div:hover{transform:scale(1.12) rotate(-6deg);background:rgba(255,209,102,.25)}
footer.site{border-top:1px solid rgba(255,255,255,.08);padding:36px 0;color:var(--mute);font-size:.88rem;background:#0b0718}
footer.site a{color:var(--mute);margin-right:16px}footer.site b{color:var(--ink)}
/* policy pages */
.policy{background:#faf8ff;color:#221a3a}
.policy main{max-width:820px;margin:0 auto;padding:56px 20px 80px}
.policy h1{font-size:2rem;font-weight:900;letter-spacing:-.03em;margin:0 0 6px}
.policy h2{font-size:1.25rem;margin:36px 0 8px}
.policy .meta{color:#6b6288;font-size:.9rem}
.policy a{color:#7a2fd0}
.policy table{border-collapse:collapse;width:100%;font-size:.92rem}.policy td,.policy th{border:1px solid #ddd6ee;padding:8px 10px;text-align:left;vertical-align:top}.policy th{background:#f0ebfb}
.policy .band{height:6px;background:linear-gradient(90deg,var(--pink),var(--gold),var(--lime),var(--cyan))}
@media (max-width:760px){.show{grid-template-columns:1fr;padding:26px}nav a{margin-left:12px;font-size:.85rem}.hero{padding:80px 0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}