:root {
    /* フォントファミリー */
    --font-family-base: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-heading: 'Noto Sans JP', sans-serif;
    --font-family-en: 'Outfit', sans-serif;
    --font-family-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    /* フォントサイズ */
    /* フォントサイズ — 流動スケール (320px → 1440px で線形補間)        */
    /* 凡例: clamp(モバイル下限, 流動値, デスクトップ上限)                */
    --font-size-xs:   clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);   /* 11 → 12 */
    --font-size-sm:   clamp(0.8125rem, 0.79rem + 0.09vw, 0.875rem);  /* 13 → 14 */
    --font-size-base: 1rem;                                          /* 16 固定 (本文) */
    --font-size-lg:   clamp(1rem,      0.96rem + 0.18vw, 1.125rem);  /* 16 → 18 */
    --font-size-xl:   clamp(1.0625rem, 1.01rem + 0.27vw, 1.25rem);   /* 17 → 20 */
    --font-size-2xl:  clamp(1.25rem,   1.18rem + 0.36vw, 1.5rem);    /* 20 → 24 */
    --font-size-3xl:  clamp(1.5rem,    1.36rem + 0.71vw, 2rem);      /* 24 → 32 */
    --font-size-4xl:  clamp(1.75rem,   1.54rem + 1.07vw, 2.5rem);    /* 28 → 40 */
    --font-size-5xl:  clamp(1.5rem,    1.07rem + 2.14vw, 3rem);      /* 24 → 48 (ヒーロー / fluid) */

    /* 意味的トークン: ナビゲーション用 (ヘッダー・フッター・パンくず等) */
    --font-size-nav:  clamp(0.9375rem, 0.91rem + 0.13vw, 1rem);      /* 15 → 16 */

    /* 意味的トークン: セクション見出し (4箇所で共通使用) */
    --font-size-section: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);     /* 24 → 36 */

    /* フォントウェイト */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* カラー */
    --primary: #0066cc;
    --primary-dark: #005ab8;
    --primary-light: #60A5FA;
    --error: #DC2626;
    --success: #16a34a;
    --footer-bg: #1a1a1a;

    /* rgba 用 RGB 成分 (rgba(var(--primary-rgb), 0.x) 形式で使用) */
    --primary-rgb: 0, 102, 204;
    --primary-light-rgb: 96, 165, 250;
    --border-color-rgb: 229, 231, 235;  /* --border-color #e5e7eb の RGB 成分 */
    --error-rgb: 220, 38, 38;           /* --error #DC2626 の RGB 成分 */

    /* line-height スケール */
    --line-height-tight: 1.3;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.7;

    /* コードウィンドウ専用 (ヒーローのダーク装飾) */
    --code-window-bg-start: #1e293b;
    --code-window-bg-end:   #0f172a;
    --code-window-text:     #e2e8f0;
    --code-window-dot-red:    #ff5f56;
    --code-window-dot-yellow: #ffbd2e;
    --code-window-dot-green:  #27c93f;

    /* 背景色 */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;

    /* テキストカラー */
    --text-primary: #1a2b4c;
    --text-secondary: #64748b;
    --text-tertiary: #9CA3AF;
    --text-white: #ffffff;

    /* レイアウト */
    --header-height: 72px;
    --header-height-mobile: 56px;

    /* ヘッダー — 構造寸法 */
    --header-topbar-height: 3px;

    /* ヘッダー総高さ (topbar + main) — 全ページのオフセット用 SSOT。
       コンテンツが fixed ヘッダーに隠れないようにするときは
       常にこのトークンを使う。--header-height は .header__inner の
       メインバー単独高さで、用途が異なる。 */
    --header-height-total: calc(var(--header-topbar-height) + var(--header-height));
    --header-height-total-mobile: calc(var(--header-topbar-height) + var(--header-height-mobile));
    --header-accent-width: 38%;
    --header-accent-width-mobile: 45%;
    /* SVG アスペクト比 220:76 (≈ 2.89) — タグライン込みで高さ確保 */
    --header-logo-width: 184px;
    --header-logo-max-height: 64px;
    --header-logo-width-mobile: 138px;
    --header-logo-max-height-mobile: 48px;
    --header-logo-width-sm: 116px;
    --header-logo-max-height-sm: 40px;
    --header-nav-gap: 30px;

    /* ヘッダー — カラー (rgba alpha 段階) */
    --header-shadow-1: rgba(var(--primary-rgb), 0.05);
    --header-shadow-2: rgba(var(--primary-rgb), 0.04);
    --header-shadow-3: rgba(26, 43, 76, 0.03);
    --header-shadow-scrolled-1: rgba(var(--primary-rgb), 0.06);
    --header-shadow-scrolled-2: rgba(var(--primary-rgb), 0.07);
    --header-shadow-scrolled-3: rgba(26, 43, 76, 0.06);
    --header-topbar-bg-start: rgba(var(--primary-rgb), 0.6);
    --header-topbar-bg-mid:   rgba(var(--primary-rgb), 0.75);
    --header-topbar-shadow:   rgba(0, 0, 0, 0.08);
    --header-main-bg-start: #ffffff;
    --header-main-bg-end:   #fafbfd;
    --header-main-highlight: rgba(255, 255, 255, 0.7);
    --header-accent-1: rgba(var(--primary-rgb), 0.16);
    --header-accent-2: rgba(var(--primary-rgb), 0.10);
    --header-accent-3: rgba(var(--primary-rgb), 0.03);
    --header-accent-radial: rgba(var(--primary-rgb), 0.10);
    --header-accent-drop:   rgba(var(--primary-rgb), 0.06);
    --header-logo-drop:       rgba(var(--primary-rgb), 0.10);
    --header-logo-drop-hover: rgba(var(--primary-rgb), 0.15);
    --header-focus-ring:    rgba(var(--primary-rgb), 0.4);
    --header-mobile-shadow: rgba(0, 0, 0, 0.1);
    --header-mobile-border: rgba(var(--primary-rgb), 0.06);
    --header-mobile-active: rgba(var(--primary-rgb), 0.05);
    --header-mobile-hover:  rgba(var(--primary-rgb), 0.03);


    /* ブレークポイント (※ CSS Custom Properties は @media には展開不可 — 参考値) */
    --breakpoint-md: 768px;
    --breakpoint-sm: 480px;
    /* レイアウト幅 — 3階層スケール (高解像度PC対応)
       全ページのセクション幅を 1120px に統一 (--width-content に集約) */
    --width-prose:     720px;   /* 長文・法務テキスト (科学的可読幅) */
    --width-content:  1120px;   /* 標準セクション (info-table, 会社情報, ニュース, 横並びグリッド等) */
    --width-container:1320px;   /* 最外殻 (Bootstrap xxl 準拠) */

    /* セクション縦リズム — 流動 (clamp) */
    --section-y-sm: clamp(32px, 5vw, 64px);   /* 小: page-content 上部 */
    --section-y:    clamp(48px, 6vw, 80px);   /* 標準 */
    --section-y-lg: clamp(64px, 8vw, 120px);  /* 大: service-section, service-cta */
    --section-y-xl: clamp(72px, 9vw, 140px);  /* 特大: service-process */

    --container-padding: var(--space-md);

    /* スペーシング */
    --space-xxs: 0.25rem;   /* 4px */
    --space-xs: 0.5rem;     /* 8px */
    --space-sm: 0.75rem;    /* 12px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */

    /* ボーダー */
    --border-color: #e5e7eb;
    --border-width: 4px;
    --border-width-thin: 2px;
    --border-width-thick: 6px;

    /* ラディウススケール (旧 --border-radius / --border-radius-lg は --radius-sm / --radius-md に統合) */
    --radius-sm:     4px;     /* バッジ・タグ */
    --radius-md:     12px;    /* 標準カード */
    --radius-lg:     16px;    /* 大きめカード */
    --radius-xl:     24px;    /* CTAバナー等 */
    --radius-pill:   999px;   /* ピル */
    --radius-circle: 50%;     /* 円形 */

    /* モーション — Duration */
    --duration-fast:   0.15s;  /* フォーカス・微細 */
    --duration-base:   0.3s;   /* 標準ホバー */
    --duration-slow:   0.4s;   /* カードリフト */
    --duration-slower: 0.7s;   /* ページ入場 */

    /* モーション — Easing */
    --ease-out:    ease;
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* モーション — 合成 */
    --transition-base:   all var(--duration-base) var(--ease-out);
    --transition-smooth: all var(--duration-base) var(--ease-smooth);

    /* シャドウ — 中立グレー (汎用エレベーション) */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);

    /* シャドウ — プライマリ色 (青味グロー) */
    --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.04), 0 20px 40px -16px rgba(var(--primary-rgb), 0.10);
    --shadow-card-hover: 0 4px 12px -4px rgba(var(--primary-rgb), 0.08), 0 20px 40px -16px rgba(var(--primary-rgb), 0.15);
    --shadow-cta:        0 20px 40px -16px rgba(var(--primary-rgb), 0.40);
    --shadow-focus-ring: 0 0 0 4px rgba(var(--primary-rgb), 0.15);

    /* モバイル用スペーシング */
    --mobile-section-padding: var(--space-xl);
    --mobile-component-gap: 1rem;

    /* ホームページ専用 — セクション重ね (services / tech-stack / news が前セクションに被さる R 値) */
    --section-overlap-radius: 32px;

    /* ホームページ専用 — カードグラデーション */
    --card-bg-tint:       linear-gradient(145deg, var(--bg-primary), #f5f7fa);
    --card-bg-tint-hover: linear-gradient(145deg, var(--bg-primary), #eef4fb);

    /* ホームページ専用 — ヒーロー装飾円 / データフロー位置 */
    --hero-decor-size: 600px;
    --hero-decor-x: 24%;
    --hero-decor-y: 45%;

    /* ホームページ専用 — ニュースアイテム影 */
    --shadow-news-item:       0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-news-item-hover: 0 4px 12px -2px rgba(var(--primary-rgb), 0.1), 0 2px 4px -1px rgba(var(--primary-rgb), 0.06);
}

/* ベース設定 */
html {
    font-family: var(--font-family-base);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    /* 日本語タイポ最適化: 約物 (句読点・カッコ) の自動ツメ組み */
    font-feature-settings: "palt" 1;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    margin: 0;
}

/* レイアウト */
.container {
    width: min(var(--width-container), 95%);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    box-sizing: border-box;
}

/* メインコンテンツ.
   全ページが .page-hero でヘッダー総高さを内側 padding-top で吸収するため、
   <main> 側ではオフセットを足さない (二重オフセット防止)。
   .page-hero を持たないテンプレート (例: 404) では個別に padding-top を付与する。 */
main {
    flex: 1;
    width: 100%;
    overflow-x: hidden;
    padding-top: 0;
}

/* セクション */
.section {
    padding: var(--space-2xl) 0;
}

.page-content {
    /* ヒーロー直下の本文ラッパ — 上余白はヒーロー側で確保するため 0 */
    padding-top: 0;
    min-height: calc(100vh - var(--header-height-total));
    background-color: var(--bg-secondary);
}

/* セクションタイトル */
.section-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    color: var(--text-primary);
    margin-bottom: var(--space-2xl);
    position: relative;
    padding-bottom: var(--space-lg);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--space-xl);
    height: var(--border-width);
    background-color: var(--primary);
}

