:root{
  --bg:#f7f9fc;
  --card:#ffffff;
  --text:#15213b;
  --muted:#6d7890;
  --line:#e7ebf2;
  --primary:#1769e0;
  --accent:#ff7a1a;
  --green:#19a55b;
  --purple:#7a45e5;
  --shadow:0 8px 24px rgba(24,40,80,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(1040px,92vw);margin:0 auto}
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  min-height:66px;gap:18px;
}
.brand{font-size:1.35rem;font-weight:900;white-space:nowrap}
.brand .mark{color:#20a653}
.nav{display:flex;gap:20px;align-items:center;font-weight:700;font-size:.96rem}
.nav a:hover{color:var(--primary)}
.menu-toggle{
  display:none;border:1px solid var(--line);background:#fff;border-radius:10px;
  width:42px;height:42px;cursor:pointer;color:var(--text);font-size:1.35rem;
  align-items:center;justify-content:center
}
.hero{
  padding:42px 0 22px;
  text-align:center;
}
.hero h1{font-size:clamp(2rem,5vw,3.35rem);margin:.2rem 0 .6rem;line-height:1.15}
.hero p{margin:0 auto;color:var(--muted);max-width:720px}
.panel{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px;margin:18px 0;
}
.zodiac-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}
.zodiac-btn{
  border:1px solid var(--line);background:#fff;border-radius:15px;
  padding:13px 8px;cursor:pointer;font-weight:800;
  transition:.2s ease;
}
.zodiac-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(24,40,80,.08)}
.zodiac-btn.active{border:2px solid var(--accent);background:#fff7ef;color:#c95500}
.zodiac-emoji{font-size:2rem;display:block;margin-bottom:4px}
.section-title{margin:0 0 14px;font-size:1.35rem}
.result-card{
  text-align:center;
  background:linear-gradient(135deg,#f7fbff,#fffaf5);
}
.result-title{font-size:1.4rem;font-weight:900;margin-bottom:8px}
.draw-info{margin:0;color:var(--muted);font-size:.95rem;font-weight:800}
.balls{
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:18px 0 24px;
}
.ball{
  width:66px;height:66px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:1.55rem;font-weight:900;
  box-shadow:inset 0 -8px 12px rgba(0,0,0,.12), 0 6px 16px rgba(24,40,80,.12);
}
.ball.y{background:#f4b400;color:#182036}
.ball.b{background:#2490e8}
.ball.r{background:#f24a4a}
.ball.g{background:#2aa85d}
.ball.p{background:#7e4ed8}
.ball.k{background:#6d7480}
.reveal{animation:reveal-in .24s ease-out both}
@keyframes reveal-in{
  from{opacity:0;transform:translateY(5px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.actions{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.btn{
  border:0;border-radius:13px;padding:14px 16px;font-weight:900;cursor:pointer;
}
.btn.primary{background:var(--primary);color:#fff}
.btn.green{background:var(--green);color:#fff}
.btn.purple{background:var(--purple);color:#fff}
.btn.orange{background:var(--accent);color:#fff}
.btn.soft{background:#eef4ff;color:#244a87}
.btn:disabled{opacity:.45;cursor:not-allowed}
.mix-wrap{display:none;margin-top:18px}
.mix-wrap.open{display:block}
.mix-head{
  display:grid;grid-template-columns:minmax(64px,1fr) minmax(0,620px) minmax(64px,1fr);
  align-items:center;gap:10px
}
.mix-head::before{content:""}
.mix-head>div{text-align:center}
.mix-head p{margin:0;color:var(--muted);font-size:13px;white-space:nowrap}
.mix-head>.btn{justify-self:end;background:#475569;color:#fff}
.mix-head>.btn:hover{background:#364457}
.num-grid{
  display:grid;grid-template-columns:repeat(15,minmax(42px,1fr));gap:6px;
  width:100%;max-width:780px;margin:14px auto 0
}
.num-btn{
  border:1px solid #c2cad6;background:#fff;border-radius:999px;
  width:100%;min-width:0;aspect-ratio:1;padding:0;cursor:pointer;
  display:grid;place-items:center;font-size:19px;font-weight:600;line-height:1
}
.num-btn:not(.selected):hover{background:#f5f7fa;border-color:#aab4c3}
.num-btn.selected{
  border-width:2px;font-weight:700;
  box-shadow:0 0 0 3px rgba(24,40,80,.14),inset 0 -4px 8px rgba(0,0,0,.1)
}
.num-btn.selected.y{background:#f4b400;color:#182036;border-color:#d89f00}
.num-btn.selected.b{background:#2490e8;color:#fff;border-color:#1778bd}
.num-btn.selected.r{background:#f24a4a;color:#fff;border-color:#cf3535}
.num-btn.selected.k{background:#6d7480;color:#fff;border-color:#555c67}
.num-btn.selected.g{background:#2aa85d;color:#fff;border-color:#20864a}
.num-btn.selected.p{background:#7e4ed8;color:#fff;border-color:#6638b9}
.mix-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:16px;flex-wrap:wrap
}
body[data-zodiac] .mix-bottom{justify-content:center}
body[data-zodiac] #completeMixBtn{background:#f4b400;color:#182036}
body[data-zodiac] #completeMixBtn:hover{background:#d9a000}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  width:34px;height:34px;flex:0 0 34px;padding:0;border-radius:50%;
  border:0;cursor:pointer;font-family:inherit;font-size:inherit;
  display:inline-grid;place-items:center;line-height:1;font-weight:800
}
.chip.y{background:#f4b400;color:#182036}
.chip.b{background:#2490e8;color:#fff}
.chip.r{background:#f24a4a;color:#fff}
.chip.k{background:#6d7480;color:#fff}
.chip.g{background:#2aa85d;color:#fff}
.chip.p{background:#7e4ed8;color:#fff}
.tools-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
.tool-card{
  padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;
  font-weight:850;text-align:center;word-break:keep-all;overflow-wrap:normal
}
.tool-card small{display:block;color:var(--muted);font-weight:600;margin-top:6px}
.ad-placeholder{
  border:1px dashed #c7ced9;background:#f4f6f9;color:#8791a4;
  border-radius:14px;text-align:center;padding:34px 16px;margin:18px 0
}
.content-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px
}
.article-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px
}
.article-card h3{margin:0 0 8px}
.article-card p{margin:0;color:var(--muted)}
.faq details{
  border-top:1px solid var(--line);padding:14px 0
}
.faq summary{cursor:pointer;font-weight:800}
.disclaimer{
  background:#fff7e8;border:1px solid #ffd497;border-radius:14px;padding:18px
}
.footer{
  border-top:1px solid var(--line);margin-top:30px;padding:28px 0 42px;color:var(--muted)
}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.subpage-title{padding:38px 0 8px}
.prose{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow)
}
.prose h1,.prose h2{line-height:1.25}
.prose p,.prose li{color:#33415c}
.games-list{display:grid;gap:10px;margin-top:16px}
.games-list{
  padding:12px;
  border:1px solid #e1e7ef;
  border-radius:12px;
  background:#f7f9fc;
}
.games-list.is-collapsed{display:none}
.games-toggle{display:block;margin:10px auto 0}
.game-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.mini-ball{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900
}
.mix-wrap.open{
  padding:12px;
  border:1px solid #d8ebdf;
  border-radius:12px;
  background:#f5fbf7;
}
.mix-wrap.collapsed #numGrid,
.mix-wrap.collapsed .mix-manual{display:none}
.mix-bottom-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.mix-toggle{white-space:nowrap}

@media (max-width:800px){
  .header-inner{flex-wrap:wrap}
  .menu-toggle{display:flex;margin-left:auto}
  .nav{
    display:none;flex:0 0 100%;flex-direction:column;align-items:stretch;
    gap:0;padding:0 0 12px
  }
  .nav.open{display:flex}
  .nav a{padding:10px 12px;border-top:1px solid var(--line)}
  .zodiac-grid{grid-template-columns:repeat(4,1fr)}
  .actions{grid-template-columns:repeat(2,1fr)}
  .actions #mixBtn{grid-column:1/-1}
  .tools-grid{grid-template-columns:repeat(2,1fr)}
  .content-grid{grid-template-columns:1fr}
  .num-grid{grid-template-columns:repeat(9,minmax(40px,1fr));max-width:500px}
}
@media (max-width:480px){
  .container{width:min(94vw,1040px)}
  .panel{padding:18px}
  .zodiac-grid{grid-template-columns:repeat(3,1fr)}
  .zodiac-btn{padding:10px 5px}
  .ball{width:54px;height:54px;font-size:1.25rem}
  .balls{display:grid;grid-template-columns:repeat(3,54px);gap:8px}
  .actions{grid-template-columns:1fr 1fr}
  .actions .btn{padding-left:8px;padding-right:8px;white-space:nowrap}
  .num-grid{
    grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:none;
    width:calc(100% + 12px);margin:14px -6px 0
  }
  .game-row{
    display:grid;grid-template-columns:repeat(6,40px);gap:6px 4px;
    justify-content:center
  }
  .game-row strong{grid-column:1/-1;text-align:left}
  .mini-ball{width:40px;height:40px;font-size:1rem}
  .mix-head::before{grid-column:1;grid-row:1}
  .mix-head>div{display:contents}
  .mix-head h3{grid-column:2;grid-row:1;text-align:center}
  .mix-head p{grid-column:1/-1;grid-row:2;text-align:center;font-size:9.5px}
  .mix-head>.btn{grid-column:3;grid-row:1}
}
@media (max-width:360px){
  .num-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
}

@media (min-width:801px){
  .container{width:min(960px,calc(100% - 32px))}
  .hero{padding:20px 0 10px}
  .panel{padding:16px;margin:12px auto}
  .zodiac-grid{gap:8px}
  .zodiac-btn{padding:8px 8px}
  .zodiac-emoji{font-size:1.5rem;margin-bottom:1px}
  .section-title{margin-bottom:8px}
  .balls{gap:10px;margin:10px 0 14px}
  .ball{width:58px;height:58px}
  .btn{padding:10px 12px}
  .games-list{margin-top:10px}
  .games-list{padding:10px}
  .ad-placeholder{padding:22px 16px;margin:12px auto}
  .content-grid{gap:12px}
  .article-card{padding:15px}
  .faq details{padding:10px 0}
  .disclaimer{padding:15px}
  .footer{margin-top:22px;padding:20px 0 30px}
  .prose{max-width:760px;margin-left:auto;margin-right:auto}
  .prose h2{font-size:1.2rem}
}

@media (prefers-reduced-motion:reduce){
  .reveal{animation:none}
}