/* =========================================================
   キャラデザ要素ガチャ  style.css
   ---------------------------------------------------------
   デザイン方針：
   - 淡いグレー背景 × スレートブルーの明朝体
   - 余白たっぷり / ヘアライン（細い罫線） / 角ばった端正なレイアウト
   - 静かで上品な、エディトリアル（紙のDM）のようなトーン
   ========================================================= */

/* ---- 配色・フォントの変数（ここを変えると全体の雰囲気を調整できます） ---- */
:root {
  --bg: #d6d7d9;          /* 背景：淡いクールグレー */
  --surface: #ffffff;     /* カードなどの面 */
  --ink: #4c5572;         /* メイン文字：スレートブルー */
  --ink-strong: #3c425a;  /* ボタンのホバーなど、少し濃いスレート */
  --ink-soft: #828799;    /* 補助テキスト */
  --line: #bcbfc7;        /* ヘアライン（細い罫線） */
  --line-soft: #d0d2d7;   /* さらに薄い罫線 */
  --radius: 2px;          /* 角丸はごく控えめ（端正な印象） */

  /* 明朝系フォント（Google Fonts＋OS標準のフォールバック） */
  --font-jp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho",
    "YuMincho", "MS Mincho", serif;
  --font-latin: "Cormorant Garamond", "Times New Roman", "Georgia", serif;
}

/* ---- ベース ---- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-jp);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  line-height: 1.9;
  letter-spacing: 0.04em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Latin（英数字）は専用のセリフ体で表示するためのユーティリティ */
.latin {
  font-family: var(--font-latin);
}

/* ---- ヘッダー ---- */
.site-header {
  text-align: center;
  padding: 72px 20px 8px;
}

/* 「CHARACTER DESIGN GACHA」のような細い英字ラベル＋下線 */
.eyebrow {
  font-family: var(--font-latin);
  font-size: 0.95rem;
  letter-spacing: 0.42em;
  color: var(--ink);
  margin: 0 auto 26px;
  padding-bottom: 18px;
  width: fit-content;
  /* テキスト下のヘアライン（ポスターの細い横線のイメージ） */
  border-bottom: 1px solid var(--ink);
  text-indent: 0.42em; /* letter-spacing で右に寄る分を視覚補正 */
}

.site-title {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: 0.16em;
  margin: 0 0 22px;
  text-indent: 0.16em;
}

.site-desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 2;
}

/* ---- メインコンテナ（中央寄せ・余白多め） ---- */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ---- ボタン共通 ---- */
.btn {
  font-family: var(--font-jp);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.2s ease;
}

/* STARTボタン（主役）：塗りのスレートブルー */
.btn-primary {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-size: 1rem;
  padding: 16px 56px;
}

.btn-primary:hover {
  background: var(--ink-strong);
}

.btn-primary:active {
  opacity: 0.85;
}

/* コピーボタン：線のみ（アウトライン） */
.btn-secondary {
  background: transparent;
  color: var(--ink);
  font-size: 0.9rem;
  padding: 13px 40px;
}

.btn-secondary:hover {
  background: var(--ink);
  color: #fff;
}

/* 個別再抽選ボタン（最小限のテキストボタン） */
.btn-small {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  padding: 5px 14px;
}

.btn-small:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ---- STARTエリア ---- */
.start-area {
  text-align: center;
  margin-bottom: 56px;
}

/* ---- 結果カード ---- */
.result-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 48px 40px;
  margin-bottom: 28px;
}

/* 初期表示メッセージ */
.empty-message {
  text-align: center;
  color: var(--ink-soft);
  margin: 40px 0;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}

/* 各結果の行（スペックシート風の2段組み）
   上段：左に「固定＋項目名」、右に「再抽選」ボタン
   下段：結果テキストを横幅いっぱいに置き、右寄せ・常に一行にする
   → 文字数が多くても二行に折り返さず、レイアウトが崩れない。 */
.result-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label  button"
    "value  value";
  align-items: center;
  column-gap: 12px;
  row-gap: 12px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line-soft);
}

.result-label {
  grid-area: label;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* 固定チェック */
.lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}

.lock-check {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--ink);
}

.lock-text {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

.field-name {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  min-width: 92px;
}

/* ラッパー自体は枠を持たず、中の「結果テキスト」と「再抽選ボタン」を
   そのまま親（.result-row）のグリッドに流し込む */
.result-value {
  display: contents;
}

/* 結果テキスト：下段に全幅で配置し、右寄せ・常に一行 */
.value-text {
  grid-area: value;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-align: right;        /* 結果は右寄せ */
  white-space: nowrap;      /* 常に一行（二行に折り返さない） */
  overflow: hidden;
  text-overflow: ellipsis;  /* 万一入り切らない時だけ末尾を … で省略 */
  min-width: 0;
}

/* 再抽選ボタンは上段の右端へ */
.result-row .reroll-btn {
  grid-area: button;
  justify-self: end;
}

/* 固定中の行をほんのり強調 */
.result-row.locked {
  background: #f3f4f6;
}

/* カラーパレットの行は、下のカラーチップ側に罫線があるので
   二重線にならないよう自分の下罫線は消す */
.result-row-color {
  border-bottom: none;
}

/* 癖は文章なので基準は読みやすめの 1rem。
   一行に収まらない長い文だけ、script.js が必要なぶんだけフォントを縮める。
   セレクタを .value-text.habit-value にして、スマホ用の .value-text 指定より優先させる。 */
.value-text.habit-value {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

/* ---- カラーチップ ---- */
.color-chips {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
}

.chip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.chip {
  width: 60px;
  height: 60px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: block;
  background: #eee;
}

.chip-label {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--ink-soft);
}

.chip-hex {
  font-family: var(--font-latin);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* ---- コピーエリア ---- */
.copy-area {
  text-align: center;
  margin-bottom: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.copy-toast {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 6px 16px;
  border-radius: var(--radius);
}

/* ---- 履歴 ---- */
.history-section {
  background: transparent;
  padding: 8px 0 0;
}

.history-title {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.history-list li {
  padding: 16px 6px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: var(--ink);
}

.history-empty {
  color: var(--ink-soft);
  text-align: center;
  border-bottom: none !important;
}

/* 履歴の中のミニカラーチップ */
.history-chips {
  display: inline-flex;
  gap: 5px;
  vertical-align: middle;
  margin-left: 8px;
}

.history-chip {
  width: 14px;
  height: 14px;
  border-radius: 1px;
  border: 1px solid var(--line);
  display: inline-block;
}

/* ---- フッター ---- */
.site-footer {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  padding: 32px 16px 56px;
}

/* ---- レスポンシブ（スマホ） ---- */
@media (max-width: 480px) {
  .site-header {
    padding-top: 52px;
  }

  .eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }

  .site-title {
    font-size: 1.5rem;
  }

  .result-card {
    padding: 32px 22px;
  }

  /* スマホは横幅が狭いので、結果テキスト（短い項目）を少し小さくして一行を保つ。
     癖は .habit-value の clamp() が画面幅に応じて自動調整する。 */
  .value-text {
    font-size: 1.05rem;
  }

  .site-header {
    padding-left: 8px;
    padding-right: 8px;
  }

  .site-desc {
    font-size: 0.84rem;
    letter-spacing: 0;
    text-align: left;
  }

  .btn-primary {
    width: 100%;
    padding: 16px;
  }

  .color-chips {
    gap: 18px;
  }
}