/* かけこみ辞典 共通スタイル */
:root {
  --primary: #2D6A4F;
  --primary-light: #52B788;
  --primary-pale: #D8F3DC;
  --accent: #E76F51;
  --accent-light: #F4A261;
  --warm-bg: #FDF8F0;
  --warm-bg-alt: #FFF5E8;
  --text: #2C2C2C;
  --text-light: #5A5A5A;
  --white: #FFFFFF;
  --shadow-soft: 0 4px 24px rgba(45, 106, 79, 0.08);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.06);
  --radius: 20px;
  --radius-sm: 12px;

  /* 難易度カラー: 初級=緑 / 中級=青 / 上級=橙 / 特級=紫 */
  --d-beginner: #2D6A4F;
  --d-beginner-pale: #E4F5E9;
  --d-middle: #1D6FA5;
  --d-middle-pale: #E3F1FA;
  --d-advanced: #A0521A; /* 白文字でWCAG AAを満たす橙 */
  --d-advanced-pale: #FCEEE0;
  --d-expert: #6B3FA0;
  --d-expert-pale: #F0E9FA;

  /* ドット用の高彩度色(文字を載せないのでコントラスト制約なし。一覧で色分けをはっきりさせる) */
  --d-beginner-vivid: #2FB45F;
  --d-middle-vivid: #2E8FE0;
  --d-advanced-vivid: #F59E0B;
  --d-expert-vivid: #8B5CF6;

  --level: var(--primary);
  --level-pale: var(--primary-pale);
  /* ブランド指定: 丸ゴシック。LPと同じZen Maru Gothic(Google Fonts)を全環境で使い、OS内蔵丸ゴにフォールバック */
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;
}

body[data-difficulty="初級"] { --level: var(--d-beginner); --level-pale: var(--d-beginner-pale); --dot: var(--d-beginner-vivid); }
body[data-difficulty="中級"] { --level: var(--d-middle);   --level-pale: var(--d-middle-pale); --dot: var(--d-middle-vivid); }
body[data-difficulty="上級"] { --level: var(--d-advanced); --level-pale: var(--d-advanced-pale); --dot: var(--d-advanced-vivid); }
body[data-difficulty="特級"] { --level: var(--d-expert);   --level-pale: var(--d-expert-pale); --dot: var(--d-expert-vivid); }

.badge[data-difficulty="初級"] { background: var(--d-beginner-vivid); }
.badge[data-difficulty="中級"] { background: var(--d-middle-vivid); }
.badge[data-difficulty="上級"] { background: var(--d-advanced-vivid); }
.badge[data-difficulty="特級"] { background: var(--d-expert-vivid); }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--warm-bg);
  line-height: 1.95;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

/* 難易度の帯（記事ページの最上部） */
body[data-difficulty]::before {
  content: "";
  display: block;
  height: 7px;
  background: var(--dot, var(--level));
}

.container { max-width: 760px; margin: 0 auto; padding: 0 20px; }

main { flex: 1; }

/* ---- トップページ: ワード一覧がヒーロー ---- */
.page-head { padding: 26px 0 6px; }
.page-head h1 {
  font-size: clamp(1.4rem, 4.5vw, 1.8rem); font-weight: 900;
  color: var(--primary); line-height: 1.45; margin-bottom: 2px;
}
.lead { font-size: 0.9rem; color: var(--text-light); }

.toolbar { padding: 14px 0 18px; }
.search { margin-bottom: 12px; }
.search input {
  width: 100%; font-family: var(--font); font-size: 1rem; line-height: 1.6;
  padding: 10px 16px; border: 1.5px solid rgba(45, 106, 79, 0.25); border-radius: var(--radius-sm);
  background: var(--white); color: var(--text); -webkit-appearance: none; appearance: none;
}
.search input::-webkit-search-decoration, .search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-pale); }
.search input::placeholder { color: #9a9a9a; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.filters { display: flex; flex-direction: column; gap: 6px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-btn {
  font-family: var(--font); font-size: 0.82rem; padding: 5px 12px; cursor: pointer;
  border: 1px solid rgba(45, 106, 79, 0.2); border-radius: 999px;
  background: transparent; color: var(--text-light); line-height: 1.6;
}
.filter-btn:hover { border-color: var(--primary-light); color: var(--primary); }
.filter-btn.is-on { background: var(--primary); border-color: var(--primary); color: var(--white); font-weight: 700; }
.result-count { margin-top: 10px; font-size: 0.85rem; color: var(--text-light); }

