/* iris-extra.css ― tailwind.output.css(purge済 28KB)に含まれていないクラスを補完。
   完全再ビルドの代わりに、サイトで使いたい Tailwind ユーティリティを最小限ここに定義する。
   将来 Tailwind を再ビルドする際は、これらをソースに含めた上で本ファイルは廃止可能。 */

/* spacing */
.p-5{padding:1.25rem}
.gap-4{gap:1rem}
.space-y-1>*+*{margin-top:.25rem}

/* line-height */
.leading-relaxed{line-height:1.625}

/* grid */
@media (min-width:768px){
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* border (top accent line) */
.border-t-2{border-top-width:2px}
.border-teal-400{border-color:#2dd4bf}
.border-green-400{border-color:#4ade80}
.border-orange-400{border-color:#fb923c}
.border-blue-400{border-color:#60a5fa}
.border-purple-400{border-color:#c084fc}

/* dark variants (アクセント色は dark でもそのまま) */
.dark .border-teal-400{border-color:#2dd4bf}
.dark .border-green-400{border-color:#4ade80}
.dark .border-orange-400{border-color:#fb923c}
.dark .border-blue-400{border-color:#60a5fa}

/* ===== タイポグラフィ調整 (2026-06-27) ===== */
/* サイト全体のフォントサイズを若干大きく。
   Tailwind 既定: text-sm=14px / text-xs=12px → やや読みづらいため微増。
   レイアウトへの影響を最小化するため、line-height は据え置き気味。 */
.text-sm{font-size:.9375rem;line-height:1.5rem}   /* 14px → 15px */
.text-xs{font-size:.8125rem;line-height:1.125rem} /* 12px → 13px */

/* ===== サイドメニュー サブ階層 (.iris-submenu) =====
   現在ページの親メニュー配下に展開される子項目用。Tailwind purge 制約を回避するため
   既存クラス組合せでなく独立した CSS で定義。 */
.iris-submenu{
  margin-top:.25rem;
  margin-left:2.25rem;
  margin-bottom:.25rem;
  padding-bottom:.25rem;
  list-style:none;
}
.iris-submenu li{
  position:relative;
  padding:.375rem 0 .375rem .625rem;
}
.iris-submenu li .iris-submenu-bar{
  position:absolute;
  top:.25rem;
  bottom:.25rem;
  left:0;
  width:2px;
  border-radius:1px;
  background-color:#c084fc;  /* purple-400 */
}
.iris-submenu li a{
  display:block;
  font-size:.8125rem;        /* 13px */
  line-height:1.25rem;
  color:#6b7280;             /* gray-500 */
  transition:color .15s;
}
.iris-submenu li a:hover{
  color:#1f2937;             /* gray-800 */
}
.iris-submenu li a.iris-submenu-active{
  color:#7c3aed;             /* purple-600 */
  font-weight:600;
}
.dark .iris-submenu li a{
  color:#9ca3af;             /* gray-400 */
}
.dark .iris-submenu li a:hover{
  color:#e5e7eb;             /* gray-200 */
}
.dark .iris-submenu li a.iris-submenu-active{
  color:#c4b5fd;             /* purple-300 */
}

/* サブメニュー展開トグル（アロー） */
.iris-submenu-toggle{
  background:none;
  border:none;
  cursor:pointer;
  padding:.5rem .375rem .5rem .625rem;
  margin-left:.25rem;
  color:#6b7280;             /* gray-500 (やや濃いめで視認性確保) */
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}
.iris-submenu-toggle:hover{
  color:#1f2937;             /* gray-800 */
}
.dark .iris-submenu-toggle{
  color:#9ca3af;             /* gray-400 */
}
.dark .iris-submenu-toggle:hover{
  color:#e5e7eb;             /* gray-200 */
}
.iris-submenu-chevron{
  width:18px;
  height:18px;
  transition:transform .2s ease;
}
.iris-submenu-toggle[aria-expanded="true"] .iris-submenu-chevron{
  transform:rotate(90deg);
}

/* サブを持つ li 内部は a と toggle を左右分割 */
.iris-has-submenu-row{
  display:flex;
  align-items:center;
}
.iris-has-submenu-row > a{
  flex:1 1 0%;
  min-width:0;
}

/* ===== AI実装録 ヒーロー画像 (.iris-hero) =====
   各記事タイトル直下に置く横長バナー画像のための装飾。
   低彩度と薄い紫オーバーレイで写真の出所差を吸収し、
   サイト全体のビジュアル言語として統一する。 */
.iris-hero{
  position:relative;
  width:100%;
  height:320px;
  border-radius:.5rem;
  overflow:hidden;
  margin-bottom:1.5rem;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
}
.iris-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.7) brightness(.92);
}
.iris-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(0,0,0,.12));
  pointer-events:none;
}
@media (max-width:768px){
  .iris-hero{height:180px}
}

/* ===== 読み物コンテナ (.iris-prose) =====
   AI実装録 等の長文記事の本文コンテナに付与する。
   本文を 16px (text-base 相当) に上げ、行間を 1.75 に広げて
   長文の可読性を確保する。見出しも一段大きめに。 */
.iris-prose p,
.iris-prose li{font-size:1rem;line-height:1.75}
.iris-prose h3{font-size:1.1875rem}                /* h3 を text-lg → 19px に */
.iris-prose ul{margin-top:.75rem}
.iris-prose li{margin-top:.25rem}