/* ========= 外部フォントの読み込み ========= */
/* Google Fontsなどからフォントデータをダウンロードして使えるようにする */

/* 一般的なフォント群 */
/* Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
/* Rubik Scribble */
@import url('https://fonts.googleapis.com/css2?family=Rubik+Scribble&display=swap');
/* Workbench */
@import url('https://fonts.googleapis.com/css2?family=Workbench&display=swap');
/* Sacramento */
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
/* Monoton */
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
/* Playwrite Cuba */
@import url('https://fonts.googleapis.com/css2?family=Playwrite+CU:wght@100..400&display=swap');
/* Kdam Thmor Pro */
@import url('https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap');
/* Wallpoet */
@import url('https://fonts.googleapis.com/css2?family=Wallpoet&display=swap');
/* Google Sans Code*/
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code&display=swap');
/* 特殊なサーバーからのフォント */
/* Ndot-55 */
@import url('https://pp-various.pages.dev/data/fonts/ndot.css');

/* ▼▼▼ Google Sans Flex (可変フォント) の読み込み ▼▼▼ */
/* 重要: 可変フォントのすべての機能を使うための特殊なURL記述 */
/* ルール: 軸の名前をアルファベット順に並べ、それぞれの数値範囲(..)を指定する */
/* 順序: slnt(傾き), wdth(幅), wght(太さ), GRAD(微調整), ROND(丸み) */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:slnt,wdth,wght,GRAD,ROND@-10..0,25..151,1..1000,0..100,0..100&display=swap');

/* Material Icons */
/* 設定ボタンのアイコンを表示するために、Googleのアイコンフォントを読み込む */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

/* ========= 基本スタイルの定義 ========= */

:root {
    /* CSS変数: ここで定義した色をページ全体で使い回すための入れ物 */
    --background-color: #ffffff; /* 背景色 */
    --text-color: #000000;       /* 文字色 */
}

body {
    /* 文字を中央揃えにする */
    text-align: center;
    /* 背景色に変数を使用 */
    background-color: var(--background-color);
    /* 文字色に変数を使用 */
    color: var(--text-color);
    /* デフォルトの文字の太さ */
    font-weight: 400;
    /* デフォルトの文字スタイル */
    font-style: normal;
    /* マウスカーソルを消す（展示用ディスプレイなどを想定） */
    cursor: none;
    /* テキストを選択（反転）できないようにする */
    user-select: none;
    /* 背景色などが変わる時に0.3秒かけてふわっと変化させる */
    transition: background-color 0.3s, color 0.3s;
    /* デフォルトのフォント指定 */
    font-family: "Roboto", sans-serif;
    
    /* 重要: 数字の幅を等しくする設定（等幅フォント化） */
    /* これがないと「1」と「8」で幅が違うため、秒が進むたびに時計が左右にガタつく */
    font-variant-numeric: tabular-nums;
}

/* アイコンフォントの色も変数の文字色に合わせる */
.material-symbols-outlined {
    color: var(--text-color);
}


/* ========= 設定ボタン（パネル開閉用）のスタイル ========= */
#toggle-controls-button {
    /* 画面内の絶対位置に配置する */
    position: absolute;
    top: 10px;   /* 上から10px */
    right: 15px; /* 右から15px */
    
    /* 他の要素より手前に表示する（重なり順） */
    z-index: 20;
    
    /* 文字（アイコン）サイズ */
    font-size: 24px;
    /* ボタンの背景を透明にする */
    background: none;
    /* ボタンの枠線を消す */
    border: none;
    /* マウスを載せたときに指マークにする（cursor:noneの影響を受けないように） */
    cursor: pointer;
    /* ボタンの内側の余白 */
    padding: 5px;
    /* 少し透明にする */
    opacity: 0.7;
    /* 透明度の変化をアニメーションさせる */
    transition: opacity 0.2s;
}

/* マウスが乗った時（ホバー時） */
#toggle-controls-button:hover {
    /* 不透明にする（はっきり表示） */
    opacity: 1;
}


/* ========= コントロールパネルのスタイル ========= */

.controls {
    /* 画面内の絶対位置に配置 */
    position: absolute;
    top: 10px;
    left: 50%; /* 左端を画面の真ん中に */
    
    /* 自身の幅の半分だけ左に戻すことで、完全に中央揃えにするテクニック */
    transform: translateX(-50%);
    
    /* フレックスボックスレイアウトを使用（子要素を横並びにする） */
    display: flex;
    /* 幅が足りなくなったら折り返す */
    flex-wrap: wrap;
    /* 子要素を中央寄せにする */
    justify-content: center;
    /* 子要素同士の間隔を15px空ける */
    gap: 15px;
    /* 上下方向の位置を中央に揃える */
    align-items: center;
    
    /* 背景色（半透明の薄いグレー） */
    background-color: rgba(240, 240, 240, 0.9);
    /* 内側の余白 */
    padding: 10px 20px;
    /* 角を丸くする */
    border-radius: 8px;
    /* 影をつけて浮いているように見せる */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 重なり順（ボタンよりは下、時計よりは上） */
    z-index: 10;
    /* パネル上ではマウスカーソルを表示する（bodyのcursor:noneを打ち消す） */
    cursor: default;
    
    /* 表示・非表示のアニメーション設定（位置と透明度） */
    transition: transform 0.4s ease, opacity 0.4s ease;
    /* 画面幅の90%以上には広がらないようにする（スマホ対策） */
    max-width: 90vw;
}

