:root {
  --bg: #0b1020;
  --bg2: #121a33;
  --card: rgba(255, 255, 255, 0.055);
  --card-b: rgba(255, 255, 255, 0.1);
  --text: #eef1fb;
  --dim: #98a2c3;
  --accent: #7c5cff;
  --accent2: #22d3ee;
  --good: #34d399;
  --bad: #fb7185;
  --warn: #fbbf24;
  --b1: #fbc400;
  --b2: #69c8f2;
  --b3: #ff7272;
  --b4: #aaaaaa;
  --b5: #b0d840;
  --r: 18px;
}
:root[data-theme='light'] {
  --bg: #f4f6fd;
  --bg2: #e7ebf8;
  --card: rgba(255, 255, 255, 0.85);
  --card-b: rgba(20, 30, 70, 0.12);
  --text: #141a33;
  --dim: #5b6584;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(124, 92, 255, 0.28), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(34, 211, 238, 0.18), transparent 55%), var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.55;
}
a { color: var(--accent2); }
button { font: inherit; color: inherit; cursor: pointer; }
h2 { font-size: 1.35rem; margin: 0 0 4px; letter-spacing: -0.02em; }
h3 { font-size: 1.05rem; margin: 0 0 10px; }
.dim { color: var(--dim); }
.small { font-size: 0.82rem; }
.center { text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grow { flex: 1; }
.mt { margin-top: 14px; }

/* ---------- 헤더 ---------- */
.top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--card-b); }
.top-in { max-width: 1040px; margin: 0 auto; padding: 10px 16px 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: 0.04em; }
.logo b { color: var(--b1); }
.logo-ball { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; color: #3a2600; background: radial-gradient(circle at 35% 30%, #fff7c2, var(--b1) 45%, #c47f00); box-shadow: 0 2px 10px rgba(251, 196, 0, 0.45); }
.next { font-size: 0.8rem; color: var(--dim); text-align: right; line-height: 1.3; }
.next b { color: var(--text); }
.tabs { max-width: 1040px; margin: 0 auto; padding: 0 10px 8px; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; border: 1px solid transparent; background: transparent; padding: 4px 11.5px; border-radius: 999px; color: var(--dim); font-weight: 600; font-size: 0.92rem; white-space: nowrap; text-decoration: none; }
.tab:hover { color: var(--text); }
.tab.on { color: #fff; background: linear-gradient(135deg, var(--accent), #5b8cff); box-shadow: 0 4px 16px rgba(124, 92, 255, 0.4); }

.view { max-width: 1040px; margin: 0 auto; padding: 18px 16px 30px; outline: none; }
.foot { max-width: 1040px; margin: 0 auto; padding: 10px 16px 40px; font-size: 0.78rem; color: var(--dim); border-top: 1px solid var(--card-b); }

/* ---------- 카드·폼 ---------- */
.card { background: var(--card); border: 1px solid var(--card-b); border-radius: var(--r); padding: 18px; margin-bottom: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grid2 > .card { margin: 0; }
.hero { padding: 22px 18px; background: linear-gradient(135deg, rgba(124, 92, 255, 0.22), rgba(34, 211, 238, 0.12)); }
.hero p { margin: 4px 0 0; color: var(--dim); }
.btn { white-space: nowrap; border: 0; border-radius: 12px; padding: 10px 18px; font-weight: 700; background: linear-gradient(135deg, var(--accent), #5b8cff); color: #fff; box-shadow: 0 6px 18px rgba(124, 92, 255, 0.35); transition: transform 0.12s, filter 0.12s; }
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn.big { padding: 10px 21px; font-size: 1.05rem; } /* 버튼 크기 약 10% 축소, 글자 크기는 유지 */
.btn.ghost { background: var(--card); border: 1px solid var(--card-b); box-shadow: none; color: var(--text); }
.btn.sm { padding: 5px 11px; font-size: 0.82rem; border-radius: 9px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; background: var(--card); border: 1px solid var(--card-b); color: var(--dim); white-space: nowrap; }
.chip.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.chip.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
input[type='text'], input[type='number'], input[type='date'], select, textarea {
  background: var(--card); border: 1px solid var(--card-b); color: var(--text); border-radius: 10px; padding: 8px 11px; font: inherit; max-width: 100%;
}
select option { background: var(--bg2); color: var(--text); }
:root { color-scheme: dark; }
:root[data-theme='light'] { color-scheme: light; }
textarea { width: 100%; min-height: 72px; resize: vertical; }
input[type='range'] { accent-color: var(--accent); width: 100%; }
label { font-size: 0.88rem; color: var(--dim); }
.callout { border-left: 3px solid var(--warn); padding: 8px 12px; border-radius: 6px; background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 0.88rem; }
.callout.good { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); }

/* ---------- 공 ---------- */
.ball {
  --c: var(--b1);
  width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font-weight: 800; font-size: 0.95rem; color: #1b1b1b;
  background: radial-gradient(circle at 35% 28%, #fff 0, color-mix(in srgb, var(--c) 55%, #fff) 14%, var(--c) 52%, color-mix(in srgb, var(--c) 62%, #000) 100%);
  box-shadow: inset -3px -4px 6px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.ball.b1 { --c: var(--b1); } .ball.b2 { --c: var(--b2); } .ball.b3 { --c: var(--b3); } .ball.b4 { --c: var(--b4); } .ball.b5 { --c: var(--b5); }
.ball.empty { background: rgba(255, 255, 255, 0.04); border: 2px dashed var(--card-b); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3); }
.slot { display: inline-grid; }
.slot > .ball { grid-area: 1 / 1; }
.ball.sm { width: 28px; height: 28px; font-size: 0.78rem; }
.ball.pop { animation: pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.ball.dim { opacity: 0.28; filter: grayscale(0.7); }
.ball.hit { outline: 3px solid var(--good); outline-offset: 2px; }
.ball.bonus-hit { outline: 3px dashed var(--warn); outline-offset: 2px; }
.plus { color: var(--dim); font-weight: 800; align-self: center; }
@keyframes pop { from { transform: translateY(-26px) scale(0.2) rotate(-120deg); opacity: 0; } to { transform: none; opacity: 1; } }
.balls { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---------- 엔진 선택 ---------- */
.engines { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.eng { text-align: left; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--card-b); background: var(--card); transition: border-color 0.15s, transform 0.15s; position: relative; }
.eng:hover { transform: translateY(-2px); }
.eng.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: 0 0 0 1px var(--accent) inset; }
.eng .ic { font-size: 1.4rem; }
.eng b { display: block; font-size: 0.93rem; }
.eng span.tg { position: absolute; top: 9px; right: 10px; font-size: 0.68rem; color: var(--dim); }
.eng-desc { margin: 10px 0 0; font-size: 0.95rem; }

/* ---------- 결과 행 ---------- */
.result { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px dashed var(--card-b); }
.result:last-child { border-bottom: 0; }
.result .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.result .acts { margin-left: auto; display: flex; gap: 6px; }
.result .acts .btn { padding: 5px 9px; font-size: 0.8rem; }
.result .rtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gen-grid { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); align-items: start; }
.gen-grid #official:empty { display: none; }
.gen-grid #official > .card { margin: 0; }
.opt-grid { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: start; }
.opt-a { grid-column: 1; grid-row: 1; align-self: center; }
.opt-e { grid-column: 1; grid-row: 2; }
.opt-f { grid-column: 1; grid-row: 3; display: flex; gap: 6px; }
.opt-b { grid-column: 2; grid-row: 1 / 4; justify-self: end; align-self: center; }
.opt-c { grid-column: 1; grid-row: 4; min-width: 0; }
.remain { min-width: 40px; text-align: center; padding: 3px 10px; border-radius: 10px; font-weight: 800; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.slotbox { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--card-b); background: var(--card); font-weight: 800; padding: 0; }
.slotbox.used { border-color: var(--accent2); }
.slotbox.on { background: linear-gradient(135deg, var(--accent), #5b8cff); border-color: transparent; color: #fff; }
.slotbox:disabled { opacity: 0.35; cursor: not-allowed; }
.opt-c summary { line-height: 30px; } /* 오른쪽 버튼(높이 약 30px)과 같은 줄에 정렬 */
.opt-d { grid-column: 2; grid-row: 4; justify-self: end; flex-wrap: nowrap; }
.sep { border: 0; border-top: 1px solid var(--card-b); margin: 16px 0 12px; }

/* ---------- 번호 선택판 ---------- */
.picker { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; max-width: 420px; }
.pk { aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--card-b); background: var(--card); font-weight: 700; font-size: 0.82rem; padding: 0; }
.pk.inc { background: var(--good); color: #05261a; border-color: transparent; }
.pk.exc { background: var(--bad); color: #2c0610; border-color: transparent; text-decoration: line-through; }
.pk.sel { background: var(--accent); color: #fff; border-color: transparent; }

/* ---------- 표/차트 ---------- */
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--card-b); }
th:first-child, td:first-child { text-align: left; }
th { color: var(--dim); font-weight: 600; font-size: 0.8rem; }
.scroll { overflow-x: auto; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 74px; gap: 8px; align-items: center; margin: 7px 0; font-size: 0.88rem; }
.bar-track { position: relative; height: 18px; background: var(--card); border-radius: 9px; overflow: visible; }
.bar-fill { height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width 0.6s; }
.bar-base { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--warn); }
.bar-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--warn) 25%, transparent); }
.progress { height: 8px; background: var(--card); border-radius: 6px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width 0.15s; }
.heat { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.heat div { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; position: relative; }
.heat small { position: absolute; bottom: 2px; font-size: 0.6rem; font-weight: 500; opacity: 0.85; }
svg text { fill: var(--dim); font-size: 10px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--dim); }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.kpi > div { background: var(--card); border: 1px solid var(--card-b); border-radius: 14px; padding: 10px 12px; }
.kpi b { display: block; font-size: 1.25rem; }
.kpi span { font-size: 0.78rem; color: var(--dim); }
.pos { color: var(--good); } .neg { color: var(--bad); }

/* ---------- 재미 탭 ---------- */
.machine { position: relative; width: 100%; max-width: 420px; margin: 0 auto; touch-action: none; }
.machine canvas { width: 100%; aspect-ratio: 1; border-radius: 50%; display: block; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 70%); border: 2px solid var(--card-b); cursor: crosshair; }
.tray { min-height: 46px; margin-top: 12px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); background: #1d2547; color: #fff; padding: 10px 18px; border-radius: 12px; opacity: 0; pointer-events: none; transition: 0.25s; z-index: 50; font-size: 0.9rem; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 560px) {
  .opt-grid { grid-template-columns: 1fr; }
  .opt-grid > * { grid-column: 1 !important; grid-row: auto !important; }
  .opt-b, .opt-d { justify-self: start; }
  .ball { width: 34px; height: 34px; font-size: 0.88rem; }
  .bar-row { grid-template-columns: 100px 1fr 60px; }
  .top-in .next { font-size: 0.72rem; }
  .result .acts { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- 추첨 결과 발표 ---------- */
.count-big { font-size: 2.2rem; font-weight: 800; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, var(--accent2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stage { position: relative; padding: 22px 8px 10px; border-radius: 16px; background: radial-gradient(circle at 50% 0%, rgba(124, 92, 255, 0.18), transparent 70%), var(--card); border: 1px solid var(--card-b); overflow: hidden; }
.stage-balls { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.stage .ball { width: 48px; height: 48px; font-size: 1.15rem; }
.stage .msg, .stage p { margin: 14px 0 0; }
.conf { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ball.hit { animation: hitpulse 0.6s ease; }
@keyframes hitpulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

.top-r { display: flex; align-items: center; gap: 10px; }
.mute { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--card-b); background: var(--card); font-size: 1.05rem; padding: 0; line-height: 1; }
.mute:hover { filter: brightness(1.2); }

/* 1등 당첨 배너 */
.jackpot { position: fixed; left: 50%; top: 32%; transform: translate(-50%, -50%) scale(0.3); z-index: 71; pointer-events: none; text-align: center; opacity: 0; transition: transform 0.7s cubic-bezier(0.2, 1.5, 0.4, 1), opacity 0.5s; }
.jackpot.on { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: jpPulse 1.2s ease-in-out infinite 0.7s; }
.jackpot span { display: block; font-size: clamp(2rem, 8vw, 4.2rem); font-weight: 900; white-space: nowrap; background: linear-gradient(180deg, #fff7c2, #ffd23f 45%, #ff9f1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255, 190, 40, 0.9)) drop-shadow(0 4px 0 rgba(120, 60, 0, 0.6)); }
.jackpot small { display: block; margin-top: 6px; font-size: clamp(1rem, 3.5vw, 1.6rem); font-weight: 800; color: #fff; text-shadow: 0 0 12px rgba(255, 190, 40, 0.9); }
@keyframes jpPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.07); } }

/* 아이콘 이미지(Images/*.svg): 선 색이 검정이라 어두운 배경에서는 밝게 반전 */
.ico { display: block; width: 16px; height: 16px; filter: invert(0.85); }
:root[data-theme='light'] .ico { filter: none; }
.btn:hover .ico { filter: invert(0.55) sepia(1) saturate(6) hue-rotate(310deg); }

/* ---------- 업적 / 스트릭 ---------- */
.streak { text-decoration: none; color: var(--text); font-weight: 800; font-size: 0.9rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--card-b); background: var(--card); white-space: nowrap; }
.streak:hover { filter: brightness(1.2); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wd { border-radius: 12px; border: 1px solid var(--card-b); background: var(--card); text-align: center; padding: 6px 0; font-size: 0.8rem; color: var(--dim); }
.wd i { display: block; font-style: normal; height: 1.3em; font-size: 1.05rem; }
.wd.on { background: color-mix(in srgb, var(--good) 18%, transparent); border-color: var(--good); color: var(--good); font-weight: 800; }
.wd.today { box-shadow: 0 0 0 2px var(--accent) inset; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.badge { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid var(--card-b); background: var(--card); opacity: 0.6; filter: grayscale(0.8); }
.badge.got { opacity: 1; filter: none; border-color: color-mix(in srgb, var(--b1) 55%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--b1) 14%, transparent), var(--card)); }
.badge .b-ic { font-size: 1.7rem; line-height: 1; }
.badge .progress { width: 100%; }
.ach-pop { position: fixed; top: 14px; left: 50%; transform: translate(-50%, -140%); z-index: 80; display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-radius: 16px; background: #1d2547; color: #fff; border: 1px solid var(--b1); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 0 22px rgba(251, 196, 0, 0.35); transition: transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); max-width: 92vw; font-size: 0.9rem; }
.ach-pop.on { transform: translate(-50%, 0); }
.ach-pop .ach-ic { font-size: 1.9rem; }

/* ---------- 스마트폰 최적화 ---------- */
html { -webkit-tap-highlight-color: transparent; }
button, a, select, summary, label, input { touch-action: manipulation; } /* 더블탭 확대·300ms 지연 제거 */
body { padding-bottom: env(safe-area-inset-bottom); }
.top { padding-top: env(safe-area-inset-top); }
.toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
@media (max-width: 560px) {
  .top-in { padding: 8px 12px 4px; gap: 8px; }
  .logo { font-size: 0.82rem; letter-spacing: 0.02em; white-space: nowrap; gap: 7px; }
  .logo-ball { width: 26px; height: 26px; font-size: 0.7rem; }
  .top-r { gap: 6px; }
  .streak { font-size: 0.8rem; padding: 4px 8px; }
  .next { font-size: 0.66rem; line-height: 1.25; }
  .mute { width: 32px; height: 32px; }
  .tabs { padding: 0 6px 6px; }
  .tab { padding: 5px 10px; font-size: 0.88rem; }
  .view { padding: 14px 12px 24px; }
  .card { padding: 14px; border-radius: 16px; }
  h2 { font-size: 1.2rem; }
  .engines { grid-template-columns: repeat(2, 1fr); }
  .eng .tg { display: none; }
  .picker { grid-template-columns: repeat(7, 1fr); max-width: none; gap: 6px; }  /* 복권 용지처럼 7열, 손가락으로 누르기 쉽게 */
  .btn { min-height: 40px; }
  .btn.sm { min-height: 36px; }
  .btn.big { min-height: 46px; }
  .slotbox { width: 44px; height: 44px; }
  .badges { grid-template-columns: repeat(2, 1fr); }
  .stage .ball { width: 40px; height: 40px; font-size: 1rem; }
  .count-big { font-size: 1.8rem; }
  .foot { padding: 10px 12px 40px; }
}
@media (max-width: 340px) {
  .ball { width: 31px; height: 31px; font-size: 0.8rem; }
  .logo span:last-child { display: none; } /* 아주 좁은 화면에서는 로고 글자 대신 공 아이콘만 */
}

/* 번호 줄 버튼 글자: 웹은 긴 이름, 폰은 짧은 이름 */
.t-short { display: none; }
@media (max-width: 560px) {
  .engines { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .eng { padding: 8px 8px 9px; border-radius: 12px; }
  .eng .ic { font-size: 1.25rem; }
  .eng b { font-size: 0.78rem; line-height: 1.3; word-break: keep-all; }
  /* 번호 줄: 공 6개 + 저장/복사 버튼 2개가 한 줄에 들어가도록 줄임 */
  .result .rtop { flex-wrap: nowrap; gap: 8px; }
  .result .balls { gap: 4px; flex-wrap: nowrap; }
  .result .ball { width: 28px; height: 28px; font-size: 0.78rem; }
  .result .acts { gap: 5px; margin-left: auto; flex: none; }
  .result .acts .btn { padding: 0 9px; min-height: 34px; }
  .result .acts .ic { display: none; }
}

/* 스마트폰: "번호 생성" 버튼을 추첨수·비용 줄의 오른쪽에 배치 */
@media (max-width: 560px) {
  .opt-grid { grid-template-columns: 1fr auto; }
  .opt-grid > .opt-a { grid-column: 1 !important; grid-row: 1 !important; gap: 6px; flex-wrap: nowrap; }
  .opt-grid > .opt-b { grid-column: 2 !important; grid-row: 1 !important; justify-self: end; align-self: center; }
  .opt-grid > :not(.opt-a):not(.opt-b):not(.opt-c):not(.opt-d) { grid-column: 1 / -1 !important; }
  .opt-a .small { font-size: 0.72rem; white-space: nowrap; }
  .opt-b .btn.big { padding: 0 14px; min-height: 42px; }
}

/* 스마트폰: 3번 공식 사전 예측 제목의 핀 아이콘 숨김 */
@media (max-width: 560px) { .pin { display: none; } }

/* 스마트폰: 번호 생성기 소개 문구는 숨김 (같은 내용이 맨 아래 안내문에 있음) */
@media (max-width: 560px) { .gen-intro { display: none; } .hero:has(.gen-intro) { padding: 14px 16px; } }

/* 칩 설명 말풍선 */
.tipc { cursor: help; }
#tipbox { position: fixed; z-index: 90; display: none; max-width: 260px; padding: 9px 12px; border-radius: 10px; background: #1d2547; color: #fff; font-size: 0.82rem; line-height: 1.5; border: 1px solid var(--card-b); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45); pointer-events: none; }
.s-short { display: none; }

/* 스마트폰 보완 */
@media (max-width: 560px) {
  .t-pre { display: none; }                                   /* "내 번호에 모두 저장" → "모두 저장" */
  .hero:has(.gen-intro) { display: none; }                    /* 글자만 남은 "번호 생성기" 제목 카드 제거 */
  .s-full { display: none; } .s-short { display: inline; }
  .opt-c summary { line-height: 34px; font-size: 0.86rem; }
  .opt-grid > .opt-c { grid-column: 1 !important; grid-row: 4 !important; }
  .opt-grid > .opt-d { grid-column: 2 !important; grid-row: 4 !important; justify-self: end; gap: 5px; }
  .opt-d .btn { padding: 0 8px; font-size: 0.76rem; min-height: 34px; }
  .opt-grid > .opt-c[open] { grid-column: 1 / -1 !important; }                       /* 번호판을 펼치면 전체 폭 */
  .opt-grid > .opt-c[open] ~ .opt-d { grid-column: 1 / -1 !important; grid-row: 5 !important; justify-self: start; }
  .result .acts .btn:first-child { white-space: normal; line-height: 1.15; padding: 3px 7px; font-size: 0.72rem; width: 60px; }
}

/* 스마트폰: 메인 메뉴를 옆으로 넘기지 않고 5개씩 두 줄로 모두 보이게 */
@media (max-width: 560px) {
  .top { position: static; }                         /* 메뉴가 두 줄이라 화면을 많이 차지하므로 스크롤하면 같이 올라감 */
  .tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; overflow: visible; padding: 2px 8px 10px; }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; padding: 6px 2px 5px; border-radius: 12px; font-size: 0.68rem; line-height: 1.2; text-align: center; white-space: normal; word-break: keep-all; background: var(--card); border: 1px solid var(--card-b); }
  .tab .ti { font-size: 1.15rem; line-height: 1.2; }
  .tab.on { box-shadow: 0 2px 10px rgba(124, 92, 255, 0.45); }
  .result .acts .btn:first-child { width: 56px; }
  .result .acts .btn { padding-left: 7px; padding-right: 7px; }
}

/* 스마트폰: 추첨 결과 - 보너스 공이 아래로 내려가지 않게 한 줄에 모두 배치, 긴 안내 문구는 한 줄로 */
@media (max-width: 560px) {
  .stage { padding-left: 4px; padding-right: 4px; }
  .stage-balls { gap: 4px; flex-wrap: nowrap; }
  .stage .ball { width: 34px; height: 34px; font-size: 0.9rem; }
  .stage .plus { margin: 0 1px; }
  .msg-long { font-size: 2.8vw; white-space: nowrap; }
}

@media (max-width: 340px) { .stage .ball { width: 29px; height: 29px; font-size: 0.8rem; } }

.remain-n { font-weight: 800; color: var(--accent2); } /* "번호 생성 횟수 5회" (박스 없이 글자만) */

/* 스마트폰: "내 번호에 저장"을 한 줄 글자로 (공 오른쪽에 두 버튼) */
@media (max-width: 560px) {
  .result .rtop { flex-wrap: wrap; }                       /* 자리가 모자라는 아주 좁은 폰에서는 버튼이 공 아래 줄로 내려감 */
  .result .ball { width: 26px; height: 26px; font-size: 0.74rem; }
  .result .balls { gap: 4px; }
  .result .acts .btn:first-child { white-space: nowrap; width: auto; line-height: inherit; padding: 0 7px; font-size: 0.72rem; }
  .result .acts .btn { padding: 0 7px; font-size: 0.72rem; min-height: 34px; }
}
/* 화면 폭이 380px 이상인 폰에서는 여유가 있으므로 저장 버튼에 💾 아이콘 표시 */
@media (min-width: 380px) and (max-width: 560px) {
  .result .acts .btn:first-child .ic { display: inline; }
}

/* 히트맵: 웹은 모서리를 더 둥글게, 폰은 번호와 횟수가 겹치지 않게 간격 확보 */
.heat div { border-radius: 24px; }
@media (max-width: 560px) {
  .heat { grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .heat div { border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; line-height: 1; }
  .heat small { position: static; font-size: 0.62rem; }
}

/* 확인 창 */
.modal-back { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(5, 8, 20, 0.62); }
.modal { width: min(420px, 100%); padding: 20px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--card-b); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); }
.modal p { margin: 0 0 16px; line-height: 1.6; }
.btn:disabled .ico { opacity: 0.5; }

.ic .ico { display: inline-block; vertical-align: -3px; } /* 글자 옆에 붙는 아이콘은 줄바꿈 없이 한 줄로 */

.pick-list { max-height: 50vh; overflow-y: auto; padding-right: 4px; }

/* ---------- 레벨 로드맵 (한 줄, 화살표로 연결) ---------- */
.col { display: flex; flex-direction: column; gap: 16px; }
.col > .card { margin: 0; }
.rm-path { display: flex; align-items: flex-start; justify-content: space-between; gap: 2px; }
.rm-node { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 4px; border-radius: 12px; border: 1px solid var(--card-b); background: var(--card); opacity: 0.55; filter: grayscale(0.7); }
.rm-node.got { opacity: 1; filter: none; border-color: color-mix(in srgb, var(--b1) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--b1) 14%, transparent), var(--card)); }
.rm-node.cur { box-shadow: 0 0 0 2px var(--accent) inset; }
.rm-ic { font-size: 1.45rem; line-height: 1.15; }
.rm-n { font-size: 0.66rem; font-weight: 700; white-space: nowrap; }
.rm-lv { font-size: 0.6rem; color: var(--dim); }
.rm-here { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 0.58rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; white-space: nowrap; }
.rm-arrow { flex: none; align-self: center; color: var(--dim); font-size: 0.8rem; line-height: 1; margin-top: -6px; }
.rm-now { margin-bottom: 8px; }
@media (max-width: 560px) {
  .rm-n { display: none; }            /* 좁은 화면: 이름은 숨기고 아이콘과 레벨만 */
  .rm-node { padding: 6px 0 3px; border-radius: 10px; }
  .rm-ic { font-size: 1.2rem; }
  .rm-arrow { font-size: 0.65rem; margin-top: -3px; }
}

/* ---------- 헤더: 내 복권 스캔 버튼 ---------- */
.top-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.scan-btn { border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 0.88rem; white-space: nowrap; color: #fff; background: linear-gradient(135deg, var(--accent), #5b8cff); box-shadow: 0 4px 14px rgba(124, 92, 255, 0.4); }
.scan-btn:hover { filter: brightness(1.1); }
.scan-modal { width: min(460px, 100%); }
.scan-modal video { width: 100%; max-height: 52vh; object-fit: cover; border-radius: 12px; background: #000; display: block; }
.scan-modal video[hidden] { display: none; }
@media (max-width: 560px) {
  .top-in { flex-wrap: wrap; }
  .top-l { display: contents; }                      /* 폰: 로고 · 상태 표시는 윗줄, 스캔 버튼은 아랫줄 전체 폭 */
  .top-in .logo { order: 1; }
  .top-in .top-r { order: 2; }
  .scan-btn { order: 3; width: 100%; padding: 9px 14px; margin-top: 2px; }
}
@media (max-width: 560px) {
  .top-in { gap: 6px 8px; }
  .top-in .top-r { margin-left: auto; gap: 5px; }
  .logo { font-size: 0.78rem; gap: 6px; }
  .logo-ball { width: 24px; height: 24px; }
  .streak { padding: 3px 7px; }
  .next { font-size: 0.62rem; }
  .mute { width: 30px; height: 30px; }
}

@media (max-width: 560px) { .nx-r { display: none; } } /* 폰: 헤더 한 줄에 맞추려고 "제N회 ·" 생략 */

/* ---------- 헤더(폰): 다음 회차 표시를 좁게, 여유가 있으면 스캔 버튼을 로고 옆에 ---------- */
.nx-web { display: none; }
.nx-phone { display: inline; } /* 웹·폰 공통: 윗줄 "제N회 · D-n", 아랫줄 날짜와 시간 */
@media (max-width: 560px) {
  .nx-web { display: none; }
  .nx-phone { display: inline; }
  .nx-r { display: inline; }
}
/* 화면 폭 400px 이상인 폰: "내 로또 / QR스캔"을 두 줄 작은 버튼으로 로고 바로 옆(같은 줄)에 배치 */
@media (min-width: 400px) and (max-width: 560px) {
  .top-in .scan-btn { order: 1; width: auto; margin-top: 0; padding: 4px 10px; font-size: 0.68rem; line-height: 1.2; white-space: normal; text-align: center; border-radius: 12px; }
  .scan-btn .sc-a, .scan-btn .sc-b { display: block; }
}

/* 로드맵 칸 높이 키우기 */
.rm-node { padding: 14px 0 12px; gap: 3px; }
.rm-ic { font-size: 1.6rem; }
@media (max-width: 560px) {
  .rm-node { padding: 11px 0 9px; gap: 3px; }
  .rm-ic { font-size: 1.3rem; }
}

/* 두 열 카드 묶음 아래 간격 (다음 카드와 붙지 않게) */
.grid2 { margin-bottom: 16px; }
/* 코인 리그: 왼쪽 열(레벨 + 로드맵)의 아래 끝을 오른쪽 카드의 아래 끝과 맞춤 */
.col { height: 100%; }
.col > .card:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.rm-body { margin: auto 0; }                 /* 남는 높이만큼 로드맵 내용을 세로 가운데로 */

/* 스캔 버튼 카메라 아이콘 (Images/camera.svg): 선 색이 검정이라 보라색 버튼 위에서 흰색으로 반전 */
.cam-ic { width: 16px; height: 16px; vertical-align: -3px; filter: invert(1); }

/* 내 로또 QR스캔 버튼 색: 메뉴의 보라색과 구분되는 주황-코랄 */
.scan-btn { background: linear-gradient(135deg, #ff8a3d, #ff4d6d); box-shadow: 0 4px 14px rgba(255, 106, 77, 0.45); }

/* 내 로또 QR스캔 버튼 높이 약 15% 축소 (안쪽 위아래 여백만 줄임, 글자 크기는 그대로) */
.scan-btn { padding-top: 5px; padding-bottom: 5px; }
@media (max-width: 560px) {
  .scan-btn { padding-top: 6px; padding-bottom: 6px; }
}
@media (min-width: 400px) and (max-width: 560px) {
  .top-in .scan-btn { padding-top: 1.2px; padding-bottom: 1.2px; }
}

/* 내 번호: 요약 6칸 = 윗줄 3칸(저장한 게임·채점 완료·결과 대기) + 아랫줄 3칸(구매 금액·당첨금·손익) */
#kpi { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) {
  #kpi { gap: 8px; }
  #kpi > div { padding: 9px 8px; }
  #kpi b { font-size: 1.02rem; }
  #kpi span { font-size: 0.72rem; }
}

/* 내 번호 > 복권 QR로 가져오기 카드 */
.card .scan-btn.card-scan { width: auto; order: 0; margin-top: 0; padding: 7px 16px; font-size: 0.9rem; }
.qr-row input { min-width: 0; }
.qr-row .btn { flex: none; min-height: 38px; }

/* 제목 옆 아이콘(Images/*.svg): 선 색이 검정이라 어두운 배경에서는 흰색으로 반전 */
.ico-h { width: 20px; height: 20px; vertical-align: -4px; filter: invert(1); }
:root[data-theme='light'] .ico-h { filter: none; }

/* 폭 410px 이상인 폰: 헤더의 스캔 버튼을 한 줄 "로또QR스캔"으로 (로고 바로 옆) */
@media (min-width: 410px) and (max-width: 560px) {
  .top-in .scan-btn { order: 1; width: auto; margin-top: 0; padding: 7px 8px; font-size: 0.68rem; line-height: 1.2; white-space: nowrap; text-align: center; border-radius: 12px; }
  .scan-btn .sc-w, .scan-btn .sc-sp { display: none; }
  .scan-btn .sc-a, .scan-btn .sc-b { display: inline; }
  .top-in .scan-btn .cam-ic { width: 13px; height: 13px; vertical-align: -2px; }
}

/* 생성 기록 칸: 번호 아래에 어떤 방식으로 뽑았는지 작은 아이콘 */
.slotbox { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; gap: 1px; }
.slotbox b { font-size: 0.95rem; }
.slotbox i { font-style: normal; font-size: 0.72rem; }

/* 재미 방식(뽑기 머신·운세·꿈해몽) 입력 영역 */
.mode-box { margin-top: 12px; padding: 12px; border: 1px dashed var(--card-b); border-radius: 14px; background: rgba(255, 255, 255, 0.025); }
.mode-box[hidden] { display: none; }
.mode-box .machine { max-width: 320px; }
.mode-box textarea { min-height: 80px; }
.opt-grid.mode-on .opt-c { visibility: hidden; }  /* 고정수/제외수는 알고리즘 방식에서만 사용 */

/* ---------- 번호 생성(2번 카드): 생성수 제거 후 재배치 — 윗줄: 횟수 | 번호 생성 버튼, 아랫줄: 고정수 | 링크·카드 ---------- */
.opt-grid > .opt-a { grid-column: 1; grid-row: 1; }
.opt-grid > .opt-b { grid-column: 2; grid-row: 1; align-self: center; }
.opt-grid > .opt-c { grid-column: 1; grid-row: 2; }
.opt-grid > .opt-d { grid-column: 2; grid-row: 2; }
@media (max-width: 560px) {
  .opt-grid > .opt-a { grid-column: 1 !important; grid-row: 1 !important; }
  .opt-grid > .opt-b { grid-column: 2 !important; grid-row: 1 !important; }
  .opt-grid > .opt-c { grid-column: 1 !important; grid-row: 2 !important; }
  .opt-grid > .opt-d { grid-column: 2 !important; grid-row: 2 !important; }
  .opt-grid > .opt-c[open] { grid-column: 1 / -1 !important; }
  .opt-grid > .opt-c[open] ~ .opt-d { grid-column: 1 / -1 !important; grid-row: 3 !important; justify-self: start; }
}
/* 내 번호: 묶음(한 번에 등록한 5게임) 상자 */
.bundle { border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 14px; padding: 4px 12px 2px; margin: 6px 0 12px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.bundle-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0 4px; }
.bundle .result:last-child { border-bottom: 0; }

/* 재미 방식 화면은 오른쪽 3번 카드 안에 표시 */
#official .mode-box { margin-top: 12px; padding: 0; border: 0; background: none; }

/* 생성 방식 설명: 왼쪽에 아이콘 */
.eng-desc { display: flex; align-items: flex-start; gap: 10px; }
.eng-desc .ed-ic { font-size: 1.5rem; line-height: 1.15; flex: none; }

/* 생성 방식 설명 글자색: 눈에 잘 띄는 주황색 */
.eng-desc, .eng-desc.dim { color: #ff9f43; font-weight: 600; }

/* 생성 방식 버튼 오른쪽 위 라벨(기준선·빈도·간격 …): 글자 키우고, 스마트폰에서도 표시 */
.eng span.tg { font-size: 0.84rem; top: 8px; right: 10px; font-weight: 600; }
@media (max-width: 560px) {
  .eng span.tg { display: block; font-size: 0.66rem; top: 7px; right: 7px; }
}

/* 안내 문구(.opt-h)와 폰용 재미 방식 자리(.opt-m)를 그리드 안에 배치 */
.opt-grid > .opt-h { grid-column: 1 / -1; grid-row: 3; margin: 0; }
.opt-grid > .opt-m { display: none; }
@media (max-width: 560px) {
  /* 폰 순서: [생성 횟수 | 번호 생성] → 안내 문구 → (재미 방식 화면) → [고정수/제외수 | 링크·카드] → 결과 */
  .opt-grid > .opt-h { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .opt-grid > .opt-m { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .opt-grid > .opt-m:not([hidden]) { display: block; }
  .opt-grid > .opt-c { grid-row: auto !important; }
  .opt-grid > .opt-d { grid-row: auto !important; }
  .opt-grid > .opt-c[open] ~ .opt-d { grid-row: auto !important; }
}
/* 전체 폭으로 걸친 안내 문구/재미 방식 자리가 열 너비 계산(1fr auto)을 흔들지 않게 */
.opt-grid > .opt-h, .opt-grid > .opt-m { width: 0; min-width: 100%; }

/* 꿈해몽 입력칸 높이 키우기 */
.mode-box .d-txt { min-height: 170px; }

/* 번호 줄 위의 "N번째 · 생성 방식" 표시 */
.row-tag { font-size: 0.9rem; font-weight: 800; color: #ff9f43; letter-spacing: 0.01em; }
.row-tag.dimtag { color: var(--dim); font-weight: 600; }

/* 재미 방식(웹): 3번 카드에서 설명은 왼쪽, 번호 생성 버튼은 오른쪽 */
.mode-head { display: flex; align-items: flex-start; gap: 14px; margin-top: 2px; }
.mode-head p { margin: 4px 0 0; }
.mode-go { flex: none; }

/* 오늘의 운세 브리핑 */
.fortune-info { margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, #ff9f43 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, #ff9f43 11%, transparent), var(--card)); font-size: 0.88rem; line-height: 1.55; }
.fi-head { font-weight: 800; color: #ffb366; margin-bottom: 4px; }
.fi-main { margin: 4px 0 8px; font-weight: 700; }
.fi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 8px; }
.fi-grid span { white-space: nowrap; }
.fi-grid b { color: var(--b1); letter-spacing: 1px; }
.fi-line { margin: 0 0 8px; }
.fi-line b { color: var(--accent2); }
.fi-story { margin: 0 0 6px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.fi-story > span:first-child { font-weight: 700; color: var(--dim); font-size: 0.8rem; }
.fi-story .btn { margin-top: 6px; }
.fi-note { margin: 0; }

/* 뽑기 머신 아이콘(직접 그린 그림): 글자 크기에 맞추고 줄 가운데에 정렬 */
.m-ball { vertical-align: -0.14em; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.eng .ic .m-ball, .ed-ic .m-ball { width: 1em; height: 1em; display: block; }

/* 뽑기 머신(로또 추첨기 모양) */
.machine canvas.lotto-cv { aspect-ratio: 460 / 550; border-radius: 22px; background: linear-gradient(180deg, rgba(124, 92, 255, 0.10), rgba(255, 255, 255, 0.02)); cursor: default; }
.machine canvas.lotto-cv.stir { cursor: crosshair; }
.mode-box .machine { max-width: 400px; }

/* 운세 별점: 채운 별은 금색, 빈 별은 속을 비우고 아주 가는 테두리만 */
.fi-grid b i { font-style: normal; font-weight: 400; }
.fi-grid .sf { color: var(--b1); }
.fi-grid .se { color: transparent; -webkit-text-stroke: 0.6px #ffd9a0; }

/* 등수별 당첨 통계 막대 */
.rk-bars { display: flex; flex-direction: column; gap: 8px; }
.rk-row { display: grid; grid-template-columns: 44px 1fr 56px; gap: 10px; align-items: center; font-size: 0.9rem; }
.rk-lb { font-weight: 700; }
.rk-track { height: 16px; border-radius: 8px; background: var(--card); overflow: hidden; }
.rk-fill { height: 100%; min-width: 3px; border-radius: 8px; transition: width 0.5s; }
.rk-n { text-align: right; font-size: 0.85rem; }

/* ---------- 로또 명당 ---------- */
.shop { padding: 12px 0; border-bottom: 1px dashed var(--card-b); display: flex; flex-direction: column; gap: 3px; }
.shop:last-of-type { border-bottom: 0; }
.shop-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shop-h b { font-size: 1rem; }
.shop-b { margin-top: 6px; gap: 8px; }

/* 광고 자리 */
.ad-slot { margin: 0 0 16px; padding: 8px; border: 1px solid var(--card-b); border-radius: 14px; background: var(--card); text-align: center; overflow: hidden; }
.ad-slot.ad-bottom { margin: 16px 0 0; }
.ad-label { display: block; text-align: left; font-size: 0.68rem; color: var(--dim); margin-bottom: 4px; }
.ad-body { min-height: 20px; }