/* =========================
   ベース
========================= */
html, body {
  height: 100%;
  margin: 0;
  font-family: serif;
  background: #0b0b0f;
  color: #e6e0ff;
}

/* =========================
   レイアウト
========================= */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  max-width: 900px;
  width: 90%;
  margin: 0 auto;
  padding: 20px;
}

/* =========================
   タイトル
========================= */
h1 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 20px;
  letter-spacing: 2px;
}

/* =========================
   セクション
========================= */
.section {
  margin-bottom: 20px;
}

h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

/* =========================
   ラジオ（カテゴリなど）
========================= */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* カテゴリ・向き 共通 */
.radio-group label {
  padding: 3px 6px;      /* ←小さく */
  font-size: 12px;       /* ←小さく */
  border: 1px solid #4b3c7a;
  background: #14121c;
}

.radio-group input {
  transform: scale(0.8);  /* ←小さく */
  margin-right: 4px;
}

.radio-group label:hover {
  background: #1e1a2d;
}

/* =========================
   カードエリア（重要）
========================= */
.card-container {
  max-height: 200px;           /* ← 高さ制限 */
  overflow-y: auto;
  padding-right: 4px;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}

/* =========================
   カードUI
========================= */
.card-item {
  display: block;
  cursor: pointer;
}

.card-item input {
  display: none;
}

.card-inner {
  display: block;
  padding: 10px;
  border: 1px solid #4b3c7a;
  background: #14121c;
  text-align: center;
  font-size: 13px;
  transition: 0.2s;
}

/* ホバー */
.card-item:hover .card-inner {
  background: #1e1a2d;
}

/* 選択状態（安定） */
.card-item input:checked + .card-inner {
  background: #2c2542;
  border-color: #bfaaff;
  color: #ffffff;
  box-shadow: 0 0 10px #7a5cff;
}

/* =========================
   ボタン
========================= */
button {
  width: 100%;
  padding: 14px;
  background: #1e1a2d;
  color: #e6e0ff;
  border: 1px solid #4b3c7a;
  cursor: pointer;
  transition: 0.3s;
  font-size: 15px;
}

button:hover {
  background: #2c2542;
}

/* =========================
   結果表示
========================= */
.result {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #3a2f5a;
  background: #14121c;
  min-height: 60px;
  line-height: 1.6;
  word-break: break-word;
}

/* =========================
   フッター（下固定）
========================= */
.footer {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-top: 1px solid #3a2f5a;
  background: #0b0b0f;

  font-size: 13px;
  color: #9a8fd6;
}

/* =========================
   スクロールバー（装飾）
========================= */
.card-container::-webkit-scrollbar {
  width: 6px;
}

.card-container::-webkit-scrollbar-thumb {
  background: #4b3c7a;
  border-radius: 3px;
}

/* =========================
   スマホ対応
========================= */
@media (max-width: 600px) {

  /* 全体圧縮 */
  .content {
    width: 96%;
    padding: 8px;
  }

  h1 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  h2 {
    font-size: 14px;
    margin: 4px 0;
  }

  .section {
    margin-bottom: 10px;
  }

  /* カードエリア（重要） */
  .card-containera {
    max-height: 180px; /* ←かなり効く */
    grid-template-columns: repeat(4, 1fr); /* ←4列固定 */
    gap: 6px;
  }

  /* カード圧縮 */
  .card-inner {
    padding: 6px 2px;
    font-size: 11px;
    line-height: 1.0;
  }

  /* ボタン */
  button {
    padding: 10px;
    font-size: 13px;
  }

  /* 結果 */
  .result {
    font-size: 13px;
    padding: 10px;
    margin-top: 10px;
  }

  /* フッター */
  .footer {
    height: 45px;
    font-size: 11px;
  }
}