/* 티켓 화면 -- 도착 카드, 헤더 표시, 지갑 안의 티켓.
 *
 * 별도 파일인 이유는 이 화면이 홈과 지갑 두 곳에 함께 놓이기 때문이다.
 * home.css 의 변수(--panel, --line, --yellow, --muted)를 그대로 쓴다.
 * 늦게 로드되어 무언가를 덮어쓰는 규칙은 여기에 두지 않는다. */

/* ------------------------------------------------------------------ */
/* 누를 수 있는 것만 버튼처럼 보인다                                     */
/* ------------------------------------------------------------------ */
/* 헤더 다섯과 히어로 둘이 전부 같은 알약이었다. 회원이 다 눌러봐야 무엇이
 * 눌리는지 알 수 있었다. 두 덩어리로 가른다 --
 *
 *   왼쪽: 나에 대한 사실(환영 문구 · 이번 주 개수). 글자. 안 눌린다.
 *   오른쪽: 내 기록 · 메뉴 · 로그아웃. 버튼. 눌린다.
 *
 * 문구는 한 글자도 바꾸지 않는다. 모양과 순서만 바꾼다.
 * home.css 가 먼저 로드되므로 여기서 덮어쓴다. 브레이크포인트도 함께 맞춘다 --
 * 좁은 화면 규칙을 두고 오면 폰에서만 알약이 되살아난다. */

.header-login-badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted, #9aa6b2);
  font-weight: 700;
  cursor: default;
  margin-right: 2px;
}

/* 사실과 버튼 사이의 경계. 오른쪽 덩어리의 첫 버튼이 벌린다. */
.header-actions .header-mypage-link { margin-left: 16px; }

/* 로그아웃은 셋 중 가장 조용하게. 제일 안 쓰고 제일 되돌리기 어렵다. */
.header-logout-button {
  border-color: #ffffff14;
  background: transparent;
  color: var(--muted, #9aa6b2);
  font-weight: 800;
}
.header-logout-button:hover {
  border-color: #ffffff2b;
  background: #ffffff08;
  color: #e7ecf2;
}

/* 히어로의 상태 표시 둘도 같다. 클릭 핸들러가 없으니 버튼처럼 보이면 안 된다. */
.hero-status-row span,
.hero-status-row span:first-child {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: default;
}
.hero-status-row { gap: 14px; }

/* 헤더의 상시 표시. index.html 의 nav 안에 자리가 미리 있고, ticket-arrival.js 는
 * 그 자리를 채우기만 한다. 예전에는 만들어 헤더 끝에 붙였고, 숫자가 도착하는
 * 순간 오른쪽 항목들이 왼쪽으로 밀렸다. */
.header-week-count {
  /* 나에 대한 사실이지 버튼이 아니다. 알약을 걷어낸다. */
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted, #9aa6b2);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: default;
}

/* ------------------------------------------------------------------ */
/* 도착 알림 카드                                                       */
/* ------------------------------------------------------------------ */
#ticketArrivalSlot[hidden] { display: none; }

/* ------------------------------------------------------------------ */
/* 늦게 오는 것의 자리                                                  */
/* ------------------------------------------------------------------ */
/* 값을 지어내지 않는다. 비어 보이되 크기는 최종과 같게 둔다.
 * 자리를 잡는 것은 지난주에 열 수 있는 티켓이 있었던 회원뿐이다 --
 * 판단은 ticket-arrival.js 의 arrivalExpected() 가 한다. */
#ticketArrivalSlot[data-reserved="true"] {
  max-width: 1380px;
  /* .ticket-arrival-card 의 margin-top(24) + padding(24*2) + 안쪽 세 줄의 높이 */
  min-height: 168px;
  margin: 24px auto 0;
}

/* 확인이 끝나기 전의 로그아웃. 눌리지 않는다는 것이 보여야 한다 -- 자리는
 * 그대로 두므로 활성으로 바뀔 때 헤더가 밀리지 않는다. */
.header-logout-button[disabled] {
  opacity: .45;
  cursor: default;
}

