/* ==========================================================================
   CSS カスタムプロパティ（変数）

   ここを変更するだけでサイト全体の色・タイポグラフィ・形状を一括変更できる。
   コンポーネントごとの CSS は具体的な値を直書きせず、ここの変数を参照する。
   ========================================================================== */

:root {

    /* --- カラーパレット（クライアント合意済み 2026-03-21） --- */

    /* ページ背景（深い紺黒）: 完全な黒より青みがかった暗さで温かみを残す */
    --color-bg:           #0d1117;

    /* カード・サイドバー背景: 背景より少し明るいことで「浮いている」感を出す */
    --color-surface:      #161b22;

    /* ボーダー・区切り線: 背景に馴染みつつ輪郭を示す */
    --color-border:       #30363d;

    /* 本文テキスト: 純白より柔らかく、長文でも目が疲れにくい */
    --color-text:         #e6edf3;

    /* サブテキスト（日付・著者名など）: 本文より目立たせすぎない */
    --color-text-muted:   #8b949e;

    /* アクセントカラー（リンク・見出し・強調）: フレンドリーな明るい青 */
    --color-primary:      #58a6ff;

    /* ホバー時グロー効果: primary の半透明版 */
    --color-primary-glow: rgba(88, 166, 255, 0.3);


    /* --- タイポグラフィ --- */

    --font-base:       'Noto Sans JP', sans-serif;

    /* clamp(最小, 基準, 最大): ビューポート幅に応じて滑らかにスケール */
    --font-size-base:  clamp(14px, 2vw, 16px);

    /* 日本語は行間 1.8 が読みやすいとされる（英語の 1.5 より広め） */
    --line-height-base: 1.8;


    /* --- 形状・アニメーション --- */

    /* カードの角丸: 硬すぎず柔らかすぎない 8px */
    --radius-card: 8px;

    /* タグ・バッジ類の角丸 */
    --radius-tag:  4px;

    /* ホバーアニメーションの速度: 0.2s は「素早いが唐突でない」バランス */
    --transition-base: 0.2s ease;

    /* ホバー時グロー: カード・ボタンに統一して使う */
    --shadow-glow: 0 0 12px var(--color-primary-glow);
}

/* ==========================================================================
   JIN アイコンフォント（jin-icons）の復元

   なぜここで宣言するか:
     親テーマの style.css を dequeue しているため、JIN が定義している @font-face と
     アイコングリフ（:before { content: "\e903" } など）がすべて消える。
     variables.css は最初に読み込まれるため、ここで宣言することで以降の CSS から
     確実にアイコンを参照できる。

   フォントファイルのパスについて:
     子テーマ CSS（jin-child/css/）から見た相対パスで、
     親テーマ（jin/）のフォントディレクトリを指している。
     ../../jin/ = themes/jin/ に相当する。
   ========================================================================== */

@font-face {
    font-family: "jin-icons";
    src: url("../../jin/font/jin-icons/fonts/jin-icons.woff?c16tcv") format("woff"),
         url("../../jin/font/jin-icons/fonts/jin-icons.ttf?c16tcv")  format("truetype");
    font-weight:  normal;
    font-style:   normal;
    font-display: block; /* アイコンが使われる前に不可視になるのを防ぐ */
}

/* アイコンクラス共通設定 */
[class^="jin-ifont-"],
[class*=" jin-ifont-"] {
    font-family: "jin-icons" !important;
    speak:            none;
    font-style:       normal;
    font-weight:      normal;
    font-variant:     normal;
    text-transform:   none;
    line-height:      1;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* グリフマッピング: このサイトで実際に使われているアイコンのみ定義 */
.jin-ifont-arrowtop:before   { content: "\e903"; } /* ページトップへ戻るボタン */
.jin-ifont-arrow:before      { content: "\e904"; } /* パンくず・前後ナビゲーション矢印 */
.jin-ifont-home:before       { content: "\e917"; } /* パンくずリストのホームアイコン */
.jin-ifont-line:before       { content: "\e91b"; } /* LINE シェアボタン */
.jin-ifont-twitter:before    { content: "\e92d"; } /* Twitter シェアボタン */
.jin-ifont-watch:before      { content: "\e92f"; } /* 記事メタの日時アイコン */
.jin-ifont-post:before       { content: "\e936"; } /* 関連記事ヘッダーアイコン */
.jin-ifont-facebook-t:before { content: "\e937"; } /* Facebook シェアボタン */
.jin-ifont-pocket:before     { content: "\e938"; } /* Pocket シェアボタン */
.jin-ifont-copyright:before  { content: "\e93a"; } /* フッターコピーライトアイコン */
.jin-ifont-clover:before     { content: "\e935"; } /* h2/h3 見出し装飾クローバーアイコン */