/* clock-style.css */

/* 最上位コンテナ：画面上の固定位置とレイアウト */
.clock-container {
    position: fixed; /* 画面上の固定位置に配置 */
    z-index: 999; /* 他の要素より前面に表示 */
    display: flex; /* Flexboxレイアウトを使用 */
    flex-direction: column; /* 要素を縦に並べる */
}

/* デフォルト位置：左上 (天地左右1cm内側へ調整) */
.clock-container.left-top {
    top: 3cm;
    left: 2cm;
    align-items: flex-start; /* 内容物を左上に */
}

/* 中央 */
.clock-container.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center; /* 内容物を中央に */
}

.clock-container.center .datetime-display {
    margin-left: 0; /* 中央揃えなので左マージン不要 */
    text-align: center;
}

/* 右下 (上に1cm、左に5ミリ移動) */
.clock-container.right-bottom {
    bottom: 10px; /* 元の右下からの距離を維持 */
    right: 10px; /* 元の右下からの距離を維持 */
    align-items: flex-end; /* 内容物を右下に */
    flex-direction: column-reverse; /* デジタル表示を上に */
    transform: translate(-1.5cm, -1cm); /* 右に5ミリ、上に-1cm移動 */
}

.clock-container.right-bottom .datetime-display {
    align-self: flex-end; /* 右寄せ */
    margin-left: 0;
    text-align: right;
}

/* 上部中央 */
.clock-container.top-center {
    top: 3.5cm; /* 上からの距離を調整 (例: 10px) */
    left: 50%;
    transform: translateX(-50%);
    align-items: center; /* 必要に応じて内容物を中央揃え */
}

.clock-container.top-center .datetime-display {
    margin-left: 0; /* 中央揃えなので左マージン不要 */
    text-align: center;
}



/* アナログ時計コンテナ */
.analog-clock {
    width: 120px; /* 時計のサイズ */
    height: 120px; /* 時計のサイズ（正円を保つためwidthと同じ） */
    border: 2px solid black; /* 黒い枠線 */
    border-radius: 50%; /* 円形にする */
    background-color: white; /* 背景色 */
    position: relative; /* 内部要素の基準点 */
}

/* 時計の中心の点 */
.clock-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px; /* 中心の点のサイズ */
    height: 6px; /* 中心の点のサイズ */
    background-color: black; /* 中心の点の背景色 */
    border-radius: 50%; /* 円形にする */
    transform: translate(-50%, -50%); /* 中心を合わせる */
    z-index: 2; /* 針より前面に表示 */
}

/* 時計の針の共通スタイル */
.hour-hand,
.minute-hand,
.second-hand {
    position: absolute;
    background-color: black;
    transform-origin: bottom center; /* 回転の中心を針の下端中央に */
    left: 50%; /* 水平方向の中央に配置 */
    transform: translateX(-50%) rotate(0deg); /* 初期回転をリセット */
    border-radius: 2px; /* 針の先端を少し丸く */
    z-index: 1; /* 文字盤より前面に表示 */
}

/* 時針 */
.hour-hand {
    width: 6px; /* 針の太さ */
    height: 30%; /* 針の長さ（時計の半径に対する割合） */
    top: 20%; /* 上からの位置調整 */
}

/* 分針 */
.minute-hand {
    width: 4px; /* 針の太さ */
    height: 40%; /* 針の長さ */
    top: 10%; /* 上からの位置調整 */
}

/* 秒針 */
.second-hand {
    width: 2px; /* 針の太さ */
    height: 45%; /* 針の長さ */
    top: 5%; /* 上からの位置調整 */
    background-color: red; /* 秒針の色 */
}

/* 時計の文字盤 */
.clock-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.clock-face .number {
    position: absolute;
    text-align: center;
    width: auto; /* 数字の幅に合わせて自動調整 */
    height: auto; /* 数字の高さに合わせて自動調整 */
    line-height: normal;
    color: black;
    font-size: 0.8em; /* さらに小さくする場合 */
    user-select: none;
    /* 中心を基準に配置 */
    transform: translate(-50%, -50%) translate(0, -5%); /* 少し上に移動 */
}

/* デジタル日付と時刻表示コンテナ */
.datetime-display {
    font-size: 0.7em; /* フォントサイズ */
    background-color: rgba(255, 255, 255, 0.7); /* 半透明の背景 */
    padding: 4px; /* 内側の余白 */
    border-radius: 3px; /* 角の丸み */
    text-align: left; /* テキストの左寄せ */
    margin-top: 5px; /* アナログ時計との間隔 */
    white-space: nowrap; /* 改行しない */
}

.datetime-display #date {
    margin-right: 5px; /* 日付と時刻の間隔 */
}