/* パネルを隠すときのスタイル（JSでクラスを付与して切り替える） */
.controls.hidden {
    /* 上に移動させて画面外に出す */
    transform: translate(-50%, -150%);
    /* 完全に透明にする */
    opacity: 0;
    /* クリック判定をなくす（見えないボタンを押せないようにする） */
    pointer-events: none;
}

/* パネル内のラベル（文字）設定 */
.controls label {
    font-family: 'Roboto', sans-serif;
    color: #333;
    /* フレックスボックスでアイコンや入力欄を横並びにする */
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    /* 勝手に改行されないようにする */
    white-space: nowrap;
}

/* 数値表示エリア（○○px などの部分） */
.controls label span[id$="-value"] {
    /* 幅を指定できるようにブロック要素のように振る舞わせる */
    display: inline-block;
    /* 幅を固定する（数字が変わっても全体の幅がガタガタしないように） */
    width: 45px;
    /* 右揃えにする */
    text-align: right;
    /* 太字にする */
    font-weight: bold;
}

/* Flexフォント専用の詳細設定エリア */
#flex-font-settings {
    /* 初期状態は非表示（JSで表示切り替え） */
    display: none;
    /* 親要素の幅いっぱいに広げる */
    width: 100%;
    
    /* グリッドレイアウトを使用（2列で綺麗に並べるため） */
    grid-template-columns: 1fr 1fr; /* 1fr 1fr = 1:1の比率で2列 */
    /* 縦横の間隔 */
    gap: 10px 20px;
    /* セル内で中央寄せ */
    justify-items: center;
    
    /* 上部の線と余白 */
    padding-top: 15px;
    margin-top: 10px;
    border-top: 1px solid #ccc;
}

/* スマホなど画面幅が600px以下のときのスタイル */
@media (max-width: 600px) {
    #flex-font-settings {
        /* 1列にする */
        grid-template-columns: 1fr;
    }
}

/* 詳細設定エリアのスライダーの幅 */
#flex-font-settings input[type="range"] {
    width: 120px;
    /* スライダーの色を青にする */
    accent-color: #007bff;
}

/* カラーピッカーのスタイル調整 */
.controls input[type="color"] {
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    vertical-align: middle;
}

/* ドロップダウンリストのスタイル調整 */
.controls select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    vertical-align: middle;
}

/* 「更新」ボタンのスタイル */
#submit-button {
    padding: 6px 15px;
    border: none;
    background-color: #007bff; /* 青色 */
    color: white;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* ボタンにマウスが乗ったとき */
#submit-button:hover {
    background-color: #0056b3; /* 少し濃い青にする */
}

/* フォントサイズスライダーの色 */
.font-size-label #font-size-slider {
    vertical-align: middle;
    accent-color: #007bff;
}


/* ========= 時計表示エリアのスタイル ========= */

.clock {
    /* 画面内の絶対位置 */
    position: absolute;
    /* 上から50%、左から50%の位置 */
    top: 50%;
    left: 50%;
    /* 自身の大きさの半分だけ左上にずらして、完全な中央配置にする */
    transform: translate(-50%, -50%);
}

/* 時間と日付の共通スタイル */
#clock_time, #clock_date {
    /* 可変フォント用のCSS変数を定義（初期値） */
    --weight: 400;  /* 太さ */
    --grade: 0;     /* 微調整 */
    --slant: 0;     /* 傾き */
    --width: 100;   /* 幅 */
    --roundness: 0; /* 丸み */

    /* 定義した変数を使ってフォントの見た目を指定 */
    font-weight: var(--weight);
    font-variation-settings:
        "wght" var(--weight),
        "GRAD" var(--grade),
        "slnt" var(--slant),
        "wdth" var(--width),
        "ROND" var(--roundness);
    
    /* 数値が変わった時に滑らかにアニメーションさせる */
    transition: font-size 0.3s, font-variation-settings 0.3s, font-weight 0.3s;
}

/* 時間表示の文字サイズ */
#clock_time {
    font-size: 150px;
}

/* 日付表示の文字サイズ */
#clock_date {
    font-size: 30px;
}