.header-week-count[data-reserved="true"] {
  /* "이번 주 10 / 10" 이 들어갈 폭. 글자는 아직 없다. */
  min-width: 92px;
  border-color: transparent;
  background: transparent;
}

.ticket-arrival-card {
  max-width: 1380px;
  margin: 24px auto 0;
  padding: 24px 26px;
  border: 1px solid var(--line, #343a42);
  border-radius: 20px;
  background: linear-gradient(145deg, #171d23, #0c1014);
}

.ticket-arrival-heading {
  margin: 0 0 12px;
  color: var(--yellow, #ffd335);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .6px;
}

/* 글자만 키운다. line-height 를 px 로 못박아 상자 높이가 그대로다 --
 * 17/normal 은 25px 였고, 19/25px 도 25px 다. 아래 도착 카드는 자리를 미리
 * 잡아 두는 자리(#ticketArrivalSlot[data-reserved])가 있어서, 높이가 몇 px
 * 라도 늘면 도착하는 순간 화면이 밀린다. */
.ticket-arrival-greeting {
  display: block;
  margin-bottom: 8px;
  font-size: 19px;
  line-height: 25px;
  font-weight: 900;
}

/* 15 * 1.6 = 24px 였다. 17/24px 도 24px 다. */
.ticket-arrival-line {
  margin: 0 0 4px;
  color: #d8dde3;
  font-size: 17px;
  line-height: 24px;
  word-break: keep-all;
}

.ticket-arrival-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.ticket-arrival-button {
  min-height: 46px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #525b65;
  border-radius: 14px;
  background: #171c21;
  font-size: 14px;
  font-weight: 850;
}

.ticket-arrival-button.is-ticket {
  border-color: transparent;
  background: var(--yellow, #ffd335);
  color: #111;
}

.ticket-arrival-button:focus-visible {
  outline: 3px solid var(--yellow, #ffd335);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* 지갑 안의 티켓                                                       */
/* ------------------------------------------------------------------ */
.wallet-ticket-section[hidden] { display: none; }

.ticket-section-heading h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.6px;
}

.ticket-section-note {
  margin: 0 0 6px;
  color: var(--muted, #a6acb3);
  font-size: 13px;
  line-height: 1.6;
  word-break: keep-all;
}

.ticket-section-count {
  display: block;
  margin: 8px 0;
  font-size: 15px;
  font-weight: 900;
}

/* 되돌릴 수 없다는 한 줄. 겁주는 색을 쓰지 않는다 -- 경고가 아니라 고지다. */
.ticket-section-notice {
  margin: 0 0 14px;
  color: #ced3d8;
  font-size: 13px;
  line-height: 1.6;
}

.ticket-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.ticket-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line, #343a42);
  border-radius: 16px;
  background: var(--panel, #161a1f);
}

/* 열지 않은 채 회차가 지난 티켓. 목록에 남기되 앞으로 나서지 않는다. */
.ticket-card[data-ticket-status="EXPIRED"] { opacity: .55; }

.ticket-card-slot {
  color: var(--muted, #a6acb3);
  font-size: 12px;
  font-weight: 800;
}

.ticket-card-state {
  font-size: 14px;
  font-weight: 900;
}

.ticket-card-time {
  color: var(--muted, #a6acb3);
  font-size: 11px;
}

.ticket-card-open {
  min-height: 42px;
  border: none;
  border-radius: 12px;
  background: var(--yellow, #ffd335);
  color: #111;
  font-size: 14px;
  font-weight: 900;
}

.ticket-card-open:disabled { opacity: .6; cursor: default; }

.ticket-card-link {
  color: var(--muted, #a6acb3);
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
}

.ticket-card-notice {
  margin: 0;
  color: #ced3d8;
  font-size: 12px;
  line-height: 1.5;
}

.ticket-card .ticket-number-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ticket-card .ticket-number {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #111;
  font-size: 13px;
  font-weight: 900;
  font-style: normal;
}

.ticket-card .ticket-number.yellow { background: var(--yellow, #ffd335); }
.ticket-card .ticket-number.blue { background: var(--blue, #428cff); color: #fff; }
.ticket-card .ticket-number.red { background: var(--red, #ff4d55); color: #fff; }
.ticket-card .ticket-number.gray { background: #9aa2aa; }
.ticket-card .ticket-number.green { background: var(--green, #35cf78); }

@media (max-width: 760px) {
  .header-week-count { margin-left: 0; padding: 0; font-size: 11px; }
  .header-week-count[data-reserved="true"] { min-width: 76px; }
  .ticket-arrival-card { margin: 16px 16px 0; padding: 20px; }
  #ticketArrivalSlot[data-reserved="true"] { min-height: 184px; margin: 16px 16px 0; }
  .ticket-arrival-actions .ticket-arrival-button { flex: 1 1 140px; justify-content: center; }
  .ticket-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* 내 페이지 구역 전환 (PC 전용)                                        */
/* ------------------------------------------------------------------ */
/* 왼쪽 사이드바로 구역을 고르고, 고르지 않은 구역은 숨긴다. 새 HTML 파일을
 * 만들지 않고 같은 페이지 안에서 가른다.
 *
 * 981px 이상에서만 켠다. 폰에서는 사이드바가 없고 지금처럼 전부 이어서 보인다 --
 * 좁은 화면 배치는 아직 정해지지 않았고, 정해지기 전에 숨기면 회원이 자기
 * 기록을 못 찾는다.
 *
 * hidden 속성을 쓰지 않는다. #walletTickets 의 hidden 은 ticket-arrival.js 의
 * 것이고, 둘이 같은 속성을 만지면 서로를 되돌린다. */
@media (min-width: 981px) {
  .account-page {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
  }

  .mypage-side-nav {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--line, #2b3138);
    border-radius: 16px;
    background: var(--panel, #12171c);
  }

  .mypage-side-nav a {
    padding: 11px 13px;
    border-radius: 11px;
    color: var(--muted, #9aa6b2);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: background .18s, color .18s;
  }

  .mypage-side-nav a:hover { background: #ffffff08; color: #e7ecf2; }

  .mypage-side-nav a.is-active {
    background: #ffd3351a;
    color: var(--yellow, #ffd335);
  }

  .mypage-side-nav a:focus-visible {
    outline: 3px solid var(--yellow, #ffd335);
    outline-offset: 2px;
  }

  .mypage-panels { display: grid; gap: 26px; min-width: 0; }

  /* 고르지 않은 구역은 감춘다. 표식이 없는 구역(히어로)은 늘 보인다. */
  .account-page[data-mypage-panel-view="wallet"] [data-mypage-panel]:not([data-mypage-panel="wallet"]),
  .account-page[data-mypage-panel-view="walletBox"] [data-mypage-panel]:not([data-mypage-panel="walletBox"]),
  .account-page[data-mypage-panel-view="tickets"] [data-mypage-panel]:not([data-mypage-panel="tickets"]),
  /* history 줄이 여기 있었다. 그 구역을 그리는 절이 없어서, 이 규칙은 "아무것도
     아닌 구역을 골랐으니 전부 감춰라"로 동작했다 -- 빈 내 페이지의 정체다. */
  .account-page[data-mypage-panel-view="referral"] [data-mypage-panel]:not([data-mypage-panel="referral"]),
  .account-page[data-mypage-panel-view="account"] [data-mypage-panel]:not([data-mypage-panel="account"]) {
    display: none;
  }
}

/* 폰에서는 사이드바만 없앤다. 구역은 지금처럼 전부 이어서 보인다. */
@media (max-width: 980px) {
  .mypage-side-nav { display: none; }
}

/* 이번 주 박스의 회차·남은 시간 한 줄. 값은 ticket-arrival.js 가 채운다. */
.wallet-this-week-line {
  margin: 6px 0 0;
  color: var(--yellow, #ffd335);
  font-size: 13px;
  font-weight: 850;
}
.wallet-this-week-line:empty { display: none; }

/* ------------------------------------------------------------------ */
/* 내 로또지갑 -- 한 줄에 한 조합                                       */
/* ------------------------------------------------------------------ */
/* 옮겨 적기 위한 화면이다. 번호는 고정폭으로 세우고 두 자리로 맞춰, 눈이
 * 세로로 미끄러지지 않게 한다. 나머지는 전부 번호보다 조용해야 한다. */
/* 고른 회차의 머리 한 줄. 비어 있으면 자리도 없다 -- 추첨 전에는 당첨 번호
 * 자리가 아예 없어야 한다. */
.wallet-box-draw-head {
  margin: 14px 0 0;
  color: var(--yellow, #ffd335);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .3px;
}
.wallet-box-draw-head:empty { display: none; }

.wallet-box-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 16px;
}

.wallet-box-toolbar label {
  color: var(--muted, #9aa6b2);
  font-size: 12px;
  font-weight: 800;
}

.wallet-box-toolbar select {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line, #2b3138);
  border-radius: 10px;
  background: #12171c;
  color: #e7ecf2;
  font: inherit;
  font-weight: 800;
}

.wallet-box-toolbar button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #ffffff2b;
  border-radius: 10px;
  background: #132235;
  color: #f2f6fb;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.wallet-box-toolbar button:hover { border-color: #ffd33572; background: #1b3048; }

.wallet-box-copy-status {
  color: var(--muted, #9aa6b2);
  font-size: 12px;
  font-weight: 700;
}

/* 응답 전에 자리부터 잡는다 -- 도착 카드(9/1)와 같은 방식. 「불러오는 중」
 * 한 줄(패딩 포함 약 60px)보다 넉넉한 조합 한두 줄 분량이다. 내용이 오면
 * 자라기만 하고 줄지 않으므로 위로 튀지 않는다. 빈 응답(조합 0건)일 때도
 * mypage-state-message 한 줄이 이 안에 남는다. */
.wallet-box-lines { display: grid; gap: 2px; min-height: 76px; align-content: start; }

.wallet-box-line {
  display: grid;
  grid-template-columns: max-content max-content max-content minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
}

.wallet-box-line:nth-child(odd) { background: #ffffff05; }

/* 번호가 이 화면의 주인공이다. 고정폭이라 자릿수가 세로로 맞는다. */
.wallet-box-numbers {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #f2f6fb;
  white-space: nowrap;
}

.wallet-box-tag,
.wallet-box-when,
.wallet-box-result {
  color: var(--muted, #9aa6b2);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.wallet-box-result { color: var(--yellow, #ffd335); }
/* 결과가 없는 회차는 그 자리가 비어 있다. 채우지 않는다. */
.wallet-box-result:empty { display: none; }

.wallet-box-note { grid-column: 1 / -1; margin-top: 4px; }
.wallet-box-note summary {
  color: var(--muted, #9aa6b2);
  font-size: 12px;
  cursor: pointer;
}
.wallet-box-note p {
  margin: 6px 0 0;
  color: #c8d1da;
  font-size: 12px;
  line-height: 1.6;
}

/* 선별 근거. 프리미엄 카드가 스스로를 설명하는 자리라 해설과 나란히 둔다. */
.wallet-box-evidence ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: #c8d1da;
  font-size: 12px;
  line-height: 1.7;
}

/* 폰에서는 깨지지만 않게 둔다. 세밀한 배치는 아직 정해지지 않았다. */
@media (max-width: 760px) {
  .wallet-box-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .wallet-box-numbers { font-size: 16px; }
}

/* ------------------------------------------------------------------ */
/* 카드 넘기기                                                          */
/* ------------------------------------------------------------------ */
/* 카드 자체(색·테두리·공 모양·서명)는 손대지 않는다. 아래로 한 줄만 붙인다.
 * 다섯 게임 이하면 이 줄은 hidden 이라 지금과 똑같이 보인다. */
.ticket-pager[hidden] { display: none; }

.ticket-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.ticket-pager button {
  min-width: 40px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #8b712840;
  border-radius: 9px;
  background: #ffffff10;
  color: inherit;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.ticket-pager button:hover:not([disabled]) { border-color: #8b7128a0; background: #ffffff1c; }
.ticket-pager button[disabled] { opacity: .35; cursor: default; }

.ticket-pager span {
  min-width: 62px;
  text-align: center;
  font-size: 13px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}