/* 以前の334clock ( ..tools/334clock-old1 )をGeminiにより改訂。 */

/* body全体のスタイル */
body {
  font-family: sans-serif; /* 時計以外の基本フォント */
  background-color: #f0f4f8;
  color: #333;
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* アプリ全体のコンテナ */
#app {
  text-align: center;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
}

/* アプリタイトル */
#title {
  color: #ffffff;
  background-color: #4CAF50; /* 元の色に近い緑 */
  border-radius: 25px;
  padding: 10px 20px;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 25px;
}

/* 時計表示部分のスタイル */
#clock {
  /* ここでWebフォントのRoboto Mono（等幅フォント）を指定 */
  font-family: 'Roboto Mono', monospace;
  font-size: clamp(2.5rem, 10vw, 4rem); /* 画面サイズに応じてフォントサイズを調整 */
  color: #2c3e50;
  background-color: #ecf0f1;
  padding: 15px;
  border-radius: 10px;
  letter-spacing: 2px; /* 文字間を少し広げて見やすくする */
}

/* 調整ミリ秒の表示 */
#clock2 {
  font-size: 16px;
  color: #7f8c8d;
  margin-top: 15px;
  margin-bottom: 30px;
}

/* ボタンの共通スタイル */
.button {
    display: inline-block;
    text-decoration: none;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    margin: 5px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    min-width: 120px;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* ボタンの色の設定 */
.button.plus { background-color: #3498db; } /* 青色 */
.button.minus { background-color: #e74c3c; } /* 赤色 */
.button.plus-large { background-color: #2980b9; }
.button.minus-large { background-color: #c0392b; }
.button.plus-small { background-color: #5dade2; }
.button.minus-small { background-color: #ec7063; }

/* ボタンのコンテナ */
.button-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* ボタンの行間のスペース */
}
.button-row {
    display: flex;
    justify-content: center;
    gap: 10px; /* ボタン間のスペース */
}