<!doctype html>

<html lang="ko">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>오늘의 로또 번호</title>

  <style>

    * { box-sizing: border-box; }

    body {

      min-height: 100vh;

      margin: 0;

      display: grid;

      place-items: center;

      padding: 24px;

      background: #f6f5f0;

      color: #1e2a24;

      font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",

        "Noto Sans KR", sans-serif;

    }

    .card {

      width: min(100%, 560px);

      padding: clamp(28px, 7vw, 52px);

      border-radius: 24px;

      background: #fff;

      box-shadow: 0 18px 55px rgba(30, 42, 36, 0.08);

      text-align: center;

    }

    .label {

      margin-bottom: 14px;

      color: #176b4d;

      font-size: 12px;

      font-weight: 800;

      letter-spacing: 0.12em;

    }

    h1 {

      margin: 0;

      font-size: clamp(28px, 7vw, 40px);

    }

    .description {

      color: #737b74;

      line-height: 1.6;

    }

    .numbers {

      display: grid;

      gap: 12px;

      margin: 28px 0 22px;

      padding: 18px 8px;

      border: 1px solid #e8e7df;

      border-radius: 18px;

      background: #fbfbf8;

    }

    .number-row {

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      justify-content: center;

      gap: 8px;

    }

    .row-label {

      width: 25px;

      color: #737b74;

      font-size: 13px;

      font-weight: 700;

    }

    .placeholder {

      padding: 20px 0;

      color: #a7aaa3;

      font-size: 14px;

    }

    .ball {

      width: 44px;

      height: 44px;

      display: grid;

      place-items: center;

      border-radius: 50%;

      color: #fff;

      font-size: 16px;

      font-weight: 800;

      box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);

    }

    button {

      width: 100%;

      min-height: 54px;

      border: 0;

      border-radius: 14px;

      background: #176b4d;

      color: #fff;

      font: inherit;

      font-weight: 800;

      cursor: pointer;

    }

    button:hover { background: #10533b; }

    #copyButton {

      width: auto;

      min-height: auto;

      margin-top: 12px;

      padding: 8px 12px;

      background: transparent;

      color: #176b4d;

    }

    #copyButton:disabled {

      color: #a7aaa3;

      cursor: default;

    }

    .note {

      margin-top: 22px;

      color: #9a9e97;

      font-size: 12px;

    }

    @media (max-width: 420px) {

      .number-row { gap: 5px; }

      .row-label { width: 20px; }

      .ball { width: 40px; height: 40px; }

    }

  </style>

</head>

<body>

  <main class="card">

    <div class="label">LUCKY PICK</div>

    <h1>오늘의 로또 번호</h1>

    <p class="description">버튼을 눌러 로또 번호 5조합을 뽑아보세요.</p>

    <section class="numbers" id="numbers" aria-live="polite">

      <span class="placeholder">추천 번호 5조합이 여기에 표시됩니다</span>

    </section>

    <button id="drawButton" type="button">번호 5조합 추천받기</button>

    <button id="copyButton" type="button" disabled>번호 복사</button>

    <p class="note">번호는 무작위로 생성되며 당첨을 보장하지 않습니다.</p>

  </main>

  <script>

    const numbersArea = document.getElementById("numbers");

    const drawButton = document.getElementById("drawButton");

    const copyButton = document.getElementById("copyButton");

    let currentCombinations = [];

    function pickNumbers() {

      const pool = Array.from({ length: 45 }, (_, index) => index + 1);

      // 번호를 섞은 뒤 앞에서 6개를 선택합니다.

      for (let i = pool.length - 1; i > 0; i--) {

        const j = Math.floor(Math.random() * (i + 1));

        [pool[i], pool[j]] = [pool[j], pool[i]];

      }

      return pool.slice(0, 6).sort((a, b) => a - b);

    }

    function getBallColor(number) {

      if (number <= 10) return "#f0b323";

      if (number <= 20) return "#4386d4";

      if (number <= 30) return "#e45b58";

      if (number <= 40) return "#858b91";

      return "#5baf72";

    }

    drawButton.addEventListener("click", () => {

      currentCombinations = Array.from({ length: 5 }, () => pickNumbers());

      numbersArea.replaceChildren();

      currentCombinations.forEach((combination, index) => {

        const row = document.createElement("div");

        row.className = "number-row";

        const label = document.createElement("span");

        label.className = "row-label";

        label.textContent = `${index + 1}.`;

        row.appendChild(label);

        combination.forEach((number) => {

          const ball = document.createElement("span");

          ball.className = "ball";

          ball.textContent = number;

          ball.style.backgroundColor = getBallColor(number);

          row.appendChild(ball);

        });

        numbersArea.appendChild(row);

      });

      copyButton.disabled = false;

    });

    copyButton.addEventListener("click", async () => {

      if (currentCombinations.length === 0) return;

      const text = currentCombinations

        .map((combination) => combination.join(", "))

        .join("\n");

      try {

        await navigator.clipboard.writeText(text);

        copyButton.textContent = "복사했어요!";

      } catch {

        copyButton.textContent = text.replaceAll("\n", " / ");

      }

      setTimeout(() => {

        copyButton.textContent = "번호 복사";

      }, 1500);

    });

  </script>

</body>

</html>