:root{
  --scjp-fg:#111;
  --scjp-bg:#ffffff;
  --scjp-glass:blur(10px);
  --scjp-font: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif;
  --scjp-clock-size: clamp(4rem, 13vw, 8rem);
  --scjp-accent: #6366f1;
  --scjp-card-bg: #ffffff;
  --scjp-card-bd: #e5e7eb;
  --scjp-card-hover: #f8fafc;
  --scjp-muted: #6b7280;
  --scjp-line: #e5e7eb;
  --scjp-focus: #a5b4fc;
  --scjp-shadow: 0 8px 24px rgba(2,6,23,.08), 0 2px 8px rgba(2,6,23,.05);
}

html.scjp-dark { --scjp-fg:#e6f1ff; --scjp-bg:#0b1220; }
html.scjp-oled { --scjp-fg:#ffffff; --scjp-bg:#000000; }

.scjp-settings{
  margin:12px auto; padding:16px; max-width:980px;
  border:1px solid var(--scjp-card-bd); border-radius:16px; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.scjp-preview{
  display:flex; justify-content:center; align-items:center;
  padding:14px; border:1px dashed var(--scjp-line); border-radius:14px;
  background:var(--scjp-bg); color: var(--scjp-fg);
  min-width:0;
}

@supports (container-type: inline-size){
  .scjp-preview{ container-type: inline-size; }
  .scjp-preview .scjp-clock{

    font-size: clamp(4rem, 24cqw, 9rem);
  }
}

.scjp-card{
  background:var(--scjp-card-bg);
  border:1px solid var(--scjp-card-bd);
  border-radius:16px;
  box-shadow: var(--scjp-shadow);
  padding:12px;
  min-width:0;
}
.scjp-card:hover{ background:var(--scjp-card-hover); }

.scjp-weather{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.scjp-w-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.scjp-w-place{ font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scjp-w-main{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.scjp-w-icon{ font-size:28px; line-height:1; }
.scjp-w-tempwrap{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.scjp-w-temp{ font-size:22px; font-weight:700; }
.scjp-w-unit{ font-size:14px; margin-left:2px; opacity:.8; }
.scjp-w-text{ font-size:13px; color:#374151; }
.scjp-w-foot{ color:var(--scjp-muted); }
.scjp-w-foot small{ font-size:12px; }
.scjp-w-msg{ font-size:12px; color:var(--scjp-muted); min-height:1em; }

.scjp-w-form{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:8px;
}

.scjp-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
  margin-top:14px;
}

.scjp-group{ display:grid; grid-template-columns: 1fr; gap:8px; }
.scjp-group__title{
  font-weight:800; font-size:13px; color:#111827;
  padding:6px 8px; border-radius:10px; background:#eef2ff;
  border:1px solid #c7d2fe;
}

.scjp-field{
  display:grid; grid-template-columns: 120px 1fr;
  align-items:center; gap:8px; padding:8px 10px;
  border:1px solid var(--scjp-line); border-radius:12px; background:#f9fafb;
  font-size:14px; min-width:0;
}
.scjp-field > span{ color:#374151; font-weight:600; }

.scjp-field select,
.scjp-field input[type="text"],
.scjp-field input:not([type]),
.scjp-field input[type="color"]{
  width:100%; min-width:0; box-sizing:border-box;
  padding:8px 10px; line-height:1.2;
  border:1px solid var(--scjp-card-bd); border-radius:10px;
  background:#fff; font-size:16px;
  -webkit-appearance: none; appearance: none;
  outline:none;
}
.scjp-field input[type="color"]{ height:38px; padding:0; }

.scjp-field input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 36px;
  background: transparent;
  border: none;
}
.scjp-field input[type="range"]::-webkit-slider-runnable-track{
  height: 4px; border-radius: 9999px; background: #e5e7eb;
}
.scjp-field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 9999px; background: var(--scjp-accent);
  margin-top: -6px; border: 0;
}
.scjp-field input[type="range"]::-moz-range-track{
  height: 4px; border-radius: 9999px; background: #e5e7eb;
}
.scjp-field input[type="range"]::-moz-range-thumb{
  width: 16px; height: 16px; border-radius: 9999px; background: var(--scjp-accent);
  border: 0;
}

.scjp-field select:focus,
.scjp-field input:focus{
  box-shadow: 0 0 0 3px var(--scjp-focus);
  border-color: var(--scjp-accent);
}

.scjp-clock{
  font-family: var(--scjp-font);
  font-size: var(--scjp-clock-size); /* フォールバック用（モーダルや非対応ブラウザ） */
  color:var(--scjp-fg);
  letter-spacing:.06em; line-height:1.05; text-align:center; width:100%;
}
.scjp-clock--modal{ text-shadow:0 8px 26px rgba(0,0,0,.25); }

html.scjp-dark .scjp-backdrop{
  background: radial-gradient(120% 100% at 50% 50%,
    rgba(17,24,39,0.92) 0%,
    rgba(11,18,32,0.96) 60%,
    rgba(6,10,18,0.98) 100%);
  backdrop-filter: blur(10px) saturate(1.08);
}
html.scjp-dark .scjp-clock--modal{
  text-shadow: 0 10px 28px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.03);
}

html.scjp-oled .scjp-backdrop{ background:#000000; backdrop-filter:none; }
html.scjp-oled .scjp-clock--modal{
  text-shadow: 0 0 18px rgba(0,255,170,.70),
               0 0 36px rgba(0,255,170,.45),
               0 0 54px rgba(0,255,170,.25);
  letter-spacing:.08em;
}

.scjp-btn{
  --hpad: 14px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px var(--hpad); border-radius:12px; font-weight:700; cursor:pointer;
  border:1px solid transparent; background:#fff; color:#111827;
  transition: .15s ease-in-out;
}
.scjp-btn--primary{
  background: var(--scjp-accent); color:#fff; border-color: var(--scjp-accent);
  box-shadow: 0 8px 18px rgba(99,102,241,.25);
}
.scjp-btn--primary:hover{ filter:brightness(1.04); }
.scjp-btn--secondary{
  background:#fff; color:#111827; border-color: var(--scjp-card-bd);
}
.scjp-btn--secondary:hover{ background:#f8fafc; }
.scjp-btn--tonal{
  background:#eef2ff; color:#3730a3; border-color:#c7d2fe;
}
.scjp-btn--tonal:hover{ filter:brightness(0.98); }
.scjp-btn--icon{
  width: 36px; height: 36px; padding:0;
  border-radius:10px; border:1px solid var(--scjp-card-bd); background:#fff;
  font-size:16px; line-height:1; display:inline-grid; place-items:center;
}
.scjp-actions-row{ display:flex; gap:8px; justify-content:flex-end; }

.scjp-actionsbar{
  display:flex; gap:10px; justify-content:flex-end; margin-top:12px;
}

.scjp-modal{ position:fixed; inset:0; display:none; z-index:2147483599; }
.scjp-open .scjp-modal{ display:block; }
.scjp-backdrop{ position:absolute; inset:0; background: color-mix(in srgb, var(--scjp-bg) 88%, transparent); backdrop-filter: var(--scjp-glass); }
.scjp-panel{
  position:absolute; inset: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
  display:flex; align-items:center; justify-content:center; min-height:100%;
}
.scjp-panel-inner{
  width:min(900px, 92vw); margin:0 auto; text-align:center;
}

.scjp-close{
  position:absolute; top: max(12px, calc(env(safe-area-inset-top) + 8px)); right: max(12px, calc(env(safe-area-inset-right) + 8px));
  width: 42px; height: 42px; padding: 0; box-sizing: border-box;
  display: grid; place-items: center; line-height: 1; font-size: 22px; transform: translateY(-0.5px);
  background: rgba(0,0,0,.65); color:#fff; border:1px solid rgba(255,255,255,.6);
  border-radius:9999px; box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.scjp-close:hover,.scjp-close:focus{ background: rgba(0,0,0,.8); outline: none; }

.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.scjp-w-modal{
  display:flex; align-items:center; gap:12px;
  margin-top:14px; color: var(--scjp-fg);
  text-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.scjp-wm-icon{ font-size:28px; line-height:1; }
.scjp-wm-right{ display:flex; flex-direction:column; gap:4px; }
.scjp-wm-temp{ font-size:20px; font-weight:700; line-height:1; }
.scjp-wm-text{ font-size:14px; opacity:.95; line-height:1.2; }
.scjp-wm-place{ font-size:12px; opacity:.8; line-height:1.2; }

@media (max-width: 820px){
  .scjp-w-form{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .scjp-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .scjp-settings{ padding:12px; }
  .scjp-grid{ grid-template-columns: 1fr; gap:12px; }
  .scjp-field{ padding:8px 8px; font-size:13px; }
  .scjp-field select,
  .scjp-field input[type="text"],
  .scjp-field input:not([type]){ height:38px; padding:8px 8px; }
}

.scjp-a-num, .scjp-a-mark {
  user-select: none;
  pointer-events: none;
}

.scjp-panel-inner > * + * { margin-top: 12px; }