:root {
  --c-text: #222;
  --c-sub: #666;
  --c-bg: #fff;
  --c-border: #ddd;
  --c-accent: #0b6;
}

body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans JP', sans-serif;
  color: var(--c-text);
  background: #fafafa;
}

header.page-head {
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.dk-container,
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

h1 {
  font-size: 1.25rem;
  margin: 0;
}

form.search {
  display: grid;
  grid-template-columns: 1fr repeat(4, max-content);
  gap: 8px;
  align-items: end;
  margin-top: 12px;
}

form.search input[type="text"],
form.search input[type="number"] {
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
}

form.search label {
  font-size: .8rem;
  color: var(--c-sub);
  display: block;
  margin-bottom: 4px;
}

.btn {
  appearance: none;
  border: 1px solid var(--c-accent);
  background: var(--c-accent);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.btn.secondary {
  background: #fff;
  color: var(--c-accent);
}

.list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

.glyph {
  font-size: 2.4rem;
  line-height: 1;
}

.glyph-sm {
  font-size: 1.4rem;
  line-height: 1.2;
}

.meta {
  font-size: .85rem;
  color: var(--c-sub);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gloss {
  font-size: .92rem;
  color: #333;
  min-height: 2.6em;
}

nav.pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 18px 0;
}

nav.pager a,
nav.pager span {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  background: #fff;
  text-decoration: none;
  color: inherit;
}

nav.pager .current {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

.count {
  color: var(--c-sub);
  font-size: .9rem;
}

.landing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

/* ===== Breadcrumbs ===== */
.dk-breadcrumb {
  background: #fff;
  border-bottom: 1px solid #eee;
}

.dk-breadcrumb .dk-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px;
  font-size: .9rem;
  color: #666;
}

.dk-bc-link {
  text-decoration: none;
  color: #0b6;
}

.dk-bc-sep {
  margin: 0 .5em;
  color: #bbb;
}

.dk-bc-current {
  color: #333;
  font-weight: 600;
}

.glyph--head {
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 1;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', '游明朝',
    'Hiragino Mincho Pro', 'MS PMincho', 'Noto Serif CJK JP', serif;
}

/* === Kanji glyph grid (一覧カード) ======================== */
section.list {
  --tile-gap: 10px;
  /* タイル間のすき間 */
  --tile-min: 64px;
  /* 1枚の最小幅（字形+余白より少し大きめ） */
  --glyph-size: clamp(24px, 6vw, 40px);
  /* 画面に応じて字形サイズを可変 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
  gap: var(--tile-gap);
}

.card.glyph-only {
  padding: 5px;
  /* ご指定どおり */
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  /* 正方形で綺麗に並べる（サポート外は下のフォールバック） */
}

.glyph-only .glyph {
  display: block;
  text-align: center;
  font-size: var(--glyph-size);
  line-height: 1;
  text-decoration: none;
  color: #111;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP",
    "IPAexMincho", "YuMincho", "MS Mincho", serif;
  /* 明朝体指定 */
  letter-spacing: 0;
}

.glyph-only .glyph:hover,
.glyph-only .glyph:focus-visible {
  transform: scale(1.04);
  transition: transform .08s ease-out;
  outline: none;
}

@supports not (aspect-ratio: 1 / 1) {

  /* 古いブラウザ用の最小高さフォールバック（明朝40px + padding相当） */
  .card.glyph-only {
    min-height: calc(var(--glyph-size) + 10px);
  }
}

/* === 既存の一覧グリッドにアクセント色を追加 =================== */
section.list {
  --tile-gap: 10px;
  --tile-min: 64px;
  --glyph-size: clamp(24px, 6vw, 40px);
  --accent: #f97316;
  /* オレンジ（Tailwind orange-500 相当） */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
  gap: var(--tile-gap);
}

.card.glyph-only {
  padding: 5px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  transition: border-color .12s ease-out, box-shadow .12s ease-out, background-color .12s ease-out;
  cursor: pointer;
  /* カード全体がクリック可能に見える */
}

/* アンカーをカード全面に広げてクリック領域を最大化 */
.glyph-only .glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #111;
  font-size: var(--glyph-size);
  line-height: 1;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP",
    "IPAexMincho", "YuMincho", "MS Mincho", serif;
  letter-spacing: 0;
  transition: color .12s ease-out, transform .08s ease-out;
}

/* ホバー時：枠＆文字をオレンジに、わずかに拡大 */
.card.glyph-only:hover,
.card.glyph-only:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent);
  background-color: color-mix(in oklab, var(--accent) 6%, #fff);
}

.card.glyph-only:hover .glyph,
.card.glyph-only:focus-within .glyph {
  color: var(--accent);
  transform: scale(1.04);
}

/* キーボード操作でのフォーカスリング（アクセシビリティ） */
.glyph-only .glyph:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* 低モーション環境では拡大を抑制 */
@media (prefers-reduced-motion: reduce) {
  .glyph-only .glyph {
    transition: color .12s ease-out;
  }

  .card.glyph-only:hover .glyph,
  .card.glyph-only:focus-within .glyph {
    transform: none;
  }
}

@supports not (aspect-ratio: 1 / 1) {
  .card.glyph-only {
    min-height: calc(var(--glyph-size) + 10px);
  }
}

/* アンカー位置の余白（固定ヘッダー対策 + ちょい上で止める） */
#by-radicals {
  scroll-margin-top: 84px;
  /* 固定ヘッダー高さ + 余白。60–120pxで調整OK */
}

html {
  scroll-behavior: smooth;
}

/* === 読みカード（on/kun/readings 共通） ======================= */
.reading-cards .grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  /* 1100px幅で約5列、状況により4列 */
  gap: 12px;
  margin-top: 16px;
}

