:root {
  /* ===========================
     ページカラー
  =========================== */
  --color-base-1: #ffffff;        /* ベースカラー１：白 */
  --color-base-2: #F8FAF9;        /* ベースカラー２：薄いモスグリーン */
  --color-main: #15CCB6;          /* メインカラー：明るい青緑 */
  --color-accent-1: #0FBD66;      /* アクセントカラー1：明るい緑 */
  --color-accent-2: #1A6B73;      /* アクセントカラー2：濃い青緑 */

  /* テキスト */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;
  /* 相談カード見出し（html-chech .mock-thread-card__title 準拠） */
  --color-text-title-card: #3f4249;
  /* 相談カード抜粋（モックの本文色に近いグレー） */
  --color-thread-card-excerpt: #374151;
  --color-text-inverse: #ffffff;

  /* ボーダー */
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  --color-border-strong: #d1d5db;  /* hover 等で使う一段濃いボーダー */

  /* 状態色 */
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-success: #10b981;
  --color-info: #3b82f6;
  --color-best-answer-bg: #f0fdf4;  /* ベストアンサーカード背景 */
  --color-message-box-bg: #FFF1F4;  /* 相談者へのメッセージ欄の淡いピンク背景 */
  /* 広告図解（転職エージェント等）注意／対処パステル */
  --color-ad-warn-text:   #C2410C;
  --color-ad-warn-bg:     #FFF7ED;
  --color-ad-warn-strong: #FFEDD5;
  --color-ad-warn-border: #FED7AA;
  --color-ad-ok-text:     #047857;
  --color-ad-ok-bg:       #ECFDF5;
  --color-ad-ok-strong:   #D1FAE5;
  --color-ad-ok-border:   #A7F3D0;
  --color-ad-ok-accent:   #10b981;  /* 対処コネクタ矢印 */
  /* 注目体験談ポップアップ（スレカード） */
  --color-featured-bg: #FFF1F4;      /* 淡ピンク背景 */
  --color-featured-border: #FAD1DD;  /* 枠線 */
  --color-featured-accent: #b21b68;  /* 見出しアクセント */
  --color-hero-overlay: rgba(26, 107, 115, 0.76);
  /* ヒーロー「探す」ボタン等（html-chech mock --color-main-dark 準拠） */
  --color-main-dark: #0ea5a4;
  /* TOP 悩みレールセクション背景（html-chech --color-section-feed-bg） */
  --color-section-feed-bg: #f0f2f6;
  --color-section-feed-border: #f0f2f6;
  --color-surface-muted: #f6f7f9;
  /* ヒーロー検索枠内プレースホルダー相当の本文色 */
  --color-hero-input-text: #111827;

  /* ===========================
     カテゴリカラー
  =========================== */
  /* 人間関係 */
  --cat-ningen-text: #1d6a3f;
  --cat-ningen-bg: #DCFCE7;

  /* キャリア */
  --cat-career-text: #1e4fb7;
  --cat-career-bg: #EFF6FF;

  /* スキル */
  --cat-skill-text: #9f3f16;
  --cat-skill-bg: #FFEDD5;

  /* 働き方 */
  --cat-hataraki-text: #b35c00;
  --cat-hataraki-bg: #FFFFCC;

  /* 生き方 */
  --cat-kachi-text: #b21b68;
  --cat-kachi-bg: #FFE5F3;

  /* ===========================
     タイポグラフィ
  =========================== */
  --font-family-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  --font-size-2xs: 0.6875rem;  /* 11px */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  /* TOP ヒーロー見出し（html-chech --font-size-hero） */
  --font-size-hero: clamp(1.75rem, 4vw, 3rem);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  /* モック .mock-thread-card__answer-meta / .mock-reaction（600）相当 */
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --line-height-tight: 1.25;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.8;

  /* ===========================
     スペーシング
  =========================== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ===========================
     ボーダー・シャドウ
  =========================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --shadow-card: 0 1px 0 rgba(17, 24, 39, 0.04);
  --shadow-figma-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);

  /* ===========================
     レイアウト
  =========================== */
  /* リファレンス/デザイン/マニュアル-ページ横幅.md（本文 1400px） */
  --container-max: 87.5rem;
  --container-padding: var(--space-4);
  --header-height: 64px;
  /* TOP 横スクロール悩みカード幅（html-chech --mock-thread-card-width） */
  --home-feed-card-width: 23.75rem;
  --home-section-heading-accent: var(--color-success);
  --container-wide-max: var(--container-max);
  --home-scroll-gap-min: var(--space-3);
  --home-scroll-gap-max: 30px;
  --home-three-cards-width: calc(3 * var(--home-feed-card-width));
  /* html-chech mock --mock-layout-gutter-x（デスクトップ左右ガター上限） */
  --layout-gutter-x-max: 110px;
  /* TOP ヒーロー本文カラム最大幅（html-chech .mock-hero__inner 920px） */
  --hero-inner-max-width: 57.5rem;

  /* ===========================
     相談詳細（html-chech thread-detail / Figma 732:4966 準拠）
  =========================== */
  --color-thread-detail-bg: #f4f7f6;
  --color-thread-detail-title: #4979d1;
  --color-thread-detail-teal-strong: #12b89d;
  --color-thread-detail-prose: #1e2939;
  --color-thread-detail-muted: #6a7282;
  --color-thread-detail-muted-light: #99a1af;
  --color-thread-detail-card-border: #f3f4f6;
  --color-thread-detail-callout-bg: #f0f9f6;
  --color-thread-detail-callout-border: #a6e6d7;
  --color-thread-detail-best-border: #fccee8;
  --color-thread-detail-best-ribbon: #f6339a;
  --color-thread-detail-msg-bg: #fff7f0;
  --color-thread-detail-msg-border: #ffa1e1;
  --color-thread-detail-msg-title: #e354ae;
  --color-thread-detail-pill-cat-bg: #eff6ff;
  --color-thread-detail-pill-cat-text: #2160ea;
  --color-thread-detail-pill-hash-bg: #f3f4f6;
  --color-thread-detail-share-fb: #155dfc;
  --color-thread-detail-share-line: #06c755;
  --color-thread-detail-bottom-cta-border: #a7f3d0;

  /* ランキングバッジ（html-chech category-career 準拠） */
  --color-rank-gold-light: #fde68a;
  --color-rank-gold-mid: #f59e0b;
  --color-rank-gold-dark: #b45309;
  --color-rank-silver-light: #f3f4f6;
  --color-rank-silver-mid: #9ca3af;
  --color-rank-silver-dark: #6b7280;
  --color-rank-bronze-light: #fed7aa;
  --color-rank-bronze-mid: #ea580c;
  --color-rank-bronze-dark: #9a3412;
  --color-rank-sub-light: #e5e7eb;
  --color-rank-sub-mid: #d1d5db;
  --color-rank-sub-dark: #b0b8c4;

  /* ===========================
     一覧ヒーロー（記事／articles バリアント）
     紺青ベース＋エメラルド／ティールの差し色（/ranking のティール全面とは階調を分ける）
  =========================== */
  --list-hero-articles-c1: #2dd4bf;
  --list-hero-articles-c2: #1a3652;
  --list-hero-articles-c3: #0d9488;
  --list-hero-articles-line: #0c4a6e;
  --color-hero-articles-overlay: rgba(10, 22, 40, 0.4);

  /* 相談詳細ページ内幅（html-chech .mock-figma-thread__inner は --container-max 1400px） */
  --thread-detail-inner-max-width: 87.5rem;

  --thread-detail-page-py: 1.25rem;
  --thread-detail-stack-gap: 1.875rem;
  --thread-detail-column-gap: 2.3125rem;
  --thread-detail-before-best: 8.9375rem;
  --thread-detail-card-py: 2.0625rem;
  --thread-detail-card-px: 3.125rem;
  --thread-detail-card-row-gap: 0.625rem;
  --thread-detail-best-inner-py: 1.9375rem;
  --thread-detail-best-inner-gap: 1.3125rem;
  --thread-detail-title-block-py: 2.5rem;
  --thread-detail-prose-column-max: 56.25rem;
  --thread-detail-prose-py: 1.125rem;
  --thread-detail-prose-px: 2.375rem;
  --thread-detail-prose-line: 1.421875;
  --thread-detail-p-gap: 1.421875em;
  --thread-detail-bottom-cta-gap: 1.1875rem;
  --thread-detail-callout-gap: 0.75rem;
  --thread-detail-callout-py: 1.3125rem;
  --thread-detail-callout-px: 1.25rem;
  --thread-detail-react-bar-py: 0.5625rem;
  --thread-detail-cta-stack-gap: 1.5rem;
  --thread-detail-tag-row-py: 0.3125rem;
  --thread-detail-pad-x: clamp(var(--space-4), 4vw, var(--space-10));

  /* ===========================
     管理画面サイドバー（ダークUI・専用色）
  =========================== */
  --admin-sidebar-bg: #0e1c2c;
  --admin-sidebar-text: #c8d6e5;

  /* ===========================
     トランジション
  =========================== */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}