/* ─── Reset & Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }

body {
  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  background: #fff7ed;
  color: #1c1917;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* モバイルブラウザの自動テキストサイズ調整を無効化 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ═══════════════════════════════════════════════
   OVERLAY MODE
   ?overlay=1 でアクセスした際に適用
═══════════════════════════════════════════════ */
html.overlay-mode,
body.overlay-mode {
  background: transparent !important;
  overflow: hidden;
}

body.overlay-mode header,
body.overlay-mode #hero,
body.overlay-mode .settings-col,
body.overlay-mode .clock-actions,
body.overlay-mode .seo-card,
body.overlay-mode footer,
body.overlay-mode #cl-toast {
  display: none !important;
}

body.overlay-mode main {
  padding: 0;
  max-width: none;
}

body.overlay-mode .clock-main-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  padding: 0;
  gap: 0;
}

body.overlay-mode .clock-col {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

body.overlay-mode .clock-preview-outer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* オーバーレイ時のサイズ（vw/vh で OBS ブラウザソースサイズに追従） */
body.overlay-mode #clock-wrap[data-size="sm"] .clock-time { font-size: min(11vw, 20vh); }
body.overlay-mode #clock-wrap[data-size="md"] .clock-time { font-size: min(15vw, 28vh); }
body.overlay-mode #clock-wrap[data-size="lg"] .clock-time { font-size: min(20vw, 36vh); }
body.overlay-mode #clock-wrap[data-size="xl"] .clock-time { font-size: min(26vw, 46vh); }
body.overlay-mode #clock-wrap .clock-date { font-size: min(3.5vw, 6vh); }

/* ─── Header ─────────────────────────────────────── */
header {
  background: #ea580c;
  color: #fff;
  padding: 0 1rem;
  height: 52px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(234,88,12,.35);
}
.header-inner { max-width: 960px; width: 100%; margin: 0 auto; }
.logo { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; }

/* ─── Main ───────────────────────────────────────── */
main { max-width: 960px; width: 100%; margin: 0 auto; padding: 1.5rem 1rem 3rem; flex: 1; }

/* ─── Hero ───────────────────────────────────────── */
.hero { text-align: center; margin-bottom: 1.5rem; }
.hero-icon { font-size: 3rem; margin-bottom: .5rem; }
.hero h1 { font-size: 1.75rem; font-weight: 800; color: #ea580c; margin-bottom: .5rem; }
.description { color: #57534e; font-size: .95rem; line-height: 1.7; }
.hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: .85rem; }
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .75rem;
  background: #ffedd5; color: #9a3412;
  border: 1px solid #fdba74;
  border-radius: 999px;
  font-size: .78rem; font-weight: 700;
}

/* ─── Main layout ────────────────────────────────── */
.clock-main-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}

