/* Number generator: mobile-only overrides (same touch + narrow condition as the other *-mobile.css files).
   Everything except the two "hidden by default" rules lives inside the media query, so the PC design is untouched. */
.claim-landing, .mobile-only { display: none; }

@keyframes claim-spin { to { transform: rotate(360deg); } }
@keyframes claim-pulse { 50% { opacity: .25; transform: scale(.7); } }

/* popup that opens from the "당첨번호 즉시 받아보기" button (only ever opened on mobile) */
.claim-prompt-dialog { text-align: center; }
.claim-prompt-dialog > p { padding-inline: 34px; } /* keeps the kicker centered between the two sides despite the close button */
.claim-prompt-dialog > h2 { margin-bottom: 18px; }
.claim-prompt-dialog > span { display: block; }
.claim-prompt-balls { display: flex; justify-content: center; gap: 6px; margin: 0 0 16px; }
.claim-ball {
  --claim-ball: min(42px, calc((100vw - 56px - 76px - 30px) / 6));
  width: var(--claim-ball);
  height: var(--claim-ball);
  flex: 0 0 var(--claim-ball);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: calc(var(--claim-ball) * .46);
  font-weight: 800;
  box-shadow: 0 6px 12px rgba(29, 35, 40, .18);
}
.claim-ball-1 { background: #e09000; }
.claim-ball-2 { background: #0062cc; }
.claim-ball-3 { background: #d92e4d; }
.claim-ball-4 { background: #6e7382; }
.claim-ball-5 { background: #2b9f41; }
/* not yet revealed balls: a golden ring that keeps circling, a pulsing glow and a shimmering "?" */
.claim-ball-locked {
  position: relative;
  background: radial-gradient(circle at 35% 30%, #fffdf2 0%, #fff1c2 100%);
  box-shadow: 0 0 0 0 rgba(245, 183, 0, .55);
  color: #c98a00;
  font-size: calc(var(--claim-ball) * .56);
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255, 200, 40, .65);
  animation: claim-glow 1.5s ease-in-out infinite, claim-question 1.5s ease-in-out infinite;
}
.claim-ball-locked::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ffd54a, #fff6c4 18%, #f2a900 40%, #ffe27a 62%, #f2a900 82%, #ffd54a);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  animation: claim-spin 1.8s linear infinite;
}
.claim-ball-locked:nth-child(3) { animation-delay: 0s; }
.claim-ball-locked:nth-child(4) { animation-delay: .2s; }
.claim-ball-locked:nth-child(5) { animation-delay: .4s; }
.claim-ball-locked:nth-child(6) { animation-delay: .6s; }
.claim-ball-locked:nth-child(4)::before { animation-delay: -.45s; }
.claim-ball-locked:nth-child(5)::before { animation-delay: -.9s; }
.claim-ball-locked:nth-child(6)::before { animation-delay: -1.35s; }
@keyframes claim-glow { 50% { box-shadow: 0 0 16px 4px rgba(245, 183, 0, .6); } }
@keyframes claim-question { 50% { transform: scale(1.12); } }
.claim-prompt-dialog > span strong { color: #e94737; font-weight: 800; }
.claim-prompt-note { display: block; margin-top: 14px; color: #9aa0a8; font-size: 11px; text-align: center; }

@media (max-width: 899px) {
  .desktop-site .generator-page * { min-width: 0; }

  /* On mobile this page is the "당첨번호 받기" app landing: title only (no subtitle), the generator itself is not shown */
  .desktop-site .pc-only { display: none; }
  .desktop-site .mobile-only { display: inline; }
  .desktop-site .generator-page .generator-workspace { display: none; }
  .desktop-site .claim-landing { display: block; padding: 14px 14px 28px; background: #fde0e6; }

  .desktop-site .claim-card { width: 100%; margin: 0; padding: 26px 16px 28px; background: #fff; text-align: center; }
  /* attention grabbers: a pulsing red pill on top, and a bold line right above the button */
  .desktop-site .claim-remaining {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #f0402f;
    box-shadow: 0 6px 14px rgba(240, 64, 47, .28);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.03em;
  }
  .desktop-site .claim-remaining strong { color: #ffe680; font-size: 22px; font-weight: 900; line-height: 1; }
  .desktop-site .claim-remaining i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: claim-pulse 1s ease-in-out infinite; }
  .desktop-site .claim-remaining-line { margin: 26px 0 0; color: #e0402f; font-size: clamp(15px, 4.6vw, 18px); font-weight: 800; letter-spacing: -.03em; }
  .desktop-site .claim-remaining-line strong { padding: 0 2px; background: linear-gradient(transparent 62%, #ffe680 62%); font-weight: 900; }
  .desktop-site .claim-remaining-line + .claim-button { margin-top: 12px; }

  .desktop-site .claim-logo { display: block; width: min(100%, 330px); height: auto; margin: 0 auto; }
  .desktop-site .claim-tagline { margin: 22px 0 0; color: #222; font-size: clamp(16px, 5vw, 20px); font-weight: 700; letter-spacing: -.03em; }

  /* the number slip reuses the generator slip look (red "A 1,000원" header + 1-45 grid) */
  .desktop-site .claim-slip { margin: 24px 0 0; text-align: left; }

  .desktop-site .claim-expect { margin: 26px 0 0; padding-top: 26px; border-top: 2px dashed #d5d5d5; color: #1c1c1c; font-size: clamp(19px, 6vw, 24px); font-weight: 800; letter-spacing: -.04em; }
  .desktop-site .claim-spinners { display: flex; justify-content: center; gap: 10px; margin: 18px 0 0; }
  .desktop-site .claim-spinners i {
    width: clamp(36px, 11vw, 46px);
    height: clamp(36px, 11vw, 46px);
    border: 6px solid #e4e4e4;
    border-top-color: #f0604d;
    border-right-color: #f0604d;
    border-radius: 50%;
    animation: claim-spin 1.1s linear infinite;
  }

  .desktop-site .claim-button {
    display: block;
    width: 100%;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    margin-top: 26px;
    padding: 22px 10px;
    border-radius: 4px;
    background: linear-gradient(#e2433d, #d1312d);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -5px 0 rgba(0, 0, 0, .25), 0 8px 16px rgba(200, 40, 40, .22);
    color: #fff;
    font-size: clamp(20px, 6.4vw, 26px);
    font-weight: 800;
    letter-spacing: -.04em;
    text-align: center;
    text-decoration: none;
  }
  .desktop-site .claim-button:active { transform: translateY(2px); }

  /* hero */
  .desktop-site .generator-hero-inner { min-height: 0; padding: 24px 0 22px; }
  .desktop-site .generator-hero h1 { font-size: 28px; }
  .desktop-site .generator-hero-copy > span { font-size: 14px; }

  /* workspace: no card, the sections use the full width */
  .desktop-site .generator-page .generator-workspace { margin-top: 0; }
  .desktop-site .generator-page .generator-studio,
  .desktop-site .generator-page .generator-workspace .generator-studio { padding: 20px 16px 24px; border-radius: 0; }

  /* mode tabs: two equal tabs, the small sub line is dropped */
  .desktop-site .generation-mode-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-site .generation-mode-switch::after { display: none; }
  .desktop-site .generation-mode-switch > button { min-height: 56px; border-radius: 0; }
  .desktop-site .generation-mode-switch > button:first-child { border-radius: 0; }
  .desktop-site .generation-mode-switch > button > span { display: none; }
  .desktop-site .generation-mode-switch strong { font-size: 15px; }

  /* excluded / fixed numbers summary + reset button */
  .desktop-site .generator-toolbar { gap: 12px; padding-bottom: 14px; align-items: center; }
  .desktop-site .selection-preview { gap: 6px 16px; }
  .desktop-site .reset-button { min-height: 36px; padding: 0 14px; font-size: 13px; white-space: nowrap; }

  /* filter chips: 2 columns, label left, current value below (nothing is cut off) */
  /* chips and the opened panel share one grid: chips sit on odd rows (2 per row), the panel is dropped onto the
     even row right under the row of the chip that is open, so it always appears directly below the selected chip */
  .desktop-site .generator-filter-zone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 0; padding: 14px 0 16px; }
  .desktop-site .generator-filter-chips { display: contents; }
  .desktop-site .generator-filter-chips > button { min-height: 54px; margin-bottom: 8px; padding: 8px 12px; }
  .desktop-site .generator-filter-chips > button:nth-child(-n+2) { grid-row: 1; }
  .desktop-site .generator-filter-chips > button:nth-child(n+3):nth-child(-n+4) { grid-row: 3; }
  .desktop-site .generator-filter-chips > button:nth-child(n+5):nth-child(-n+6) { grid-row: 5; }
  .desktop-site .generator-filter-chips > button:nth-child(n+7):nth-child(-n+8) { grid-row: 7; }
  .desktop-site .generator-filter-chips > button:nth-child(n+9) { grid-row: 9; grid-column: 1 / -1; }
  .desktop-site .generator-filter-zone > .generator-filter-panel { grid-column: 1 / -1; grid-row: 2; margin: 0 0 8px; }
  .desktop-site .generator-filter-zone:has(.generator-filter-chips > button:nth-child(n+3):nth-child(-n+4).active) > .generator-filter-panel { grid-row: 4; }
  .desktop-site .generator-filter-zone:has(.generator-filter-chips > button:nth-child(n+5):nth-child(-n+6).active) > .generator-filter-panel { grid-row: 6; }
  .desktop-site .generator-filter-zone:has(.generator-filter-chips > button:nth-child(n+7):nth-child(-n+8).active) > .generator-filter-panel { grid-row: 8; }
  .desktop-site .generator-filter-zone:has(.generator-filter-chips > button:nth-child(n+9).active) > .generator-filter-panel { grid-row: 10; }
  .desktop-site .generator-filter-chips span { font-size: 13px; white-space: nowrap; }
  .desktop-site .generator-filter-chips strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* opened filter panel: in the flow under the chips instead of a floating popup */
  .desktop-site .filter-panel-actions button { min-width: 88px; }

  /* option buttons: the label stays clean on one line, "(권장)" moves out into a small tag on the top-right corner */
  .desktop-site .filter-option-grid { gap: 12px 8px; }
  .desktop-site .filter-option-grid button { position: relative; min-height: 46px; padding: 9px 8px; font-size: 13px; }
  .desktop-site .filter-option-grid button > span { white-space: nowrap; }
  .desktop-site .filter-option-grid button small {
    position: absolute;
    top: -8px;
    right: 6px;
    padding: 1px 6px;
    border: 1px solid #f7b9b1;
    border-radius: 999px;
    background: #fff;
    color: #f45140;
    font-size: 10px;
    line-height: 1.4;
  }
  .desktop-site .filter-option-grid button.active small { border-color: #f45140; background: #f45140; color: #fff; }
  .desktop-site .generator-filter-panel { position: static; width: 100%; max-height: none; padding: 16px 14px; border-radius: 14px; box-shadow: none; }

  /* results header */
  .desktop-site .generator-results-head { min-height: 0; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 0 12px; }
  .desktop-site .generator-results-head > div { gap: 8px; }
  .desktop-site .generator-results-head span { font-size: 13px; }
  .desktop-site .generator-results-head strong { font-size: 18px; }
  .desktop-site .generator-results-head p { font-size: 12px; line-height: 1.5; }

  /* number slips: one full-width slip per row instead of a sideways scroller that cut them off */
  .desktop-site .generator-result-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; overflow: visible; padding: 0 0 8px; }
  .desktop-site .generator-result-card { flex: none; width: 100%; min-height: 0; }
  .desktop-site .result-card-head { min-height: 52px; grid-template-columns: 52px 1fr; }
  .desktop-site .result-card-head strong { font-size: 22px; }
  .desktop-site .result-card-head em { font-size: 18px; }
  .desktop-site .result-number-grid { padding: 14px 12px 12px; gap: 8px 4px; }
  .desktop-site .result-number-grid > button, .desktop-site .result-number-grid > span { height: 38px; font-size: 14px; }

  /* action bar: stepper + generate on the first row, save button full width below */
  .desktop-site .generator-action-bar { grid-template-columns: 150px minmax(0, 1fr); gap: 10px; margin-top: 8px; padding-top: 16px; }
  .desktop-site .set-stepper { height: 48px; }
  .desktop-site .generate-button { min-height: 48px; font-size: 15px; }
  .desktop-site .qr-create-button { grid-column: 1 / -1; min-height: 48px; font-size: 15px; }
  .desktop-site .generator-disclaimer { margin-top: 12px; font-size: 12px; line-height: 1.55; }
}