:root{
  --bg:#eef2f7;
  --card:rgba(255,255,255,0.94);
  --border:rgba(15, 23, 42, 0.16);
  --text:rgba(15, 23, 42, 0.92);
  --muted:rgba(71, 85, 105, 0.82);
  --shadow:0 22px 55px rgba(15, 23, 42, 0.18);
  --grad-1:rgba(14, 165, 233, 0.16);
  --grad-2:rgba(99, 102, 241, 0.14);
  --grad-3:rgba(34, 197, 94, 0.1);
  --glow-1:rgba(56, 189, 248, 0.22);
  --glow-2:rgba(129, 140, 248, 0.18);
  --glow-3:rgba(74, 222, 128, 0.16);
  --button-bg:rgba(241,245,249,0.95);
  --button-bg-hover:rgba(226,232,240,1);
}

body[data-theme="dark"]{
  --bg:#0a0f1c;
  --card:rgba(17, 24, 39, 0.88);
  --border:rgba(255,255,255,0.14);
  --text:rgba(248,250,252,0.92);
  --muted:rgba(226,232,240,0.7);
  --shadow:0 22px 55px rgba(0,0,0,0.45);
  --grad-1:rgba(59, 130, 246, 0.28);
  --grad-2:rgba(217, 70, 239, 0.18);
  --grad-3:rgba(34, 197, 94, 0.16);
  --glow-1:rgba(56, 189, 248, 0.22);
  --glow-2:rgba(168, 85, 247, 0.18);
  --glow-3:rgba(34, 197, 94, 0.14);
  --button-bg:rgba(255,255,255,0.1);
  --button-bg-hover:rgba(255,255,255,0.18);
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  padding:24px;
  padding-top:calc(24px + env(safe-area-inset-top));
  padding-right:calc(24px + env(safe-area-inset-right));
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
  padding-left:calc(24px + env(safe-area-inset-left));
  overflow-x:hidden;
  overflow-y:auto;
}
.bg-glow{
  position:fixed;
  inset:-20%;
  z-index:0;
  pointer-events:none;
  filter:blur(12px);
}
.bg-glow .glow{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle, currentColor 0%, rgba(0,0,0,0) 60%);
  opacity:0.7;
  animation:floatGlow 22s ease-in-out infinite, pulseGlow 26s ease-in-out infinite;
}
.bg-glow .g1{
  color:var(--glow-1);
  top:10%;
  left:8%;
  animation-delay:0s, -4s;
}
.bg-glow .g2{
  color:var(--glow-2);
  top:20%;
  right:6%;
  width:460px;
  height:460px;
  animation-duration:28s, 32s;
  animation-delay:0s, -10s;
}
.bg-glow .g3{
  color:var(--glow-3);
  bottom:8%;
  left:30%;
  width:560px;
  height:560px;
  animation-duration:32s, 36s;
  animation-delay:0s, -16s;
}
@keyframes floatGlow{
  0%{transform:translate3d(0, 0, 0)}
  50%{transform:translate3d(18px, -14px, 0)}
  100%{transform:translate3d(0, 0, 0)}
}
@keyframes pulseGlow{
  0%, 100%{transform:scale(1)}
  50%{transform:scale(1.03)}
}
.wrap{
  width:100%;
  max-width:820px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:22px;
  backdrop-filter:blur(10px);
  position:relative;
  z-index:1;
}
.theme-toggle{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  padding:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:400;
  line-height:1;
  background:rgba(255,255,255,0.75);
  border:1px solid rgba(15, 23, 42, 0.12);
  cursor:pointer;
  transition:transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.theme-toggle:hover{
  background:rgba(255,255,255,0.95);
}
h1{margin:0 0 8px;font-size:24px;letter-spacing:-0.2px}
p{margin:0 0 18px;color:var(--muted);line-height:1.5}
.details{
  margin-top:18px;
  border-top:1px solid rgba(15, 23, 42, 0.08);
  padding-top:16px;
  width:100%;
}
.details-head{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}
.details-head h2{
  margin:0;
  font-size:16px;
  letter-spacing:-0.2px;
}
.details-sub{
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.tablist{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 14px;
  width:100%;
}
.tab{
  appearance:none;
  border:1px solid rgba(15, 23, 42, 0.12);
  background:rgba(248,250,252,0.95);
  color:var(--text);
  font-size:13px;
  font-family:inherit;
  font-weight:700;
  padding:7px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:background 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.tab:hover{
  background:rgba(241,245,249,1);
}
.tab[aria-selected="true"]{
  border-color:rgba(59, 130, 246, 0.5);
  background:rgba(59, 130, 246, 0.2);
}
.tab-panels{
  display:grid;
  gap:14px;
  width:100%;
}
.tab-panel{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(15, 23, 42, 0.08);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8)),
    repeating-linear-gradient(45deg, rgba(15, 23, 42, 0.06) 0 6px, transparent 6px 12px);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  box-shadow:0 10px 22px rgba(15, 23, 42, 0.06);
}
.controls{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px;
  width:100%;
}
button{
  appearance:none;border:1px solid var(--border);
  background:var(--button-bg);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  transition:transform 120ms ease, background 120ms ease;
  min-width:0;
}
button:hover{background:var(--button-bg-hover)}
button:active{transform:scale(0.98)}
.toggle{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.06);
  color:var(--muted);
  user-select:none;
  justify-content:center;
  text-align:center;
  font-family:inherit;
  font-weight:700;
}
.toggle input{transform:translateY(1px)}
.result{
  margin-top:14px;
  padding:16px;
  border:1px dashed rgba(255,255,255,0.22);
  border-radius:16px;
  background:rgba(0,0,0,0.06);
  width:100%;
}

