/* ============================================================
   BIZMED MEDIA - Design System
   メディアリニューアル(2026-04-30) 第五弾: エディトリアル化
   ============================================================ */

:root {
  /* === カラーパレット === */
  --bz-ink:           #0a1628;   /* primary text + dark bg */
  --bz-ink-2:         #2d3e56;   /* body text */
  --bz-ink-3:         #5a6a82;   /* meta / muted */
  --bz-ink-4:         #8595ad;   /* placeholder / very muted */

  --bz-paper:         #fafbfc;   /* main background */
  --bz-paper-2:       #f1f3f7;   /* alt section bg */
  --bz-paper-3:       #e8edf3;   /* alt section bg lighter */
  --bz-white:         #ffffff;

  --bz-line:          #e1e6ee;   /* hairline */
  --bz-line-2:        #cdd5e0;   /* form border */
  --bz-line-heavy:    #0a1628;   /* heavy section divider */

  --bz-accent:        #e11d48;   /* vivid rose-red (startup feel) */
  --bz-accent-d:      #be123c;   /* hover/dark variant */
  --bz-accent-light:  #fef1f4;   /* tinted bg */
  --bz-accent-deep:   #4c0519;   /* very deep red for high contrast */

  --bz-warm:          #e11d48;   /* alias to accent for editorial highlights */
  --bz-warm-light:    #fef1f4;
  --bz-success:       #0f8a3c;   /* badge: 医師免許確認済み */
  --bz-info:          #0ea5e9;   /* secondary cyan(任意・現状未使用) */

  /* === タイポグラフィ === */
  --bz-font-sans:     'Inter', 'Noto Sans JP', 'Helvetica Neue', sans-serif;
  --bz-font-mono:     'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* タイプスケール(レスポンシブで調整される) */
  --bz-fs-mega:       64px;   /* major hero */
  --bz-fs-hero:       48px;   /* page hero */
  --bz-fs-h1:         36px;   /* article title */
  --bz-fs-h2-section: 28px;   /* section title */
  --bz-fs-h2:         22px;   /* secondary section */
  --bz-fs-h3:         18px;   /* card title */
  --bz-fs-body-l:     16px;   /* lede */
  --bz-fs-body:       15px;   /* body */
  --bz-fs-meta:       12px;   /* meta */
  --bz-fs-label:      11px;   /* mono labels */
  --bz-fs-tiny:       10px;   /* tiny / fine print */

  /* ライン高さ */
  --bz-lh-tight:      1;
  --bz-lh-snug:       1.2;
  --bz-lh-base:       1.5;
  --bz-lh-relaxed:    1.7;
  --bz-lh-loose:      1.85;

  /* レタースペース */
  --bz-ls-display:    -0.025em;  /* 大型見出し用 */
  --bz-ls-tight:      -0.015em;  /* 中型見出し */
  --bz-ls-base:       0;          /* 通常 */
  --bz-ls-mono:       0.06em;     /* mono用 */
  --bz-ls-mono-wide:  0.18em;     /* mono強調 */

  /* === スペース === */
  --bz-sp-1:          4px;
  --bz-sp-2:          8px;
  --bz-sp-3:          12px;
  --bz-sp-4:          16px;
  --bz-sp-5:          20px;
  --bz-sp-6:          24px;
  --bz-sp-8:          32px;
  --bz-sp-10:         40px;
  --bz-sp-12:         48px;
  --bz-sp-16:         64px;
  --bz-sp-20:         80px;
  --bz-sp-24:         96px;

  /* === ボーダー === */
  --bz-radius-sm:     4px;
  --bz-radius-md:     8px;
  --bz-radius-lg:     12px;
  --bz-radius-pill:   100px;

  /* === シャドウ ===
     (基本的にシャドウは控えめ。エディトリアルではヘアライン主役) */
  --bz-shadow-soft:   0 4px 16px rgba(10, 22, 40, 0.04);
  --bz-shadow-mid:    0 8px 24px rgba(10, 22, 40, 0.06);
  --bz-shadow-hi:     0 12px 32px rgba(10, 22, 40, 0.08);

  /* === トランジション === */
  --bz-trans-fast:    0.15s ease;
  --bz-trans-base:    0.25s ease;
  --bz-trans-slow:    0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (max-width: 768px) {
  :root {
    --bz-fs-mega:       40px;
    --bz-fs-hero:       30px;
    --bz-fs-h1:         24px;
    --bz-fs-h2-section: 20px;
    --bz-fs-h2:         18px;
    --bz-fs-h3:         16px;
  }
}

/* ============================================================
   ユーティリティクラス: エディトリアル要素
   ============================================================ */

/* mono文字のレーベル(eyebrow / running head) */
.bz-eyebrow {
  display: inline-block;
  font-family: var(--bz-font-mono);
  font-size: var(--bz-fs-label);
  font-weight: 600;
  letter-spacing: var(--bz-ls-mono-wide);
  color: var(--bz-accent);
  text-transform: uppercase;
}

.bz-eyebrow--ink   { color: var(--bz-ink); }
.bz-eyebrow--muted { color: var(--bz-ink-3); }
.bz-eyebrow--warm  { color: var(--bz-warm); }

/* セクションラベル(mono・大文字) */
.bz-section-label {
  display: inline-block;
  font-family: var(--bz-font-mono);
  font-size: var(--bz-fs-label);
  font-weight: 700;
  letter-spacing: var(--bz-ls-mono-wide);
  color: var(--bz-ink-3);
  text-transform: uppercase;
  padding-bottom: var(--bz-sp-2);
  border-bottom: 1px solid var(--bz-ink);
  margin-bottom: var(--bz-sp-4);
}

/* ヘアライン区切り */
.bz-rule {
  border: 0;
  border-top: 1px solid var(--bz-line);
  margin: var(--bz-sp-8) 0;
}

.bz-rule--ink { border-top-color: var(--bz-ink); }

/* アクセント装飾(キーワード強調) */
.bz-accent-text {
  color: var(--bz-warm);
  font-weight: 700;
}

.bz-accent-mark {
  position: relative;
  display: inline;
  background: linear-gradient(transparent 60%, rgba(196, 77, 61, 0.15) 60%);
}

/* ナンバリング(VOL.等) */
.bz-vol-label {
  display: inline-flex;
  align-items: center;
  gap: var(--bz-sp-1);
  font-family: var(--bz-font-mono);
  font-size: var(--bz-fs-label);
  font-weight: 700;
  letter-spacing: var(--bz-ls-mono-wide);
  color: var(--bz-ink-3);
}

.bz-vol-label__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bz-warm);
}