/* ルート要素でCSS変数を定義。JavaScriptからこれらの値を変更してデザインを切り替えます。 */
:root {
    /* 時計の全体のサイズをビューポートの小さい方の95%または最大1000pxに制限 */
    /* これにより、より大きく表示され、ブラウザサイズに合わせて柔軟に変化します */
    --clock-size: min(95vmin, 1000px); 
    --clock-background: #f0f0f0; /* 盤面の背景色 */
    --hand-color-hour: #333; /* 時針の色 */
    --hand-color-minute: #555; /* 分針の色 */
    --hand-color-second: #f00; /* 秒針の色 */
    --text-color: #333; /* 日付・タイムゾーンの文字色（平日のデフォルト） */
    --border-color: #ccc; /* 時計のボーダー色 */
    --center-dot-color: #333; /* 中央の点の色 */
    --marker-color: #666; /* 目盛りの色 (主に分刻み目盛り用) */
    --number-color: #333; /* 数字の色 */
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 上下均等に配置 */
    align-items: center;
    min-height: 100vh; /* 少なくともビューポートの高さにする */
    margin: 0;
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: #e0e0e0;
    color: #333;
    overflow: hidden; /* スクロールバーが表示されないように */
}

main {
    flex-grow: 1; /* 残りのスペースを埋める */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px; /* 余白 */
    box-sizing: border-box;
}

/* 時計全体のコンテナ */
.clock-container {
    width: var(--clock-size);
    height: var(--clock-size);
    border-radius: 50%; /* 円形にする */
    background-color: var(--clock-background);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.5); /* 影と内側の光 */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid var(--border-color); /* 時計の縁 */
    transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out; /* デザイン変更時のトランジション */
}

/* 時計の盤面 */
.clock-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* 中央の点 */
.center-dot {
    width: calc(var(--clock-size) * 0.05); /* サイズを可変に */
    height: calc(var(--clock-size) * 0.05);
    background-color: var(--center-dot-color);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* 針より手前に表示 */
}

/* 針の共通スタイル */
.hand {
    position: absolute;
    left: 50%; /* 中央に配置 */
    transform-origin: bottom center; /* 針の根元を中心に回転させる */
    background-color: #333; /* デフォルトの色 */
    border-radius: 50%;
    z-index: 5; /* 中央の点より奥、他の針より手前に配置 */
}

/* 時針 */
.hour {
    width: calc(var(--clock-size) * 0.025);
    height: calc(var(--clock-size) * 0.25);
    top: calc(50% - var(--clock-size) * 0.25);
    margin-left: calc(-1 * var(--clock-size) * 0.0125); /* widthの半分 */
    background-color: var(--hand-color-hour);
    z-index: 7;
}

/* 分針 */
.minute {
    width: calc(var(--clock-size) * 0.018);
    height: calc(var(--clock-size) * 0.35);
    top: calc(50% - var(--clock-size) * 0.35);
    margin-left: calc(-1 * var(--clock-size) * 0.009); /* widthの半分 */
    background-color: var(--hand-color-minute);
    z-index: 6;
}

/* 秒針 */
.second {
    width: calc(var(--clock-size) * 0.005);
    height: calc(var(--clock-size) * 0.4);
    top: calc(50% - var(--clock-size) * 0.4);
    margin-left: calc(-1 * var(--clock-size) * 0.0025); /* widthの半分 */
    background-color: var(--hand-color-second);
    z-index: 8; /* 最も手前に表示 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 秒針にわずかな影 */
}

/* 日付とタイムゾーンの表示エリア */
.date-timezone {
    position: absolute;
    /* ここを変更: 盤面の中心より上側に配置 */
    top: 30%; /* 以前は 65% で下側でした */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    /* colorは各divで設定するためここでは削除 */
    font-size: calc(var(--clock-size) * 0.05); /* サイズに応じてフォントサイズも可変に */
    font-weight: bold;
    line-height: 1.4;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); /* 文字にわずかな影 */
    z-index: 9; /* 針より手前に */
}

/* 日付表示部分のスタイル */
#currentDate {
    color: var(--text-color); /* 平日のデフォルト色 */
    transition: color 0.3s ease; /* 色変更を滑らかに */
}

/* 土曜日の色 */
#currentDate.saturday {
    color: #1a73e8; /* 鮮やかな青 */
}

/* 日曜日の色 */
#currentDate.sunday {
    color: #d93025; /* 鮮やかな赤 */
}

/* タイムゾーン表示部分のスタイル */
#currentTimezone {
    color: var(--text-color); /* タイムゾーンは盤面デザインの色を継承 */
}


/* 数字のスタイル */
.number {
    position: absolute;
    color: var(--number-color);
    font-size: calc(var(--clock-size) * 0.08); /* サイズに応じてフォントサイズも可変に */
    font-weight: bold;
    text-align: center;
    /* transform: translate(-50%, -50%); はJavaScriptで設定 */
    z-index: 4;
    user-select: none; /* 数字を選択できないように */
}

/* 分刻み目盛りのスタイル */
.minute-marker {
    position: absolute;
    width: calc(var(--clock-size) * 0.008); /* 太さ */
    height: calc(var(--clock-size) * 0.02); /* 長さ */
    background-color: var(--marker-color);
    border-radius: 1px;
    /* transform: translate(-50%, -50%) rotate(${angle}deg); はJavaScriptで設定 */
    z-index: 3; /* 数字より奥に */
    user-select: none;
}

/* 5分ごとの目盛り（少し長くする） */
/* nth-child(5n+1)は0,5,10,15...分目盛りに相当 */
/* JavaScriptで0〜59まで生成しているので、0分は1番目の要素 */
.minute-marker:nth-child(5n + 1) { 
    height: calc(var(--clock-size) * 0.04); /* 長くする */
    width: calc(var(--clock-size) * 0.012); /* 太くする */
}


/* フッター */
footer {
    width: 100%;
    padding: 25px 20px;
    text-align: center;
    background-color: #333;
    color: #eee;
    font-size: 0.8em;
    box-sizing: border-box; /* paddingを含めてwidthを100%にする */
    border-top: 3px solid #555;
}

.company-info p,
.copyright p {
    margin: 5px 0;
}

.company-info {
    margin-bottom: 10px;
    color: #bbb;
}

.copyright {
    font-size: 0.75em;
    color: #999;
}

/* レスポンシブ対応 (基本の--clock-sizeがすでにレスポンシブなので、細かい調整のみ) */
@media (max-width: 600px) {
    footer {
        padding: 15px 10px;
        font-size: 0.7em;
    }
}