/* ==========================================================
   名前変換・小説ページ用カスタマイズCSS
   ========================================================== */

/* フォントサイズの変数定義（スクリプトの基準を維持） */
:root {
  --font-size-h1: 18px;
  --font-size-notice: 12px;
  --font-size-label: 14px;
  --font-size-input: 14px;
  --font-size-display: 15px;
  --font-size-kana: 11.5px;
  --font-size-button: 14px;
  --font-size-content: 14px;
  --font-size-author: 14px;
  --font-size-links: 14px;
  --font-size-footer: 10px;

  /* 自分のサイトのカラー変数を同期 */
  --bg-main: #fdfbf7;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-accent: #f5efe6;
  --bg-header: #e6edd9;
  --text-main: #524a41;
  --text-muted: #807465;
  --color-primary: #869f6c;
  --color-secondary: #b09987;
  --color-border: #e8dec9;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* 全体共通スタイル（自分のサイトの背景パターンとフォントを適用） */
body {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  color: var(--text-main);
  box-sizing: border-box;

  /* 背景パターンを移植 */
  background-color: var(--bg-main);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(232, 222, 201, 0.4) 2px, transparent 3px),
    radial-gradient(circle at 0 0, rgba(232, 222, 201, 0.4) 2px, transparent 3px),
    linear-gradient(45deg, transparent 46%, rgba(232, 222, 201, 0.25) 49%, rgba(232, 222, 201, 0.25) 51%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(232, 222, 201, 0.25) 49%, rgba(232, 222, 201, 0.25) 51%, transparent 54%);
  background-size: 32px 32px;
}

/* 小説ページ用・名前登録ページ用コンテナ */

.name-container {
  background: var(--bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(141, 166, 116, 0.05);
  width: 90%;
  /* paddingを 40px から 25px 20px に縮小してコンパクトに */
  padding: 25px 20px;
  text-align: center;
  /* 上下のマージンを少し詰める */
  margin: 15px auto;
  max-width: 400px;
}


/* ヘッダー見出し（足跡マークを追加） */
h1 {
  margin-bottom: 20px;
  font-size: var(--font-size-h1);
  color: var(--color-primary);
  /* リーフグリーン */
  font-weight: normal;
  text-align: center;
}

/* 通知文 */
.notice {
  font-size: var(--font-size-notice);
  color: var(--text-muted);
  /* ココアブラウン系補足色 */
  margin-bottom: 20px;
  text-align: center;
}

/* 名前登録ページ専用スタイル */

.form-group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  /* 15px から 10px に変更 */
}

.form-group label {
  font-weight: bold;
  color: var(--text-main);
  font-size: var(--font-size-label);
  margin-right: 15px;
  width: 70px;
  text-align: left;
}

/* 入力欄とプルダウンのスタイル統一 */
.form-group input[type="text"],
.form-group select {
  width: 140px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: var(--font-size-input);
  color: var(--text-main);
  background-color: #ffffff;
  /* 入力しやすいように白背景 */
  box-sizing: border-box;
  outline: none;
  font-family: inherit;
}

.form-group input[type="text"]:focus,
.form-group select:focus {
  border-color: var(--color-primary);
}

.form-group input[type="text"]::placeholder {
  color: var(--color-secondary);
  opacity: 0.6;
}

/* 表示部分 */
.name-display {
  margin: 20px 0;
  font-size: var(--font-size-display);
  color: var(--text-main);
  font-weight: bold;
}

.name-display .kana {
  font-size: var(--font-size-kana);
  color: var(--text-muted);
}

/* ボタンスタイル（サイトの#save-btnのデザインと同期） */
button {
  background: var(--color-primary);
  /* リーフグリーン */
  color: white;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--font-size-button);
  font-weight: bold;
  font-family: inherit;
  transition: background-color 0.2s ease;
  margin-top: 10px;
}

button:hover {
  background: var(--color-secondary);
  /* ミルクティブラウン */
}

/* 小説ページ専用スタイル */
.content {
  font-size: var(--font-size-content);
  line-height: 1.8;
  color: var(--text-main);
  margin-bottom: 20px;
  text-align: justify;
}

/* 本文内の名前変換部分を強調（サイトのスタイルに合わせる） */
.content strong,
.content .dream-last,
.content .dream-first {
  font-weight: bold;
  color: var(--color-primary);
}

.author-info {
  font-size: var(--font-size-author);
  color: var(--text-muted);
  margin-top: 20px;
  text-align: right;
}

/* 共通リンクスタイル */
.links {
  margin-top: 40px;
  font-size: var(--font-size-links);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.links a {
  color: var(--color-primary);
  transition: color 0.3s ease;
  text-decoration: none;
  padding: 5px 10px;
  width: auto;
  text-align: center;
  font-weight: bold;
}

.links a:hover {
  color: var(--color-secondary);
}

.links a.active {
  color: var(--color-secondary);
  font-weight: bold;
  pointer-events: none;
  /* 現在地はクリック不可に */
}

/* フッタースタイル */
.footer {
  font-size: var(--font-size-footer);
  color: var(--text-muted);
  text-align: center;
  margin-top: 20px;
}

.footer a {
  color: var(--color-secondary);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* iPad縦向き以下（最大幅768px）の場合のスタイル */
@media (max-width: 768px) {
  :root {
    --font-size-h1: 14px;
    --font-size-notice: 10px;
    --font-size-label: 12px;
    --font-size-input: 12px;
    --font-size-display: 12px;
    --font-size-kana: 9.5px;
    --font-size-button: 12px;
    --font-size-content: 12px;
    --font-size-author: 12px;
    --font-size-links: 12px;
    --font-size-footer: 10px;
  }

  body {

    justify-content: center;
    align-items: center;
  }

  /* 共通の余白設定 */

  .name-container {
    padding: 20px 15px;
    width: 90%;
    max-width: 250px;
    
  }

  /* フォーム内の入力欄のパディングを少し薄くする */
  .form-group input[type="text"],
  .form-group select {
    padding: 6px;
  }
}