/* ===== 테마 토큰 ===== */
[data-theme="light"] {
  --bg:#eef1f6; --surface:#ffffff; --surface2:#f4f6fa; --text:#141a24; --sub:#5c6675;
  --line:#e2e7ef; --accent:#2f6bf6; --accent-weak:#e7eefe; --good:#0ea472; --good-weak:#e2f6ee;
  --warn:#e5484d; --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --bub:#2a3140; --bubshadow:5px 6px 0 rgba(16,24,40,.13);
  color-scheme:light;
}
[data-theme="dark"] {
  --bg:#0f131a; --surface:#171c25; --surface2:#1f2530; --text:#e9edf4; --sub:#9aa4b2;
  --line:#28303c; --accent:#5c85fb; --accent-weak:#1b2740; --good:#3ad29f; --good-weak:#16281f;
  --warn:#ff6b6b; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --bub:#8a95a8; --bubshadow:5px 6px 0 rgba(0,0,0,.4);
  color-scheme:dark;
}
[data-theme="night"] {
  --bg:#000000; --surface:#0b0b0e; --surface2:#141418; --text:#c9ccd3; --sub:#6a6f7a;
  --line:#1b1c22; --accent:#4c6ee0; --accent-weak:#12151f; --good:#2fae86; --good-weak:#0d1712;
  --warn:#d85560; --shadow:none;
  --bub:#565d6b; --bubshadow:5px 6px 0 rgba(0,0,0,.5);
  color-scheme:dark;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* 앱 느낌 유지: 텍스트 선택 차단 → 크롬 '탭하여 검색' 패널 방지 (입력창은 허용) */
body { -webkit-user-select:none; user-select:none; }
input, textarea, [contenteditable] { -webkit-user-select:text; user-select:text; }
@font-face { font-family:'Pretendard Variable';
  src:url('../vendor/PretendardVariable.woff2') format('woff2-variations');
  font-weight:45 920; font-display:swap; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:'Pretendard Variable',-apple-system,BlinkMacSystemFont,"Pretendard","Malgun Gothic",system-ui,sans-serif;
  display:flex; flex-direction:column; min-height:100vh; padding:16px 14px 40px;
  max-width:540px; margin:0 auto; gap:14px; letter-spacing:-.01em; word-break:keep-all;
  transition:background .25s,color .25s; }

/* ===== 헤더 (스크롤 시 축소 고정) ===== */
header { display:flex; justify-content:space-between; gap:10px;
  position:sticky; top:0; z-index:60; background:var(--bg);
  margin:-16px -14px 0; padding:14px 14px 10px; transition:box-shadow .2s; }
/* 스크롤 시: 크기 변화 없이 그림자만 (헤더가 이미 컴팩트해 축소 불필요) */
header { align-items:center; }
header.sh { box-shadow:0 3px 14px rgba(16,24,40,.10); }
.brand { display:flex; align-items:center; gap:9px; min-width:0; flex:1; }
.brand > div { min-width:0; }
.logo { width:34px; height:34px; border-radius:10px; box-shadow:var(--shadow); object-fit:cover; }
.brand h1 { font-size:18px; font-weight:800; margin:0; }
.brand .tag { font-size:11.5px; color:var(--sub); margin-top:1px; display:flex; align-items:center; gap:4px;
  white-space:nowrap; overflow:hidden; }
.brand .tag #meta { overflow:hidden; text-overflow:ellipsis; }
.dot { width:5px; height:5px; border-radius:50%; background:var(--good); display:inline-block; }
.themes { display:flex; gap:3px; background:var(--surface2); padding:3px; border-radius:10px; border:1px solid var(--line); }
/* 접힘: 현재 테마 버튼만 보임 → 탭하면 4개 펼침 */
.themes button { width:28px; height:26px; border:0; border-radius:7px; background:transparent; cursor:pointer;
  font-size:13px; color:var(--sub); display:none; place-items:center; padding:0; }
.themes button.on { display:grid; }
.themes.open button { display:grid; }
.themes.open button.on { background:var(--surface); color:var(--accent); box-shadow:var(--shadow); }
.acct { font-size:13.5px; font-weight:800; padding:9px 16px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); cursor:pointer; box-shadow:var(--shadow); max-width:150px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== 게임 스위처 (헤더 아래 고정) ===== */
.game-switch { display:flex; gap:8px; position:sticky; top:calc(var(--hdr-h,58px) - 1px);
  z-index:55; background:var(--bg); margin:0 -14px; padding:2px 14px 8px; }
.gs img { height:26px; width:auto; vertical-align:-7px; margin-right:2px; }
.gs { flex:1; padding:12px; border-radius:13px; border:1.5px solid var(--line); background:var(--surface);
  color:var(--sub); font-size:14px; font-weight:800; cursor:pointer; transition:.15s; }
.gs.on { border-color:var(--accent); color:var(--accent); background:var(--accent-weak); box-shadow:var(--shadow); }
/* 도움말 ? 버튼 + 시트 */
.hq { display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface2); color:var(--sub); font-size:11px;
  font-weight:800; cursor:pointer; vertical-align:-2px; margin-left:5px; padding:0; }
/* 만화 말풍선 스타일 팝업 */
.help-card { background:var(--surface); border-radius:22px; padding:20px 18px; width:100%;
  max-width:400px; margin-top:32vh; position:relative;
  border:2.5px solid var(--bub); box-shadow:var(--bubshadow);
  animation:bubpop .32s cubic-bezier(.34,1.56,.64,1); }