/* ====================================================================
   ページヒーロー: サブページ共通バナー (全ページ統一・コンパクト)
   ==================================================================== */
.page-hero {
    position: relative;
    /* ヘッダー総高さ (topbar+main) + 上 space-lg、下 space-lg で統一 */
    padding: calc(var(--header-height-total) + var(--space-lg)) 0 var(--space-lg);
    min-height: calc(var(--header-height-total) + 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(var(--primary-light-rgb), 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(var(--primary-rgb), 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #f0f7ff 0%, #f8fafc 100%);
    overflow: hidden;
    text-align: center;
    /* margin-bottom は意図的に 0 — body(--bg-primary) と
       page-content(--bg-secondary) の隙間に白帯が出るのを防ぐ。
       垂直方向の余白は各ページの .page-content padding-top で担う。 */
}

/* WordPress core が global-styles で
   :where(.wp-site-blocks) > * { margin-block-start: 24px }
   を注入する。.wp-site-blocks の直接子になりうる
   ヒーロー / 本文ラッパすべてに 24px が乗り、
   結果としてページごとにナビゲーション直下のスペースがズレる
   (contact は .page-hero が直接子・他ページは .X-page が直接子)。
   :where() は specificity 0 のためクラス指定で全て打ち消す。 */
.page-hero,
main.page-content,
.company-page,
main.services-page,
main.news-page,
main.privacy-page {
    margin-block-start: 0;
}

/* (旧コメント) main.services-page/news-page/privacy-page の
   padding-top: 0 上書きは、main 自体が padding-top: 0 になったため不要。
   将来ヒーロー無しテンプレートを追加する際はその main にだけ
   padding-top: var(--header-height-total) を明示する。 */

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--primary-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-rgb), 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    opacity: 0.6;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.page-hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--width-content);
    width: 100%;
    margin: 0 auto;
    padding: var(--space-md) var(--space-lg);
}

