:root {
  color-scheme: dark;
  --ink-yellow: #e6ff00;
  --ink-pink: #ff3b8d;
  --ink-cyan: #00e5ff;
  --ink-purple: #7b2ff7;
  --bg-dark: #14102b;
  --card-bg: #1f1840;
  --text-light: #f5f3ff;
  --text-dim: #b8acdc;
  --segment-bg: rgba(255, 255, 255, 0.06);
  --segment-active-bg: rgba(255, 255, 255, 0.16);
  --result-bg: rgba(255, 255, 255, 0.05);
  --result-border: rgba(255, 255, 255, 0.2);
  --fav-item-bg: rgba(255, 255, 255, 0.05);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-dark: #f4f1fb;
  --card-bg: #ffffff;
  --text-light: #221b3f;
  --text-dim: #6a6186;
  --segment-bg: rgba(0, 0, 0, 0.05);
  --segment-active-bg: rgba(123, 47, 247, 0.12);
  --result-bg: rgba(123, 47, 247, 0.06);
  --result-border: rgba(123, 47, 247, 0.25);
  --fav-item-bg: rgba(0, 0, 0, 0.035);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-dark);
  color: var(--text-light);
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "Yu Gothic", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  position: relative;
  overflow-x: hidden;
  transition: background 0.2s ease, color 0.2s ease;
}

.card {
  position: relative;
  z-index: 1;
  background: var(--card-bg);
  border-radius: 24px;
  padding: 64px 36px 36px;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(123, 47, 247, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.page-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.logo {
  display: block;
  width: min(420px, 70vw);
  height: auto;
  image-rendering: pixelated;
}

.theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--result-border);
  background: var(--segment-bg);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}

.theme-toggle:hover {
  background: var(--segment-active-bg);
}

.theme-toggle:active {
  transform: scale(0.92);
}

.option-group {
  margin-bottom: 16px;
}

.option-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.segmented {
  display: flex;
  gap: 6px;
  background: var(--segment-bg);
  border-radius: 12px;
  padding: 4px;
}

.segment {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: bold;
  padding: 9px 8px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.segment:hover {
  color: var(--text-light);
}

.segment.active {
  background: var(--segment-active-bg);
  color: var(--text-light);
}

.segmented-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: none;
  padding: 0;
  border-radius: 0;
}

.segmented-grid .segment {
  background: var(--segment-bg);
  border: 1.5px solid var(--result-border);
  border-radius: 14px;
  font-size: 0.78rem;
  white-space: normal;
  line-height: 1.3;
  padding: 10px 6px;
}

.segmented-grid .segment.active {
  background: var(--segment-active-bg);
  border-color: var(--ink-purple);
}

/* 7個目（指定なし(完全ランダム)）は3行目を横いっぱいに使う。
   高さ・色・角丸・選択状態のデザインは他の6つのボタンと共通（.segmented-grid .segment を継承） */
.segmented-grid .segment:nth-child(7) {
  grid-column: 1 / -1;
}

.text-input {
  width: 100%;
  background: var(--result-bg);
  border: 2px solid var(--result-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-light);
  transition: border-color 0.15s ease, padding 0.15s ease;
}

.text-input::placeholder {
  color: var(--text-dim);
}

.text-input:focus {
  outline: none;
  border-color: var(--ink-purple);
}

.custom-word-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.custom-word-row .text-input {
  flex: 1 1 140px;
  min-width: 0;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: bold;
  color: var(--text-light);
  cursor: pointer;
  user-select: none;
}

.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--ink-purple);
  cursor: pointer;
}

.result {
  background: var(--result-bg);
  border: 2px dashed var(--result-border);
  border-radius: 16px;
  padding: 16px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: auto;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.result.pop {
  transform: scale(1.04);
}

.result #resultText {
  min-width: 0;
  max-width: 100%;
  word-break: keep-all;
  /* 単語の内部では改行しない。ZWSP（単語の継ぎ目）でのみ改行し、
     1語が枠より広い極端なケースは分断せず横スクロールで見せる */
  overflow-wrap: normal;
}

.result.placeholder #resultText {
  color: var(--text-dim);
  font-weight: 500;
  font-size: 1.1rem;
}

.result.error {
  border-color: var(--ink-pink);
}

.result.error #resultText {
  color: var(--ink-pink);
  font-weight: 700;
}

.result:not(.placeholder) #resultText {
  font-family: "Dela Gothic One", "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  /* PC(カードの最大幅600px相当)では従来どおり2.93remを維持しつつ、
     画面が狭くなるほど縮小する。実際の文字数・ルビ有無に応じた最終調整は
     JS側のfitResultText()が行うため、ここは「縮小しすぎない初期値」でよい */
  font-size: clamp(1.45rem, 1rem + 4.5vw, 2.93rem);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.result ruby {
  /* 経緯: Safari向けにinline-flex(column-reverse)→inline-block+position:absolute と
     段階的に手を加えたが、どちらもrt(ルビ)を通常の行の流れから外してしまい、
     行の高さ計算にルビの分の空間が反映されなくなった。その結果、
     fitResultText()が実際の見た目とズレた幅・高さを計測し、過剰な縮小・
     不要な改行・中央揃えの崩れを引き起こしていた。
     ルビ・改行・文字サイズ自動調整は密接につながっているため、
     「本文の配置計算を一切変えない」ことを最優先し、ネイティブの
     ruby-position:overによる実装に戻す。line-height:1だけを指定し、
     親(#resultText)の大きなline-height(1.6)がルビの注釈ボックスに
     余分な高さを与えないようにする。これにより、ルビ自身もrtも
     通常の行の流れの一部として扱われ、高さの計算が常に実際の描画と一致する */
  ruby-position: over;
  line-height: 1;
}

