/* ========================================
   正常ラヂヲTools - ベーススタイルシート
   共通スタイル定義
   ======================================== */

/* CSS変数定義 */
:root {
  /* カラーパレット */
  --color-primary: #fa7435;
  --color-primary-rgb: 250, 116, 53;
  --color-primary-hover: #fa7435;
  --color-background: #d9d9d9;
  --color-text: #16201c;
  --color-border: #42403e;
  --color-border-light: #b9b9b9;
  --color-white: #ffffff;
  --color-badge: #19e4a0;
  --color-surface: #373534;
  --color-muted: #4a4a48;
  --color-muted-light: #d9d9d9;
  --color-tool-desc: #888888;

  /* スペーシング */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 40px;

  /* フォント */
  --font-family-primary: "Zen Kaku Gothic New", "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans", Meiryo,
    sans-serif;
  --font-family-monospace: "Courier New", monospace;

  /* サイズ */
  --nav-height: 60px;
  --border-radius-md: 6px;
  --border-width: 1.9px;

  /* トランジション */
  --transition-normal: 0.3s;
}

/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 基本スタイル */
html {
  background-color: #363433;
}

body {
  background-color: #363433;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-family-primary);
  color: #1e1e1c;
  font-size: 14px;
  line-height: 1.5;
}

p {
  font-weight: 500;
}

/* 基本リンクスタイル（ボタン・ナビは各コンポーネントで上書き） */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover,
a:focus,
a:visited {
  color: var(--color-primary);
  text-decoration: none;
}

/* チェックボックス：オレンジ色 */
input[type="checkbox"] {
  accent-color: var(--color-primary);
}

/* 戻るリンクの余白（ツールページ・静的ページ共通） */
.page-back-link-wrap {
  margin-top: 10px;
}

/* ========================================
   ツールページ共通：ヘッダー・フォーム
   character-sheet, text-to-image, roll-table, bgm, color-checker 等で利用
   ======================================== */
.bgm-header {
  margin-bottom: var(--spacing-xl);
  text-align: center;
  padding-bottom: var(--spacing-md);
  border-bottom: var(--border-width) solid var(--color-border-light);
}

.bgm-header h1 {
  font-size: 32px;
  margin-bottom: 10px;
  color: var(--color-text);
}

.bgm-header p {
  font-size: 16px;
  color: var(--color-tool-desc) !important;
}

.bgm-header p a {
  color: var(--color-primary);
  text-decoration: underline;
}

.bgm-header p a:hover {
  color: var(--color-primary-hover);
}

/* ========================================
   SEO・説明文用スタイル (ツールページ下部)
   ======================================== */
.tool-seo-description {
  max-width: 800px;
  margin: var(--spacing-xl) auto 0;
  padding: var(--spacing-md);
  background-color: #f8f9fa; /* 明るい背景色 */
  border-radius: 0; /* 角丸の囲いをなくす */
  border: none;     /* 枠線をなくす */
  color: #333333;   /* 明るい背景に合わせた文字色 */
  font-size: 14.5px;
  line-height: 1.8;
}

.tool-seo-description h2 {
  font-size: 19px;
  color: #111111;
  margin-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 8px;
  font-weight: 700;
}

.tool-seo-description > p {
  margin-bottom: var(--spacing-md);
}

.tool-seo-description details {
  background-color: #ffffff;
  border-radius: 4px;
  padding: 12px 16px;
  border: 1px solid #dddddd;
}

.tool-seo-description summary {
  font-weight: bold;
  cursor: pointer;
  color: var(--color-primary);
  outline: none;
  font-size: 16px;
  list-style: none;
  display: flex;
  align-items: center;
}

.tool-seo-description summary::-webkit-details-marker {
  display: none;
}

.tool-seo-description summary::before {
  content: "▶";
  font-size: 12px;
  margin-right: 8px;
  transition: transform 0.2s ease-in-out;
}

.tool-seo-description details[open] summary::before {
  transform: rotate(90deg);
}

.tool-seo-description .details-content {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px dashed #dddddd;
}

.tool-seo-description h3 {
  font-size: 17px;
  color: var(--color-primary);
  margin-top: var(--spacing-md);
  margin-bottom: 10px;
  font-weight: 700;
}

.tool-seo-description h3:first-child {
  margin-top: 0;
}

.tool-seo-description .details-content p {
  margin-bottom: var(--spacing-md);
}

.tool-seo-description .details-content p:last-child {
  margin-bottom: 0;
}