/* tsumugu Help — 専用スタイル
   Tailwind の上に重ねる: 散文 (h-prose) と特殊コンポーネント (notice / table / TOC) のみ. */

/* ─── 散文 (記事本文) ─── */
.h-prose {
  font-size: 15px;
  line-height: 1.8;
  color: #2d3656;
}

.h-prose h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: #0A1226;
  margin: 2.4rem 0 1rem;
  padding-top: 0.5rem;
  scroll-margin-top: 6rem;
  border-top: 1px solid #E5E7EB;
  padding-top: 1.6rem;
}
.h-prose h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.h-prose h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0A1226;
  margin: 1.6rem 0 0.6rem;
  scroll-margin-top: 6rem;
}
.h-prose h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #0A1226;
  margin: 1.2rem 0 0.4rem;
}

.h-prose p {
  margin: 0.85em 0;
}

.h-prose strong {
  font-weight: 600;
  color: #0A1226;
}

.h-prose em {
  font-style: italic;
}

.h-prose a {
  color: #0D4CB3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms;
}
.h-prose a:hover {
  color: #1A6BF0;
}
.h-prose a.h-link-missing {
  color: #B45309;
  text-decoration-style: dashed;
  cursor: help;
}

.h-prose code {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 0.875em;
  background: #F4F5F7;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: #0D4CB3;
}

.h-prose pre {
  background: #0A1226;
  color: #f3f4f6;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  margin: 1.2rem 0;
}
.h-prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.h-prose ul, .h-prose ol {
  margin: 0.85em 0;
  padding-left: 1.6em;
}
.h-prose ul { list-style: disc; }
.h-prose ol { list-style: decimal; }
.h-prose li { margin: 0.3em 0; }
.h-prose li::marker { color: #94a3b8; }

.h-prose blockquote {
  border-left: 3px solid #1A6BF0;
  padding: 0.4rem 0 0.4rem 1.2rem;
  color: #4b5563;
  font-style: italic;
  margin: 1.2rem 0;
  background: #f9fafb;
}

.h-prose hr {
  border: none;
  border-top: 1px solid #E5E7EB;
  margin: 2rem 0;
}

.h-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5rem auto;
  box-shadow: 0 4px 16px -4px rgba(10, 18, 38, 0.08);
  border: 1px solid #E5E7EB;
}

/* ─── notice (info / warn / danger / tip) ─── */
.h-notice {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  margin: 1.2rem 0;
  border-left: 3px solid;
  font-size: 0.95rem;
  line-height: 1.65;
}
.h-notice .h-notice-ico {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.4;
}
.h-notice .h-notice-body p { margin: 0.3em 0; }
.h-notice .h-notice-body p:first-child { margin-top: 0; }
.h-notice .h-notice-body p:last-child { margin-bottom: 0; }

.h-notice--info {
  background: #EFF5FF;
  border-color: #1A6BF0;
  color: #0D4CB3;
}
.h-notice--tip {
  background: #ECFDF5;
  border-color: #10B981;
  color: #047857;
}
.h-notice--warn {
  background: #FEF3C7;
  border-color: #F59E0B;
  color: #92400E;
}
.h-notice--danger {
  background: #FEE2E2;
  border-color: #EF4444;
  color: #991B1B;
}

/* ─── GFM table ─── */
.h-table-wrap {
  overflow-x: auto;
  margin: 1.2rem 0;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
}
.h-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.h-table th, .h-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  text-align: left;
  vertical-align: top;
}
.h-table th {
  background: #F9FAFB;
  font-weight: 600;
  color: #0A1226;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #E5E7EB;
}
.h-table tr:last-child td { border-bottom: none; }

/* ─── TOC active highlight (JS が data-active を付ける) ─── */
[data-toc].is-active {
  color: #0A1226 !important;
  border-left-color: #1A6BF0 !important;
  font-weight: 500;
}

/* ─── line-clamp utility (Tailwind v3 が無い場合の fallback) ─── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── prose 内のスマホ調整 ─── */
@media (max-width: 640px) {
  .h-prose { font-size: 14.5px; }
  .h-prose h2 { font-size: 1.4rem; }
  .h-prose h3 { font-size: 1.05rem; }
  .h-prose pre { font-size: 12px; padding: 0.8rem; }
}

/* ─── a11y ─── */
.h-prose a:focus-visible,
.h-feedback-actions button:focus-visible {
  outline: 2px solid #1A6BF0;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ───────────────────────────────────────────────
   ヘルプホーム / 共通コンポーネント
   (記事ページの h-prose とは別系統 — h- prefix 統一)
   ─────────────────────────────────────────────── */

/* スクロール入場 (IntersectionObserver) */
.h-reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  filter: blur(4px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1),
    filter .7s cubic-bezier(.16,1,.3,1);
}
.h-reveal.is-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.h-reveal-d1 { transition-delay:  80ms; }
.h-reveal-d2 { transition-delay: 160ms; }
.h-reveal-d3 { transition-delay: 240ms; }
.h-reveal-d4 { transition-delay: 320ms; }
.h-reveal-d5 { transition-delay: 400ms; }

