/* 로또 번호 생성기(/lotto/) 전용 스타일 — 공통 토큰/푸터는 /assets/base.css 를 그대로 쓴다. */

/* ── GNB 안의 로그인 자리 ────────────────────────────────
   상단바 자체는 공통 GNB(/tools/assets/tools.css 의 .tkbar)를 쓴다 — 2026-08-24 에
   서비스 페이지들과 같은 방식으로 합쳤다. 여기 남은 건 lotto.js 가 그 안에
   그려 넣는 로그인 버튼 스타일뿐이다(scripts/build-tools.mjs 의 authSlot). */
.lnav-auth{display:flex;align-items:center;gap:8px}
.lnav-auth-btn{font-family:inherit;font-size:13.5px;font-weight:700;border-radius:10px;padding:9px 14px;
  border:1px solid var(--line);background:#fff;color:#33405A;cursor:pointer;white-space:nowrap}
.lnav-auth-btn:hover{border-color:var(--blue);color:var(--blue)}
.lnav-auth-btn.lnav-auth-kakao{background:#FEE500;border-color:#FEE500;color:#191600;
  display:inline-flex;align-items:center;gap:6px}
.lnav-auth-btn.lnav-auth-kakao:hover{background:#FDD800;border-color:#FDD800;color:#191600}
.lnav-auth-kakao-ico{width:15px;height:15px;flex-shrink:0;display:block}
.lnav-auth-name{font-size:13.5px;font-weight:700;color:#33405A;white-space:nowrap}
/* 좁은 화면에서는 상단바가 빡빡하다 — 로그인 자리도 같이 줄인다.
   (공통 GNB 가 560px 아래에서 상담 버튼을 '상담'으로 줄이는 것과 같은 구간) */
@media(max-width:560px){
  .lnav-auth-btn{padding:7px 10px;font-size:12px}
  .lnav-auth-name{display:none}
}

/* ── 페이지 폭 ── */
/* 폭은 공통 GNB(.tkbar-in, 940px)와 같아야 한다 — 880px 이던 시절엔 상단바보다 본문이
   좁아서 좌우가 어긋나 보였다(2026-08-24 정리). 여백 규칙도 .tkwrap 과 같게 둔다. */
.lwrap{max-width:940px;margin:0 auto;padding:0 22px}
@media(max-width:560px){.lwrap{padding:0 16px}}
.lmain{padding:30px 0 44px}

/* ── 생성 패널 (2026-09-04 개편) ──────────────────────────
   들어오자마자 번호를 뿌리지 않는다. ① 행운 번호 고르기(선택) ② 꾹 눌러 뽑기,
   두 단계를 번호로 매겨 세로로 쌓는다. 결과는 버튼을 눌러야 생긴다. */
.gen-panel{background:var(--light);border:1px solid #D8E3F7;border-radius:16px;
  padding:18px 20px;margin:24px 0 18px;display:flex;flex-direction:column;gap:20px}
.gen-step{display:flex;gap:13px;align-items:flex-start}
.gen-step-no{flex-shrink:0;width:23px;height:23px;margin-top:1px;border-radius:50%;
  background:var(--deep);color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.gen-step-body{flex:1;min-width:0}
/* .lmain h2 가 flex 라 제목 옆 '선택' 배지가 자연스럽게 붙는다. 간격만 좁힌다. */
.lmain h2.gen-step-t{font-size:15.5px;font-weight:800;color:var(--deep);margin:0 0 4px;gap:7px}
.gen-opt{font-size:11px;font-weight:700;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.gen-step-d{margin:0 0 11px;font-size:13.2px;line-height:1.6;color:var(--gray)}
.gen-step-d b{color:var(--deep)}
.pool-info{margin:9px 0 0;font-size:12.3px;line-height:1.55;color:var(--muted)}

/* ── 행운 번호 번호판 ── */
.lucky-toggle{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 14px;
  font-family:inherit;font-size:13px;font-weight:700;color:#33405A;cursor:pointer;transition:.15s}
.lucky-toggle:hover{border-color:var(--blue);color:var(--blue)}
.lucky-toggle[aria-expanded="true"]{border-color:var(--blue);color:var(--blue);background:#fff}
.lucky-panel{margin-top:12px}
/* 가로 7칸은 동행복권 마킹용지와 같은 배치다(1~7 / 8~14 / … / 43~45).
   전략 안내에서 "세로줄·가로줄 쏠림"을 설명하기 때문에, 번호판도 같은 격자로 두면
   무슨 줄을 말하는지 눈으로 바로 보인다. 폭은 칸이 너무 커지지 않게만 묶는다. */
.lucky-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;max-width:400px}
.lucky-n{aspect-ratio:1/1;border-radius:50%;border:1px solid rgba(10,21,38,.08);
  font-family:inherit;font-size:14px;font-weight:800;color:#151E2E;letter-spacing:-.5px;
  cursor:pointer;transition:transform .12s,box-shadow .12s,opacity .12s;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09);opacity:.5}
.lucky-n:hover:not(:disabled){opacity:.85;transform:translateY(-1px)}
.lucky-n.is-on{opacity:1;transform:translateY(-1px);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09),0 0 0 3px var(--blue)}
.lucky-n:disabled{cursor:default;opacity:.24}
.lucky-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px}
.lucky-note{margin:0;flex:1 1 220px;font-size:12.4px;line-height:1.55;color:var(--gray);font-weight:600}

/* ── 꾹 눌러 뽑는 버튼 ──
   .btn-draw-ring 은 누르고 있는 동안 왼쪽에서 차오르는 띠다(자동 정지 2.6초와 같은 길이).
   손을 떼면 클래스가 빠지면서 즉시 0으로 돌아간다. */
.btn-draw{position:relative;overflow:hidden;width:100%;border:none;border-radius:13px;
  background:var(--blue);color:#fff;padding:17px 20px;cursor:pointer;
  font-family:inherit;transition:background .15s,transform .1s;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.btn-draw:hover{background:var(--blue-d)}
.btn-draw.is-holding{background:var(--blue-d);transform:scale(.985)}
.btn-draw-ring{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:rgba(255,255,255,.19);pointer-events:none}
.btn-draw.is-holding .btn-draw-ring{animation:draw-fill 2.6s linear forwards}
@keyframes draw-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.btn-draw-label{position:relative;display:block;font-size:16.5px;font-weight:800;letter-spacing:-.3px}

/* ── 아직 안 뽑았을 때 ── */
.gen-empty{border:1px dashed var(--line);border-radius:16px;background:#FAFBFD;
  padding:40px 20px;text-align:center}
.gen-empty-t{margin:0 0 6px;font-size:15px;font-weight:800;color:var(--deep)}
.gen-empty-d{margin:0;font-size:13.2px;color:var(--gray)}
.gen-empty-n{margin:10px 0 0;font-size:12.4px;color:var(--muted);font-weight:600}

/* 다섯 세트를 뽑고 난 뒤 한 줄 요약 + 모두 저장 버튼 */
.result-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 12px;padding:11px 14px;border-radius:11px;background:var(--light);border:1px solid #D8E3F7}
.result-note{flex:1 1 260px;min-width:0;margin:0;
  font-size:12.8px;line-height:1.6;color:var(--gray);font-weight:600}
.btn-save-all{flex-shrink:0;background:var(--blue);color:#fff;border:none;border-radius:10px;
  padding:9px 16px;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;
  transition:background .15s;white-space:nowrap}
.btn-save-all:hover:not(:disabled){background:var(--blue-d)}
.btn-save-all:disabled{cursor:default;background:#fff;color:var(--blue);
  border:1px solid #D8E3F7;padding:8px 15px}

/* 모두 저장 결과 한 줄 */
.result-msg{margin:-4px 0 12px;padding:0 4px;font-size:12.6px;line-height:1.6;font-weight:600}
.result-msg-ok{color:#1E8E5A}
.result-msg-warn{color:#B57A15}

/* 좁은 화면에서는 버튼이 한 줄을 다 쓴다. 그 크기에서 34px 짜리 버튼은 누르기 불편해서
   손가락 기준(44px 안팎)까지 키운다. 데스크톱은 글 옆에 붙는 작은 버튼이라 그대로 둔다. */
@media(max-width:480px){
  .result-bar{gap:10px}
  .btn-save-all{width:100%;padding:13px 16px;font-size:14px}
  .btn-save-all:disabled{padding:12px 15px}
}

@media(max-width:560px){
  .gen-panel{padding:16px 15px;gap:18px}
  .gen-step{gap:10px}
  .lucky-grid{gap:6px}
  .lucky-n{font-size:13px}
  .btn-draw{padding:16px}
  .btn-draw-label{font-size:15.5px}
}

/* ── 번호 세트 카드 ── */
/* base.css 의 section{padding:64px 0} 을 상쇄한다 — 목록은 자체 여백으로 충분하다. */
.sets{display:flex;flex-direction:column;gap:12px;padding:0}
.set{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  box-shadow:0 8px 22px -18px rgba(10,21,38,.5)}
.set-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.set-no{width:24px;height:24px;border-radius:8px;background:var(--deep);color:#fff;font-size:12px;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.set-name{font-size:15px;font-weight:800;color:var(--deep)}
.set-tag{font-size:11.5px;font-weight:700;color:var(--blue);background:var(--light);
  border-radius:999px;padding:4px 10px}
.set-desc{font-size:13px;line-height:1.55;color:var(--gray);margin:-5px 0 12px}
/* 번호 6개는 어떤 폭에서도 한 줄이어야 읽힌다 — 줄바꿈 대신 칸이 같이 줄어들게 한다.
   (6칸 46px + 간격 5칸 9px = 321px 에서 더는 커지지 않는다.) */
.balls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:min(9px,2.2vw);max-width:321px}
.ball{width:100%;aspect-ratio:1/1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:clamp(14px,4.2vw,17px);font-weight:800;color:#151E2E;letter-spacing:-.5px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09)}
/* 번호대별 공 색은 동행복권 실물과 같다. 행운 번호판(.lucky-n)도 같은 색을 쓴다. */
.ball.c1,.lucky-n.c1{background:#FBC400}
.ball.c2,.lucky-n.c2{background:#69C8F2}
.ball.c3,.lucky-n.c3{background:#FF7272}
.ball.c4,.lucky-n.c4{background:#CFD5DE}
.ball.c5,.lucky-n.c5{background:#B0D840}

/* 뽑은 공이 하나씩 튀어나오는 연출. 카드마다 130ms, 공마다 70ms 씩 밀린다(lotto.js). */
.ball-pop{animation:ball-pop .34s cubic-bezier(.2,1.3,.4,1) backwards}
@keyframes ball-pop{
  from{opacity:0;transform:scale(.4) translateY(9px)}
  to{opacity:1;transform:none}
}

/* 버튼을 누르고 있는 동안 자리만 잡아 두는 카드 */
.set-rolling{opacity:.75}
.set-rolling .set-top{margin-bottom:12px}
.ball-roll{background:#E4E9F1;color:#6D7C93}

/* 추천 전략(덜 겹치는 조합)은 테두리로만 살짝 구분한다 */
.set-star{border-color:#B9CEF5;box-shadow:0 8px 22px -18px rgba(10,21,38,.5),0 0 0 1px #DCE8FB}
.set-star-tag{font-size:11px;font-weight:800;color:#fff;background:var(--blue);
  border-radius:999px;padding:4px 9px;letter-spacing:-.2px}

/* 고른 행운 번호가 이 세트에 들어갔다는 표시 */
.set-lucky{margin:11px 0 0;font-size:12.4px;color:var(--blue);font-weight:700}

.set-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.chip{font-size:12px;color:var(--gray);background:#F5F7FB;border-radius:8px;padding:5px 10px;font-weight:600}
/* 겹침 지수 — 확률이 아니라 "당첨됐을 때 나눠 가질 사람이 많아 보이는가"를 나타낸다.
   추정값이라 색은 네 단계로만 나누고 숫자는 안 보여준다. */
.chip-crowd{font-weight:800;cursor:help}
.chip-crowd.chip-best{color:#166B47;background:#E4F5EC}
.chip-crowd.chip-good{color:#1D5FBF;background:#E7F0FE}
.chip-crowd.chip-mid{color:#7A6415;background:#FBF3DC}
.chip-crowd.chip-low{color:#9A4B32;background:#FBEAE4}
.set-acts{margin-left:auto;display:flex;gap:8px}
.mini{background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 13px;font-family:inherit;
  font-size:12.5px;font-weight:700;color:#33405A;cursor:pointer;transition:.15s}
.mini:hover{border-color:var(--blue);color:var(--blue)}
.mini.done{border-color:var(--blue);color:var(--blue);background:var(--light)}
/* 좁은 화면에서는 복사·공유·저장 세 개가 한 줄을 나눠 갖는다. */
@media(max-width:420px){
  .set-acts{margin-left:0;width:100%}
  .mini{flex:1;padding:7px 8px;font-size:12px}
}

/* ── 지난 회차 당첨번호 ── */
.draw{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  box-shadow:0 8px 22px -18px rgba(10,21,38,.5)}
.draw-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.draw-round{font-size:16px;font-weight:850;color:var(--deep)}
.draw-date{font-size:12.5px;color:var(--gray);font-weight:600}
/* 당첨번호 6개 + 보너스 1개를 한 줄에 둔다. 6칸이 먼저 자리를 잡고 보너스가 뒤에 붙는다. */
.draw-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.draw-row .balls-draw{flex:1 1 240px}
.draw-plus{font-size:17px;font-weight:800;color:var(--muted)}
.draw-row .balls-bonus{display:block;max-width:none;width:auto}
.draw-row .balls-bonus .ball{width:46px}
.draw-bonus-label{font-size:11.5px;color:var(--gray);font-weight:700}
.draw-prize{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--gray);font-weight:600}
.draw-lead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px}
.draw-lead h2{font-size:15px;font-weight:800;color:var(--deep);margin:0}
.draw-lead a{font-size:12.5px;font-weight:700;color:var(--blue)}
@media(max-width:520px){
  .draw-row{gap:8px}
  .draw-row .balls-draw{flex:1 1 100%}
  .draw-plus{display:none}
  .draw-row .balls-bonus .ball{width:40px}
}

.set-warn{margin:12px 0 0;font-size:12.3px;color:#B57A15;font-weight:600}

/* ── 저장한 번호의 당첨 대입 결과 (로그인 사용자 전용) ── */
.rank-note{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:10px 0 0;font-size:12.6px;line-height:1.6}
.rank-none{color:var(--gray)}
.rank-wait{color:var(--gray)}
/* 지난 회차 대입은 이번 회차 결과보다 한 단계 낮은 정보라 더 흐리게 둔다. */
.rank-past{color:var(--muted);font-size:12.2px}
.rank-hit{color:var(--deep);font-weight:600}
.rank-badge{flex-shrink:0;font-size:11.5px;font-weight:800;color:#fff;background:var(--gray);
  border-radius:999px;padding:4px 11px;letter-spacing:-.2px}
/* 1~3등은 눈에 띄게, 4~5등은 차분하게. */
.rank-1 .rank-badge{background:#C9971B}
.rank-2 .rank-badge{background:#1E8E5A}
.rank-3 .rank-badge{background:var(--blue)}
.rank-4 .rank-badge,.rank-5 .rank-badge{background:#8698B3}
.rank-text{min-width:0}

/* 저장 한도 같은, 그 카드에서만 의미 있는 안내 */
.set-notice{margin:12px 0 0;font-size:12.3px;color:#B57A15;font-weight:600}

/* ── 번호별 출현 횟수 ── */
.freq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:10px;
  margin:0 0 14px;padding:0}
.freq{display:flex;flex-direction:column;align-items:center;gap:5px}
.freq .ball{width:40px;height:40px;font-size:15px}
.freq-n{font-size:11px;color:var(--gray);font-weight:700}
.freq-zero .ball{background:#EDF0F5;color:#A9B4C4;box-shadow:none}
.freq-zero .freq-n{color:#A9B4C4}
.freq-note{margin:0;font-size:12.8px;color:var(--gray);line-height:1.8}
.hist-meta{font-size:13px;color:var(--gray);margin:0 0 18px}
.hist-h2{font-size:19px;font-weight:800;color:var(--deep);margin:34px 0 6px}
.hist-sub{font-size:13px;color:var(--gray);margin:0 0 16px}

/* ── 안내 박스 ── */
.notice{background:#F5F7FB;border:1px solid var(--line);border-radius:14px;padding:15px 17px;
  font-size:12.6px;color:var(--gray);line-height:1.75;margin:30px 0 0}
.notice b{color:var(--deep)}
.notice a{color:var(--blue);font-weight:700;text-decoration:underline}

/* ── 저장한 번호 ── */
.empty{text-align:center;color:var(--gray);font-size:14.5px;padding:48px 20px;
  border:1px dashed var(--line);border-radius:16px;background:#FAFBFD}
.empty a{color:var(--blue);font-weight:700}
.saved-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:38px 0 16px}
.saved-head h2{font-size:19px;font-weight:800;margin:0;color:var(--deep)}
.set .stamp{font-size:12px;color:var(--muted);font-weight:600}

/* ── 전략 안내 문서 ── */
.doc{font-size:15px;color:#33405A}
.doc h2{font-size:20px;font-weight:800;color:var(--deep);margin:34px 0 12px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:16px;font-weight:800;color:var(--deep);margin:22px 0 8px}
.doc p{margin:0 0 12px;line-height:1.85}
.doc ul{list-style:none;margin:0 0 14px;padding-left:2px;line-height:1.85}
.doc ul li{position:relative;padding-left:20px;margin-bottom:6px}
.doc ul li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.doc table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.doc th,.doc td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.doc th{background:var(--light);color:var(--deep);font-weight:700}
.doc code{background:#F0F3F9;border:1px solid var(--line);border-radius:6px;padding:1px 6px;
  font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--deep)}
.doc .callout{background:var(--light);border:1px solid #D8E3F7;border-radius:14px;padding:16px 18px;
  font-size:14px;color:var(--deep);line-height:1.8;margin:18px 0}

/* ── 움직임을 줄여 달라고 설정한 기기 ──
   공이 튀어나오는 연출과 버튼의 차오르는 띠만 끈다. 기능은 그대로 동작한다. */
@media(prefers-reduced-motion:reduce){
  .ball-pop{animation:none}
  .btn-draw.is-holding .btn-draw-ring{animation:none;transform:scaleX(1)}
  .btn-draw,.lucky-n{transition:none}
}

/* 소제목 앞 아이콘 — 서비스 페이지와 같은 모양(공통 .tkico 사용). */
.lwrap h2, .lmain h2{display:flex;align-items:center;gap:9px}
.lwrap h2 .tkico, .lmain h2 .tkico{color:var(--blue);font-size:19px}