.account-lotto-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--card);
}

.account-lotto-header,
.account-lotto-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-lotto-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.account-lotto-header p,
.account-lotto-note {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.account-lotto-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.4fr);
  gap: 10px;
}

.account-card {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--bg);
}

.account-card span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
}

.account-card strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.account-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.account-input-row input,
.account-field input {
  width: 100%;
  height: var(--control-height);
  border: 0;
  border-radius: var(--radius);
  background: var(--control);
  color: var(--text);
  padding: 0 9px;
  font-size: 12px;
}

.account-field {
  display: grid;
  gap: 6px;
}

.login-brand-lockup {
  display: grid;
  gap: 5px;
  justify-items: center;
  padding: 4px 0 7px;
}

.login-brand-lockup strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.login-brand-lockup span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.login-copy {
  margin: 0 0 4px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
}

.login-note {
  margin: 0 0 10px;
  color: var(--muted);
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  opacity: 0.72;
}

.login-submit {
  width: 100%;
  height: var(--action-height);
}

.login-state-line {
  justify-self: center;
  color: var(--muted);
  font-size: 11px;
}

.account-lotto-panel.is-logged-in .login-brand-lockup {
  justify-items: start;
  padding: 0;
}

.account-lotto-panel.is-logged-in .login-brand-lockup span,
.account-lotto-panel.is-logged-in .login-copy,
.account-lotto-panel.is-logged-in .login-note,
.account-lotto-panel.is-logged-in .account-field,
.account-lotto-panel.is-logged-in [data-action="login"] {
  display: none;
}

.account-lotto-panel.is-logged-in .login-state-line {
  justify-self: start;
  color: var(--text);
  font-size: 12px;
}

body.view-login .login-state-line {
  display: none;
}

.account-button {
  height: var(--control-height);
  border: 1px solid var(--soft-line);
  border-radius: var(--radius);
  background: var(--button);
  color: var(--text);
  cursor: pointer;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.account-button.secondary {
  background: var(--control);
  color: var(--muted);
}

.latest-number-row,
.saved-number-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.latest-ball,
.saved-ball {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.latest-ball.bonus {
  color: var(--muted);
}

/* 세로 스크롤 목록. flex-shrink를 막지 않으면 행이 max-height 안으로 눌려
   번호와 저장 시각이 잘려 사라진다. */
.saved-games-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 340px;
  overflow: auto;
}

.saved-games-list > * {
  flex-shrink: 0;
}

.draw-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.draw-tab {
  height: var(--small-control-height);
  border: 1px solid var(--soft-line);
  border-radius: var(--radius);
  background: var(--control);
  color: var(--muted);
  cursor: pointer;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
}

.draw-tab.active {
  border-color: var(--line);
  background: var(--button);
  color: var(--text);
}

.saved-game-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 64px 26px;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 8px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--bg);
}

/* 발표된 회차에서 맞은 번호는 눈에 띄게 */
.saved-ball.is-hit {
  border-color: var(--text);
  background: var(--button);
  color: var(--text);
}

.saved-ball.is-bonus {
  border-style: dashed;
}

.saved-rank.is-waiting {
  color: var(--muted);
  font-weight: 800;
}

.draw-tab.is-waiting {
  border-style: dashed;
}

.saved-round-note {
  margin: 0 0 2px;
}

.saved-remove {
  justify-self: end;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--soft-line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.saved-remove:hover {
  color: var(--text);
  border-color: var(--line);
}

.saved-remove:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.saved-game-row strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.saved-game-row small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.saved-rank {
  justify-self: end;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.account-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 580px) {
  .account-lotto-grid,
  .account-input-row,
  .account-lotto-header,
  .account-lotto-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* 좁은 화면에서는 이름·등수·삭제를 한 줄에 두고 번호는 아래 줄로 내린다.
     1열로 눕히면 고정 행 높이 안에서 번호가 겹쳐 사라진다. */
  .saved-game-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name rank del"
      "body body body";
    align-items: center;
    min-height: 0;
    row-gap: 7px;
  }

  .saved-game-row > strong {
    grid-area: name;
  }

  .saved-game-row > div {
    grid-area: body;
  }

  .saved-rank {
    grid-area: rank;
    justify-self: end;
  }

  .saved-remove {
    grid-area: del;
    justify-self: end;
  }
}