/* 索引: 言葉が主役。難易度は先頭のドットの色で示す */
.word-group { margin-bottom: 26px; }
.word-group:last-of-type { margin-bottom: 64px; }
.group-title {
  font-size: 0.95rem; font-weight: 800; color: var(--text-light);
  margin-bottom: 10px; padding-bottom: 4px; border-bottom: 1.5px solid rgba(45, 106, 79, 0.15);
}
.word-list { display: flex; flex-wrap: wrap; gap: 8px 8px; }
.card {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 14px; background: var(--white);
  border: 1px solid rgba(45, 106, 79, 0.14); border-radius: 999px;
  text-decoration: none; color: var(--text);
}
.card:hover { border-color: var(--level); color: var(--level); }
.card[hidden] { display: none; }
/* ピル内の難易度ミニバッジ(フィルタのドットと同じ高彩度色) */
.w-badge {
  align-self: center; flex: none;
  background: var(--dot, var(--level)); color: var(--white);
  font-size: 0.68rem; font-weight: 700; line-height: 1.5;
  padding: 1px 8px; border-radius: 999px;
}
/* 難易度ボタンに同じ色ドットを付け、凡例を兼ねさせる */
.filter-btn .f-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 5px; vertical-align: -1px;
}
.filter-btn[data-difficulty="初級"] .f-dot { background: var(--d-beginner-vivid); }
.filter-btn[data-difficulty="中級"] .f-dot { background: var(--d-middle-vivid); }
.filter-btn[data-difficulty="上級"] .f-dot { background: var(--d-advanced-vivid); }
.filter-btn[data-difficulty="特級"] .f-dot { background: var(--d-expert-vivid); }
.filter-btn.is-on .f-dot { outline: 2px solid var(--white); outline-offset: -1px; }
.w-title { font-size: 1rem; font-weight: 700; line-height: 1.6; }
.empty { padding: 32px 0 64px; text-align: center; color: var(--text-light); }

.badge {
  display: inline-block; background: var(--dot, var(--level)); color: var(--white);
  font-size: 0.78rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; line-height: 1.7;
}
.badge-inline { margin-right: 8px; }
/* 見出し横の大バッジ: 「特級を読んでるぞ」の背伸び感を出す */
.badge-title {
  font-size: 1.6rem; padding: 7px 26px;
  letter-spacing: 0.12em; text-indent: 0.12em; /* 字間を空け、左右の視覚バランスを取る */
  margin-left: 14px; vertical-align: 6px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--dot, var(--level)) 35%, transparent);
}
.chip {
  display: inline-block; background: var(--warm-bg-alt); color: var(--text-light);
  border: 1px solid rgba(45, 106, 79, 0.18);
  font-size: 0.78rem; padding: 3px 11px; border-radius: 999px; line-height: 1.7;
}

