/* ページタイトル周りのレイアウトを調整する */
body, *::after, *::before {
    /* # 共通設定 */
    /* ページ全体の背景 */
    --body-bg: hsl(265deg 1% 18%); /*hsl(252deg 2% 18%);*/
    /* ページ背景としては使用していないが、互換性のために残す */
    --page-bg: var(--body-bg);
    /* 全体の最大幅 */
    --body-max-width: 1200px; /*【値変更非対応】*/
    /* ページの横padding */
    --body-padding-horizon: 8px; /*【値変更非対応】*/
    /* ページ内のフォントサイズ */
    --page-font-size: 15px;
    /* デフォルトで設定されているフォント
     * Font Awesomeを常時使えるようにするUserCSSから流用したもの */
    --base-fonts: "Roboto",Helvetica,Arial,"Hiragino Sans","Font Awesome 6 Free","Font Awesome 5 Brands","AppIcons",sans-serif;
    /* ページタイトルとかに使っているフォント */
    --label-fonts: "Noto Sans JP", var(--base-fonts);
    --animation-time: .3s;
    
    /* # ナビゲーションバー */
    /* 1行目の背景色 */
    --navbar-bg: hsl(265deg 2% 23%); /*hsl(252deg 39% 60%); /*hsl(265deg 19% 20%);*/
    /* 区切り線の色 */
    --navbar-separator-color: hsl(265deg 91% 74%);
    /* 区切り線の長さ */
    --navbar-separator-width: 2px;
    /* ナビゲーションバーの横margin */
    --navbar-margin-horizon: 8px;
    /* ナビゲーションバーの最小縦幅 */
    --navbar-min-height: calc(var(--navbar-row-1-height) + var(--navbar-row-2-height));
    /* ナビゲーションバーの最大縦幅 */
    --navbar-max-height: var(--navbar-min-height); /* 変動しないのでminと同じ値 */
    /* ナビゲーションバーの1行目の縦幅 */
    --navbar-row-1-height: calc(40px + var(--navbar-separator-width)); ; /* デフォルト：40px */
    --navbar-row-2-height: 40px;
    /* 新規作成ボタンの色 */
    --new-button-bg: hsl(341deg 69% 55%); /*hsl(350deg 80% 54%); /*hsl(350deg 77% 44%);*/
    --new-button-hover-bg: hsl(341deg 77% 36%);
    --new-button-active-bg: hsl(341deg 77% 32%);
    /* 新規作成ボタンの大きさ */
    --new-button-size: 32px;
    /* 左上のロゴをホバーした時の影 */
    --navbar-brand-hover-shadow: var(--navbar-separator-color);
    /* 左上のロゴの隣の矢印の色 */
    --navbar-icon-color: white;
    --navbar-icon-active-color: var(--navbar-separator-color);
    --navbar-icon-hovered-color: var(--navbar-separator-color);
    
    /* # ツールバー */
    /* ツールバーの高さ */
    --tool-height: var(--navbar-row-1-height);
    /* ツールバーの下マージン */
    --tool-margin-bottom: calc((var(--navbar-max-height) - var(--navbar-row-1-height) - var(--tool-height)) / 2);
    /* ツールバーの角丸の深さ */
    --tool-border-radius: 3px;
    /* プロジェクトタイトルのボタン色 */
    --tool-bg: hsl(265deg 2% 24%); /*hsl(252deg 2% 24%); /*hsl(265deg 31% 34%); /* ホバーしていない時に使われる */
    --tool-hover-bg: hsl(265deg 2% 31%);/*hsl(230deg 12% 40%); /* 元々は--tool-bgだった */
    /* more page of の文字色 */
    --tool-color: hsl(0deg 0% 100% / 71%);
    /* プロジェクトタイトルと戻るボタンの間の線【不要】 */
    --tool-separator-width: 1.5px;
    --tool-separator-height: 18px;
    --tool-separator-color: #0000002e;
    
    /* # ページメニュー */
    --page-menu-icon-size: 46px;
    
    /* # ページ内部 */
    /* ページ内の文字色 */
    --page-text-color: hsl(0deg 0% 100% / 87%);
    /* ページの横padding
     * テロメアの位置調整も必要なので変数で管理する */
    --page-padding-horizon: 30px; /* 元々は42px */
    /* ページの上padding */
    --page-padding-top: 21px; /* 元々は42px */
    /* ページタイトルの左padding */
    --line-title-margin-left: -12px;
    /* ページタイトル下線の幅 */
    --line-title-border-width: 2px;
    /* ページタイトル下線の色 */
    --line-title-border-color: var(--line-title-color, white);
    /* テロメアの色 */
    --telomere-border: hsl(224deg 8% 36%);
    --telomere-unread: hsl(265deg 76% 71%);
    --telomere-updated: hsl(265deg 92% 82%);
    
    /* # 関連ページリスト・ページカード */
    /* 関連ページリストのラベルのホバー時の文字 */
    --relation-label-text: hsl(180deg 1% 87%); /* 既定値 */
    --relation-label-text-1: hsl(257deg 39% 70%);
    --relation-label-text-p1: hsl(180deg 55% 47%);
    --relation-label-text-2: hsl(218deg 50% 61%);
    --relation-label-text-empty: hsl(9deg 50% 73%);
    /* 関連ページリストのページカードの背景 */
    --relation-page-bg: hsl(0deg 0% 100% / 7%); /* 既定値 */
    --relation-page-bg-1: hsl(257deg 39% 40%);
    --relation-page-bg-p1: hsl(180deg 47% 27%);
    --relation-page-bg-2: hsl(218deg 50% 38%);
    --relation-page-bg-empty: hsl(9deg 56% 51%);
    /* 関連ページリストのページカードの線 */
    --relation-page-border-color: hsl(0deg 0% 100% / 50%);
    /* ページカードの背景 */
    --card-bg: var(--relation-page-bg);
    /* ページカードの上の線 */
    --card-title-bg: hsl(265deg 17% 46%);
    
}

/* # 関連ページリストを右側に持ってくるやつの専用設定 */
@media (min-width: 768px) {
    body, *::after, *::before {
        /* ページ情報の大きさ */
        --page-info-height: 178px;
        --page-info-width: 250px;
        /* ページメニューの背景 */
        --page-menu-bg: var(--page-bg);
        /* ページ情報とページメニューの間の色 */
        --page-info-area-bg: hsl(265deg 7% 37% / 10%);
        /* ページの最大幅 */
        --page-max-width: calc(
            var(--body-max-width)
            - (var(--body-padding-horizon) * 2)
            - var(--page-info-width)
            - 20px /* どこから出た20pxなのかは謎 */
        );
        /*
         * ページメニュー全体の高さ
         * 自分のアイコンの数によって高さを変える */
        --page-menu-height: calc(var(--page-info-height)
          + (var(--page-menu-icon-size) * var(--page-menu-rows)));
        /* ページメニューの角丸の深さ */
        --page-menu-border-radius: 3px;
        /* ページメニューのアイコンの数 */
        --page-menu-columns: 4; /* 横並びの個数 */
        --page-menu-rows: 1; /* 縦並びの個数 */
        /* 関連ページリストのラベルのフォントサイズ */
        --relation-label-font-size: 16px;
        /* 関連ページリストのラベルの鎖アイコンの大きさ */
        --relation-label-icon-size: 18px;
        /* 関連ページリストの横側の空白 */
        --relation-label-margin-left: 3px;
    }
}