.help-card h3 { font-size:15.5px; margin:0 0 10px; color:var(--text); }
.help-card p { font-size:13px; color:var(--sub); line-height:1.8; margin:0 0 8px; word-break:keep-all; }
.help-card p b { color:var(--text); }
/* 말꼬리 + 곰 마스코트 (도움말 팝업) */
.help-card.bub::after { content:''; position:absolute; bottom:-12.5px; left:34px;
  width:21px; height:21px; background:var(--surface); transform:rotate(45deg);
  border-right:2.5px solid var(--bub); border-bottom:2.5px solid var(--bub); }
.help-bear { font-size:40px; margin-top:16px; line-height:1; width:100%; max-width:400px;
  text-align:left; padding-left:26px;
  animation:bearbob 2.6s ease-in-out infinite; filter:drop-shadow(2px 3px 0 rgba(0,0,0,.18)); }
@keyframes bubpop { 0%{ transform:scale(.82); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@keyframes bearbob { 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-5px) rotate(3deg); } }
/* 수동 입력 그리드 */
.mgrid { display:grid; grid-template-columns:repeat(9,1fr); gap:5px; margin-top:12px; }
.mg { aspect-ratio:1; border-radius:10px; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow); color:var(--text); font-size:12.5px;
  display:grid; place-items:center; cursor:pointer; user-select:none; font-weight:700; }
.mg:active { transform:translateY(1px); box-shadow:none; }
.mg.sel { color:#182231; font-weight:900; border-color:transparent;
  background-size:100% 100%; background-repeat:no-repeat; background-color:transparent;
  box-shadow:none; transform:scale(1.08); transition:transform .12s; }
.mg.sel.mb1{background-image:url(../icons/ball_1.png)} .mg.sel.mb2{background-image:url(../icons/ball_2.png)}
.mg.sel.mb3{background-image:url(../icons/ball_3.png)} .mg.sel.mb4{background-image:url(../icons/ball_4.png)}
.mg.sel.mb5{background-image:url(../icons/ball_5.png)}
/* 직접입력 상단 6슬롯 프리뷰 */
.mslots { display:flex; gap:8px; justify-content:center; padding:12px 10px;
  background:var(--surface2); border:1px solid var(--line); border-radius:14px; margin:10px 0 2px; }
.mslot { width:38px; height:38px; border-radius:50%; border:2px dashed var(--line);
  display:grid; place-items:center; color:var(--sub); font-size:12px; font-weight:700; }
.mslot.f { border:none; }
.mslot.f .ball { width:38px; height:38px; font-size:15px; }
/* 연금 직접입력: 조 칩 + 슬롯 + 전화 키패드 */
.pm-gs { display:flex; gap:6px; margin:8px 0 2px; }
.pm-g { flex:1; padding:10px 0; border-radius:10px; border:1.5px solid var(--line); background:var(--surface2);
  color:var(--sub); font-size:12.5px; font-weight:800; text-align:center; cursor:pointer; transition:.12s; }
.pm-g.on { border-color:var(--accent); color:var(--accent); background:var(--accent-weak); }
.pm-slots { display:flex; gap:6px; margin:8px 0 4px; padding:10px 8px; background:var(--surface2);
  border-radius:12px; border:1px solid var(--line); }
.pm-slot { flex:1; aspect-ratio:1; border-radius:50%; background:var(--surface);
  border:1.5px dashed var(--line); display:grid; place-items:center; transition:.12s; }
.pm-slot.f { border-style:solid; border-color:transparent; background:none; }
.pm-slot.cur { border-style:solid; border-color:var(--accent); background:var(--accent-weak); }
.pm-slot.cur::before { content:''; width:2px; height:15px; border-radius:1px; background:var(--accent); animation:pmblink 1.1s steps(2) infinite; }
@keyframes pmblink { 50% { opacity:0; } }
.pm-slot .ball { width:100%; height:100%; font-size:17px; }
.pm-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:12px; }
.pm-key { height:48px; border-radius:12px; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow); font-size:20px; font-weight:800; color:var(--text); cursor:pointer;
  display:grid; place-items:center; user-select:none; padding:0; }
.pm-key:active { background:var(--accent-weak); transform:translateY(1px); box-shadow:none; }
.pm-key.fn { font-size:13px; color:var(--sub); font-weight:700; background:var(--surface2); box-shadow:none; }

/* 퀵액션 타일 */
.qa-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.qa { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 4px 10px;
  border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--text);
  font-size:11.5px; font-weight:700; cursor:pointer; box-shadow:var(--shadow); }
