/* 판매점 용지 (로또모여 4a) -- wallet-sheet.js 가 그리는 것의 규칙.
 *
 * 이 파일에는 wallet-sheet.js 가 만드는 클래스의 규칙만 둔다. 지갑 화면의
 * 껍데기(회차 머리·장 넘기기·안내 한 줄·최고 등수 알약·구매 버튼·닫힘 문구)는
 * mypage.js 가 그리므로 mypage.css 에 남는다. 경계는 「누가 그리는가」 하나다.
 *
 * 2026-09-29 (S04): 상품 페이지의 견본 용지가 같은 모양이어야 해서 mypage.css
 * 에서 본문 그대로 옮겨 왔다. 두 곳에 사본을 두면 반드시 갈라진다 --
 * test_policy_pages_lottomoyeo_contract 가 「이 클래스들의 규칙은 여기에만」을
 * 단언한다.
 *
 * 배색은 어두운 바탕 전제다(지갑 카드·상품 페이지의 어두운 패널). 밝은 바탕에
 * 그대로 얹으면 번호가 보이지 않는다.
 */

.wallet-sheet { display: grid; gap: 6px; }
.wallet-sheet-row { display: grid; }

.wallet-sheet-line {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: #ffffff05;
  text-align: left;
  cursor: pointer;
}
.wallet-sheet-line[aria-expanded="true"] { background: #ffffff0f; }
/* 견본의 줄(S05-6) -- 마킹판이 없으므로 누를 것이 없다. 손 모양을 주지 않는다. */
.wallet-sheet-line.is-static { cursor: default; }

.wallet-sheet-label {
  width: 26px;
  color: var(--muted, #9aa6b2);
  font-size: 14px;
  font-weight: 900;
}

/* 번호가 이 화면의 주인공이다. 고정폭이라 자릿수가 세로로 맞고, 손가락으로
 * 짚어가며 읽을 크기로 둔다. */
.wallet-sheet-numbers {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #f2f6fb;
  white-space: nowrap;
}

.wallet-sheet .wallet-sheet-numbers { color: #c9d0d8; }

/* 6-3b 결과 표시 -- 구매 체크 골드는 「장」 차원(글자색), 적중은 「숫자 하나」
   차원(테두리 원)이라 겹쳐도 서로를 가리지 않는다. 색만으로 가르지 않는다:
   적중은 실선 원, 보너스는 점선 원 -- 모양이 함께 말한다. */
.wallet-sheet-numbers.has-result { display: inline-flex; flex-wrap: wrap; align-items: center; letter-spacing: 1px; }
.wallet-sheet-num { padding: 0 4px; border: 2px solid transparent; border-radius: 99px; }
.wallet-sheet-num.is-hit { border-color: var(--green, #35cf78); }
.wallet-sheet-num.is-bonus-hit { border-color: var(--green, #35cf78); border-style: dotted; }
/* 마킹판. 실물 용지의 7열 -- 공 색(10단위)은 여기 쓰지 않는다. 색 경계가
 * 7칸 행과 어긋나 오히려 손을 미끄러뜨린다. 행은 아주 옅게만 구분한다. */
/* 🔴 접힘은 이 파일이 지킨다 (S05-6). wallet-sheet.js 는 마킹판에 hidden 을
 * 달아 접지만, 바로 아래 display:grid 가 브라우저 기본값 [hidden]{display:none}
 * 을 이긴다 -- 작성자 규칙이 UA 규칙보다 세기 때문이다. 지갑 화면은 우연히
 * 무사했다: home.css 에 [hidden]{display:none!important} 가 있고 마이페이지가
 * 그 파일을 싣는다. 상품 페이지는 싣지 않아, 견본의 마킹판 다섯이 **펼쳐진
 * 채로** 떠 있었다(2026-09-29 실측: 360px 기준 견본 한 덩어리가 1860px).
 * 모듈이 만드는 클래스의 규칙은 이 파일이 주인이므로, 접힘도 여기서 지킨다 --
 * 다른 화면이 어떤 css 를 싣는지에 기대지 않는다. */
.wallet-marking[hidden] { display: none; }

.wallet-marking {
  display: grid;
  gap: 3px;
  margin: 6px 4px 10px;
  padding: 10px;
  border: 1px solid #ffffff1f;
  border-radius: 12px;
  background: #ffffff03;
}
.wallet-marking-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
/* 행 구분은 아주 옅게만 -- 칠한 칸(is-picked)보다 세지면 안 된다. :not 이
 * 없으면 이 규칙의 특이도가 이겨서 짝수 행의 칠한 칸이 어둡게 나온다
 * (2026-09-17 프리뷰 실측에서 11·25·38·40 이 실제로 그렇게 나왔다). */
.wallet-marking-row:nth-child(even) .wallet-marking-cell:not(.is-picked) { background: #ffffff08; }
.wallet-marking-cell {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff14;
  border-radius: 6px;
  background: #ffffff04;
  color: var(--muted, #9aa6b2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.wallet-marking-cell.is-picked {
  background: #f2f6fb;
  border-color: #f2f6fb;
  color: #14181d;
  font-weight: 900;
}

.wallet-marking-cell.is-picked.is-hit { box-shadow: inset 0 0 0 2px var(--green, #35cf78); }
.wallet-marking-cell.is-picked.is-bonus-hit { box-shadow: inset 0 0 0 2px var(--green, #35cf78); border-style: dotted; }
@media (max-width: 760px) {
  .wallet-sheet-numbers { font-size: 18px; letter-spacing: 1px; }
  .wallet-sheet-line { gap: 10px; padding: 11px 10px; }
  .wallet-marking-cell { min-height: 30px; font-size: 11px; }
}