/* 5게임(여러 줄) 표시 */
.lines{
  display:grid;
  gap:12px;
  padding:4px 0 2px;
}
.line{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:8px 6px;
  border-radius:14px;
  border:1px solid rgba(15, 23, 42, 0.08);
  background:rgba(255,255,255,0.65);
  width:100%;
}

/* 공(번호) */
.ball{
  width:clamp(30px, 9.5vw, 54px);
  height:clamp(30px, 9.5vw, 54px);
  border-radius:999px;
  display:grid;place-items:center;
  font-weight:900;
  font-size:clamp(12px, 3.4vw, 18px);
  border:1px solid rgba(15, 23, 42, 0.12);
  box-shadow:0 10px 25px rgba(15, 23, 42, 0.2);
  position:relative;overflow:hidden;
}
.ball::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 52%);
  transform:rotate(25deg);
}

/* 번호 구간별 색 (로또 공 느낌) */
/* 1-10 노랑 / 11-20 파랑 / 21-30 빨강 / 31-40 회색 / 41-45 초록 */
.b1{ background:rgba(250, 204, 21, 0.92); color:#1a1a1a; }
.b2{ background:rgba(59, 130, 246, 0.92); color:#ffffff; }
.b3{ background:rgba(239, 68, 68, 0.92); color:#ffffff; }
.b4{ background:rgba(148, 163, 184, 0.92); color:#0b1220; }
.b5{ background:rgba(34, 197, 94, 0.92); color:#0b1220; }

.sep{width:18px;height:2px;background:rgba(15, 23, 42, 0.25);border-radius:999px;margin:0 4px}
.meta{text-align:center;color:var(--muted);font-size:13px;margin-top:10px}
.history{margin-top:14px;border-top:1px solid rgba(15, 23, 42, 0.08);padding-top:12px;width:100%}
.history h2{font-size:14px;margin:0 0 10px;color:var(--muted);font-weight:800;letter-spacing:-0.2px}
.history ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.history li{
  display:flex;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(15, 23, 42, 0.08);
  background:rgba(255,255,255,0.75);
  color:rgba(15, 23, 42, 0.8);
  font-size:13px;
}
.small{color:var(--muted)}
.info{
  margin-top:18px;
  border-top:1px solid rgba(15, 23, 42, 0.08);
  padding-top:16px;
  padding-bottom:4px;
  position:relative;
}
.info::before{
  content:"";
  position:absolute;
  top:-12px;
  left:50%;
  width:64px;
  height:6px;
  border-radius:999px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, var(--grad-1), var(--grad-2));
  opacity:0.9;
}
.info-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.info h2{
  font-size:16px;
  margin:0 0 6px;
  letter-spacing:-0.2px;
}
.info-sub{
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.info p{
  margin:0 0 12px;
  color:var(--muted);
}
.info-tag{
  font-size:12px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15, 23, 42, 0.12);
  background:rgba(255,255,255,0.7);
  color:rgba(15, 23, 42, 0.7);
}
.info-grid{
  display:grid;
  gap:14px;
  margin-top:0;
}
.info-card{
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(15, 23, 42, 0.08);
  background:rgba(255,255,255,0.8);
  box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
}
.info-card.wide{
  margin-top:0;
}
.info-card h3{
  margin:0 0 8px;
  font-size:14px;
}
.info-card ul{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.5;
}
.info-card p{
  margin:0 0 8px;
  color:var(--muted);
}
.info-card > *:last-child{
  margin-bottom:0;
}
.notice{
  margin-top:0;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(15, 23, 42, 0.08);
  background:rgba(255,255,255,0.8);
  box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
}
.notice h3{
  margin:0 0 8px;
  font-size:14px;
}
.notice p{
  margin:0 0 8px;
}
.notice > *:last-child{
  margin-bottom:0;
}
.kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px;padding:2px 6px;border-radius:8px;
  border:1px solid rgba(15, 23, 42, 0.12);
  background:rgba(15, 23, 42, 0.08);
  color:rgba(15, 23, 42, 0.7);
}

body[data-theme="dark"] .result{
  border-color:rgba(255,255,255,0.22);
  background:rgba(0,0,0,0.15);
}

body[data-theme="dark"] .line{
  border-color:rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
}

body[data-theme="dark"] .ball{
  border-color:rgba(255,255,255,0.18);
  box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

body[data-theme="dark"] .sep{
  background:rgba(255,255,255,0.35);
}

body[data-theme="dark"] .history{
  border-top-color:rgba(255,255,255,0.12);
}

body[data-theme="dark"] .history li{
  border-color:rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.82);
}

body[data-theme="dark"] .info-card{
  border-color:rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05);
  box-shadow:0 12px 28px rgba(0,0,0,0.2);
}

body[data-theme="dark"] .notice{
  border-color:rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05);
  box-shadow:0 12px 28px rgba(0,0,0,0.2);
}

body[data-theme="dark"] .details{
  border-top-color:rgba(255,255,255,0.12);
}

body[data-theme="dark"] .tab{
  border-color:rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.12);
}

