/* ===== ui.css (safe enhancement layer) =====
/*
  目的:
  - 既存 styles.css / 各page.css を壊さずに、HTMLのinline styleを減らす
  - ユーティリティ中心（必要なときに class を足すだけで整う）
  - 既存セレクタの上書きは極力しない（:where で詳細度を下げる）
*/

:root{
  /* spacing scale (existing inline values) */
  --u-0: 0;
  --u-1: 6px;
  --u-2: 8px;
  --u-3: 10px;
  --u-4: 12px;
  --u-5: 14px;
  --u-6: 16px;
  --u-7: 18px;
}

/* -------- a11y / motion -------- */
:where(:focus-visible){
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  :where(*, *::before, *::after){
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------- utilities -------- */
:where(.w-full){ width:100% !important; }
:where(.m-0){ margin:0 !important; }
:where(.p-0){ padding:0 !important; }

:where(.mt-1){ margin-top: var(--u-1) !important; }
:where(.mt-2){ margin-top: var(--u-2) !important; }
:where(.mt-3){ margin-top: var(--u-3) !important; }
:where(.mt-4){ margin-top: var(--u-4) !important; }
:where(.mt-5){ margin-top: var(--u-5) !important; }
:where(.mt-6){ margin-top: var(--u-6) !important; }
:where(.mt-7){ margin-top: var(--u-7) !important; }

:where(.mb-1){ margin-bottom: var(--u-1) !important; }
:where(.mb-2){ margin-bottom: var(--u-2) !important; }
:where(.mb-3){ margin-bottom: var(--u-3) !important; }
:where(.mb-4){ margin-bottom: var(--u-4) !important; }
:where(.mb-5){ margin-bottom: var(--u-5) !important; }
:where(.mb-6){ margin-bottom: var(--u-6) !important; }
:where(.mb-7){ margin-bottom: var(--u-7) !important; }

:where(.sp-1){ height: var(--u-1); }
:where(.sp-2){ height: var(--u-2); }
:where(.sp-3){ height: var(--u-3); }
:where(.sp-4){ height: var(--u-4); }
:where(.sp-5){ height: var(--u-5); }
:where(.sp-6){ height: var(--u-6); }
:where(.sp-7){ height: var(--u-7); }
:where(.sp-1,.sp-2,.sp-3,.sp-4,.sp-5,.sp-6,.sp-7){ display:block; width:100%; }

:where(.prewrap){ white-space: pre-wrap !important; }

/* 既存クラス向けの“弱い”補助（変化を最小に） */
:where(.notice).is-hidden{ display:none !important; }

/* =========================================================
   Global Loader (SNIPS)
   - 全ページ共通で「押せる状態になるまで」覆う
   - 既存デザインを壊さないため、詳細度は低く（:where）
   ========================================================= */

:where(body).snips-loading{
  overflow: hidden;
  touch-action: none;
}

:where(body).snips-loading *{
  /* ロード中の誤操作を防止（事故ゼロ） */
  pointer-events: none !important;
}

/* ローダー自体は操作可能（再読み込みボタン等） */
:where(body).snips-loading #snipsGlobalLoader,
:where(body).snips-loading #snipsGlobalLoader *{
  pointer-events: auto !important;
}

:where(#snipsGlobalLoader){
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

:where(#snipsGlobalLoader) .snips-gl-card{
  width: min(520px, calc(100vw - 40px));
  border-radius: 18px;
  padding: 28px 24px 24px;
  background: rgba(16,16,18,.72);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

:where(#snipsGlobalLoader) .snips-gl-ring{
  width: 180px;
  height: 180px;
  display: grid;
  place-items: center;

  /* ✅ fix: % をリングの中央に重ねるための基準 */
  position: relative;
}

:where(#snipsGlobalLoader) .snips-gl-ring > svg{
  /* ✅ fix: リング（svg）を枠いっぱいに重ねる */
  position: absolute;
  inset: 0;
}

:where(#snipsGlobalLoader) .snips-gl-percent{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255,255,255,.95);
  line-height: 1;

  /* ✅ fix: % をリングのど真ん中に固定 */
  position: absolute;
  inset: 0;

  /* ✅ fix: 1行固定（span + % を同一行で中央に） */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .12em;
  white-space: nowrap;
}

:where(#snipsGlobalLoader) .snips-gl-loading{
  font-size: 18px; /* 「今と同じ」寄せ（既存UIの本文サイズ帯） */
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(255,255,255,.88);
  line-height: 1.2;
}

:where(#snipsGlobalLoader) .snips-gl-sub{
  font-size: 13px;
  color: rgba(255,255,255,.65);
  line-height: 1.5;
}

:where(#snipsGlobalLoader) .snips-gl-actions{
  display: none;
  margin-top: 6px;
  width: 100%;
}

:where(#snipsGlobalLoader).is-error .snips-gl-actions{ display:block; }
:where(#snipsGlobalLoader).is-error .snips-gl-sub{ color: rgba(255,255,255,.78); }

:where(#snipsGlobalLoader) .snips-gl-reload{
  pointer-events: auto !important;
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .06em;
}

:where(#snipsGlobalLoader) .snips-gl-reload:active{
  transform: translateY(1px);
}

:where(#snipsGlobalLoader) svg{
  overflow: visible;
}

:where(#snipsGlobalLoader) .snips-gl-track{
  stroke: rgba(255,255,255,.20);
  stroke-width: 12;
  fill: none;
}

:where(#snipsGlobalLoader) .snips-gl-bar{
  stroke: rgba(255,255,255,.92);
  stroke-width: 12;
  fill: none;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

:where(#snipsGlobalLoader).is-hiding{
  animation: snips_gl_fade .22s ease-out forwards;
}

@keyframes snips_gl_fade{
  to{ opacity: 0; }
}