/* public/css/main-clock.css */

/* ... (main-clock-container, timezone-selector-container などのスタイルはそのまま) ... */

.main-clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.timezone-selector-container {
  text-align: center;
  width: 100%;
}

#clock {
  width: clamp(250px, 65vmin, 380px);
  height: clamp(250px, 65vmin, 380px);
  margin: 10px auto;
  display: block;
  flex-shrink: 0;
}

.display-settings-toggle-container {
  text-align: center;
  width: 100%;
}

/* ... (ah-sector などのスタイルはそのまま) ... */

/* デジタル表示エリアのコンテナ (index.html の構造に合わせてください) */
/* 例: #main-ah-time と #main-normal-time を含む親コンテナがある場合 */
/* .digital-display-container { */
  /* height: 50px; /* 例えば固定の高さを指定してみる (デバッグ用) */
  /* min-height: 50px; /* または最小高さを指定 */
/* } */