← 실습 자료

태양계 8행성 탐험대 · 완성 예시

행성을 탐색·비교하고 태양에서 가까운 순서를 즉시 피드백으로 익히는 단일 HTML입니다.

HTML 복사하기

HTML 직접 보기
<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>태양계 8행성 탐험대</title>
  <style>
    :root {
      color-scheme: dark;
      --space-950: #050816;
      --space-900: #0a1026;
      --space-800: #111b3e;
      --panel: rgba(14, 24, 55, 0.9);
      --panel-soft: rgba(27, 41, 83, 0.72);
      --line: rgba(161, 181, 255, 0.22);
      --text: #f7f8ff;
      --muted: #b8c3e7;
      --accent: #8bd3ff;
      --accent-strong: #4eb7ff;
      --sun: #ffd166;
      --correct: #6ee7b7;
      --wrong: #fda4af;
      --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-width: 320px;
      min-height: 100vh;
      overflow-x: hidden;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 8%, rgba(89, 113, 255, 0.25), transparent 30rem),
        radial-gradient(circle at 88% 30%, rgba(64, 201, 255, 0.13), transparent 28rem),
        linear-gradient(155deg, var(--space-950), var(--space-900) 52%, #08112f);
      font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.6;
    }

    button, select { font: inherit; }

    button, select {
      min-height: 48px;
      color: inherit;
    }

    button { cursor: pointer; }

    button:focus-visible,
    select:focus-visible {
      outline: 4px solid #ffffff;
      outline-offset: 3px;
    }

    button:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    .app {
      width: min(100% - 24px, 1180px);
      margin: 0 auto;
      padding: 20px 0 44px;
    }

    .hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 28px 22px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(25, 40, 89, 0.95), rgba(8, 15, 39, 0.9));
      box-shadow: var(--shadow);
    }

    .hero::after {
      position: absolute;
      z-index: -1;
      top: -66px;
      right: -72px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fff6b7 0 7%, #ffd166 25%, #f59e0b 62%, rgba(245, 158, 11, 0) 72%);
      content: "";
      filter: drop-shadow(0 0 34px rgba(255, 209, 102, 0.35));
    }

    .eyebrow {
      margin: 0 0 6px;
      color: #a9dcff;
      font-size: 0.82rem;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    h1, h2, h3, p { margin-top: 0; }

    h1 {
      max-width: 760px;
      margin-bottom: 10px;
      font-size: clamp(2rem, 8vw, 4.7rem);
      line-height: 1.04;
      letter-spacing: -0.055em;
      text-wrap: balance;
    }

    .hero-copy {
      max-width: 720px;
      margin-bottom: 18px;
      color: var(--muted);
      font-weight: 650;
    }

    .scale-notice {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      max-width: 760px;
      margin: 0;
      padding: 12px 14px;
      border: 1px solid rgba(255, 209, 102, 0.34);
      border-radius: 16px;
      background: rgba(255, 209, 102, 0.1);
      color: #fff1b3;
      font-size: 0.92rem;
      font-weight: 800;
    }

    .scale-notice strong { flex: 0 0 auto; }

    .mode-tabs {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin: 16px 0;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(5, 8, 22, 0.78);
      box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
    }

    .tab-button {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid transparent;
      border-radius: 14px;
      background: transparent;
      color: var(--muted);
      font-weight: 900;
      text-align: left;
    }

    .tab-button[aria-selected="true"] {
      border-color: rgba(139, 211, 255, 0.38);
      background: linear-gradient(135deg, rgba(78, 183, 255, 0.28), rgba(92, 117, 255, 0.22));
      color: #ffffff;
    }

    .panel {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 26px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .panel[hidden] { display: none; }

    .panel-heading {
      display: grid;
      gap: 4px;
      margin-bottom: 20px;
    }

    .panel-heading h2 {
      margin-bottom: 0;
      font-size: clamp(1.5rem, 5vw, 2.35rem);
      line-height: 1.2;
      letter-spacing: -0.035em;
    }

    .panel-heading p {
      margin-bottom: 0;
      color: var(--muted);
    }

    .explore-layout { display: grid; gap: 18px; }

    .orbit-board {
      position: relative;
      overflow: hidden;
      min-height: 316px;
      padding: 18px;
      border: 1px solid rgba(139, 211, 255, 0.18);
      border-radius: 22px;
      background:
        radial-gradient(circle at 0 50%, rgba(255, 209, 102, 0.25), transparent 30%),
        linear-gradient(120deg, rgba(8, 17, 47, 0.94), rgba(17, 29, 70, 0.74));
    }

    .sun-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      color: #ffe89b;
      font-weight: 950;
    }

    .sun-dot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #ffffff, var(--sun) 35%, #f59e0b 75%);
      box-shadow: 0 0 28px rgba(255, 209, 102, 0.55);
    }

    .planet-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .planet-button {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid rgba(184, 195, 231, 0.2);
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.045);
      color: var(--text);
      font-size: 0.9rem;
      font-weight: 850;
      text-align: left;
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
    }

    .planet-button:hover { transform: translateY(-2px); }

    .planet-button[aria-pressed="true"] {
      border-color: var(--accent);
      background: rgba(78, 183, 255, 0.17);
    }

    .planet-dot {
      width: var(--planet-size, 28px);
      height: var(--planet-size, 28px);
      justify-self: center;
      border-radius: 50%;
      background: var(--planet-fill);
      box-shadow: inset -7px -5px 12px rgba(0, 0, 0, 0.3), 0 0 13px rgba(151, 190, 255, 0.18);
    }

    .planet-detail,
    .result-card {
      min-height: 100%;
      padding: 20px;
      border: 1px solid rgba(139, 211, 255, 0.22);
      border-radius: 22px;
      background: var(--panel-soft);
    }

    .detail-kicker,
    .progress-label {
      margin-bottom: 6px;
      color: var(--accent);
      font-size: 0.8rem;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    .planet-detail h3,
    .result-card h3 {
      margin-bottom: 8px;
      font-size: 1.55rem;
    }

    .fact-list {
      display: grid;
      gap: 9px;
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
    }

    .fact-list li {
      padding: 10px 12px;
      border-left: 3px solid var(--accent);
      border-radius: 0 12px 12px 0;
      background: rgba(5, 8, 22, 0.42);
      color: #dce5ff;
    }

    .compare-controls {
      display: grid;
      gap: 12px;
      margin-bottom: 18px;
    }

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

    .field label {
      color: #dbe7ff;
      font-size: 0.9rem;
      font-weight: 850;
    }

    select {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid rgba(184, 195, 231, 0.34);
      border-radius: 14px;
      background: #111b3e;
    }

    .primary-button,
    .secondary-button {
      padding: 10px 16px;
      border-radius: 14px;
      font-weight: 900;
    }

    .primary-button {
      border: 1px solid rgba(177, 228, 255, 0.48);
      background: linear-gradient(135deg, #1476c5, #605de8);
      color: #ffffff;
      box-shadow: 0 10px 24px rgba(47, 105, 216, 0.24);
    }

    .secondary-button {
      border: 1px solid rgba(184, 195, 231, 0.28);
      background: rgba(255, 255, 255, 0.07);
      color: #e8edff;
    }

    .compare-result-grid {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }

    .compare-planet {
      padding: 14px;
      border: 1px solid rgba(184, 195, 231, 0.18);
      border-radius: 15px;
      background: rgba(5, 8, 22, 0.36);
    }

    .compare-planet strong { display: block; font-size: 1.15rem; }

    .order-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      padding: 12px 14px;
      border: 1px solid rgba(139, 211, 255, 0.18);
      border-radius: 16px;
      background: rgba(5, 8, 22, 0.35);
    }

    .order-status p { margin: 0; }

    .order-buttons {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .order-button {
      padding: 10px 8px;
      border: 1px solid rgba(184, 195, 231, 0.24);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.055);
      font-weight: 850;
    }

    .order-button.is-correct {
      border-color: var(--correct);
      background: rgba(110, 231, 183, 0.15);
      color: #c8ffeb;
    }

    .order-button.is-correct:disabled { opacity: 1; }

    .order-button.is-wrong {
      border-color: var(--wrong);
      background: rgba(253, 164, 175, 0.13);
    }

    .order-track {
      display: flex;
      min-height: 58px;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      padding: 10px;
      border-radius: 15px;
      background: rgba(5, 8, 22, 0.46);
    }

    .order-track span {
      flex: 0 0 auto;
      padding: 6px 10px;
      border: 1px solid rgba(110, 231, 183, 0.35);
      border-radius: 999px;
      background: rgba(110, 231, 183, 0.12);
      color: #d6ffef;
      font-size: 0.86rem;
      font-weight: 850;
    }

    .feedback {
      min-height: 52px;
      margin: 14px 0 0;
      padding: 12px 14px;
      border-radius: 15px;
      background: rgba(139, 211, 255, 0.1);
      color: #dceeff;
      font-weight: 800;
    }

    .feedback[data-tone="correct"] {
      background: rgba(110, 231, 183, 0.13);
      color: #caffea;
    }

    .feedback[data-tone="wrong"] {
      background: rgba(253, 164, 175, 0.13);
      color: #ffd9de;
    }

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

    .source-note {
      margin: 18px 2px 0;
      color: #99a8d4;
      font-size: 0.78rem;
      text-align: center;
    }

    @media (min-width: 768px) {
      .app { width: min(100% - 40px, 1180px); padding-top: 30px; }
      .hero { padding: 38px 42px; }
      .hero::after { top: -78px; right: -68px; width: 220px; height: 220px; }
      .mode-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .tab-button { text-align: center; }
      .panel { padding: 30px; }
      .explore-layout { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr); }
      .planet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .compare-controls { grid-template-columns: 1fr 1fr auto; align-items: end; }
      .compare-result-grid { grid-template-columns: 1fr 1fr; }
      .order-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    @media (min-width: 1280px) {
      .hero::after { right: 40px; width: 260px; height: 260px; }
      .orbit-board { min-height: 350px; padding: 24px; }
      .planet-grid { gap: 14px; }
      .planet-button { padding: 12px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
    }
  </style>
</head>
<body>
  <main class="app">
    <header class="hero">
      <p class="eyebrow">SCIENCE MISSION · 8 PLANETS</p>
      <h1>태양계 8행성 탐험대</h1>
      <p class="hero-copy">행성을 눌러 특징을 살펴보고, 두 행성을 비교하고, 태양에서 가까운 순서를 직접 완성해 보세요.</p>
      <p class="scale-notice"><strong>축척 안내</strong><span>이 화면의 거리·크기·공전 속도는 실제 축척이 아닙니다.</span></p>
    </header>

    <div class="mode-tabs" role="tablist" aria-label="학습 활동 선택">
      <button id="tab-explore" class="tab-button" type="button" role="tab" aria-selected="true" aria-controls="panel-explore" data-panel="explore">1. 행성 탐색</button>
      <button id="tab-compare" class="tab-button" type="button" role="tab" aria-selected="false" aria-controls="panel-compare" data-panel="compare">2. 두 행성 비교</button>
      <button id="tab-order" class="tab-button" type="button" role="tab" aria-selected="false" aria-controls="panel-order" data-panel="order">3. 순서 도전</button>
    </div>

    <section id="panel-explore" class="panel" role="tabpanel" aria-labelledby="tab-explore">
      <div class="panel-heading">
        <p class="eyebrow">MISSION 01</p>
        <h2>8개 행성을 클릭해 탐색하세요</h2>
        <p>수성부터 해왕성까지, 태양에서의 순서와 행성 유형을 확인합니다.</p>
      </div>
      <div class="explore-layout">
        <div class="orbit-board">
          <div class="sun-label"><span class="sun-dot" aria-hidden="true"></span>태양에서 가까운 순서 →</div>
          <div class="planet-grid" aria-label="태양계 8개 행성">
            <button class="planet-button" type="button" data-planet="0" aria-pressed="true"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#d7d9de,#777f8d);--planet-size:24px" aria-hidden="true"></span><span>수성</span></button>
            <button class="planet-button" type="button" data-planet="1" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#ffe0a3,#bc713e);--planet-size:30px" aria-hidden="true"></span><span>금성</span></button>
            <button class="planet-button" type="button" data-planet="2" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#68d5f4,#286bd3 52%,#6ac779 55%);--planet-size:31px" aria-hidden="true"></span><span>지구</span></button>
            <button class="planet-button" type="button" data-planet="3" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#f6a26b,#a63d2b);--planet-size:27px" aria-hidden="true"></span><span>화성</span></button>
            <button class="planet-button" type="button" data-planet="4" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(160deg,#ead6ad 20%,#a76742 38%,#f2dfba 58%,#98563a 72%);--planet-size:44px" aria-hidden="true"></span><span>목성</span></button>
            <button class="planet-button" type="button" data-planet="5" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#f8df9b,#b69558);--planet-size:40px" aria-hidden="true"></span><span>토성</span></button>
            <button class="planet-button" type="button" data-planet="6" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#d2ffff,#65cbd0);--planet-size:35px" aria-hidden="true"></span><span>천왕성</span></button>
            <button class="planet-button" type="button" data-planet="7" aria-pressed="false"><span class="planet-dot" style="--planet-fill:linear-gradient(135deg,#67b6ff,#2455bd);--planet-size:35px" aria-hidden="true"></span><span>해왕성</span></button>
          </div>
        </div>
        <article class="planet-detail" aria-live="polite" aria-atomic="true">
          <p class="detail-kicker" id="detail-order">태양에서 1번째</p>
          <h3 id="detail-name">수성</h3>
          <p id="detail-summary">태양에 가장 가까운 행성이며 태양계에서 가장 작은 행성입니다.</p>
          <ul class="fact-list">
            <li id="detail-type">유형 · 암석형 행성</li>
            <li id="detail-group">안쪽의 네 암석형 행성 중 하나입니다.</li>
          </ul>
        </article>
      </div>
      <div class="panel-actions">
        <button class="secondary-button reset-all" type="button">전체 다시 시작</button>
      </div>
    </section>

    <section id="panel-compare" class="panel" role="tabpanel" aria-labelledby="tab-compare" hidden>
      <div class="panel-heading">
        <p class="eyebrow">MISSION 02</p>
        <h2>두 행성을 비교하세요</h2>
        <p>서로 다른 행성을 골라 태양에서의 순서와 유형을 나란히 봅니다.</p>
      </div>
      <div class="compare-controls">
        <div class="field">
          <label for="planet-a">첫 번째 행성</label>
          <select id="planet-a">
            <option value="0">수성</option><option value="1">금성</option><option value="2">지구</option><option value="3">화성</option>
            <option value="4">목성</option><option value="5">토성</option><option value="6">천왕성</option><option value="7">해왕성</option>
          </select>
        </div>
        <div class="field">
          <label for="planet-b">두 번째 행성</label>
          <select id="planet-b">
            <option value="0">수성</option><option value="1">금성</option><option value="2" selected>지구</option><option value="3">화성</option>
            <option value="4">목성</option><option value="5">토성</option><option value="6">천왕성</option><option value="7">해왕성</option>
          </select>
        </div>
        <button id="compare-button" class="primary-button" type="button">즉시 확인</button>
      </div>
      <article class="result-card" aria-live="polite" aria-atomic="true">
        <p class="detail-kicker">비교 결과</p>
        <h3 id="compare-title">수성과 지구</h3>
        <p id="compare-summary">수성이 지구보다 태양에 가깝습니다. 두 행성은 모두 암석형 행성입니다.</p>
        <div class="compare-result-grid">
          <div class="compare-planet"><strong id="compare-a-name">수성</strong><span id="compare-a-fact">태양에서 1번째 · 암석형 행성</span></div>
          <div class="compare-planet"><strong id="compare-b-name">지구</strong><span id="compare-b-fact">태양에서 3번째 · 암석형 행성</span></div>
        </div>
      </article>
      <p id="compare-feedback" class="feedback" aria-live="polite">두 행성이 어떻게 다른지 읽고 다른 조합도 비교해 보세요.</p>
      <div class="panel-actions">
        <button id="compare-reset" class="secondary-button" type="button">비교 다시 시작</button>
        <button class="secondary-button reset-all" type="button">전체 다시 시작</button>
      </div>
    </section>

    <section id="panel-order" class="panel" role="tabpanel" aria-labelledby="tab-order" hidden>
      <div class="panel-heading">
        <p class="eyebrow">MISSION 03</p>
        <h2>태양에서 가까운 순서로 선택하세요</h2>
        <p>섞인 행성 이름에서 가장 가까운 행성부터 하나씩 누르면 즉시 피드백이 나옵니다.</p>
      </div>
      <div class="order-status">
        <div>
          <p class="progress-label">현재 진행</p>
          <p id="order-progress">0 / 8개 선택</p>
        </div>
        <button id="order-reset" class="secondary-button" type="button">활동 다시 시작</button>
      </div>
      <div id="order-buttons" class="order-buttons" aria-label="섞인 행성 선택지"></div>
      <div id="order-track" class="order-track" aria-label="완성한 행성 순서"><span>아직 선택한 행성이 없습니다</span></div>
      <p id="order-feedback" class="feedback" aria-live="polite" aria-atomic="true">가장 먼저 수성을 찾아 눌러 보세요.</p>
      <div class="panel-actions">
        <button class="secondary-button reset-all" type="button">전체 다시 시작</button>
      </div>
    </section>

    <p class="source-note">학습 사실 근거: NASA Science · About the Planets / Our Solar System, IAU Resolution B5</p>
  </main>

  <script>
    (function () {
      'use strict';

      var planets = [
        { name: '수성', order: 1, type: '암석형 행성', summary: '태양에 가장 가까운 행성이며 태양계에서 가장 작은 행성입니다.', group: '안쪽의 네 암석형 행성 중 하나입니다.' },
        { name: '금성', order: 2, type: '암석형 행성', summary: '태양에서 두 번째에 있는 암석형 행성입니다.', group: '안쪽의 네 암석형 행성 중 하나입니다.' },
        { name: '지구', order: 3, type: '암석형 행성', summary: '우리가 사는 행성이며 태양에서 세 번째에 있습니다.', group: '안쪽의 네 암석형 행성 중 하나입니다.' },
        { name: '화성', order: 4, type: '암석형 행성', summary: '태양에서 네 번째에 있는 암석형 행성입니다.', group: '안쪽의 네 암석형 행성 중 하나입니다.' },
        { name: '목성', order: 5, type: '가스 거대 행성', summary: '태양에서 다섯 번째에 있으며 태양계에서 가장 큰 행성입니다.', group: '토성과 함께 가스 거대 행성으로 분류합니다.' },
        { name: '토성', order: 6, type: '가스 거대 행성', summary: '태양에서 여섯 번째에 있는 가스 거대 행성입니다.', group: '목성과 함께 가스 거대 행성으로 분류합니다.' },
        { name: '천왕성', order: 7, type: '얼음 거대 행성', summary: '태양에서 일곱 번째에 있는 얼음 거대 행성입니다.', group: '해왕성과 함께 얼음 거대 행성으로 분류합니다.' },
        { name: '해왕성', order: 8, type: '얼음 거대 행성', summary: '태양에서 여덟 번째이자 가장 먼 행성입니다.', group: '천왕성과 함께 얼음 거대 행성으로 분류합니다.' }
      ];

      var tabButtons = Array.from(document.querySelectorAll('.tab-button'));
      var panels = {
        explore: document.getElementById('panel-explore'),
        compare: document.getElementById('panel-compare'),
        order: document.getElementById('panel-order')
      };
      var planetButtons = Array.from(document.querySelectorAll('.planet-button'));
      var detailOrder = document.getElementById('detail-order');
      var detailName = document.getElementById('detail-name');
      var detailSummary = document.getElementById('detail-summary');
      var detailType = document.getElementById('detail-type');
      var detailGroup = document.getElementById('detail-group');
      var firstSelect = document.getElementById('planet-a');
      var secondSelect = document.getElementById('planet-b');
      var compareFeedback = document.getElementById('compare-feedback');
      var orderButtons = document.getElementById('order-buttons');
      var orderTrack = document.getElementById('order-track');
      var orderFeedback = document.getElementById('order-feedback');
      var orderProgress = document.getElementById('order-progress');
      var orderIndex = 0;

      function ordinalText(order) {
        return '태양에서 ' + order + '번째';
      }

      function showPanel(name, focusPanel) {
        tabButtons.forEach(function (button) {
          var active = button.dataset.panel === name;
          button.setAttribute('aria-selected', active ? 'true' : 'false');
          button.tabIndex = active ? 0 : -1;
        });
        Object.keys(panels).forEach(function (key) {
          panels[key].hidden = key !== name;
        });
        if (focusPanel) {
          panels[name].querySelector('h2').focus({ preventScroll: true });
        }
      }

      function renderPlanet(index) {
        var planet = planets[index];
        planetButtons.forEach(function (button) {
          button.setAttribute('aria-pressed', Number(button.dataset.planet) === index ? 'true' : 'false');
        });
        detailOrder.textContent = ordinalText(planet.order);
        detailName.textContent = planet.name;
        detailSummary.textContent = planet.summary;
        detailType.textContent = '유형 · ' + planet.type;
        detailGroup.textContent = planet.group;
      }

      function renderComparison() {
        var first = planets[Number(firstSelect.value)];
        var second = planets[Number(secondSelect.value)];
        var title = document.getElementById('compare-title');
        var summary = document.getElementById('compare-summary');
        var firstName = document.getElementById('compare-a-name');
        var firstFact = document.getElementById('compare-a-fact');
        var secondName = document.getElementById('compare-b-name');
        var secondFact = document.getElementById('compare-b-fact');

        title.textContent = first.name + '과 ' + second.name;
        firstName.textContent = first.name;
        firstFact.textContent = ordinalText(first.order) + ' · ' + first.type;
        secondName.textContent = second.name;
        secondFact.textContent = ordinalText(second.order) + ' · ' + second.type;

        if (first.order === second.order) {
          summary.textContent = '같은 행성을 두 번 골랐습니다. 서로 다른 행성을 선택해 주세요.';
          compareFeedback.textContent = '서로 다른 두 행성을 골라야 비교할 수 있습니다.';
          compareFeedback.dataset.tone = 'wrong';
          return;
        }

        var closer = first.order < second.order ? first : second;
        var typeCopy = first.type === second.type
          ? '두 행성은 모두 ' + first.type + '입니다.'
          : first.name + '은 ' + first.type + ', ' + second.name + '은 ' + second.type + '입니다.';
        summary.textContent = closer.name + '이 태양에 더 가깝습니다. ' + typeCopy;
        compareFeedback.textContent = '비교 완료! 순서와 유형을 함께 확인했습니다.';
        compareFeedback.dataset.tone = 'correct';
      }

      function shuffledIndexes() {
        var values = planets.map(function (_planet, index) { return index; });
        for (var cursor = values.length - 1; cursor > 0; cursor -= 1) {
          var target = Math.floor(Math.random() * (cursor + 1));
          var temporary = values[cursor];
          values[cursor] = values[target];
          values[target] = temporary;
        }
        return values;
      }

      function renderOrderTrack() {
        orderTrack.replaceChildren();
        if (orderIndex === 0) {
          var empty = document.createElement('span');
          empty.textContent = '아직 선택한 행성이 없습니다';
          orderTrack.appendChild(empty);
          return;
        }
        planets.slice(0, orderIndex).forEach(function (planet) {
          var chip = document.createElement('span');
          chip.textContent = planet.order + '. ' + planet.name;
          orderTrack.appendChild(chip);
        });
      }

      function chooseOrder(button, index) {
        if (index !== orderIndex) {
          button.classList.add('is-wrong');
          orderFeedback.textContent = '아직 ' + planets[orderIndex].name + ' 차례입니다. 태양에서 더 가까운 행성을 찾아보세요.';
          orderFeedback.dataset.tone = 'wrong';
          window.setTimeout(function () { button.classList.remove('is-wrong'); }, 420);
          return;
        }
        button.classList.add('is-correct');
        button.disabled = true;
        orderIndex += 1;
        orderProgress.textContent = orderIndex + ' / 8개 선택';
        renderOrderTrack();
        if (orderIndex === planets.length) {
          orderFeedback.textContent = '순서 완성! 수성에서 해왕성까지 8개 행성을 모두 정확히 연결했습니다.';
          orderFeedback.dataset.tone = 'correct';
          return;
        }
        orderFeedback.textContent = '정답입니다. 다음은 ' + planets[orderIndex].name + '을 찾아보세요.';
        orderFeedback.dataset.tone = 'correct';
      }

      function resetOrder() {
        orderIndex = 0;
        orderProgress.textContent = '0 / 8개 선택';
        orderFeedback.textContent = '가장 먼저 수성을 찾아 눌러 보세요.';
        orderFeedback.dataset.tone = '';
        orderButtons.replaceChildren();
        shuffledIndexes().forEach(function (index) {
          var button = document.createElement('button');
          button.type = 'button';
          button.className = 'order-button';
          button.textContent = planets[index].name;
          button.addEventListener('click', function () { chooseOrder(button, index); });
          orderButtons.appendChild(button);
        });
        renderOrderTrack();
      }

      function resetAll() {
        renderPlanet(0);
        firstSelect.value = '0';
        secondSelect.value = '2';
        renderComparison();
        compareFeedback.textContent = '두 행성이 어떻게 다른지 읽고 다른 조합도 비교해 보세요.';
        compareFeedback.dataset.tone = '';
        resetOrder();
        showPanel('explore', false);
        tabButtons[0].focus();
      }

      tabButtons.forEach(function (button, index) {
        button.addEventListener('click', function () { showPanel(button.dataset.panel, false); });
        button.addEventListener('keydown', function (event) {
          if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') { return; }
          event.preventDefault();
          var direction = event.key === 'ArrowRight' ? 1 : -1;
          var nextIndex = (index + direction + tabButtons.length) % tabButtons.length;
          tabButtons[nextIndex].focus();
          showPanel(tabButtons[nextIndex].dataset.panel, false);
        });
      });

      planetButtons.forEach(function (button) {
        button.addEventListener('click', function () { renderPlanet(Number(button.dataset.planet)); });
      });
      document.getElementById('compare-button').addEventListener('click', renderComparison);
      document.getElementById('compare-reset').addEventListener('click', function () {
        firstSelect.value = '0';
        secondSelect.value = '2';
        renderComparison();
        compareFeedback.textContent = '비교를 처음 상태로 돌렸습니다.';
        compareFeedback.dataset.tone = '';
        firstSelect.focus();
      });
      document.getElementById('order-reset').addEventListener('click', function () {
        resetOrder();
        orderButtons.querySelector('button').focus();
      });
      Array.from(document.querySelectorAll('.reset-all')).forEach(function (button) {
        button.addEventListener('click', resetAll);
      });

      renderPlanet(0);
      renderComparison();
      resetOrder();
    }());
  </script>
</body>
</html>