/* ============================================================
   認知サポートアナログ時計 v1.1.0
   修正: :root のCSS変数を .analog-clock-wrap 内の --ac- 名に変更
         （Cocoonテーマや他プラグインの変数上書きを防止）
   修正: グローバルリセット *{margin:0...} を削除し、
         .analog-clock-wrap 内だけにスコープ化
         （サイト全体のレイアウト崩れの原因だったため）
   修正: 全セレクタを .analog-clock-wrap 配下 + ac- プレフィックスに統一
   修正: Google Fontsに依存しないローカルフォントスタックへ変更
   ============================================================ */

.analog-clock-wrap {
  --ac-base:#FFFFFF; --ac-base-dark:#F0F2F5;
  --ac-main:#1e3a5f; --ac-main-light:#2d5a8f;
  --ac-accent:#d4af37; --ac-accent-light:#f4cf5f;
  --ac-text:#2C3E50; --ac-text-light:#7F8C8D; --ac-border:#E8E8E8;
  --ac-shadow:0 4px 20px rgba(30,58,95,0.12);
  --ac-font:'M PLUS Rounded 1c','BIZ UDGothic','Hiragino Maru Gothic ProN','Yu Gothic',sans-serif;
}

/* 修正: リセットをアプリ内だけに限定（テーマ全体を壊さない） */
.analog-clock-wrap,
.analog-clock-wrap * {
  margin:0; padding:0; box-sizing:border-box;
}

/* 修正: このアプリは header/footer/sidebar が無い「Blank Page」専用テンプレートで
   使われている。ページには他のコンテンツが無いため、中身の高さ(例:555px)で
   終わると、ブラウザウィンドウの余り部分がただの白い背景として見えてしまう。
   → html/body/.analog-clock-wrap を画面いっぱい(100vh)に広げ、
     アプリ自身のグラデーション背景で画面全体を埋める。 */