/* ---- 記事ページ ---- */
.article { padding: 20px 20px 64px; }
.breadcrumb { font-size: 0.85rem; color: var(--text-light); margin-bottom: 20px; }
.breadcrumb a { color: var(--primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.article-head {
  background: var(--level-pale);
  border-radius: var(--radius);
  padding: 26px 24px;
  margin-bottom: 28px;
}
.article-head .yomi { font-size: 0.9rem; color: var(--text-light); line-height: 1.5; }
.article-head h1 {
  font-size: clamp(1.9rem, 6vw, 2.5rem); font-weight: 900;
  color: var(--level); line-height: 1.35; margin-bottom: 10px;
}
.english { font-size: 0.95rem; color: var(--text-light); line-height: 1.9; margin-bottom: 14px; }
.english .en { font-weight: 700; color: var(--text); margin-right: 10px; }
.english .en-yomi { margin-right: 10px; }
.english .en-ja::before { content: "／ "; }
/* シグネチャ: 「ひとことで」の1文を記事ヘッダーのヒーローに昇格 */
.hitokoto {
  font-size: clamp(1.2rem, 4.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.7;
  color: var(--text);
  margin: 4px 0 16px;
}
.article-head .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.card[data-difficulty="初級"] { --level: var(--d-beginner); --dot: var(--d-beginner-vivid); }
.card[data-difficulty="中級"] { --level: var(--d-middle); --dot: var(--d-middle-vivid); }
.card[data-difficulty="上級"] { --level: var(--d-advanced); --dot: var(--d-advanced-vivid); }
.card[data-difficulty="特級"] { --level: var(--d-expert); --dot: var(--d-expert-vivid); }
.article-head .chip { background: var(--white); }

.body { font-size: 1.05rem; }
.body h2 {
  font-size: 1.4rem; font-weight: 800; color: var(--level);
  margin: 40px 0 14px; padding-left: 14px; border-left: 6px solid var(--dot, var(--level)); line-height: 1.5;
}
.body h3 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 28px 0 10px; }
.body p { margin-bottom: 20px; }
.body ul, .body ol { margin: 0 0 20px 1.4em; }
.body li { margin-bottom: 8px; }
.body a { color: var(--primary); }
.body strong { font-weight: 700; }
.body code {
  background: var(--warm-bg-alt); border: 1px solid rgba(45, 106, 79, 0.15);
  border-radius: 6px; padding: 2px 6px; font-size: 0.95em;
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
}
.body pre {
  background: #2C2C2C; color: #F5F5F5; padding: 16px 18px;
  border-radius: var(--radius-sm); overflow-x: auto; margin-bottom: 20px; line-height: 1.7;
}
.body pre code { background: none; border: none; color: inherit; padding: 0; }
.body blockquote {
  border-left: 5px solid var(--dot, var(--level)); background: var(--level-pale);
  padding: 14px 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 20px;
}
.body blockquote p:last-child { margin-bottom: 0; }
.body table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 0.95rem; }
.body th, .body td { border: 1px solid rgba(45, 106, 79, 0.2); padding: 8px 12px; text-align: left; }
.body th { background: var(--level-pale); font-weight: 700; }
.body img { max-width: 100%; height: auto; }

.related, .sources { margin-top: 36px; }
.related h2, .sources h2 {
  font-size: 1.15rem; font-weight: 800; color: var(--text);
  margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid rgba(45, 106, 79, 0.15);
}
.related-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.related-list a {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(45, 106, 79, 0.18); border-radius: 999px;
  padding: 7px 14px; text-decoration: none; color: var(--text); font-size: 0.95rem;
}
.related-list a:hover { border-color: var(--primary); color: var(--primary); }
.sources ul { margin-left: 1.3em; }
.sources li { margin-bottom: 6px; font-size: 0.95rem; }
.sources a { color: var(--primary); word-break: break-all; }

.updated { margin-top: 32px; font-size: 0.85rem; color: var(--text-light); }

.site-footer {
  background: var(--white); border-top: 1px solid rgba(45, 106, 79, 0.1);
  padding: 28px 0; font-size: 0.85rem; color: var(--text-light); text-align: center;
}
.site-footer a { color: var(--primary); }
.site-footer .license { margin-top: 6px; font-size: 0.8rem; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--primary-light); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

@media (max-width: 600px) {
  body { font-size: 17px; }
  .container { padding: 0 16px; }
  .article-head { padding: 20px 18px; }
}


/* ===== 記事の終わりから、また一覧へ =====
   最後まで読んだ人が、次の言葉へ行きやすいようにする。
   小さな「← 戻る」は上にもあるが、読み終えた位置からは遠い */
.article-foot { margin-top: 40px; }

.back-big {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  border: 2px solid var(--primary-pale);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.back-big:hover { border-color: var(--primary-light); transform: translateY(-2px); }
.back-big-em { font-size: 1.9rem; line-height: 1; flex: 0 0 auto; }
.back-big-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.back-big-text strong { font-size: 1.05rem; font-weight: 700; color: var(--primary); }
.back-big-text small { font-size: .82rem; color: var(--text-light); }

.feedback {
  margin-top: 14px; padding: 0 4px;
  font-size: .84rem; color: var(--text-light); line-height: 1.9;
}

/* ===== 読んだ言葉の数 =====
   残りの数は出さない。増えた数だけを出す。
   義務にしたいのではなく、覚えた量に気づいてもらうため */
.progress {
  margin: 0 0 20px;
  padding: 16px 20px;
  border: 1px solid var(--primary-pale);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.progress[hidden] { display: none; }
.progress-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.progress-num { font-size: 1.7rem; font-weight: 700; color: var(--primary); line-height: 1; }
.progress-unit { font-size: .92rem; font-weight: 700; }
.progress-word { font-size: .84rem; color: var(--text-light); }
.progress-reset {
  margin-left: auto; font: inherit; font-size: .76rem;
  padding: 3px 12px; border-radius: 999px;
  border: 1px solid var(--primary-pale); background: transparent;
  color: var(--text-light); cursor: pointer;
}
.progress-reset:hover { border-color: var(--accent); color: var(--accent); }
.progress-bar {
  height: 7px; margin-top: 12px; border-radius: 4px;
  background: var(--primary-pale); overflow: hidden;
}
.progress-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

/* 読んだ言葉は、うっすら印をつける。薄くはしない（また読めるように） */
.card.is-read { border-color: var(--primary-light); }
.card.is-read .w-title::after {
  content: "✓"; margin-left: 5px;
  font-size: .8em; color: var(--primary-light);
}


/* この団体の中の言葉であることを、読む前に伝える。
   一般の用語と混ぜたまま出すと、辞典としての信用にかかわる */
.kakekomi-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--accent-light);
  border-radius: var(--radius-sm);
  background: var(--warm-bg-alt);
  font-size: .84rem; line-height: 1.8; color: var(--text-light);
}
.kakekomi-note-em { flex: 0 0 auto; font-size: 1.05rem; line-height: 1.6; }
.kakekomi-note-text { flex: 1; min-width: 0; }
.kakekomi-note strong { color: var(--accent); font-weight: 700; }