/* ===== フォント設定 ===== */

/* 本文：Noto Sans JP */
body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 400;
  line-height: 1.8;
  color: #2c2c2c;
}

body.quarto-dark {
  color: #dde0e6;
}

/* 見出し：太め */
h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* コード：JetBrains Mono */
code, pre, .sourceCode {
  font-family: "JetBrains Mono", "SF Mono", Consolas, Monaco, monospace;
  font-size: 0.9em;
}

/* ===== カラー：#073170 をアクセントに ===== */

/* リンク */
a {
  color: #073170;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

a:hover {
  color: #073170;
  border-bottom-color: #073170;
}

/* Navbar */
.navbar {
  background-color: #073170 !important;
}

.navbar-brand,
.navbar .nav-link,
.navbar .nav-item a {
  color: #ffffff !important;
}

.navbar .nav-link:hover {
  color: #cdd6e6 !important;
}

/* 検索アイコン等 */
.navbar .quarto-search .aa-DetachedSearchButton {
  color: #ffffff;
}

/* ダークモード切り替えトグルボタン：SVGのfillがハードコードされているのでbackground-imageを上書き */
.navbar .quarto-color-scheme-toggle:not(.alternate) .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgba(255, 255, 255, 1)" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/></svg>') !important;
}

/* 検索キャンセルボタンの折り返し防止 */
.aa-DetachedCancelButton {
  white-space: nowrap;
}

/* 見出しの下線（h2のみ） */
h2 {
  border-bottom: 2px solid #073170;
  padding-bottom: 0.3em;
  margin-top: 2em;
}

/* タグ・カテゴリのバッジ色 */
.quarto-category,
.listing-category {
  background-color: #073170 !important;
  color: #ffffff !important;
  border: none !important;
}

/* ===== コードブロック ===== */

/* 折りたたみコードブロックのヘッダー */
.code-fold details > summary {
  color: #073170;
  font-weight: 500;
}

/* インラインコード */
p code, li code {
  background-color: #f3f4f8;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  color: #073170;
}

/* ===== その他の調整 ===== */

/* 引用ブロック */
blockquote {
  border-left: 4px solid #073170;
  padding-left: 1em;
  color: #555;
  background-color: #f8f9fb;
  padding: 0.8em 1em;
  margin: 1em 0;
}

/* TOC（目次）の現在位置 */
#TOC > ul a.active,
.sidebar nav[role="doc-toc"] ul > li > a.active {
  color: #073170 !important;
  font-weight: 500;
  border-left: 3px solid #073170;
}

/* listingページ（記事一覧）の hover */
.quarto-post:hover {
  background-color: #f8f9fb;
  transition: background-color 0.2s ease;
}

/* 記事メタ情報（日付、著者） */
.listing-date,
.listing-author,
.quarto-categories {
  color: #666;
  font-size: 0.9em;
}

/* テーブル */
table {
  font-size: 0.95em;
}

table thead {
  background-color: #073170;
  color: #ffffff;
}

table thead th {
  color: #ffffff !important;
  border-bottom: none !important;
}

/* 段落の余白を広めに */
p {
  margin-bottom: 1.2em;
}

/* 強調 */
strong {
  color: #073170;
  font-weight: 700;
}

/* 数式の余白 */
.math.display {
  margin: 1.5em 0;
  overflow-x: auto;
}

/* 図のキャプション */
figcaption {
  text-align: center;
  font-size: 0.9em;
  color: #666;
  margin-top: 0.5em;
}

/* ===== Navbar検索アイコン ===== */

/* 検索ボタンとその親要素 */
#quarto-search,
#quarto-search button,
.quarto-search,
.quarto-search button {
  color: #ffffff !important;
}