/* ─── Card ───────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #fed7aa;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(234,88,12,.07);
  margin-bottom: 1rem;
}
.card h2 { font-size: 1.05rem; font-weight: 700; color: #ea580c; margin-bottom: .85rem; }

/* ─── Field ──────────────────────────────────────── */
.field { margin-bottom: .85rem; }
.field:last-child { margin-bottom: 0; }
.field-label { font-size: .82rem; font-weight: 700; color: #44403c; margin-bottom: .4rem; }

/* ─── Style grid ─────────────────────────────────── */
.style-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .45rem;
}
.style-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .5rem .3rem .45rem;
  border: 2px solid #e7e5e4;
  border-radius: 10px;
  background: #fafaf9;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, transform .1s;
}
.style-btn:hover { border-color: #fb923c; transform: scale(1.04); }
.style-btn.active { border-color: #ea580c; }
.style-name { font-size: .72rem; font-weight: 700; color: #57534e; }
.style-btn.active .style-name { color: #ea580c; }

/* Style preview chips */
.style-preview {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  padding: .22rem .4rem;
  border-radius: 5px;
  text-align: center;
  min-width: 44px;
  letter-spacing: .02em;
}
.minimal-preview {
  background: #fff; color: #1c1917;
  border: 1px solid #e7e5e4;
  font-family: system-ui, sans-serif;
}
.neon-preview {
  background: #0d0d0d; color: #00ff88;
  font-family: 'Orbitron', monospace;
  text-shadow: 0 0 6px #00ff88, 0 0 12px #00ff88;
}
.retro-preview {
  background: #1a0f00; color: #ff8c00;
  font-family: 'Orbitron', monospace;
  text-shadow: 0 0 5px #ff8c00;
}
.simple-preview {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-family: system-ui, sans-serif;
}

/* ─── Color row ──────────────────────────────────── */
.color-row { display: flex; align-items: center; gap: .65rem; }
.color-picker {
  width: 44px; height: 38px;
  border: 1.5px solid #e7e5e4; border-radius: 8px;
  cursor: pointer; padding: 2px; background: #fafaf9;
  flex-shrink: 0;
}
.color-presets { display: flex; gap: .3rem; flex-wrap: wrap; }
.color-swatch {
  width: 25px; height: 25px;
  border-radius: 50%;
  border: 2px solid #e7e5e4;
  cursor: pointer;
  transition: transform .1s, border-color .1s;
}
.color-swatch:hover { transform: scale(1.2); border-color: #ea580c; }

/* ─── Option button group ────────────────────────── */
.btn-group { display: flex; flex-wrap: wrap; gap: .35rem; }
.opt-btn {
  padding: .32rem .7rem;
  border: 1.5px solid #e7e5e4;
  border-radius: 8px;
  background: #fafaf9;
  font-size: .80rem; font-weight: 600;
  color: #57534e; cursor: pointer;
  transition: background .12s, border-color .12s;
  font-family: inherit;
}
.opt-btn:hover { background: #fff7ed; border-color: #fb923c; }
.opt-btn.active { background: #fff7ed; border-color: #ea580c; color: #ea580c; }

/* ─── Timezone select ────────────────────────────── */
.sel-tz {
  width: 100%;
  border: 1.5px solid #e7e5e4; border-radius: 9px;
  padding: .6rem .85rem;
  font-size: .88rem; font-family: inherit; color: #1c1917;
  background: #fafaf9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2378716c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.2rem;
  cursor: pointer;
  appearance: none; -webkit-appearance: none; outline: none;
}
.sel-tz:focus { border-color: #ea580c; background-color: #fff; }

/* ─── Toggle row ─────────────────────────────────── */
.toggle-row { display: flex; gap: 1.2rem; }
.toggle-label { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.toggle-label input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: #ea580c; }
.toggle-text { font-size: .84rem; color: #44403c; }

/* ─── Overlay URL card ───────────────────────────── */
.overlay-note { font-size: .82rem; color: #57534e; margin-bottom: .7rem; line-height: 1.6; }
.overlay-url-wrap {
  background: #fafaf9; border: 1.5px solid #e7e5e4;
  border-radius: 9px; padding: .6rem .85rem;
  margin-bottom: .6rem;
  overflow-x: auto;
}
.overlay-url {
  font-size: .72rem; color: #44403c;
  font-family: 'Courier New', monospace;
  word-break: break-all;
  display: block;
  white-space: pre-wrap;
}
.overlay-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }

.obs-guide {
  border: 1.5px solid #e7e5e4; border-radius: 9px; overflow: hidden;
}
.obs-guide summary {
  padding: .5rem .85rem; cursor: pointer;
  font-size: .82rem; font-weight: 700; color: #57534e;
  background: #fafaf9; list-style: none;
}
.obs-guide summary::-webkit-details-marker { display: none; }
.obs-guide summary::after { content: ' ▾'; }
.obs-guide[open] summary::after { content: ' ▴'; }
.obs-steps {
  padding: .7rem .85rem .7rem 1.85rem;
  font-size: .81rem; color: #44403c; line-height: 1.9;
}
.obs-steps li { margin-bottom: .1rem; }
.obs-steps strong { color: #ea580c; }
.inline-code {
  font-family: 'Courier New', monospace;
  font-size: .75rem; background: #f5f5f4;
  padding: .1rem .3rem; border-radius: 3px;
  color: #c2410c;
}

/* ─── Action buttons ─────────────────────────────── */
.btn-action {
  padding: .42rem .95rem;
  border: 1.5px solid #e7e5e4; border-radius: 8px;
  background: #fff; font-size: .82rem; font-weight: 600;
  color: #57534e; cursor: pointer;
  transition: background .12s, border-color .12s;
  font-family: inherit; text-decoration: none;
  display: inline-flex; align-items: center;
}
.btn-action:hover { background: #f5f5f4; border-color: #d6d3d1; }
.btn-action.primary { background: #ea580c; color: #fff; border-color: #ea580c; }
.btn-action.primary:hover { background: #c2410c; }

/* ─── Clock column ───────────────────────────────── */
.clock-col { display: flex; flex-direction: column; gap: .75rem; }

/* ─── Clock preview outer (the "screen" frame) ───── */
.clock-preview-outer {
  border-radius: 14px;
  border: 1.5px solid #e7e5e4;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: 2.5rem 2rem;
  transition: background .3s;
}

/* Checkered to visualize transparent bg */
.clock-preview-outer.show-checker {
  background: repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 0 0 / 20px 20px !important;
}

.clock-actions { display: flex; justify-content: center; gap: .5rem; }

/* ─── Clock wrap ─────────────────────────────────── */
.clock-wrap {
  text-align: center;
  padding: 1.2rem 1.8rem;
  border-radius: 12px;
  transition: background .3s, box-shadow .3s;
  user-select: none;
}

.clock-time {
  display: block;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: font-size .2s, color .3s, text-shadow .3s;
}

.clock-date {
  display: block;
  margin-top: .45rem;
  transition: color .3s;
}

/* ─── Size variants (normal mode) ───────────────── */
/* vw を使わず固定 rem に統一（vw はモバイルでズーム振動を起こすため） */
.clock-wrap[data-size="sm"] .clock-time { font-size: 2.8rem; }
.clock-wrap[data-size="sm"] .clock-date { font-size: .72rem; }
.clock-wrap[data-size="md"] .clock-time { font-size: 4.2rem; }
.clock-wrap[data-size="md"] .clock-date { font-size: .82rem; }
.clock-wrap[data-size="lg"] .clock-time { font-size: 5.8rem; }
.clock-wrap[data-size="lg"] .clock-date { font-size: .92rem; }
.clock-wrap[data-size="xl"] .clock-time { font-size: 7.5rem; }
.clock-wrap[data-size="xl"] .clock-date { font-size: 1rem; }

/* ─── Style: Minimal ─────────────────────────────── */
.clock-wrap[data-style="minimal"] {
  background: #ffffff;
}
.clock-wrap[data-style="minimal"] .clock-time {
  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 900;
  color: var(--clock-color, #1c1917);
  letter-spacing: -0.04em;
}
.clock-wrap[data-style="minimal"] .clock-date {
  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 500;
  color: var(--clock-color, #1c1917);
  opacity: .65;
}

/* ─── Style: Neon ────────────────────────────────── */
.clock-wrap[data-style="neon"] {
  background: #0d0d0d;
}
.clock-wrap[data-style="neon"] .clock-time {
  font-family: 'Orbitron', 'Courier New', monospace;
  font-weight: 700;
  color: var(--clock-color, #00ff88);
  text-shadow:
    0 0 7px  var(--clock-color, #00ff88),
    0 0 18px var(--clock-color, #00ff88),
    0 0 40px var(--clock-color, #00ff88);
  letter-spacing: .05em;
}
.clock-wrap[data-style="neon"] .clock-date {
  font-family: 'Orbitron', monospace;
  font-weight: 400;
  color: var(--clock-color, #00ff88);
  opacity: .6;
  text-shadow: 0 0 5px var(--clock-color, #00ff88);
  letter-spacing: .04em;
}

/* ─── Style: Retro LCD ───────────────────────────── */
.clock-wrap[data-style="retro"] {
  background: #1a0f00;
  border: 2px solid #3d2200;
  box-shadow: inset 0 0 30px rgba(255,140,0,.04);
}
.clock-wrap[data-style="retro"] .clock-time {
  font-family: 'Orbitron', 'Courier New', monospace;
  font-weight: 400;
  color: var(--clock-color, #ff8c00);
  text-shadow:
    0 0 5px  var(--clock-color, #ff8c00),
    0 0 14px rgba(255,140,0,.4);
  letter-spacing: .06em;
}
.clock-wrap[data-style="retro"] .clock-date {
  font-family: 'Orbitron', monospace;
  font-weight: 400;
  color: var(--clock-color, #ff8c00);
  opacity: .55;
  text-shadow: 0 0 4px var(--clock-color, #ff8c00);
  font-size: .8em;
}

/* ─── Style: Simple ──────────────────────────────── */
.clock-wrap[data-style="simple"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 8px 32px rgba(102,126,234,.35);
}
.clock-wrap[data-style="simple"] .clock-time {
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 900;
  color: var(--clock-color, #ffffff);
  letter-spacing: -0.03em;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.clock-wrap[data-style="simple"] .clock-date {
  font-family: system-ui, sans-serif;
  font-weight: 500;
  color: var(--clock-color, #ffffff);
  opacity: .8;
}

/* ─── Fullscreen (ネイティブ Fullscreen API) ────── */
#clock-preview-outer:fullscreen,
#clock-preview-outer:-webkit-full-screen {
  border-radius: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ※ フォントサイズは JS (updateFsClockSize) が動的に設定するため CSS では指定しない */

/* ─── CSS Fullscreen（モバイル / iOS Safari 用フォールバック） */
#clock-preview-outer.css-fullscreen {
  position: fixed;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 9000;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.has-fullscreen { overflow: hidden; }

/* 閉じるボタン（CSS フルスクリーン時のみ表示） */
.btn-fs-close {
  position: fixed;
  top: .9rem; right: .9rem;
  z-index: 9999;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 10px;
  padding: .5rem 1rem;
  font-size: .88rem; font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .15s;
}
.btn-fs-close:hover { background: rgba(0,0,0,.75); }

/* ─── Scene grid ─────────────────────────────────── */
.seo-card { margin-bottom: 1rem; }
.scene-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-top: .5rem;
}
.scene-item {
  background: #fff7ed; border: 1.5px solid #fed7aa;
  border-radius: 12px; padding: .9rem .85rem;
}
.scene-item .scene-icon { font-size: 1.5rem; margin-bottom: .35rem; }
.scene-item strong { display: block; font-size: .83rem; font-weight: 700; color: #9a3412; margin-bottom: .25rem; }
.scene-item p { font-size: .76rem; color: #78716c; line-height: 1.55; }

/* ─── FAQ ────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; }
.faq-item { padding: .9rem 0; border-bottom: 1px solid #f0f0f0; }
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-q { font-size: .9rem; font-weight: 700; color: #ea580c; margin-bottom: .35rem; }
.faq-a { font-size: .85rem; color: #555; line-height: 1.75; }
.faq-a code { font-family: 'Courier New', monospace; background: #f5f5f4; padding: .1rem .3rem; border-radius: 3px; font-size: .8rem; color: #c2410c; }

/* ─── Related tools ──────────────────────────────── */
.related-tools { display: flex; flex-direction: column; gap: .55rem; }
.related-tool-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem;
  border: 1.5px solid #fed7aa; border-radius: 10px;
  background: #fff; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.related-tool-item:hover { border-color: #fb923c; box-shadow: 0 2px 6px rgba(234,88,12,.1); }
.related-tool-icon { font-size: 1.4rem; flex-shrink: 0; }
.related-tool-name { font-size: .85rem; font-weight: 700; color: #ea580c; margin-bottom: .1rem; }
.related-tool-desc { font-size: .76rem; color: #78716c; }

/* ─── Tips grid ───────────────────────────────────── */
.tips-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.tip-item { display: flex; gap: .65rem; }
.tip-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .05rem; }
.tip-text strong { display: block; font-size: .9rem; font-weight: 700; color: #292524; margin-bottom: .3rem; }
.tip-text p { font-size: .84rem; color: #57534e; line-height: 1.75; margin: 0; }

/* ─── Amazon ─────────────────────────────────────── */
.amazon-card h2 { margin-bottom: .25rem; }
.amazon-note { font-size: .82rem; color: #a8a29e; margin-bottom: 1rem; }
.amazon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.amazon-item {
  display: block;
  border: 1.5px solid #e7e5e4; border-radius: 10px;
  padding: .9rem; text-decoration: none; color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .1s;
}
.amazon-item:hover {
  border-color: #FF9900;
  box-shadow: 0 2px 8px rgba(255,153,0,.18);
  transform: translateY(-1px);
}
.amazon-item-icon { font-size: 1.7rem; margin-bottom: .35rem; }
.amazon-item-name { font-size: .88rem; font-weight: 700; margin-bottom: .2rem; color: #1c1917; }
.amazon-item-desc { font-size: .76rem; color: #78716c; line-height: 1.5; margin-bottom: .45rem; }
.amazon-item-link { font-size: .78rem; color: #FF9900; font-weight: 700; }
.amazon-notice { font-size: .73rem; color: #a8a29e; margin-top: .3rem; }

/* ─── Toast ───────────────────────────────────────── */
#cl-toast {
  position: fixed; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(1rem);
  background: #1c1917; color: #fff;
  padding: .6rem 1.2rem; border-radius: 8px;
  font-size: .85rem; font-weight: 600;
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
#cl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Footer ──────────────────────────────────────── */
footer {
  text-align: center; padding: 1.5rem 1rem;
  font-size: .82rem; color: #a8a29e;
  border-top: 1px solid #e7e5e4; margin-top: auto;
}
footer a { color: #ea580c; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer p + p { margin-top: .3rem; }

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 760px) {
  .clock-main-layout { grid-template-columns: 1fr; }
  .scene-grid { grid-template-columns: repeat(2, 1fr); }
  .style-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 1.4rem; }
  .scene-grid { grid-template-columns: 1fr; }
  .style-grid { grid-template-columns: repeat(2, 1fr); }
  .clock-wrap[data-size="lg"] .clock-time { font-size: 3.8rem; }
  .clock-wrap[data-size="xl"] .clock-time { font-size: 5rem; }
  .amazon-grid { grid-template-columns: 1fr; }
}