html, body {
  height: 100%;
  margin: 0;
}
body:has(.analog-clock-wrap) {
  background: linear-gradient(135deg,#fff 0%,#F8F9FA 50%,#F0F2F5 100%);
}

.analog-clock-wrap {
  min-height: 100vh; /* 修正: 内容が短くても画面いっぱいに背景を広げる。内容が長ければ自動で伸びる(min-heightなので上限なし) */
}

.analog-clock-wrap{
  background:linear-gradient(135deg,#fff 0%,#F8F9FA 50%,#F0F2F5 100%);
  font-family:var(--ac-font);
  overflow-y:auto;
  padding:24px 16px 110px; /* 修正: 操作パネルを下部に移動したためpaddingを上下逆転 */
}

/* 全画面エリア */
.analog-clock-wrap #ac-playArea{
  position:relative;
}
#ac-playArea:fullscreen{
  background:linear-gradient(135deg,#fff 0%,#F8F9FA 50%,#F0F2F5 100%);
  padding:24px 16px 110px; /* 修正: 下部バーに合わせてpadding調整 */
  overflow:auto;
}

/* 拡大縮小UI（全画面のときだけ表示） */
.analog-clock-wrap .ac-zoom-ui{display:none !important;} /* 修正: Cocoon干渉対策で!important */
#ac-playArea:fullscreen .ac-zoom-ui{
  display:flex !important;
  position:fixed;
  bottom:16px; left:50%; transform:translateX(-50%); /* 修正: 右上→下部中央（通常モードの操作パネルと統一感を持たせる） */
  z-index:2147483647;
  gap:8px;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(30,58,95,.15);
  box-shadow:0 8px 24px rgba(30,58,95,.18);
  backdrop-filter:blur(6px);
  align-items:center;
  flex-wrap:wrap; justify-content:center; max-width:96vw; /* 修正: 中央寄せ後、狭い画面でボタンがはみ出さないよう折り返し許可 */
}
.analog-clock-wrap .ac-zoom-ui .ac-zlabel{
  display:flex; align-items:center; justify-content:center;
  min-width:56px; padding:8px 10px;
  border-radius:10px; border:1.5px solid var(--ac-border);
  background:#fff; font-weight:900; font-size:13px;
  color:var(--ac-main);
}
.analog-clock-wrap .ac-zoom-ui button{
  padding:8px 14px; border-radius:10px;
  border:2px solid var(--ac-main); background:#fff;
  color:var(--ac-main); font-weight:900; font-size:15px;
  cursor:pointer;
}
.analog-clock-wrap .ac-zoom-ui button:hover{background:var(--ac-main);color:#fff;}
.analog-clock-wrap .ac-zoom-ui button:active{transform:translateY(1px);}
.analog-clock-wrap .ac-zoom-sep{
  width:1.5px; align-self:stretch;
  background:rgba(30,58,95,0.15); border-radius:2px;
  margin:0 2px;
}

/* 操作パネル（下部固定） */
.analog-clock-wrap .ac-top-bar{
  position:fixed; bottom:12px; left:50%; transform:translateX(-50%); /* 修正: top→bottom（下部固定に変更） */
  z-index:9999; display:flex; gap:10px; align-items:center;
  background:rgba(248,249,250,0.92);
  padding:8px 16px; border-radius:20px;
  box-shadow:0 2px 12px rgba(30,58,95,0.15);
  backdrop-filter:blur(6px);
  flex-wrap:wrap; justify-content:center; /* 修正: タブレット縦持ちでボタンがはみ出さないよう折返し許可 */
  max-width:96vw;
}
.analog-clock-wrap .ac-add-btn{
  padding:10px 24px;
  background:linear-gradient(135deg,var(--ac-main-light),var(--ac-main));
  color:#fff; border:none; border-radius:16px;
  font-family:var(--ac-font);
  font-size:14px; font-weight:900; letter-spacing:0.15em;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(30,58,95,0.35);
  transition:all 0.25s; white-space:nowrap;
}
.analog-clock-wrap .ac-add-btn:hover{box-shadow:0 8px 20px rgba(30,58,95,0.4);}
.analog-clock-wrap .ac-add-btn:disabled{background:#aaa;box-shadow:none;cursor:not-allowed;}
.analog-clock-wrap .ac-fs-btn{
  display:inline-block; padding:10px 18px;
  background:#fff; color:var(--ac-main);
  border:2px solid var(--ac-main); border-radius:16px;
  font-family:var(--ac-font);
  font-size:14px; font-weight:900; letter-spacing:0.1em;
  cursor:pointer; white-space:nowrap;
  box-shadow:0 4px 14px rgba(30,58,95,0.15);
  transition:all 0.2s;
}
.analog-clock-wrap .ac-fs-btn:hover{background:var(--ac-main);color:#fff;}

/* トグルスイッチ */
.analog-clock-wrap .ac-toggle-wrap{
  display:flex; align-items:center; gap:7px;
  font-family:var(--ac-font);
  font-size:13px; font-weight:900; color:var(--ac-main);
  cursor:pointer; user-select:none; white-space:nowrap;
}
.analog-clock-wrap .ac-toggle-track{
  position:relative; width:44px; height:24px;
  background:#ccc; border-radius:12px;
  transition:background 0.25s;
  flex-shrink:0;
}
.analog-clock-wrap .ac-toggle-track.on{ background:var(--ac-main); }
.analog-clock-wrap .ac-toggle-thumb{
  position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
  transition:transform 0.25s;
}
.analog-clock-wrap .ac-toggle-track.on .ac-toggle-thumb{ transform:translateX(20px); }

.analog-clock-wrap .ac-fun-btn{
  display:inline-block;
  padding:10px 20px;
  background:#fff;
  color:var(--ac-main); border:2.5px solid var(--ac-main); border-radius:16px;
  font-family:var(--ac-font);
  font-size:14px; font-weight:900; letter-spacing:0.1em;
  cursor:pointer; white-space:nowrap;
  box-shadow:0 4px 14px rgba(30,58,95,0.15);
  transition:background 0.2s, color 0.2s;
}
.analog-clock-wrap .ac-fun-btn.mode-10{
  background:var(--ac-main); color:#fff;
  border-color:var(--ac-main);
}
.analog-clock-wrap .ac-fun-btn.mode-all{
  background:var(--ac-accent); color:var(--ac-main);
  border-color:var(--ac-accent);
}
.analog-clock-wrap .ac-fun-btn.mode-off{
  background:#888; color:#fff;
  border-color:#888;
}

.analog-clock-wrap #ac-clockGrid{
  display:flex; flex-wrap:wrap; gap:24px;
  justify-content:center; align-items:flex-start;
  transition:all 0.4s;
  margin-top:16px;
}

.analog-clock-wrap .ac-clock-unit{
  display:flex; flex-direction:column; align-items:center;
  gap:0;
  animation:ac-fadeIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
/* 修正: keyframes名にも ac- プレフィックス（他プラグインとの衝突防止） */
@keyframes ac-fadeIn{from{opacity:0;transform:scale(0.75)}to{opacity:1;transform:scale(1)}}

/* clock-outer: サイズはJS側でscaleプロパティで制御 */
.analog-clock-wrap .ac-clock-outer{
  position:relative;
  width:460px; height:460px; /* 修正: 360→460px（時計を大きく表示） */
  display:flex; align-items:center; justify-content:center;
  margin-bottom:0;
  transform-origin:top center;
  transition:transform 0.45s cubic-bezier(0.34,1.2,0.64,1);
}
.analog-clock-wrap .ac-clock-panel{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:var(--ac-base);
  border:3px solid var(--ac-border); border-radius:50%;
  box-shadow:var(--ac-shadow), 0 0 0 6px rgba(30,58,95,0.04);
  width:450px; height:450px; /* 修正: 350→450px（時計を大きく表示） */
  display:flex; align-items:center; justify-content:center;
}
.analog-clock-wrap .ac-clock-canvas{display:block;border-radius:50%;cursor:grab;max-width:none;} /* 修正: Cocoonのimg/canvas max-width:100%対策 */
.analog-clock-wrap .ac-clock-canvas:active{cursor:grabbing;}

/* デジタルパネル全体：枠 */
.analog-clock-wrap .ac-digital-panel{
  display:flex; align-items:stretch;
  border:2.5px solid var(--ac-accent); border-radius:16px;
  overflow:hidden;
  box-shadow:var(--ac-shadow); margin-bottom:0;
  background:var(--ac-base);
}
/* 左：ごぜん/ごご ボタン */
.analog-clock-wrap .ac-ampm-btn{
  display:flex; align-items:center; justify-content:center;
  padding:6px 10px; min-width:48px;
  background:var(--ac-main); color:#fff;
  font-family:var(--ac-font);
  font-size:13px; font-weight:900; letter-spacing:0.05em;
  cursor:pointer; user-select:none; border:none;
  border-right:2px solid var(--ac-accent);
  transition:background 0.2s;
  flex-shrink:0;
}
.analog-clock-wrap .ac-ampm-btn:active{background:var(--ac-main-light);}
/* 中央：時刻表示（タップで隠す） */
.analog-clock-wrap .ac-time-wrap{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:6px 12px; cursor:pointer; user-select:none; position:relative;
}
.analog-clock-wrap .ac-time-text{
  font-family:var(--ac-font); font-size:28px; font-weight:900;
  color:var(--ac-main); letter-spacing:0.02em; white-space:nowrap;
}
.analog-clock-wrap .ac-digital-panel.hidden-mode .ac-time-text{
  color:transparent; position:relative;
}
.analog-clock-wrap .ac-digital-panel.hidden-mode .ac-time-text::after{
  content:'?じ??ふん';
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--ac-font); font-size:28px; font-weight:900;
  color:#bbb; white-space:nowrap;
}
/* 右：削除ボタン */
.analog-clock-wrap .ac-del-btn{
  display:flex; align-items:center; justify-content:center;
  padding:6px 10px; min-width:38px;
  background:none; border:none; border-left:2px solid var(--ac-accent);
  color:#e02020; font-size:16px; font-weight:900;
  cursor:pointer; user-select:none; flex-shrink:0;
  transition:background 0.2s;
}
.analog-clock-wrap .ac-del-btn:hover{background:#fff0f0;}
.analog-clock-wrap .ac-del-btn:active{background:#ffe0e0;}