/* 全てのSVGを白に */
#quarto-search svg,
#quarto-search button svg,
.quarto-search svg,
.quarto-search button svg,
.aa-DetachedSearchButton svg,
.aa-DetachedSearchButton-icon svg,
.aa-SubmitIcon {
  fill: #ffffff !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* SVGの中のpath要素 */
#quarto-search svg path,
.quarto-search svg path,
.aa-DetachedSearchButton svg path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* hoverで少し薄く */
.quarto-search:hover svg,
.quarto-search button:hover svg {
  fill: #cdd6e6 !important;
  color: #cdd6e6 !important;
}

/* ===== Listing記事カードのカテゴリタグ（控えめ + ホバーで青） ===== */

/* 記事一覧の各記事に表示されるカテゴリバッジ */
.listing-categories .listing-category,
.quarto-post .listing-category,
.post-listing .listing-category {
  font-size: 0.7em !important;
  background-color: transparent !important;
  color: #999 !important;
  border: 1px solid #ddd !important;
  padding: 0.15em 0.6em !important;
  border-radius: 3px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

/* ホバー時に#073170で強調 */
.listing-categories .listing-category:hover,
.quarto-post .listing-category:hover,
.post-listing .listing-category:hover {
  color: #ffffff !important;
  background-color: #073170 !important;
  border-color: #073170 !important;
}

/* 記事個別ページ上部のカテゴリも同様 */
.quarto-categories .quarto-category {
  font-size: 0.7em !important;
  background-color: transparent !important;
  color: #999 !important;
  border: 1px solid #ddd !important;
  padding: 0.15em 0.6em !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.quarto-categories .quarto-category:hover {
  color: #ffffff !important;
  background-color: #073170 !important;
  border-color: #073170 !important;
}

/* ===== フィルターUI ===== */

.post-filters {
  margin-bottom: 2em;
  padding: 1em 0;
  border-bottom: 1px solid #eee;
}

.filter-group {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  flex-wrap: wrap;
  margin-bottom: 0.6em;
}

.filter-group:last-child {
  margin-bottom: 0;
}

.filter-label {
  font-size: 0.7em;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 5.5em;
  padding-top: 0.35em;
  flex-shrink: 0;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

.filter-btn {
  font-size: 0.7em;
  background-color: transparent;
  color: #888;
  border: 1px solid #ddd;
  padding: 0.2em 0.7em;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-btn:hover {
  color: #073170;
  border-color: #073170;
}

.filter-btn.active {
  background-color: #073170;
  color: #ffffff;
  border-color: #073170;
}

/* ===== カスタム記事一覧レイアウト ===== */

#listing-latest-posts .quarto-post {
  display: flex;
  flex-direction: column;
  padding: 1.5em 0;
  border-bottom: 1px solid #eee;
}

#listing-latest-posts .quarto-post:first-child {
  border-top: 1px solid #eee;
}

#listing-latest-posts .post-meta {
  margin-bottom: 0.4em;
}

#listing-latest-posts .post-thumbnail {
  width: 100%;
  overflow: hidden;
  margin: 0.4em 0 0.75em;
  border-radius: 4px;
}

#listing-latest-posts .post-thumbnail img {
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
  object-position: top;
  display: block;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}

#listing-latest-posts .post-thumbnail a {
  border-bottom: none;
  display: block;
}

#listing-latest-posts .post-thumbnail a:hover img {
  opacity: 0.9;
}

#listing-latest-posts .body .listing-title {
  margin-top: 0;
  margin-bottom: 0.3em;
}

#listing-latest-posts .body .listing-description {
  color: #555;
  font-size: 0.95em;
  margin-bottom: 0.5em;
}

/* ===== ダークモード ===== */

body.quarto-dark {
  color: #dde0e6;
}

.quarto-dark a {
  color: #7aabf5;
}

.quarto-dark a:hover {
  color: #7aabf5;
  border-bottom-color: #7aabf5;
}

.quarto-dark h2 {
  border-bottom-color: #2e4d88;
}

.quarto-dark strong {
  color: #7aabf5;
}

.quarto-dark p code,
.quarto-dark li code {
  background-color: #1e2433;
  color: #7aabf5;
}

.quarto-dark blockquote {
  background-color: #1a1e2a;
  border-left-color: #2e4d88;
  color: #bbb;
}

.quarto-dark .quarto-post:hover {
  background-color: #1a1e2a;
}

.quarto-dark .listing-date,
.quarto-dark .listing-author {
  color: #888;
}

.quarto-dark #listing-latest-posts .body .listing-description {
  color: #aaa;
}

.quarto-dark #listing-latest-posts .quarto-post {
  border-bottom-color: #2a2e3a;
}

.quarto-dark #listing-latest-posts .quarto-post:first-child {
  border-top-color: #2a2e3a;
}

.quarto-dark .post-filters {
  border-bottom-color: #2a2e3a;
}

.quarto-dark .filter-label {
  color: #666;
}

.quarto-dark .filter-btn {
  color: #888;
  border-color: #3a3e4a;
}

.quarto-dark .filter-btn:hover {
  color: #7aabf5;
  border-color: #7aabf5;
}

.quarto-dark .filter-btn.active {
  background-color: #2e4d88;
  border-color: #2e4d88;
  color: #ffffff;
}

.quarto-dark .listing-categories .listing-category,
.quarto-dark .quarto-post .listing-category {
  color: #888 !important;
  border-color: #3a3e4a !important;
}

.quarto-dark .listing-categories .listing-category:hover,
.quarto-dark .quarto-post .listing-category:hover {
  color: #ffffff !important;
  background-color: #2e4d88 !important;
  border-color: #2e4d88 !important;
}

.quarto-dark #TOC > ul a.active,
.quarto-dark .sidebar nav[role="doc-toc"] ul > li > a.active {
  color: #7aabf5 !important;
  border-left-color: #7aabf5;
}