.qa:active { transform:translateY(1px); }
.qa-i { font-size:21px; line-height:1; }
.ic { width:1.05em; height:1.05em; vertical-align:-0.13em; display:inline-block; }
.ci { width:1.25em; height:1.25em; vertical-align:-0.22em; display:inline-block; object-fit:contain;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.12)); }
.tab .ci { width:18px; height:18px; vertical-align:-4px; margin-right:3px; }
.qa-i .ci { width:27px; height:27px; }
.tab .ic { width:15px; height:15px; margin-right:3px; vertical-align:-2.5px; }
.ic-x { width:17px; height:17px; display:block; }
.rm .ic-x { width:14px; height:14px; }
.scan-ov .x .ic-x { margin:auto; }
.qa-i svg { width:24px; height:24px; display:block; }
.qa:nth-child(1) .qa-i { color:#4f8cff; }
.qa:nth-child(2) .qa-i { color:#e8a500; }
.qa:nth-child(3) .qa-i { color:#12b886; }
.qa:nth-child(4) .qa-i { color:#9775fa; }

/* ===== 탭 ===== */
.tabs { display:flex; gap:4px; background:var(--surface2); padding:4px; border-radius:12px; border:1px solid var(--line); }
.tab { flex:1; padding:10px; text-align:center; border-radius:9px; color:var(--sub);
  font-weight:700; font-size:13.5px; cursor:pointer; transition:.15s; }
.tab.on { background:var(--surface); color:var(--text); box-shadow:var(--shadow); }

/* ===== 카드 ===== */
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.card + .card { margin-top:12px; }
.label { font-size:12.5px; color:var(--sub); font-weight:600; }

/* ===== 볼 ===== */
.balls { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
/* 3D 렌더 볼: 실사 광택 볼 이미지 + 중앙 라벨 위 숫자 오버레이 */
.ball { width:clamp(26px,7vw,34px); height:clamp(26px,7vw,34px); border-radius:50%; display:grid; place-items:center;
  font-weight:900; font-size:clamp(10.5px,3vw,13px); color:#182231; position:relative;
  background-size:100% 100%; background-repeat:no-repeat;
  filter:drop-shadow(0 2px 3px rgba(16,24,40,.22)); }
.ball.b1{background-image:url(../icons/ball_1.png)} .ball.b2{background-image:url(../icons/ball_2.png)}
.ball.b3{background-image:url(../icons/ball_3.png)} .ball.b4{background-image:url(../icons/ball_4.png)}
.ball.b5{background-image:url(../icons/ball_5.png)}
.ball.bonus{background-image:url(../icons/ball_b.png)}
.plus { color:var(--sub); font-weight:700; margin:0 1px; }

/* ===== 컨트롤 ===== */
.field { display:flex; align-items:center; gap:9px; margin:14px 0 4px; font-size:13.5px; color:var(--sub); }
input[type=number]{ width:58px; padding:9px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface2); color:var(--text); font-size:14px; text-align:center; font-weight:700; }
select.num { padding:9px 6px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface2); color:var(--text); font-size:14px; text-align:center; font-weight:700; }
/* 테마 따라가는 입력란. 브라우저 기본 입력란은 다크·나이트에서 흰 칸으로 남는다
   (정의 안 된 변수에 흰색 폴백을 두면 같은 일이 난다 — 빽곰님 2026-08-01). */
.ipt { width:100%; padding:12px 13px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface2); color:var(--text); font-size:14px; font-weight:600;
  box-sizing:border-box; outline:none;
  -webkit-appearance:none; appearance:none; }   /* type=search 의 기본 모양(iOS 둥근 칸) 제거 */
/* type=search 의 브라우저 기본 지우기(×) 버튼 — 테마와 안 맞아 숨긴다 */
.ipt::-webkit-search-decoration, .ipt::-webkit-search-cancel-button,
.ipt::-webkit-search-results-button, .ipt::-webkit-search-results-decoration { display:none; }
/* 테마 따라가는 드롭다운. 안드로이드에서 <select> 를 누르면 뜨는 목록은 네이티브
   대화상자라 페이지의 color-scheme 이 아니라 폰·크롬 테마를 따른다. 폰이 라이트면
   앱이 다크여도 흰 팝업이 뜬다 — CSS 로는 못 고쳐서 직접 만든다(빽곰님 2026-08-01 스샷). */
/* 체크박스·라디오도 테마색으로 — 기본은 브라우저 파랑이라 테마와 따로 논다 */
input[type=checkbox], input[type=radio] { accent-color:var(--accent); }
.dd { position:relative; }
.dd-btn { width:100%; display:flex; align-items:center; gap:8px; text-align:left;
  padding:12px 13px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface2); color:var(--text); font-size:14px; font-weight:700; cursor:pointer; }
.dd-btn .dd-cap { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-btn .dd-ar { flex:0 0 auto; color:var(--sub); font-size:11px; }
.dd.open .dd-btn { border-color:var(--accent); }
.dd-list { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
  max-height:46vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:5px; }
.dd-item { padding:11px 12px; border-radius:9px; font-size:14px; font-weight:600;
  color:var(--text); cursor:pointer; }
.dd-item.on { background:var(--accent-weak); color:var(--accent); font-weight:800; }
.dd-item:active { background:var(--surface2); }
.ipt::placeholder { color:var(--sub); font-weight:500; }
.ipt:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }
/* 자동완성이 흰 배경으로 덮는 것 방지 — 다크에서 글씨가 안 보이던 흔한 문제 */
.ipt:-webkit-autofill, .ipt:-webkit-autofill:hover, .ipt:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--text); caret-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--surface2) inset;
  transition:background-color 99999s ease-in-out 0s; }
.btn { padding:12px 14px; font-size:14.5px; font-weight:800; color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent) 45%, color-mix(in srgb, var(--accent) 82%, #000));
  border:0; border-radius:12px; cursor:pointer; flex:1; white-space:nowrap;
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .08s, box-shadow .12s; }
.btn:active { transform:translateY(1.5px);
  box-shadow:0 1px 4px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.15); }
.btn:disabled { background:var(--surface2); color:var(--sub); box-shadow:none; cursor:default; }
.field .btn { padding:12px 10px; font-size:14px; }
.btn:active{ transform:translateY(1px); }