body[data-theme="dark"] .tab:hover{
  background:rgba(255,255,255,0.18);
}

body[data-theme="dark"] .controls button{
  background:rgba(255,255,255,0.12);
}

body[data-theme="dark"] .controls button:hover{
  background:rgba(255,255,255,0.18);
}

body[data-theme="dark"] .tab[aria-selected="true"]{
  border-color:rgba(59, 130, 246, 0.6);
  background:rgba(59, 130, 246, 0.18);
}

body[data-theme="dark"] .tab-panel{
  border-color:rgba(255,255,255,0.12);
  background:
    linear-gradient(135deg, rgba(13, 23, 39, 0.9), rgba(11, 18, 32, 0.7)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 6px, transparent 6px 12px);
}

body[data-theme="dark"] .theme-toggle{
  border-color:rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.08);
}

body[data-theme="dark"] .kbd{
  border-color:rgba(255,255,255,0.16);
  background:rgba(0,0,0,0.18);
  color:rgba(255,255,255,0.85);
}

@media (max-width: 900px) and (min-width: 641px){
  .wrap{
    width:100%;
  }
  .tablist{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  }
  .tab{
    text-align:center;
  }
}

@media (max-height: 480px){
  body{
    padding:16px;
    padding-top:calc(16px + env(safe-area-inset-top));
    padding-right:calc(16px + env(safe-area-inset-right));
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
    padding-left:calc(16px + env(safe-area-inset-left));
    place-items:start center;
  }
  .wrap{
    padding:14px;
  }
  h1{
    font-size:20px;
  }
  p{
    margin-bottom:12px;
  }
  .controls{
    gap:8px;
  }
  .result{
    padding:12px;
  }
  .line{
    gap:6px;
  }
  .ball{
    width:clamp(28px, 9vw, 36px);
    height:clamp(28px, 9vw, 36px);
    font-size:clamp(11px, 3.2vw, 13px);
  }
  .tablist{
    margin-bottom:10px;
  }
}