.result rt {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 0.28em;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0;
  line-height: 1;
}

.favorites-list rt {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 0.55em;
  color: var(--text-dim);
}

.hint-note {
  margin: -12px 0 20px;
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: center;
}

.custom-word-note {
  margin: 6px 0 0;
  font-size: 0.72rem;
  text-align: left;
}

.generate-row {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.btn-generate {
  border: none;
  border-radius: 16px;
  padding: 16px 56px;
  font-size: 1.05rem;
  font-weight: 800;
  color: white;
  background: linear-gradient(90deg, var(--ink-pink), var(--ink-purple));
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.btn-generate:hover {
  filter: brightness(1.1);
}

.btn-generate:active {
  transform: scale(0.96);
}

.action-row {
  /* flexの場合、子要素はwhite-space:nowrapのテキスト幅ぶんmin-widthが
     自動的に下限として効いてしまい(デフォルトmin-width:auto)、狭い画面で
     3つ目のボタン(Xで共有)が折返せずそのままはみ出していた。
     Gridのminmax(0, 1fr)は列の最小幅を明示的に0にできるため、
     ボタン自身・中のテキストが正しく縮小でき、3列が必ず表示領域に収まる */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 32px;
}

.btn-line {
  /* min-width:0に加えてwidth:100%も明示し、Safari含むどのブラウザでも
     グリッド列いっぱいに広がったうえで内側から縮小できるようにする
     （グリッドアイテムのデフォルトのstretch任せにしない） */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid var(--result-border);
  border-radius: 12px;
  padding: 10px 8px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: bold;
  color: var(--text-light);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn-line span {
  min-width: 0;
}

.btn-line .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* スマートフォン向けの縦方向コンパクト化。
   「テイスト選択」から「名前を生成」ボタンまでをできる限りスクロールせずに
   操作できるようにするため、各要素の上下margin・padding・最小高さを詰める。
   PC(481px以上)のデザイン・間隔は一切変更しない。横幅方向のレイアウトや
   枠線・角丸・背景色・ルビの位置・文字数自動調整などの仕組みそのものは
   変更せず、あくまで「余白と高さ」だけを調整する */
@media (max-width: 480px) {
  .option-group {
    margin-bottom: 10px;
  }

  .option-label {
    margin-bottom: 4px;
  }

  .segmented .segment {
    padding: 7px 8px;
  }

  .segmented-grid {
    gap: 6px;
  }

  .segmented-grid .segment {
    padding: 8px 6px;
  }

  .checkbox-row {
    gap: 8px;
  }

  .custom-word-row {
    gap: 6px;
  }

  .text-input {
    /* 上下paddingを減らしつつ、入力中の文字サイズは16px未満にしない。
       iPhone Safariは16px未満のinputにフォーカスすると自動ズームが
       発生するため、ここだけは縮小しない（見た目のコンパクトさは
       paddingとプレースホルダー側の縮小で出す） */
    padding: 8px 10px;
    font-size: 16px;
  }

  .text-input::placeholder {
    /* プレースホルダーのみ約85%相当に縮小（入力文字そのものは16px維持） */
    font-size: 0.85em;
  }

  .result {
    /* 220px(PC基準)の約70% */
    min-height: 154px;
    padding: 10px 16px;
    margin-bottom: 12px;
  }

  .hint-note {
    margin: -6px 0 10px;
    font-size: 0.7rem;
  }

  .custom-word-note {
    margin: 4px 0 0;
    font-size: 0.68rem;
  }

  .generate-row {
    margin-bottom: 10px;
  }

  .btn-generate {
    /* タップしやすい高さは維持しつつ、左右の余白だけ詰める */
    padding: 14px 44px;
  }

  .action-row {
    margin-bottom: 20px;
  }
}

/* スマートフォン幅では、文字サイズ・左右padding・アイコンとの間隔を
   段階的に縮める。「名前をコピー」(6文字)が3等分された列の中で
   欠けずに収まることを基準に、320〜430pxで実測しながら決めた値 */
@media (max-width: 480px) {
  .action-row {
    gap: 6px;
  }

  .btn-line {
    gap: 2px;
    padding: 9px 1px;
    font-size: 0.6rem;
  }

  .btn-line .icon {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 340px) {
  .action-row {
    gap: 4px;
  }

  .btn-line {
    gap: 1px;
    font-size: 0.5rem;
    padding: 8px 0;
  }

  .btn-line .icon {
    width: 10px;
    height: 10px;
  }
}

.btn-line:hover {
  background: var(--segment-bg);
  border-color: var(--ink-purple);
}

.btn-line:active {
  transform: scale(0.96);
}

.favorites h2 {
  font-size: 1rem;
  color: var(--text-dim);
  margin: 0;
}

.favorites-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.clear-favorites-btn {
  background: transparent;
  border: 1.5px solid var(--result-border);
  border-radius: 10px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: bold;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.clear-favorites-btn:hover {
  background: var(--segment-bg);
  border-color: var(--ink-pink);
  color: var(--ink-pink);
}

.favorites-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.favorites-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--fav-item-bg);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.95rem;
}

.favorites-list li span {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
}

.favorites-list .remove-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 4px;
}

.favorites-list .remove-btn:hover {
  color: var(--ink-pink);
}

.empty-msg {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 4px 0 0;
}

.disclaimer {
  max-width: 600px;
  width: 100%;
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.7;
  text-align: left;
  padding: 0 8px 8px;
}

.disclaimer h2 {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 0 0 8px;
}

.disclaimer p {
  margin: 0 0 10px;
}

.disclaimer p:last-child {
  margin-bottom: 0;
}