/* 로또각 — 동네 복권방 콘셉트: 누런 영수증 종이, 검은 잉크 테두리, 빨간 도장색, 간판 글씨 + 영수증 숫자 */
:root {
  --bg: #efe8d9;
  --card: #fbf7ee;
  --ink: #1d1a15;
  --ink2: #3f3a31;
  --muted: #7a7263;
  --line: #d4cab6;
  --soft: #e8e0cf;
  --brand: #d1342b;
  --brand-ink: #ffffff;
  --brand-soft: #f6dcd4;
  --accent: #c98a00;
  --good: #1f7a4d;
  --bad: #d1342b;
  --bar: #1d1a15;
  --bar-dim: #c7bca6;
  --shadow: none;
  --radius: 4px;
  --display: "Black Han Sans", "Pretendard Variable", Pretendard, sans-serif;
  --mono: "IBM Plex Mono", "Pretendard Variable", Pretendard, ui-monospace, monospace;
  --speck: rgba(60, 45, 20, .05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15130f; --card: #1e1b16; --ink: #efe7d6; --ink2: #cfc6b3; --muted: #978e7d; --line: #3a352b; --soft: #29251e;
    --brand: #ff5b48; --brand-ink: #15130f; --brand-soft: #3d201b; --accent: #f0b43a; --good: #4cc48a; --bad: #ff5b48;
    --bar: #efe7d6; --bar-dim: #4a4336; --speck: rgba(255, 240, 210, .03); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15130f; --card: #1e1b16; --ink: #efe7d6; --ink2: #cfc6b3; --muted: #978e7d; --line: #3a352b; --soft: #29251e;
  --brand: #ff5b48; --brand-ink: #15130f; --brand-soft: #3d201b; --accent: #f0b43a; --good: #4cc48a; --bad: #ff5b48;
  --bar: #efe7d6; --bar-dim: #4a4336; --speck: rgba(255, 240, 210, .03); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background-color: var(--bg);
  background-image: radial-gradient(var(--speck) 1px, transparent 1.2px);
  background-size: 5px 5px;
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 15px; line-height: 1.6; word-break: keep-all;
}
a { color: var(--brand); }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 400; font-family: var(--display); letter-spacing: 0; }
h1 { font-size: 2.3rem; }
h2 { font-size: 1.32rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 .8em; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
::selection { background: var(--brand); color: #fff; }

/* ---------- 머리말 ---------- */
.topline { background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: .74rem; letter-spacing: .02em; }
.topline .wrap { display: flex; gap: 18px; min-height: 28px; align-items: center; white-space: nowrap; overflow: hidden; }
.topline b { color: var(--brand); font-weight: 700; }
.topline .live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-right: 6px; vertical-align: 1px; animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.site-header { background: var(--bg); border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 50; }
.site-header > .wrap { display: flex; align-items: center; gap: 16px; min-height: 62px; }
.logo { display: flex; align-items: center; gap: 2px; font-family: var(--display); font-size: 1.7rem; color: var(--ink); text-decoration: none; white-space: nowrap; line-height: 1; }
.logo em { font-style: normal; display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-left: 3px; border-radius: 50%; border: 2.5px solid var(--brand); color: var(--brand); font-size: .78em; transform: rotate(-12deg); }
.nav { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin-left: auto; align-self: stretch; }
.nav::-webkit-scrollbar { display: none; }
.nav a { display: flex; align-items: center; padding: 0 13px; color: var(--ink2); text-decoration: none; white-space: nowrap; font-weight: 700; font-size: .93rem; border-left: 1px solid var(--line); }
.nav a:last-child { border-right: 1px solid var(--line); }
.nav a:hover { background: var(--soft); color: var(--ink); }
.nav a.on { color: var(--bg); background: var(--ink); }
@media (max-width: 760px) {
  .site-header > .wrap { flex-wrap: wrap; gap: 0; padding-top: 8px; }
  .nav { margin: 8px -16px 0; width: calc(100% + 32px); border-top: 1px solid var(--line); }
  .nav a { padding: 10px 13px; }
  .nav a:first-child { border-left: 0; }
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 26px; padding-bottom: 48px; }
.page-head { margin: 4px 0 22px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); position: relative; }
.page-head h1 { margin: 2px 0 6px; }
.page-head p { color: var(--ink2); margin: 0; max-width: 680px; }
.eyebrow { font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .08em; color: var(--brand); text-transform: uppercase; }

.site-footer { border-top: 2px solid var(--ink); background: var(--ink); color: #cfc6b3; font-size: .84rem; padding: 26px 0 34px; }
.site-footer .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 28px; }
.site-footer .f-logo { font-family: var(--display); font-size: 2.2rem; color: var(--bg); line-height: 1; grid-row: span 3; }
.site-footer p { margin: 0; }
.site-footer .mono { font-family: var(--mono); font-size: .76rem; color: #9a917f; }
@media (max-width: 600px) { .site-footer .wrap { grid-template-columns: minmax(0, 1fr); } .site-footer .f-logo { grid-row: auto; } }

/* ---------- 카드(종이 쪽지) ---------- */
.card { background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; position: relative; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1.5px dashed var(--line); }
.card-head h2, .card-head h3 { margin: 0; }
.sub { color: var(--muted); font-size: .86rem; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .grid3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.grid2 > .card, .grid3 > .card { margin-bottom: 0; }
.stack > * + * { margin-top: 16px; }
/* 양옆에 펀칭 구멍이 난 복권 쪽지 */
.ticket { -webkit-mask: radial-gradient(circle 9px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 9px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; }
.barcode { height: 34px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 17px); opacity: .85; }

/* ---------- 버튼·입력 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); padding: 9px 15px; border-radius: 3px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .08s, box-shadow .08s; }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.primary { background: var(--brand); color: #fff; box-shadow: 3px 3px 0 var(--ink); }
.btn.primary:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); background: var(--brand); color: #fff; }
.btn.primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.big { padding: 13px 24px; font-size: 1.08rem; font-family: var(--display); font-weight: 400; letter-spacing: .02em; }
.btn.small { padding: 5px 10px; font-size: .84rem; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.seg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--card); flex-wrap: wrap; overflow: hidden; }
.seg button { border: 0; border-left: 1.5px solid var(--ink); background: transparent; padding: 7px 13px; font-weight: 700; color: var(--ink2); cursor: pointer; font-size: .9rem; }
.seg button:first-child { border-left: 0; }
.seg button:hover { background: var(--soft); }
.seg button.on { background: var(--ink); color: var(--bg); }
.input, select.input { border: 1.5px solid var(--ink); background: var(--card); border-radius: 3px; padding: 9px 12px; min-width: 0; }
.input:focus { outline: 3px solid var(--brand); outline-offset: -1px; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .92rem; color: var(--ink2); }
.check input { accent-color: var(--brand); width: 16px; height: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.label { font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; display: block; }

/* ---------- 로또 공 ---------- */
.ball {
  --bs: 40px; --c: #999;
  width: var(--bs); height: var(--bs); border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font-family: var(--mono); font-weight: 700; font-size: calc(var(--bs) * .4); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, 0) 36%), var(--c);
  box-shadow: inset -2px -3px 6px rgba(0, 0, 0, .2), 0 0 0 1.5px rgba(29, 26, 21, .55);
  font-variant-numeric: tabular-nums; letter-spacing: -.04em;
}
.b1 { --c: #f2ae00; } .b2 { --c: #3a92d6; } .b3 { --c: #e04a3f; } .b4 { --c: #858277; } .b5 { --c: #55a52c; }
.ball.sm { --bs: 30px; } .ball.xs { --bs: 24px; font-size: 11px; } .ball.lg { --bs: 52px; }
.ball.ring { outline: 3px solid var(--ink); outline-offset: 2px; }
.balls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.plus { color: var(--muted); font-weight: 800; margin: 0 2px; font-family: var(--mono); }

/* ---------- 표 ---------- */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table.t { width: 100%; border-collapse: collapse; font-size: .92rem; }
.t th, .t td { padding: 9px 8px; border-bottom: 1px dashed var(--line); text-align: left; vertical-align: middle; }
.t th { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--muted); font-weight: 600; white-space: nowrap; border-bottom: 1.5px solid var(--ink); }
.t td.r, .t th.r { text-align: right; }
.t td.num, .t td.r { font-family: var(--mono); }
.t tr:last-child td { border-bottom: 0; }

/* ---------- 막대 차트 ---------- */
.bars { position: relative; display: grid; grid-template-columns: repeat(45, minmax(0, 1fr)); gap: 2px; align-items: end; height: 200px; padding-top: 18px; border-bottom: 1.5px solid var(--ink);
  background: repeating-linear-gradient(0deg, transparent 0 39px, var(--line) 39px 40px); }
.bars .b { position: relative; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.bars .b i { display: block; width: 100%; background: var(--bar-dim); border-radius: 1px 1px 0 0; min-height: 2px; }
.bars .b.top i { background: var(--brand); }
.bars .b:hover i { background: var(--ink); }
.bars-x { display: grid; grid-template-columns: repeat(45, minmax(0, 1fr)); gap: 2px; font-family: var(--mono); font-size: 9px; color: var(--muted); text-align: center; margin-top: 4px; font-variant-numeric: tabular-nums; }
.bars-x span:nth-child(5n+1) { color: var(--ink); font-weight: 700; }
@media (max-width: 560px) { .bars-x span:not(:nth-child(5n)) { visibility: hidden; } .bars-x span:first-child { visibility: visible; } }
.tip { position: fixed; pointer-events: none; z-index: 100; background: var(--ink); color: var(--bg); padding: 6px 10px; border-radius: 2px; font-family: var(--mono); font-size: .76rem; line-height: 1.5; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.tip b { color: var(--brand); }
.hbars { display: grid; gap: 7px; }
.hbar { display: grid; grid-template-columns: 70px 1fr 58px; gap: 10px; align-items: center; font-size: .86rem; font-family: var(--mono); }
.hbar .track { height: 12px; background: var(--soft); border-radius: 1px; overflow: hidden; }
.hbar .track i { display: block; height: 100%; background: var(--bar); }
.hbar .v { text-align: right; color: var(--ink2); font-variant-numeric: tabular-nums; }

/* ---------- 순위 목록 ---------- */
.rank-list { display: grid; gap: 7px; }
.rank-item { display: flex; align-items: center; gap: 10px; }
.rank-item .meter { flex: 1; height: 8px; background: var(--soft); overflow: hidden; }
.rank-item .meter i { display: block; height: 100%; background: var(--bar); }
.rank-item:nth-child(-n+3) .meter i { background: var(--brand); }
.rank-item .cnt { width: 64px; text-align: right; font-size: .84rem; color: var(--ink2); font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- 칩·도장 ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 2px; font-family: var(--mono); font-size: .72rem; font-weight: 600; border: 1px solid var(--line); background: var(--card); color: var(--ink2); white-space: nowrap; }
.chip.hot { border-color: var(--brand); color: var(--brand); }
.chip.cold { border-color: #2f6bb3; color: #2f6bb3; }
.chip.gold { border-color: var(--accent); color: var(--bg); background: var(--accent); }
.stamp { display: inline-block; border: 2.5px solid var(--brand); color: var(--brand); font-family: var(--display); padding: 2px 10px; border-radius: 4px; transform: rotate(-6deg); letter-spacing: .04em; }

.note { background: var(--soft); border-left: 4px solid var(--brand); padding: 12px 14px; font-size: .86rem; color: var(--ink2); }
.note b { color: var(--ink); }
.empty { color: var(--muted); text-align: center; padding: 28px 0; }
.big-num { font-family: var(--mono); font-size: 2rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-tile { border: 1.5px dashed var(--ink2); border-radius: 2px; padding: 12px 14px; background: transparent; }
.stat-tile .k { font-family: var(--mono); font-size: .72rem; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
.stat-tile .v { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.up { color: var(--brand); } .down { color: #2f6bb3; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 2px; font-weight: 700; z-index: 200; opacity: 0; transition: opacity .2s; pointer-events: none; box-shadow: 3px 3px 0 var(--brand); }
.toast.show { opacity: 1; }
.hide { display: none !important; }

/* ---------- 로또 용지 번호판 ---------- */
.slip {
  --red: #cf3a51; --line: #e8a2ab; --paper: #fff8f6;
  position: relative; max-width: 440px; color: var(--red);
  background:
    repeating-linear-gradient(0deg, rgba(207, 58, 81, .035) 0 1px, transparent 1px 22px),
    var(--paper);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 12px 12px 10px;
  box-shadow: 0 1px 2px rgba(120, 30, 40, .08), 0 6px 18px rgba(120, 30, 40, .08);
  user-select: none; -webkit-user-select: none;
}
.slip-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1.5px dashed var(--line); }
.slip-title { display: flex; align-items: center; gap: 5px; }
.slip-title b { font-size: 1.15rem; font-weight: 900; font-style: italic; letter-spacing: .02em; }
.slip-title span { background: var(--red); color: #fff; font-weight: 800; font-size: .78rem; padding: 1px 6px; border-radius: 4px; }
.slip-sub { font-size: .78rem; font-weight: 700; opacity: .8; }
.slip-count { margin-left: auto; font-size: .82rem; color: #4a2a30; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slip-count b { font-size: 1rem; color: #1b1b1f; }
.slip-count.full b { color: var(--red); }
.slip-body { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.slip-game { background: var(--red); border-radius: 4px; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; }
.slip-game span { color: #fff; font-weight: 900; font-size: .95rem; }
.slip-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px 6px; }
.slip-n { position: relative; aspect-ratio: .7; border: 0; padding: 0; background: transparent; color: var(--red); cursor: pointer; font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; border-radius: 3px; }
.slip-n::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--line); border-radius: 3px; background: linear-gradient(var(--line), var(--line)) center 16% / 46% 1.5px no-repeat; }
.slip-n span { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-38%); z-index: 1; transition: color .1s; }
.slip-n:hover::before { border-color: var(--red); background-color: rgba(207, 58, 81, .06); }
.slip-n:focus-visible { outline: 2px solid #1b1b1f; outline-offset: 2px; }
/* 검은 사인펜 마킹 */
.slip-n.fix::after { content: ""; position: absolute; inset: 3px 4px; background: #1d1c22; border-radius: 2px;
  clip-path: polygon(6% 2%, 40% 0, 94% 3%, 100% 30%, 97% 70%, 100% 97%, 60% 100%, 4% 98%, 0 66%, 3% 30%); }
.slip-n.fix span { color: #fff; }
.slip-n.fix.just::after { animation: ink .28s ease-out; transform-origin: top; }
@keyframes ink { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* 제외: 빨간 X */
.slip-n.ex::after { content: ""; position: absolute; inset: 4px 3px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1.3px), var(--red) calc(50% - 1.3px), var(--red) calc(50% + 1.3px), transparent calc(50% + 1.3px)),
    linear-gradient(to top left, transparent calc(50% - 1.3px), var(--red) calc(50% - 1.3px), var(--red) calc(50% + 1.3px), transparent calc(50% + 1.3px)); }
.slip-n.ex span { opacity: .4; }
.slip[data-mode="ex"] .slip-n:not(.fix):not(.ex):hover::before { border-style: dashed; }
.slip-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1.5px dashed var(--line); }
.slip-act { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: #fff; color: var(--red); font-weight: 800; font-size: .82rem; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.slip-act i { width: 10px; height: 14px; border: 1.5px solid var(--line); border-radius: 2px; }
.slip-act:hover { border-color: var(--red); }
.slip-act:hover i { background: #1d1c22; border-color: #1d1c22; }
.slip-note { margin-top: 8px; font-size: .74rem; opacity: .8; }
@media (max-width: 380px) { .slip { padding: 10px 8px 8px; } .slip-body { grid-template-columns: 18px minmax(0, 1fr); gap: 6px; } .slip-grid { gap: 6px 4px; } .slip-sub { display: none; } }