/* Alpine のチラ見え防止 */
[x-cloak] {
  display: none !important;
}

/* ===================================================== */
/* =============== info / warn / success / danger ====== */
/* ===================================================== */

.info-box,
.warning-box,
.success-box,
.danger-box {
  /* 共通ボックスレイアウト */
  padding: 1rem;              /* px-4 py-4 */
  border-radius: 1rem;        /* rounded-2xl */
  border: 1px solid #e2e8f0;  /* 初期値（後で各色で上書き） */
  position: relative;
  overflow: hidden;

  /* 背景ぼかし＆影 */
  backdrop-filter: blur(4px); /* backdrop-blur-sm */
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); /* shadow-sm っぽく */

  /* 文字スタイル（共通） */
  font-size: 15px;
  line-height: 1.625; /* leading-relaxed */
  font-weight: 600;   /* font-semibold */
  color: #334155;     /* text-slate-700 */

  /* 中身を横並びにする用（アイコン＋テキストなど） */
  display: flex;
  align-items: center;
  gap: 0.25rem;       /* gap-1 */

  /* 下にちょっとだけ余白 */
  margin-bottom: 0.25rem; /* mb-1 */
}

/* INFO */
.info-box {
  border-color: #bae6fd;                      /* border-sky-200 */
  background-color: rgba(240, 249, 255, 0.6); /* bg-sky-50/60 */
}
.info-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom right,
    rgba(186, 230, 253, 0.2), /* from-sky-200/20 */
    transparent
  );
  pointer-events: none;
}

/* WARNING */
.warning-box {
  border-color: #fcd34d;                      /* border-amber-300 */
  background-color: rgba(255, 251, 235, 0.6); /* bg-amber-50/60 */
}
.warning-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom right,
    rgba(253, 230, 138, 0.2), /* from-amber-200/20 */
    transparent
  );
  pointer-events: none;
}

/* SUCCESS */
.success-box {
  border-color: #6ee7b7;                      /* border-emerald-300 */
  background-color: rgba(236, 253, 245, 0.6); /* bg-emerald-50/60 */
}
.success-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom right,
    rgba(167, 243, 208, 0.2), /* from-emerald-200/20 */
    transparent
  );
  pointer-events: none;
}

/* DANGER */
.danger-box {
  border-color: #fca5a5;                      /* border-red-300 */
  background-color: rgba(254, 242, 242, 0.6); /* bg-red-50/60 */
}
.danger-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom right,
    rgba(254, 202, 202, 0.2), /* from-red-200/20 */
    transparent
  );
  pointer-events: none;
}

/* ===================================================== */
/* ================== Blog 本文タイポ =================== */
/* ===================================================== */
/* ここが「h2 と書くだけでそれっぽくなる」ゾーン */
/* Craft 側で <article class="blog-content"> で囲む前提 */

.blog-content {
  font-size: 17px;
  line-height: 1.9;
  color: #1f2937; /* text-slate-800 */
}

/* sm: 768px相当で少しだけ大きく */
@media (min-width: 640px) {
  .blog-content {
    font-size: 18px;
  }
}

/* 要素同士の縦の間隔（Tailwind の space-y-8 っぽく） */
.blog-content > * + * {
  margin-top: 2rem;
}

/* ----------------- 見出し系 ----------------- */

/* TOC 用のアンカー：以前の scroll-mt-28 を再現 */
.blog-content [data-heading] {
  scroll-margin-top: 7rem; /* 28 * 0.25rem */
}

.blog-content h2,
.blog-content h3,
.blog-content h4 {
  font-weight: 600;
  color: #020617; /* text-slate-900 */
}

/* h2: text-xl sm:text-2xl font-semibold leading-[1.4] */
.blog-content h2 {
  font-size: 1.25rem;   /* text-xl */
  line-height: 1.4;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .blog-content h2 {
    font-size: 1.5rem; /* text-2xl */
  }
}

/* h3: text-lg sm:text-xl font-semibold leading-[1.5] */
.blog-content h3 {
  font-size: 1.125rem;  /* text-lg */
  line-height: 1.5;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .blog-content h3 {
    font-size: 1.25rem; /* text-xl */
  }
}