@media (max-height: 480px) and (orientation: landscape){
  .controls button{
    flex:1 1 calc(50% - 4px);
    justify-content:center;
    font-size:13px;
  }
  .toggle{
    width:100%;
    justify-content:center;
    text-align:center;
    font-size:12px;
  }
  .tablist{
    display:flex;
    flex-wrap:wrap;
    padding-bottom:0;
  }
  .tab{
    white-space:normal;
    font-size:13px;
    text-align:center;
  }
  .shortcut-hint{
    display:none;
  }
}

@media (max-width: 640px){
  body{
    padding:16px;
    padding-top:calc(16px + env(safe-area-inset-top));
    padding-right:calc(16px + env(safe-area-inset-right));
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
    padding-left:calc(16px + env(safe-area-inset-left));
    place-items:start center;
  }
  .wrap{
    padding:16px;
    border-radius:16px;
  }
  .theme-toggle{
    top:10px;
    right:10px;
    width:36px;
    height:36px;
    font-size:16px;
  }
  h1{
    font-size:20px;
  }
  .controls{
    gap:8px;
  }
  .controls button{
    flex:1 1 calc(50% - 4px);
    justify-content:center;
    font-size:clamp(12px, 3.2vw, 13px);
    padding:clamp(8px, 2.4vw, 10px) clamp(10px, 3vw, 14px);
  }
  .toggle{
    width:100%;
    justify-content:center;
    text-align:center;
    font-size:clamp(11px, 3vw, 12px);
  }
  .tablist{
    flex-wrap:wrap;
    padding-bottom:0;
  }
  .tab{
    white-space:normal;
    font-size:13px;
    text-align:center;
  }
  .result{
    padding:12px;
  }
  .line{
    gap:6px;
    padding:6px 4px;
  }
  .ball{
    width:clamp(28px, 9vw, 36px);
    height:clamp(28px, 9vw, 36px);
    font-size:clamp(11px, 3.2vw, 13px);
  }
  .sep{
    width:clamp(8px, 3vw, 12px);
    margin:0 2px;
  }
  .history li{
    flex-direction:column;
    align-items:flex-start;
  }
  .shortcut-hint{
    display:none;
  }
}

@media (max-width: 430px){
  .line{
    flex-wrap:nowrap;
    gap:4px;
    padding:6px 2px;
  }
  .ball{
    width:clamp(24px, 8.5vw, 32px);
    height:clamp(24px, 8.5vw, 32px);
    font-size:clamp(10px, 3.2vw, 12px);
  }
  .sep{
    width:clamp(6px, 2.8vw, 10px);
    margin:0 1px;
  }
}

@media (max-width: 400px){
  body{
    padding:12px;
    padding-top:calc(12px + env(safe-area-inset-top));
    padding-right:calc(12px + env(safe-area-inset-right));
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
    padding-left:calc(12px + env(safe-area-inset-left));
  }
  .wrap{
    padding:14px;
    border-radius:14px;
  }
  .controls{
    gap:6px;
  }
  .tablist{
    gap:6px;
  }
}