:root {
      font-family: system-ui, -apple-system, BlinkMacSystemFont;

      /* 基本スケール（PC想定） */
      --clock-base-size: 220;
      --clock-scale: 2.2;

      /* 画面に応じて時計を可変に（スマホ縦でも収まりやすく） */
      --clock-size: min(
        82vw,
        48vh,
        calc(var(--clock-base-size) * var(--clock-scale) * 1px)
      );
    }

    * { box-sizing: border-box; }

    html, body { height: 100%; }

    body {
      margin: 0;

      /* スマホのアドレスバー等で 100vh がズレる問題に対応 */
      min-height: 100vh;
      min-height: 100svh;
      min-height: 100dvh;

      display: flex;
      flex-direction: column; /* ★追加：フッターを下に押し出すため縦並び */
      background: #e5e5e5;
      padding: 16px;
    }

    .app {
      position: relative;
      background: #fff;
      padding: 60px 50px 40px;
      border-radius: 30px;
      width: 580px;
      max-width: 100%;
      text-align: center;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
      margin: auto;

      /* 端末での安全領域（ノッチ等） */
      padding-left: calc(50px + env(safe-area-inset-left));
      padding-right: calc(50px + env(safe-area-inset-right));
    }

    /* ★追加：フッターを常に下部へ */
    footer {
      margin-top: auto;
      padding-top: 12px; /* 余白が不要なら削除OK */
    }

    /* ======= ヘッダー（日付・時刻） ======= */
    .header {
      position: absolute;
      top: 18px;
      left: 18px;
      right: 18px;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      pointer-events: none; /* 触っても邪魔にならない */
    }

    .current-date {
      font-size: 2.8rem;
      font-weight: 600;
      color: #000;
      letter-spacing: 0.01em;
      line-height: 1;
      white-space: nowrap;
    }

    .current-time {
      font-size: 2.8rem;
      font-weight: 600;
      color: #000;
      letter-spacing: 0.08em;
      line-height: 1;
      white-space: nowrap;
    }

    .colon {
      display: inline-block;
      width: 0.6em;
      text-align: center;
      transition: opacity 0.15s linear;
    }

    /* ▼ 時計を少し下へ */
    .clock-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 37px;
      margin-bottom: 30px;
    }

    .clock {
      position: relative;
      width: var(--clock-size);
      height: var(--clock-size);
      border-radius: 50%;
      border: 10px solid #d32f2f;
      background: radial-gradient(circle, #fff 0%, #fafafa 70%, #f0f0f0 100%);
      box-shadow: inset 0 0 15px rgba(0,0,0,0.25);
    }

    .mark-0-sec {
      position: absolute;
      top: 0;
      left: 50%;
      width: 0;
      height: 100%;
    }

    .mark-0-sec::before {
      content: "";
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #333;
      left: 50%;
      transform: translateX(-50%);
      top: 10px;
    }

    .hand-second {
      position: absolute;
      width: 4px;
      height: 45%;
      background: #1565c0;
      top: 5%;
      left: 50%;
      transform-origin: 50% 100%;
      transform: translateX(-50%) rotate(0deg);
      z-index: 10;
    }

    .center-dot {
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #000;
      border: 2px solid #1565c0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 20;
    }

    .counter {
      font-size: 4.4rem;
      margin: 10px 0 25px;
    }

    button {
      border: none;
      cursor: pointer;
      padding: 12px 32px;
      background: #d32f2f;
      color: #fff;
      border-radius: 999px;
      font-size: 1.1rem;

      /* スマホで押しやすく */
      min-height: 48px;
      min-width: 160px;
      touch-action: manipulation;
    }

    button.run { background: #1976d2; }

    /* ======= ここからスマホ最適化 ======= */
    @media (max-width: 600px) {
      body { padding: 10px; }

      .app {
        width: 100%;
        border-radius: 22px;

        /* スマホは余白を詰めて表示領域を確保 */
        padding: 92px 16px 22px;
        padding-left: calc(16px + env(safe-area-inset-left));
        padding-right: calc(16px + env(safe-area-inset-right));
      }

      /* 日付/時刻が重ならないように2段化 */
      .header {
        top: 12px;
        left: 12px;
        right: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      .current-date,
      .current-time {
        font-size: 2.0rem;
      }

      .clock-wrapper {
        margin-top: 18px;
        margin-bottom: 18px;
      }

      .counter {
        font-size: 3.0rem;
        margin: 6px 0 16px;
      }

      button {
        width: 100%;
        min-width: 0;
        font-size: 1.05rem;
      }

      :root {
        /* スマホでは時計が大きすぎないよう調整 */
        --clock-size: min(88vw, 40vh, 340px);
      }
    }

/* ===== 共通固定フッター ===== */
:root {
  --sakurayama-footer-height: 56px;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--sakurayama-footer-height) + 14px) !important;
  box-sizing: border-box;
}

.site-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2147483000 !important;
  width: 100% !important;
  min-height: var(--sakurayama-footer-height) !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-align: center !important;
  background: rgba(248, 251, 255, 0.97) !important;
  border-top: 1px solid rgba(21, 101, 192, 0.28) !important;
  box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.10) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-footer .sakurayama-copyright {
  margin: 0 !important;
  color: #1565c0 !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.site-footer .sakurayama-copyright a {
  color: #1565c0 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.site-footer .sakurayama-copyright a:hover,
.site-footer .sakurayama-copyright a:focus-visible {
  color: #0d47a1 !important;
  text-decoration: underline !important;
}

@media (max-width: 480px) {
  :root {
    --sakurayama-footer-height: 52px;
  }
  .site-footer .sakurayama-copyright {
    font-size: 0.94rem !important;
  }
}

@media print {
  body {
    padding-bottom: 0 !important;
  }
  .site-footer {
    display: none !important;
  }
}