<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>9DIGITS | Hero Craft Tycoon</title>
  <meta name="description" content="9DIGITS - Mobile Game Development Studio. Hero Craft Tycoon." />

  <style>
    :root{
      --bg:#0b0c10;              /* 사이트 전체 배경 (검정) */
      --card:#121622;            /* 다크 카드 */
      --text:#ffffff;            /* 기본 텍스트 (흰색) */
      --muted:#a9b0bf;
      --line:rgba(255,255,255,.12);
      --accent:#6b5cff;
      --radius:18px;
      --shadow:0 16px 40px rgba(0,0,0,.45);
    }

    *{box-sizing:border-box}

    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height:1.6;
    }

    a{color:inherit;text-decoration:none}

    .wrap{
      max-width:1040px;
      margin:0 auto;
      padding:24px 16px 80px;
    }

    /* =========================
       Header (화이트 블록)
    ========================= */
    header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;

      background:#ffffff;
      color:#111111;
      border-radius:18px;
      padding:16px 20px;
      box-shadow:0 10px 28px rgba(0,0,0,.25);
      border:1px solid rgba(0,0,0,.08);
      margin-bottom:28px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
    }

    .logo-img{
      height:36px;
      width:auto;
      display:block;
    }

    .brand h1{
      margin:0;
      font-size:18px;
      letter-spacing:.4px;
      color:#111;
    }

    .brand p{
      margin:0;
      font-size:12.5px;
      color:#555;
    }

    header nav{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }

    header nav a{
      font-size:13px;
      color:#444;
      padding:8px 10px;
      border-radius:12px;
    }

    header nav a:hover{
      background:rgba(0,0,0,.06);
      color:#000;
    }

    /* =========================
       Hero
    ========================= */
    .hero{
      background:var(--card);
      border-radius:var(--radius);
      padding:26px;
      box-shadow:var(--shadow);
      margin-bottom:28px;
    }

    .hero h2{
      margin:0 0 10px;
      font-size:30px;
    }

    .hero p{
      margin:0;
      color:var(--muted);
    }

    .cta{
      margin-top:18px;
      display:flex;
      gap:12px;
      justify-content:flex-start;
      flex-wrap:wrap;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:10px 16px;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.06);
      color:#fff;
      font-weight:700;
      font-size:13px;
    }

    .btn.primary{
      background:var(--accent);
      color:#0b0c10;
      border:none;
    }

    /* =========================
       Featured Game
    ========================= */
    .sectionTitle{
      margin:0 0 12px;
      font-size:12px;
      letter-spacing:.1em;
      color:var(--muted);
    }

    .game{
      background:var(--card);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
    }

    .game img{
      width:100%;
      height:auto;
      display:block;
    }

    .gameBody{
      padding:20px;
    }

    .gameName{
      margin:0 0 6px;
      font-size:22px;
      font-weight:900;
    }

    .gameDesc{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }

    .tags{
      margin-top:14px;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }

    .tag{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      color:var(--muted);
    }

    /* Google Play badge */
    .store-cta{
      margin-top:18px;
      display:flex;
      justify-content:center;
    }

    .store-badge img{
      height:56px;
      width:auto;
      display:block;
    }

    /* =========================
       Footer
    ========================= */
    footer{
      margin-top:40px;
      padding-top:20px;
      border-top:1px solid var(--line);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:13px;
      color:var(--muted);
    }

    footer a:hover{
      color:#fff;
    }

    /* =========================
       Responsive
    ========================= */
    @media (max-width:840px){
      header{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
      }

      header nav{
        width:100%;
      }

      .hero h2{
        font-size:24px;
      }

      .store-badge img{
        height:64px;
      }
    }
  </style>
</head>

<body>
  <div class="wrap">

    <!-- Header -->
    <header>
      <div class="brand">
        <img src="/logo.png" alt="9DIGITS logo" class="logo-img" />
        <div>
          <h1>9DIGITS</h1>
          <p>Mobile Game Development Studio</p>
        </div>
      </div>

      <nav>
        <a href="#game">Game</a>
        <a href="mailto:contact@9digits.co.kr">Contact</a>
        <a href="mailto:support@9digits.co.kr">Support</a>
      </nav>
    </header>

    <!-- Hero -->
    <section class="hero">
      <h2>Hero Craft Tycoon</h2>
      <p>
        9DIGITS의 첫 타이틀. 판타지 세계에서 제작과 성장의 재미를 담은 모바일 타이쿤 게임을 만들고 있습니다.
      </p>

      <div class="cta">
        <a class="btn primary" href="#game">게임 보기</a>
        <a class="btn" href="mailto:support@9digits.co.kr">문의하기</a>
      </div>
    </section>

    <!-- Featured Game -->
    <div class="sectionTitle" id="game">FEATURED GAME</div>

    <section class="game">
      <img src="/hero-craft-tycoon.png" alt="Hero Craft Tycoon key art" />

      <div class="gameBody">
        <h3 class="gameName">Hero Craft Tycoon</h3>
        <p class="gameDesc">
          캐주얼/아이들 플레이에 집중한 모바일 타이쿤 게임입니다.
        </p>

        <div class="tags">
          <span class="tag">Tycoon</span>
          <span class="tag">Fantasy</span>
          <span class="tag">Mobile</span>
          <span class="tag">Casual</span>
        </div>

        <div class="store-cta">
          <a
            href="https://play.google.com/store/apps/details?id=kr.co.niedigits.herotown"
            target="_blank"
            rel="noopener"
            class="store-badge"
          >
            <img src="/google-play-badge.png" alt="Get it on Google Play" />
          </a>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer id="contact">
      <div>© <span id="y"></span> 9DIGITS. All rights reserved.</div>
      <div>
        <a href="https://sites.google.com/9digits.co.kr/enprivacy" target="_blank" rel="noopener">
          Privacy Policy
        </a> ·
        <a href="https://sites.google.com/9digits.co.kr/enagreement" target="_blank" rel="noopener">
          Terms of Service
        </a> ·
        <a href="mailto:support@9digits.co.kr">Support</a>
      </div>
    </footer>

  </div>

  <script>
    document.getElementById("y").textContent = new Date().getFullYear();
  </script>
</body>
</html>