/* スマホは1列で全幅 */
@media (max-width: 640px) {
  .reading-cards .grid-cards {
    grid-template-columns: 1fr;
  }
}

/* カード本体（<a class="card reading">…） */
.card.reading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  /* ほんの少し横広に */
  border-radius: 12px;
  /* 既存と馴染ませる */
  text-decoration: none;
  transition: border-color .12s ease-out, box-shadow .12s ease-out, transform .08s ease-out;
}

/* ラベル＆件数バッジ */
.card.reading .label {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
}

.card.reading .badge {
  font-size: .8rem;
  color: var(--c-sub);
  background: #f5f5f5;
  border: 1px solid var(--c-border);
  border-radius: 9999px;
  padding: 3px 8px;
}

/* ホバー時の軽いフィードバック（既存アクセントに合わせる） */
.card.reading:hover,
.card.reading:focus-visible {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--c-accent) 20%, transparent);
  transform: translateY(-1px);
  outline: none;
}

/* === ゴジュウオン・ジャンプバッジ ========================= */
.go-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 16px 12px;
}

.go-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: .9rem;
  text-decoration: none;
  color: var(--c-text);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 9999px;
  transition: border-color .12s ease-out, box-shadow .12s ease-out, transform .08s ease-out;
}

.go-badge:hover,
.go-badge:focus-visible {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--c-accent) 18%, transparent);
  transform: translateY(-1px);
  outline: none;
}

/* 行セクション見出し */
.go-section {
  font-size: 1.05rem;
  margin: 18px 16px 8px;
  padding-left: 10px;
  border-left: 4px solid var(--c-accent);
}

/* 固定ヘッダーぶん余裕を持って止める（既存のsmooth scrollと併用） */
[id^="go-"] {
  scroll-margin-top: 84px;
  /* header高さ+余白。必要に応じて調整 */
}

/* スマホはバッジの左右詰めを少し広げる */
@media (max-width: 640px) {
  .go-badges {
    margin: 8px 12px 12px;
  }
}

/* バッジをヘッダー内で綺麗に並べる */
header.page-head .go-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  /* h1/件数の下に */
  padding-bottom: 4px;
  /* 境界の余白 */
}

.go-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  font-size: .9rem;
  text-decoration: none;
  color: var(--c-text);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 9999px;
  transition: border-color .12s ease-out, box-shadow .12s ease-out, transform .08s ease-out;
}

.go-badge:hover,
.go-badge:focus-visible {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--c-accent) 18%, transparent);
  transform: translateY(-1px);
  outline: none;
}

/* トップだけアクセント反転 */
.go-badge.top {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

/* セクション見出し（既存のものを流用/微調整） */
.go-section {
  font-size: 1.05rem;
  margin: 18px 16px 8px;
  padding-left: 10px;
  border-left: 4px solid var(--c-accent);
}

/* 固定ヘッダー下で見出しが隠れないようオフセット */
[id^="go-"] {
  scroll-margin-top: 84px;
}

/* 既存のsmooth scrollと併用OK */

/* 要約本文：先頭行インデントを殺す＋通常の折り返し */
.summary-card__lead {
  margin: 6px 0 10px;
  color: #333;
  text-indent: 0;
  white-space: normal;
}

/* 詳細ページ：基本情報テーブル */
.kanji-info {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  margin: 6px 0 0;
}

.kanji-info th {
  width: 7em;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-right: none;
  background: #fcfcfc;
  color: #555;
  font-weight: 600;
  vertical-align: top;
}

.kanji-info td {
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-left: none;
  vertical-align: top;
}

.kanji-info .info-link {
  margin-left: .6em;
  font-size: .9em;
}

.kanji-info .sub {
  margin-left: .6em;
  color: #666;
  font-size: .9em;
}

@media (max-width: 640px) {
  .kanji-info th {
    width: 5.5em;
  }
}

/* テーブル内のサブ行（2段目） */
.kanji-info .info-sub {
  display: block;
  margin-top: 4px;
  font-size: .9em;
}

h2.summary-card__title {
  font-size: 1em;
  margin: 0px;
  padding: 0px;
}

.glyph-card {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
}

.glyph--big {
  font-size: clamp(3rem, 8vw, 4.6rem);
  line-height: 1;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'MS Mincho', 'Noto Serif CJK JP', serif;
}

/* 漢字概要：スマホ=縦並び、PC=横2カラム（左:字形 / 右:情報） */
.kanji-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 900px) {
  .kanji-overview {
    grid-template-columns: 1fr 1.2fr;
    /* 右を少し広め */
  }
}

/* 既出：テーブル2段目リンク行の余白 */
.kanji-info .info-sub {
  display: block;
  margin-top: 4px;
  font-size: .9em;
}

/* 既存があれば上書きされるように後ろ側へ追記 */
.kanji-search {
  display: flex;
  gap: .5rem;
  align-items: center;
  /* 中央寄せ・適度幅 */
  max-width: 720px;
  /* お好みで 600–720px くらい */
  width: 100%;
  margin: .75rem auto;
  /* ← 中央に */
  padding: 0 .5rem;
  /* 端に少し余白 */
}

.kanji-search input {
  flex: 1;
  min-width: 0;
  /* 余計なはみ出し防止 */
  padding: .5rem .6rem;
  border: 1px solid #ccc;
  border-radius: .5rem;
}

.kanji-search button {
  padding: .5rem .9rem;
  border: 0;
  border-radius: .5rem;
  background: #111;
  color: #fff;
  cursor: pointer;
}

.kanji-search button:hover {
  opacity: .9
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.kanji-search--sm input {
  min-width: 8rem;
  padding: .4rem .5rem
}

.kanji-search--sm button {
  padding: .4rem .7rem
}