.gen-row { display:flex; flex-direction:column; padding:10px 0; border-bottom:1px solid var(--line); }
.gen-row:last-child{ border-bottom:0; }
.gline2 { display:flex; align-items:center; gap:clamp(3px,1.2vw,6px); flex-wrap:nowrap; }
.rowend { margin-left:auto; display:flex; align-items:center; gap:clamp(4px,1.4vw,8px); flex-wrap:nowrap; }
.meter { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--sub); white-space:nowrap; }
.meter .mlab { font-weight:700; }
.dots { display:inline-flex; gap:2.5px; }
.dt { width:6px; height:6px; border-radius:50%; background:var(--line); }
.mnum { font-weight:800; font-variant-numeric:tabular-nums; min-width:15px; text-align:right; }
.why-btn { flex:0 0 auto; width:29px; height:29px; border:1px solid var(--line); background:var(--surface2);
  border-radius:8px; cursor:pointer; font-size:12.5px; padding:0; display:grid; place-items:center; }
/* 정직 선언 카드 */
.trust { background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.trust summary { list-style:none; cursor:pointer; padding:12px 14px; font-size:12.5px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.trust summary::-webkit-details-marker { display:none; }
.trust summary .ck { color:var(--good); font-weight:900; }
.trust summary .arw { margin-left:auto; color:var(--sub); font-size:10px; transition:.2s; }
.trust[open] summary .arw { transform:rotate(180deg); }
.trust .body { padding:0 14px 13px; font-size:12.5px; color:var(--sub); line-height:1.75; }
.trust .body b { color:var(--text); }
.trust .tline { padding:6px 0; border-bottom:1px dashed var(--line); }
.trust .tline:last-child { border-bottom:0; }
.cart { min-width:48px; text-align:center; padding:6px 8px; font-size:11.5px; font-weight:700;
  border:1px solid var(--line); border-radius:8px; background:var(--surface2); color:var(--sub); cursor:pointer; white-space:nowrap; }
.cart.on { background:var(--good-weak); color:var(--good); border-color:var(--good); }
.badge { display:none; background:var(--accent); color:#fff; font-size:10px; font-weight:800;
  border-radius:9px; padding:1px 6px; margin-left:4px; vertical-align:middle; }
.saved-row { display:flex; align-items:center; gap:7px; padding:11px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.saved-row .rm { margin-left:auto; background:transparent; border:0; color:var(--sub); font-size:18px; cursor:pointer; line-height:1; padding:0 4px; }
/* 일치 숫자 = 골드 링 + 은은한 발광, (QR 당첨 게임에선) 불일치 숫자는 흐리게 */
.ball.match { box-shadow:0 0 0 2.5px #f2a900, 0 0 9px rgba(242,169,0,.55), inset 0 -2px 3px rgba(0,0,0,.12); }
.qr-game.won .ball:not(.match) { filter:grayscale(.75); opacity:.4; }
.mtag { font-size:11.5px; color:var(--sub); width:100%; }
.mtag.win { color:var(--good); font-weight:700; }
.empty { font-size:12.5px; color:var(--sub); text-align:center; padding:26px 0; }
.btn.ghost { background:linear-gradient(180deg, var(--surface), var(--surface2));
  color:var(--text); border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.35); }
[data-theme="dark"] .btn.ghost, [data-theme="night"] .btn.ghost {
  box-shadow:0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06); }
/* QR 스캐너 오버레이 */
.scan-ov { position:fixed; inset:0; background:rgba(8,10,14,.96); z-index:100; display:flex;
  flex-direction:column; align-items:center; justify-content:flex-start; padding:24px 16px; overflow:auto; }
.scan-ov .x { position:absolute; top:14px; right:16px; background:rgba(255,255,255,.14); color:#fff;
  border:0; width:38px; height:38px; border-radius:50%; font-size:16px; cursor:pointer; }
.scan-title { color:#fff; font-size:15px; font-weight:700; margin:44px 0 14px; text-align:center; }
.scan-wrap { position:relative; width:100%; max-width:380px; }
.scan-ov video { width:100%; border-radius:16px; background:#000; aspect-ratio:1; object-fit:cover; }
.scan-frame { position:absolute; inset:6%; border:2.5px solid rgba(255,255,255,.9); border-radius:16px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.22); pointer-events:none; }
.scan-hint { color:rgba(255,255,255,.72); font-size:12px; margin-top:14px; text-align:center; }
.scan-result { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px;
  width:100%; max-width:400px; max-height:88vh; overflow:auto; margin-top:22px; }
/* QR 결과: 히어로·당첨번호는 컴팩트하게, 당첨 게임은 크게, 미당첨은 흐리게 — 한 화면 목표 */
.qr-hero { display:flex; align-items:center; justify-content:center; gap:10px; text-align:left;
  padding:12px 14px; border-radius:14px; margin-bottom:10px; }
.qr-hero.win { background:linear-gradient(135deg,#ffc61a,#f08c00); color:#3a2600; }
.qr-hero.win .qh-sub { opacity:1; color:#5c3d00; }
.qr-hero.lose, .qr-hero.neutral { background:var(--surface2); }
.qh-emoji { font-size:30px; line-height:1; }
.qh-pig { height:52px; width:auto; flex:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.qh-title { font-size:20px; font-weight:900; }
.qr-hero.lose .qh-title, .qr-hero.neutral .qh-title { color:var(--text); }
.qh-sub { font-size:11.5px; margin-top:2px; opacity:.92; }
.win-line { background:var(--accent-weak); border:1px solid var(--accent); border-radius:12px;
  padding:8px 10px 9px; margin-bottom:8px; }
.win-line .wl-lab { font-size:11px; font-weight:800; color:var(--accent); text-align:center; margin-bottom:6px; }
.win-line .qg-balls { justify-content:center; }
.win-line .ball { width:28px; height:28px; font-size:13px; }
.qr-game { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 2px; border-bottom:1px solid var(--line); }
.qr-game:last-child { border-bottom:0; }
.qr-game .ball { width:26px; height:26px; font-size:12px; }
.qr-game.miss { opacity:.5; }
.qr-game.miss .ball { width:22px; height:22px; font-size:10.5px; }
.qr-game.won { background:var(--good-weak); border:1.5px solid var(--good); border-radius:12px;
  padding:9px 10px; margin:7px 0; }
.qr-game.won .ball { width:30px; height:30px; font-size:14px; }
.qg-balls { display:flex; gap:4px; flex-wrap:wrap; }
/* QR 결과 하단 안내: 성격별 분리 — 섹션 라벨 / 상태줄 / 경고 박스 */
.qr-sec { display:flex; justify-content:space-between; align-items:baseline;
  font-size:11.5px; font-weight:700; color:var(--sub); margin:10px 2px 2px; }
.qr-sec .hint { font-weight:500; font-size:10.5px; opacity:.8; }
.qr-status { font-size:12px; font-weight:600; color:var(--good); text-align:center; margin-top:9px; }
.qr-warn { background:rgba(240,168,0,.09); border:1px solid rgba(240,168,0,.45);
  border-radius:10px; padding:9px 11px; margin-top:9px;
  font-size:11.5px; line-height:1.65; color:var(--sub); text-align:center; }
.qr-warn b { color:var(--text); }
.qg-tag { flex:none; font-size:11px; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.qg-tag .rk { color:#e09600; font-weight:900; font-size:15px; white-space:nowrap;
  text-shadow:0 0 12px rgba(242,169,0,.3); }
.qg-tag .lose-tag { color:var(--sub); white-space:nowrap; }
.saved-chip { font-size:10.5px; font-weight:700; color:var(--accent); background:var(--accent-weak); padding:2px 7px; border-radius:7px; }
.scan-actions { margin-top:16px; }
.scan-actions .btn { width:100%; }
.toast { position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(20px); background:var(--surface);
  color:var(--text); padding:11px 18px; border-radius:999px; font-size:13px; font-weight:700; z-index:300; opacity:0;
  transition:.25s; pointer-events:none; border:2px solid var(--bub); box-shadow:var(--bubshadow); max-width:90vw; text-align:center; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.confetti { position:fixed; inset:0; z-index:200; pointer-events:none; }
/* 구매 도우미(화면분할 가이드) */
.g-nums { background:var(--surface2); border-radius:10px; padding:8px 10px; margin:10px 0 4px; }
.gline { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:14px; }
.gline .ball { width:27px; height:27px; font-size:12.5px; flex:none; }
.gline .gl-i { flex:0 0 18px; height:18px; border-radius:50%; background:var(--surface);
  border:1px solid var(--line); color:var(--sub); font-size:11px; font-weight:800;
  display:grid; place-items:center; }
.gline span { color:var(--sub); }
.g-tabs { display:flex; gap:4px; background:var(--surface2); padding:4px; border-radius:10px; margin:14px 0 4px; }
.g-tab { flex:1; padding:9px; text-align:center; border-radius:7px; font-size:13.5px; font-weight:700; color:var(--sub); cursor:pointer; }
.g-tab.on { background:var(--surface); color:var(--accent); box-shadow:var(--shadow); }
.g-svg { display:flex; justify-content:center; padding:8px 0 6px; }
.g-step { display:flex; gap:10px; font-size:14px; color:var(--text); padding:8px 0; line-height:1.6; align-items:flex-start; border-bottom:1px dashed var(--line); }
.g-step:last-child { border-bottom:0; }
.g-step .num { flex:0 0 22px; height:22px; border-radius:50%; background:var(--accent); color:#fff;
  font-size:11px; font-weight:800; display:grid; place-items:center; margin-top:1px; }
.g-step b { color:var(--accent); }
.g-note { font-size:11.5px; color:var(--sub); line-height:1.6; margin-top:10px; }

.note { font-size:12.5px; color:var(--sub); background:var(--surface2); border-radius:10px;
  padding:11px 13px; margin-top:14px; line-height:1.8; }
.note b { color:var(--text); }
/* 방법론·검증 어필 카드 */
.method-head { font-size:14px; line-height:1.5; }
.stat-row { display:flex; gap:8px; margin-top:13px; }
.stat { flex:1; background:var(--surface2); border-radius:12px; padding:13px 6px; text-align:center; }
.stat-n { font-size:21px; font-weight:900; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.1; }
.stat-l { font-size:11px; color:var(--sub); margin-top:3px; }
.method-more { margin-top:13px; }
.method-more summary { list-style:none; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--accent); }
.method-more summary::-webkit-details-marker { display:none; }
.chk { font-size:12.5px; color:var(--text); padding:7px 0; line-height:1.5; border-bottom:1px dashed var(--line); }
.chk:last-of-type { border-bottom:0; }
.chk b { color:var(--text); }
.chk-sub { color:var(--sub); font-size:11.5px; padding-left:19px; display:inline-block; }
.method-verify { font-size:12px; color:var(--sub); line-height:1.65; background:var(--good-weak);
  border-radius:10px; padding:11px 12px; margin-top:10px; }
.method-verify b { color:var(--text); }
/* 랜덤 대비 비교 */
#genCompare { margin-top:14px; }
#genCompare:empty { display:none; }
.cmp { background:var(--surface2); border-radius:12px; padding:12px 13px; }
.cmp-title { font-size:12px; color:var(--sub); font-weight:600; margin-bottom:9px; }
.cmp-row { display:flex; align-items:center; gap:8px; margin-top:6px; }
.cmp-lab { font-size:11.5px; width:58px; color:var(--sub); }
.cmp-bar { flex:1; height:13px; background:var(--surface); border-radius:7px; overflow:hidden; }
.cmp-bar i { display:block; height:100%; border-radius:7px; transition:width .5s ease; }
.cmp-n { font-size:12.5px; font-weight:800; width:24px; text-align:right; }
.cmp-note { font-size:11px; color:var(--sub); margin-top:9px; }
.cmp-note b { color:var(--good); }
/* 조합별 근거 */
.why-toggle { width:100%; text-align:left; background:none; border:0; color:var(--accent);
  font-size:11.5px; font-weight:700; cursor:pointer; padding:7px 0 0; }
.why-detail { width:100%; display:none; gap:6px; flex-wrap:wrap; margin-top:7px; }
.why-detail.open { display:flex; }
.why-i { font-size:11px; color:var(--sub); background:var(--surface2); border-radius:7px; padding:4px 9px; }
.why-i b { color:var(--good); }
/* 제외 번호 */
.ex-wrap { margin-top:14px; }
.ex-wrap summary { list-style:none; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--sub); }
.ex-wrap summary::-webkit-details-marker { display:none; }
.ex-wrap summary span { color:var(--warn); font-weight:600; }
.ex-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:5px; margin-top:10px; }
.cf-body { margin-top:10px; }
.cf-row { display:flex; align-items:center; gap:8px; margin-bottom:9px; font-size:13px; color:var(--text); }
.cf-lab { width:76px; flex:none; font-size:12.5px; font-weight:700; color:var(--sub); }
.cf-row input[type=number] { width:58px; }
.cf-row select { border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:13px;
  background:var(--surface); color:var(--text); }
.cf-reset { border:1px solid var(--line); border-radius:9px; padding:7px 12px; font-size:12px; font-weight:700;
  background:var(--surface); color:var(--sub); cursor:pointer; }
.wtpl { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:9px 0 2px; }
.wtpl-c { border:1px solid var(--line); border-radius:11px; padding:10px 11px; cursor:pointer;
  background:var(--surface2); font-size:11.5px; color:var(--sub); line-height:1.45; }
.wtpl-c b { display:block; font-size:13px; color:var(--text); margin-bottom:2px; }
.wtpl-c.on { border-color:var(--accent); background:var(--accent-weak); }
.wtpl-c.on b { color:var(--accent); }
.ex-cell { aspect-ratio:1; border-radius:8px; background:var(--surface2); color:var(--sub); font-size:12px;
  display:grid; place-items:center; cursor:pointer; user-select:none; border:1px solid transparent; }
.ex-cell.ex { background:var(--warn); color:#fff; font-weight:700; }
/* 브리핑 탭 */
.cd-wrap { display:flex; align-items:baseline; gap:10px; margin-top:8px; }
.cd-big { font-size:30px; font-weight:900; color:var(--accent); font-variant-numeric:tabular-nums; }
.cd-sub { font-size:12px; color:var(--sub); }
.rev-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
/* 지난 회차 등수별 당첨금 */
.rk-row { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:6px 2px; border-bottom:1px solid var(--line); }
.rk-row:last-child { border-bottom:none; }
.rk-tier { font-weight:800; width:34px; }
.rk-tier.t1 { color:var(--accent); }
.rk-w { color:var(--sub); flex:1; }
.rk-p { font-weight:700; }
.rk-p.t1 { color:var(--good); }
.trend { margin-top:8px; }
.trend-row { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12px; color:var(--sub); }
.trend-lab { width:52px; }
.trend-bar { flex:1; height:10px; background:var(--surface2); border-radius:5px; overflow:hidden; }
.trend-bar i { display:block; height:100%; border-radius:5px; }
.trend-n { width:66px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.nar { font-size:12.5px; line-height:1.75; background:var(--surface2); border-radius:10px; padding:12px 13px; margin-top:12px; }
.nar b { color:var(--text); }

/* ===== 휠 pool ===== */
.grid45 { display:grid; grid-template-columns:repeat(9,1fr); gap:5px; margin-top:6px; }
.g45 { aspect-ratio:1; border-radius:9px; background:var(--surface2); color:var(--sub); font-size:12.5px;
  display:grid; place-items:center; cursor:pointer; user-select:none; border:1px solid transparent; font-weight:600; }
.g45.high { color:var(--accent); }
.g45.sel { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:var(--shadow); }
.guar { margin-top:6px; }
.guar-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; background:var(--good-weak); border-radius:10px; margin-top:6px; font-size:12.5px; }
.guar-row .g { color:var(--good); font-weight:800; white-space:nowrap; }
.wt-row { display:flex; align-items:center; gap:clamp(3px,1.1vw,6px); padding:5px 0; border-bottom:1px solid var(--line); }
.wt-row:last-of-type { border-bottom:0; }
.wt-i { font-size:10.5px; color:var(--sub); width:20px; font-weight:700; flex:0 0 auto; }
.wball { width:27px; height:27px; font-size:11.5px; }
.wt-cs { margin-left:auto; font-size:11px; color:var(--sub); font-weight:800; font-variant-numeric:tabular-nums; }
/* 판매점 리스트 */
.st-row { display:flex; align-items:center; gap:8px; padding:11px 6px; border-bottom:1px solid var(--line); cursor:pointer; }
.st-row:last-child { border-bottom:0; }
.st-row.on { background:var(--accent-weak); border-radius:11px; }
.st-info { flex:1; min-width:0; }
.st-name { font-size:13.5px; font-weight:800; color:var(--text); }
.st-cnt { color:var(--warn); font-size:12px; }
.st-addr { font-size:11.5px; color:var(--sub); margin-top:2px; word-break:keep-all; }
.st-map { flex:0 0 auto; font-size:11px; font-weight:800; padding:7px 9px; border-radius:8px; text-decoration:none; }
/* 전체 회차 모드 — 판매점별 1·2등 횟수 배지와, 눌렀을 때 펼쳐지는 회차 목록 */
.st-badge { margin-top:3px; display:flex; gap:5px; flex-wrap:wrap; }
.st-badge span { font-size:11px; font-weight:800; padding:2px 7px; border-radius:7px; }
.st-badge .b1 { background:#fdeede; color:#c2610a; }
.st-badge .b2 { background:var(--accent-weak); color:var(--accent); }
[data-theme=dark] .st-badge .b1,[data-theme=night] .st-badge .b1 { background:#33261a; color:#f0b878; }
.st-det { margin-top:7px; padding:8px 10px; border-radius:9px; background:var(--surface2); }
.st-det-sum { font-size:12px; font-weight:700; color:var(--text); }
.st-det-r { margin-top:5px; display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; }
.st-det-r em { flex:0 0 auto; font-style:normal; font-size:11px; font-weight:800; padding:2px 6px;
  border-radius:6px; background:var(--accent-weak); color:var(--accent); }
.st-det-r em.rk1 { background:#fdeede; color:#c2610a; }
[data-theme=dark] .st-det-r em.rk1,[data-theme=night] .st-det-r em.rk1 { background:#33261a; color:#f0b878; }
.st-det-r i { font-style:normal; font-size:11.5px; color:var(--sub); }
.st-det-r i::after { content:'·'; margin:0 3px; opacity:.5; }
.st-det-r i:last-child::after { content:''; margin:0; }
#stMap { display:none; height:235px; border-radius:12px; margin-top:10px; border:1px solid var(--line); }
/* 지도·거리뷰 크게 보기 — 틀이 좁아 답답했다(빽곰님 2026-08-01).
   ⚠ 처음엔 position:fixed 로 화면 전체에 띄웠는데, 지도가 사라지고 다시 안 나왔다.
     카카오 지도 컨테이너를 fixed 로 옮기는 건 위험하다. 컨테이너는 그대로 두고
     높이만 키운다 — 폰에서는 이것만으로 거의 전체화면이다. */
/* 높이만 키우면 폭이 좁아 여전히 답답하다(빽곰님 2026-08-01). 카드 안쪽 여백만큼
   좌우로 밀어내 카드 폭을 꽉 채우고, 카드 자체의 최대폭 제한도 잠시 푼다.
   뷰포트 단위(100vw)로 넘기면 부모의 overflow:auto 때문에 가로 스크롤이 생겨서 안 쓴다. */
#stMap.big, #stRv.big { height:78vh; margin-left:-16px; margin-right:-16px;
  width:calc(100% + 32px); border-radius:0; border-left:0; border-right:0; }
.scan-result.wide { max-width:100%; }
/* 내 위치 표시 — 지름 20m 짜리 원이라 지도를 조금만 넓혀도 안 보였다(빽곰님 2026-08-01).
   화면 크기 고정인 오버레이로 바꾸고, 퍼지는 파장을 둬서 눈에 먼저 들어오게 한다. */
.mypin { position:relative; width:20px; height:20px; }
.mypin .mp-dot { position:absolute; inset:0; border-radius:50%; background:#2f6bff;
  border:3px solid #fff; box-shadow:0 0 0 2px rgba(47,107,255,.4), 0 2px 7px rgba(0,0,0,.4); }
.mypin::before { content:''; position:absolute; left:50%; top:50%; width:52px; height:52px;
  margin:-26px 0 0 -26px; border-radius:50%; background:rgba(47,107,255,.22);
  animation:mppulse 1.9s ease-out infinite; }
@keyframes mppulse { 0%{transform:scale(.42);opacity:.95} 100%{transform:scale(1.15);opacity:0} }
/* 동네로 찾은 경우엔 그 동네 이름을 붙인 핀을 세운다 */
.areapin { background:#2f6bff; color:#fff; font-size:12px; font-weight:800; padding:5px 10px;
  border-radius:10px; white-space:nowrap; box-shadow:0 3px 9px rgba(0,0,0,.4);
  border:2px solid #fff; }
/* 지도 위 '현위치' 단추 — 지도를 옮겨 다니다 내 위치로 돌아올 길이 없었다(빽곰님 2026-08-01) */
.map-me { position:absolute; left:10px; bottom:10px; z-index:5; border:0; border-radius:10px;
  padding:8px 11px; font-size:12px; font-weight:800; display:inline-flex; align-items:center; gap:5px;
  background:rgba(20,26,36,.82); color:#fff; cursor:pointer; }
.map-me .ci { width:14px; height:14px; }
.map-big { position:absolute; right:10px; bottom:10px; z-index:5; border:0; border-radius:10px;
  padding:8px 11px; font-size:12px; font-weight:800;
  background:rgba(20,26,36,.82); color:#fff; cursor:pointer; }
#stRv { display:none; position:relative; height:260px; border-radius:12px; margin-top:10px;
  border:1px solid var(--line); overflow:hidden; }
.rv-x { position:absolute; top:8px; left:8px; z-index:1000; border:0; border-radius:9px;
  background:rgba(20,26,36,.82); color:#fff; font-size:12.5px; font-weight:700; padding:9px 13px; cursor:pointer; }
.st-map { border:0; cursor:pointer; }
.st-map.nv { background:#e8f5e9; color:#03a25a; }
.st-map.kk { background:#fef3c7; color:#8a6d00; }
[data-theme=dark] .st-map.nv,[data-theme=night] .st-map.nv { background:#12281c; }
[data-theme=dark] .st-map.kk,[data-theme=night] .st-map.kk { background:#2b2413; }
.chip { display:inline-block; padding:3px 9px; border-radius:8px; margin:3px 3px 0 0; font-size:12px; font-weight:600; }
.chip.hot { background:#fdeede; color:#c2610a; } .chip.cold { background:var(--accent-weak); color:var(--accent); }
[data-theme=dark] .chip.hot,[data-theme=night] .chip.hot { background:#33261a; color:#f0b878; }

/* ===== 캔버스 추첨기 ===== */
.machine { height:0; overflow:hidden; opacity:0; transition:height .35s ease,opacity .35s ease; }
.machine.show { height:300px; opacity:1; }
#lotto { width:100%; height:250px; display:block; }
.gen-row.enter { animation:slidein .3s ease; }
.set-h { font-size:12.5px; font-weight:800; color:var(--accent); padding:14px 0 4px;
  border-bottom:1px solid var(--line); margin-bottom:2px; }
.set-h:first-child { padding-top:6px; }
.draw-line { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--sub);
  background:var(--accent-weak); border-radius:9px; padding:8px 11px; margin-bottom:12px; font-weight:600; }
.draw-line b { color:var(--accent); font-size:13px; }
.draw-line:empty { display:none; }
@keyframes slidein { from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
/* 결과 까보기 연출 */
.rv-hid { background:linear-gradient(145deg,#5b6472,#3c434e); color:#fff; opacity:.85; }
@keyframes rvpop { 0%{ transform:scale(.2) rotate(-160deg); opacity:0; }
  70%{ transform:scale(1.18); } 100%{ transform:scale(1); opacity:1; } }
.rv-pop { animation:rvpop .5s ease-out; }
.hidden { display:none; }
/* 맨위로 가기 */
.top-btn { position:fixed; right:16px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:40;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--accent);
  display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow:0 6px 18px rgba(16,24,40,.18); cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(8px); transition:.25s; }
.top-btn svg { display:block; }
.top-btn:active { transform:scale(.92); }
.top-btn.show { opacity:1; pointer-events:auto; transform:none; }

/* ── 중장년 가독성: 본문 텍스트 전반 확대 (여기 한 곳에서 조절) ── */
.label { font-size:14px; }
.tab { font-size:14.5px; font-weight:700; }
.gs { font-size:15px; }
.qa { font-size:13px; }
.field { font-size:14.5px; }
select.num, select { font-size:14.5px; }
select, select.num, .cf-row select { -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:13px;
  padding-right:28px; }
.qa-i .ci { width:31px; height:31px; }
.trust summary { font-size:14px; }
.trust .body, .trust .tline { font-size:13.5px; }
.note { font-size:13.5px; line-height:1.75; }
.g-note { font-size:12.5px; }
.mtag { font-size:13px; }
.empty { font-size:14px; }
.chip { font-size:13px; }
.draw-line { font-size:13.5px; } .draw-line b { font-size:14.5px; }
.cf-lab { font-size:13.5px; }
.help-card p { font-size:14px; }
.toast { font-size:14px; }
.rk-row { font-size:13.5px; }
.qg-tag { font-size:12.5px; }
.qr-sec { font-size:12.5px; } .qr-sec .hint { font-size:11.5px; }
.qr-warn { font-size:12.5px; }
.qr-status { font-size:13px; }
.win-line .wl-lab { font-size:12px; }
.saved-chip { font-size:11.5px; }
/* 내번호: 5게임(한 용지) 단위 박스 묶음 */
.sv-group { background:var(--surface2); border:1px solid var(--line); border-radius:14px;
  padding:4px 12px 6px; margin-top:10px; }
/* 당첨 행 강조 (QR 결과와 동일 문법: 초록 카드 + 불일치 공 흐림) */
.saved-row.win { background:var(--good-weak); border:1.5px solid var(--good);
  border-radius:12px; padding:9px 10px; margin:7px 0; border-bottom:1.5px solid var(--good); }
.saved-row.win .ball:not(.match) { filter:grayscale(.75); opacity:.4; }
.saved-row.win .mtag.win { font-size:14px; font-weight:900; }
.sv-group-h { font-size:13px; font-weight:800; color:var(--text); padding:9px 2px 3px; }
.sv-group-h span { font-weight:600; color:var(--sub); font-size:12px; }
.sv-group .saved-row:last-child { border-bottom:0; }
.sv-ab { flex:0 0 17px; height:17px; border-radius:5px; background:var(--surface);
  border:1px solid var(--line); color:var(--sub); font-size:10.5px; font-weight:800;
  display:grid; place-items:center; }
/* 판매점 팝업: 회차·등수 선택부를 스크롤 상단 고정 */
.st-head { position:sticky; top:-16px; z-index:5; background:var(--surface);
  margin:-16px -16px 0; padding:14px 16px 10px; border-bottom:1px solid var(--line); }
/* 메인 지난회차: 당첨번호 공 크게 */
.balls-lg .ball { width:clamp(32px,9.4vw,42px); height:clamp(32px,9.4vw,42px);
  font-size:clamp(14px,4.4vw,18px); }