.page-hero__eyebrow {
    display: inline-block;
    font-family: var(--font-family-en);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--primary);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    padding: var(--space-xxs) var(--space-md);
    background: rgba(var(--primary-rgb), 0.08);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
}

.page-hero__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-section);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-sm);
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.page-hero__lead {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 640px;
    margin: var(--space-sm) auto 0;
}

.page-hero__decoration {
    width: 48px;
    height: 3px;
    margin: var(--space-md) auto 0;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 2px;
}

@media (max-width: 768px) {
    .page-hero {
        padding: calc(var(--header-height-total-mobile) + var(--space-md)) 0 var(--space-md);
        min-height: calc(var(--header-height-total-mobile) + 120px);
        margin-bottom: 0; /* 白帯防止: ヒーロー直下に余白を出さない */
    }
    .page-hero__inner {
        padding: var(--space-sm) var(--space-md);
    }
    .page-hero__lead {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 480px) {
    .page-hero {
        padding: calc(var(--header-height-total-mobile) + var(--space-sm)) 0 var(--space-sm);
        min-height: calc(var(--header-height-total-mobile) + 100px);
    }
    .page-hero__eyebrow {
        font-size: var(--font-size-xs);
        letter-spacing: 0.15em;
    }
}

/* 画像の基本設定 */
img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.responsive-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
    overflow: hidden;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 入力要素の調整 */
input,
select,
textarea {
    font-size: 16px;
}

/* メディアクエリ */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 var(--space-sm);
    }

    .section {
        padding: var(--mobile-section-padding) 0;
    }

    .section-title {
        margin-bottom: var(--space-lg);
    }

    .to-top {
        right: var(--space-md);
        bottom: var(--space-md);
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .section-title {
        margin-bottom: var(--space-md);
    }

    button,
    a {
        min-width: 30px;
        padding: var(--space-sm);
    }
}