.h-trans {
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s cubic-bezier(.16,1,.3,1),
              border-color .35s cubic-bezier(.16,1,.3,1),
              background-color .35s cubic-bezier(.16,1,.3,1),
              color .35s cubic-bezier(.16,1,.3,1);
}

/* 全画面ノイズ (低 opacity) */
.h-noise {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 60;
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: multiply;
}

/* グラデオーブ (装飾, ぼかし) */
.h-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  pointer-events: none;
}

/* リキッドガラス検索バー */
.h-glass-search {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 20px 60px -15px rgba(10,18,38,0.18);
  transition:
    box-shadow .35s cubic-bezier(.16,1,.3,1),
    border-color .35s cubic-bezier(.16,1,.3,1);
}
.h-glass-search:focus-within {
  border-color: rgba(26,107,240,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 24px 70px -15px rgba(10,18,38,0.22),
    0 0 0 4px rgba(26,107,240,0.14);
}

/* カードホバー (一律) */
.h-card {
  transition:
    transform .5s cubic-bezier(.16,1,.3,1),
    box-shadow .5s cubic-bezier(.16,1,.3,1),
    border-color .35s cubic-bezier(.16,1,.3,1),
    background-color .35s cubic-bezier(.16,1,.3,1);
}
.h-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 70px -15px rgba(10,18,38,0.16);
}

/* カード内 Arrow アニメ */
.h-arrow {
  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    opacity .4s cubic-bezier(.16,1,.3,1);
  opacity: .35;
}
.group:hover .h-arrow,
a:hover .h-arrow {
  transform: translate(3px, -3px);
  opacity: 1;
}

/* Bento 主役カード — 内側ラジアルグラデ */
.h-bento-hero {
  background:
    radial-gradient(circle at 100% 0%, rgba(26,107,240,0.12), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(249,115,22,0.06), transparent 50%),
    #ffffff;
}

/* Bento 内に配置する大型背景アイコン */
.h-bento-bgicon {
  position: absolute;
  right: -1.25rem;
  bottom: -1.25rem;
  font-size: 12rem;
  line-height: 1;
  color: rgba(26,107,240,0.07);
  pointer-events: none;
  user-select: none;
}

/* Featured カード — 微回転 */
.h-tilt-1 { transform: rotate(-1.4deg) translateY(0); }
.h-tilt-2 { transform: rotate(0.9deg)  translateY(-6px); }
.h-tilt-3 { transform: rotate(-0.5deg) translateY(2px); }
.h-tilt-1, .h-tilt-2, .h-tilt-3 {
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.h-tilt-1:hover, .h-tilt-2:hover, .h-tilt-3:hover {
  transform: rotate(0deg) translateY(-8px);
  box-shadow: 0 28px 70px -18px rgba(10,18,38,0.20);
}

/* Quick chips */
.h-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .9rem;
  font-size: .8125rem;
  font-weight: 500;
  color: #11193A;
  background: #F4F5F7;
  border: 1px solid transparent;
  border-radius: 9999px;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.h-chip:hover {
  background: rgba(26,107,240,0.08);
  border-color: rgba(26,107,240,0.20);
  color: #0D4CB3;
}

/* ダーク反転 Support Band */
.h-band-dark {
  background:
    radial-gradient(circle at 12% 20%, rgba(26,107,240,0.22), transparent 55%),
    radial-gradient(circle at 88% 80%, rgba(249,115,22,0.14), transparent 55%),
    #0A1226;
}

/* ヒーロー右側 visual の thread 装飾 */
.h-thread {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(26,107,240,0.10), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(249,115,22,0.05), transparent 55%);
}

/* CJK 行頭禁則 (head index.php と統一) */
.h-keep-all {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* Reduced motion 対応 (WCAG) */
@media (prefers-reduced-motion: reduce) {
  .h-reveal,
  .h-reveal.is-active {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .h-card:hover,
  .h-tilt-1:hover, .h-tilt-2:hover, .h-tilt-3:hover {
    transform: none !important;
  }
  .animate-h-float,
  .animate-h-float-delayed,
  .animate-h-pulse-soft {
    animation: none !important;
  }
}

/* モバイル — Bento は 1col */
@media (max-width: 768px) {
  .h-bento-bgicon { font-size: 8rem; right: -.5rem; bottom: -.5rem; }
}