/* h4: text-base sm:text-lg font-semibold leading-[1.6] */
.blog-content h4 {
  font-size: 1rem;      /* text-base */
  line-height: 1.6;
  margin-top: 1.75rem;
}

@media (min-width: 640px) {
  .blog-content h4 {
    font-size: 1.125rem; /* text-lg */
  }
}

/* ----------------- 段落・画像・キャプション ----------------- */

.blog-content p {
  margin-top: 1rem;
}

/* 画像 */
.blog-content figure {
  margin-top: 1.5rem;
}

.blog-content figure img {
  display: block;
  max-width: 100%;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;        /* slate-200 */
  background-color: rgba(241,245,249,0.6); /* slate-100/60 */
}

.blog-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #64748b; /* slate-500 */
  text-align: center;
}

/* ----------------- 引用 ----------------- */
/* blockquote: カンプのスタイルを CSS で再現 */

.blog-content blockquote {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid #38bdf8;        /* sky-400 */
  background-color: rgba(240,249,255,0.6); /* sky-50/60 */
  border-radius: 0 0.75rem 0.75rem 0;    /* rounded-r-xl */
  font-size: 1.3rem;
  line-height: 1.8;
  color: #334155; /* slate-700 */
}

.blog-content blockquote p {
  margin-top: 0px;
}

/* ----------------- リスト ----------------- */

.blog-content ul,
.blog-content ol {
  margin-top: 1rem;
  padding-left: 1.25rem;
}

.blog-content ul {
  list-style: disc;
}

.blog-content ol {
  list-style: decimal;
}

.blog-content li + li {
  margin-top: 0.4rem;
}

/* ----------------- テーブル ----------------- */

.blog-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem; /* ~ text-[14px] */
  border: 1px solid #e2e8f0; /* slate-200 */
  border-radius: 0.75rem;
  overflow: hidden;
}

.blog-content thead {
  background-color: #f1f5f9; /* slate-100 */
  color: #475569;           /* slate-700 */
}

.blog-content th,
.blog-content td {
  padding: 0.5rem 1rem;
  text-align: left;
}

.blog-content tbody tr + tr {
  border-top: 1px solid #e2e8f0; /* divide-y slate-200 */
}

.blog-content tbody tr:nth-child(2) {
  background-color: rgba(248,250,252,0.6); /* slate-50/60 っぽく */
}

/* ----------------- インラインコード ----------------- */

.blog-content code {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background-color: rgba(15,23,42,0.9); /* slate-900/90 */
  font-size: 0.7rem;                    /* text-[11px] */
  color: #e0f2fe;                       /* sky-200 */
}

/* =============================
   ブログ画像：拡大前のホバーUI
   ============================= */
.blog-content img.blog-zoomable-image {
  cursor: zoom-in;
  border-radius: 0.75rem;
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    filter 0.18s ease-out;
  box-shadow: 0 0 0 rgba(15, 23, 42, 0);
}

.blog-content img.blog-zoomable-image:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
  filter: saturate(1.05);
}

.blog-zoomable-wrapper {
  position: relative;
  display: inline-block;
}

.blog-zoomable-badge {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #e5e7eb;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out;
}

.blog-zoomable-wrapper:hover .blog-zoomable-badge {
  opacity: 1;
  transform: translateY(0);
}

.blog-zoomable-badge-icon {
  font-size: 13px;
  opacity: 0.9;
}

/* =========================================
   画像拡大モーダル
   ========================================= */
.blog-image-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.blog-image-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: transparent; /* 白ボケは body::before で */
}

.blog-image-lightbox-panel {
  position: relative;
  max-width: 1100px;
  max-height: 90vh;
  width: min(90vw, 1100px);
  margin: 0 auto;
  z-index: 1;
}

.blog-image-lightbox-frame {
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(15, 23, 42, 0.06);
}

.blog-image-lightbox-image {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  cursor: zoom-out;
  transform: scale(1);
  transition:
    transform 0.25s ease-out,
    filter 0.25s ease-out;
}

/* 画像拡大中は、画面全体を白くぼかす */
body.image-lightbox-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 9998;
  pointer-events: none;
}