/* タッチデバイス用の調整 */
@media (hover: none) {
    .hover-effect {
        display: none;
    }

    * {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    .scroll-container {
        -webkit-overflow-scrolling: touch;
    }
}

/* スクロールプログレスバー */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: transparent;
    z-index: 1100;
    pointer-events: none;
}

.scroll-progress__bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
    box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5);
    transform-origin: left center;
    transition: width 0.08s linear;
    will-change: width;
}

/* スクロールバーが見えるブラウザでは少し下に */
.header.is-scrolled ~ .scroll-progress,
.scroll-progress {
    top: 0;
}

/* ダークモード対応 (システム設定に追従) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --text-primary: #f1f5f9;
        --text-secondary: #94a3b8;
        --text-tertiary: #64748b;
        --border-color: #334155;
        --primary-light: #93c5fd;

        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);
        --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4);

        /* ダークモード時のヘッダー内側グラデーション (白→ダークに上書き) */
        --header-main-bg-start: #0f172a;
        --header-main-bg-end:   #1e293b;
    }

    body {
        background-color: var(--bg-primary);
        color: var(--text-primary);
    }

    /* ヘッダー: 半透明ダーク */
    .header {
        background: rgba(15, 23, 42, 0.85);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* ロゴ: ダーク背景に対し明度を上げて可読性確保 */
    .header__logo-image {
        filter: brightness(1.6) saturate(1.1);
    }

    .header.is-scrolled,
    .header.scrolled {
        background: rgba(15, 23, 42, 0.9);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .header__nav .header__menu-link {
        color: var(--text-primary);
    }

    /* モバイルメニュー */
    .header__nav {
        background: rgba(15, 23, 42, 0.98) !important;
    }

    /* ヒーロー */
    .hero {
        background: #0f172a !important;
        color: var(--text-primary);
    }

    /* セクション背景 */
    .services {
        background-color: #1e293b;
    }

    .tech-stack {
        background-color: #0f172a;
    }

    .news-section {
        background-color: #1e293b;
    }

    /* カード類 */
    .service-card {
        background: linear-gradient(145deg, #1e293b, #0f172a) !important;
        border-color: rgba(var(--primary-light-rgb), 0.15);
        color: var(--text-primary);
    }

    .service-card:hover {
        background: linear-gradient(145deg, #243049, #131e35) !important;
        border-color: rgba(var(--primary-light-rgb), 0.35);
    }

    .service-card p {
        color: var(--text-secondary);
    }

    .service-card__icon h3 {
        color: var(--text-primary);
    }

    .service-card__icon img {
        background: rgba(var(--primary-light-rgb), 0.15);
    }

    /* ニュース */
    .news-item {
        background: #1e293b !important;
        border-color: rgba(var(--primary-light-rgb), 0.12) !important;
    }

    .news-item__link {
        color: var(--text-primary);
    }

    .news-item__excerpt {
        color: var(--text-secondary);
    }

    /* テックロゴ */
    .tech-logo-item {
        background: rgba(30, 41, 59, 0.6);
        border-color: rgba(var(--primary-light-rgb), 0.12);
    }

    /* 情報テーブル */
    .info-table {
        background: #1e293b;
        border-color: rgba(var(--primary-light-rgb), 0.12);
    }

    .info-table dt {
        background: linear-gradient(135deg, rgba(var(--primary-light-rgb), 0.08) 0%, rgba(var(--primary-rgb), 0.05) 100%);
        color: var(--text-primary);
        border-bottom-color: rgba(var(--primary-light-rgb), 0.1);
    }

    .info-table dd {
        color: var(--text-secondary);
        border-bottom-color: rgba(var(--primary-light-rgb), 0.1);
    }

    /* フッターは元から暗いので調整不要 */

    /* コードウィンドウは元から暗いので維持 */

    /* ページヒーロー: ダークモード */
    .page-hero {
        background:
            radial-gradient(ellipse at 20% 0%, rgba(var(--primary-light-rgb), 0.15) 0%, transparent 55%),
            radial-gradient(ellipse at 80% 100%, rgba(var(--primary-rgb), 0.10) 0%, transparent 55%),
            linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    }
    .page-hero::before {
        background-image:
            linear-gradient(rgba(var(--primary-light-rgb), 0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(var(--primary-light-rgb), 0.06) 1px, transparent 1px);
    }
    .page-hero__eyebrow {
        background: rgba(var(--primary-light-rgb), 0.12);
        border-color: rgba(var(--primary-light-rgb), 0.25);
        color: var(--primary-light);
    }
    .page-hero__title {
        color: var(--text-primary);
    }
    .page-hero__lead {
        color: var(--text-secondary);
    }
}