/* ================================================================== */
/* kaname_ux.css — Kaname 全体UXの“気持ちよさ”共通レイヤー           */
/*   役割（上品ポップ・やり過ぎない・全ページ共通の心地よさ）:          */
/*     ① タップ/クリックの手応え（沈み込み＋戻り・上質な focus-visible） */
/*     ② ページ読込の軽いフェードイン                                  */
/*     ③ 達成の小さなお祝い（控えめチェックのポン .kt-celebrate）       */
/*     ④ 読込/空状態の上品なシマー（.kt-shimmer）                      */
/*     ⑤ 長いページの「上へ戻る」小ボタン（.kt-totop・控えめ）          */
/*   既存トークン（kaname_pop.css の --ktp-*）を再利用。              */
/*   既存の出現アニメ（.kt-rise / .ktl-reveal / .kth-reveal /          */
/*   .kt-pop-rise）には一切触れない（二重発火防止）。新規 .kt-ux-reveal */
/*   のみ ux.js が扱う。                                                */
/*   prefers-reduced-motion で全停止・JS無効でも壊れない・390px安全。   */
/* ================================================================== */

/* Kaname共通スコープ（全Kaname画面に付く .kt-wrap）の中だけに効かせる。
   他アプリ・他レイアウトへ漏れない。トークンは pop 由来をフォールバック付きで使用。 */
.kt-wrap {
  --ktux-ease:    var(--ktp-ease,   cubic-bezier(.22, .61, .36, 1));
  --ktux-bounce:  var(--ktp-bounce, cubic-bezier(.34, 1.56, .64, 1));
  --ktux-blue:    var(--ktp-indigo, #2B6CF6);
  --ktux-mint:    var(--ktp-mint,   #18C7AE);
  --ktux-mint-d:  var(--ktp-mint-d, #0E927F);
  --ktux-sun:     var(--ktp-sun,    #FFC53D);
  --ktux-ink:     var(--ktp-ink,    #1E2433);
}

/* ================================================================== */
/* ① タップ/クリックの手応え                                          */
/*   既存の押下（.kt-btn:active 等）と衝突しないよう、明示的に未指定の  */
/*   インタラクティブ要素にだけ“そっと沈んで戻る”手応えを足す。        */
/* ================================================================== */

/* 触れるものに共通の戻りやすさ（transition を持たない要素にだけ補う）。 */
.kt-wrap a,
.kt-wrap button,
.kt-wrap [role="button"],
.kt-wrap summary,
.kt-wrap label.kt-tap {
  -webkit-tap-highlight-color: transparent; /* モバイルの灰色点滅を消す */
}

/* カード/リンクの“沈み込み＋戻り”。.kt-btn は pop 側に任せ、ここでは
   カード系・素のリンク・タグへ。transform を既に使う要素は :where で除外。 */
.kt-wrap a.kt-tappable,
.kt-wrap .kt-card,
.kt-wrap .kt-tile,
.kt-wrap .kt-chip,
.kt-wrap [data-kt-tap] {
  transition: transform .18s var(--ktux-bounce),
              box-shadow .22s var(--ktux-ease),
              filter   .22s var(--ktux-ease);
}
.kt-wrap a.kt-tappable:active,
.kt-wrap .kt-card:active,
.kt-wrap .kt-tile:active,
.kt-wrap .kt-chip:active,
.kt-wrap [data-kt-tap]:active {
  transform: translateY(1px) scale(.985);
  filter: brightness(.99);
}

/* 上質な focus-visible（キーボード操作のときだけ・ふんわり二重リング）。 */
.kt-wrap a:focus-visible,
.kt-wrap button:focus-visible,
.kt-wrap [role="button"]:focus-visible,
.kt-wrap summary:focus-visible,
.kt-wrap input:focus-visible,
.kt-wrap select:focus-visible,
.kt-wrap textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ktux-blue) 70%, white);
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ktux-blue) 16%, transparent);
}
/* color-mix 非対応ブラウザ向けの素直なフォールバック（先に当ててから上書き）。 */
@supports not (outline: 3px solid color-mix(in srgb, red 50%, white)) {
  .kt-wrap a:focus-visible,
  .kt-wrap button:focus-visible,
  .kt-wrap [role="button"]:focus-visible,
  .kt-wrap summary:focus-visible,
  .kt-wrap input:focus-visible,
  .kt-wrap select:focus-visible,
  .kt-wrap textarea:focus-visible {
    outline: 3px solid var(--ktux-blue);
    box-shadow: none;
  }
}

/* ================================================================== */
/* ② ページ読込の軽いフェードイン                                     */
/*   body 全体ではなく .kt-wrap 単位で。is-ready は ux.js が次フレームで */
/*   付ける。JS 無効時は .kt-nojs が外れないが、.kt-ux-ready を初期表示  */
/*   にして“消えたまま”を防ぐ（下のフォールバック参照）。              */
/* ================================================================== */
.kt-wrap { opacity: 1; } /* 既定は見える（FOUC/JS無効でも安全） */
.kt-wrap.kt-ux-arm { opacity: 0; }                 /* JS が動けるときだけ一瞬隠す */
.kt-wrap.kt-ux-arm.kt-ux-in {
  opacity: 1;
  animation: kt-ux-fadein .5s var(--ktux-ease) both;
}
@keyframes kt-ux-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================== */
/*   汎用スクロール reveal（新規クラスのみ・既存には触れない）         */
/*   .kt-ux-reveal を付けた要素を ux.js の IntersectionObserver が拾う。 */
/* ================================================================== */
.kt-wrap .kt-ux-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ktux-ease), transform .6s var(--ktux-bounce);
  will-change: opacity, transform;
}
.kt-wrap .kt-ux-reveal.is-in { opacity: 1; transform: none; }
/* JS 無効（.kt-nojs が残る）では必ず見える。 */
.kt-wrap.kt-nojs .kt-ux-reveal { opacity: 1; transform: none; }

/* ================================================================== */
/* ③ 達成の小さなお祝い（控えめなチェックのポン・1回だけ）            */
/*   要素に .kt-celebrate を一瞬付けると ::after のチェックがポンと出る。 */
/*   既存の紙吹雪（pop.js celebrate）とは別物・併用しても穏やか。       */
/* ================================================================== */
.kt-wrap .kt-celebrate {
  position: relative;
}
.kt-wrap .kt-celebrate::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: var(--ktux-mint);
  /* 白い小さなチェックマーク（mask）。画像不要・軽量。 */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 64% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 64% no-repeat;
  background-blend-mode: normal;
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ktux-mint-d) 38%, transparent);
}
/* mask は“穴”なので、塗りは別レイヤーが必要。簡潔にするため円＋チェックを
   一体の SVG 背景で描く（mask 非対応でも円のポンは出る＝壊れない）。 */
.kt-wrap .kt-celebrate.is-pop::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 62% no-repeat,
    var(--ktux-mint);
  -webkit-mask: none;
          mask: none;
  animation: kt-ux-pop .9s var(--ktux-bounce) forwards;
}
@keyframes kt-ux-pop {
  0%   { opacity: 0; transform: scale(.35); }
  35%  { opacity: 1; transform: scale(1.08); }
  60%  { opacity: 1; transform: scale(.96); }
  78%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

/* ================================================================== */
/* ④ 上品なシマー（読込/空状態のプレースホルダ）                       */
/*   .kt-shimmer を付けた箱が静かに左→右へ光る。中身が来たら外す。     */
/* ================================================================== */
.kt-wrap .kt-shimmer {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--ktux-blue) 6%, #EEF2F8);
  border-radius: 14px;
  min-height: 1em;
}
.kt-wrap .kt-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, .65) 50%,
    transparent 80%
  );
  animation: kt-ux-shimmer 1.4s var(--ktux-ease) infinite;
}
@keyframes kt-ux-shimmer {
  to { transform: translateX(100%); }
}

/* ================================================================== */
/* ⑤ 「上へ戻る」小ボタン（控えめ・長いページでだけ ux.js が出す）     */
/* ================================================================== */
.kt-totop {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--ktp-indigo, #2B6CF6);
  box-shadow: 0 4px 14px rgba(27, 40, 70, .18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  pointer-events: none;
  transition: opacity .3s var(--ktux-ease, ease),
              transform .35s var(--ktux-bounce, ease);
  z-index: 60;
}
.kt-totop.is-show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.kt-totop:active { transform: translateY(1px) scale(.94); }
.kt-totop svg { width: 22px; height: 22px; display: block; }
/* グローバルナビのトグルと重ならないよう、ナビがある画面では少し上に。 */
.kt-wrap:has(.kt-gnav) ~ .kt-totop,
body:has(.kt-gnav) .kt-totop { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

/* ================================================================== */
/* 共通: 390px 横はみ出し防止の保険（このレイヤー由来の固定物のみ）     */
/* ================================================================== */
@media (max-width: 400px) {
  .kt-totop { right: 12px; }
}

/* ================================================================== */
/* prefers-reduced-motion: このレイヤーの“動き”を全停止               */
/*   表示状態は保ったまま、アニメ/トランジションだけ無効化。           */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kt-wrap.kt-ux-arm,
  .kt-wrap.kt-ux-arm.kt-ux-in { opacity: 1 !important; animation: none !important; }

  .kt-wrap .kt-ux-reveal,
  .kt-wrap .kt-ux-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .kt-wrap a.kt-tappable,
  .kt-wrap .kt-card,
  .kt-wrap .kt-tile,
  .kt-wrap .kt-chip,
  .kt-wrap [data-kt-tap],
  .kt-totop {
    transition: none !important;
  }
  .kt-wrap a.kt-tappable:active,
  .kt-wrap .kt-card:active,
  .kt-wrap .kt-tile:active,
  .kt-wrap .kt-chip:active,
  .kt-wrap [data-kt-tap]:active,
  .kt-totop:active { transform: none !important; }

  .kt-wrap .kt-celebrate.is-pop::after { animation: none !important; opacity: 0 !important; }
  .kt-wrap .kt-shimmer::after { animation: none !important; }
  .kt-totop { transition: opacity .01s linear !important; }
}

/* ================================================================== */
/* デスクトップ表示（2026-07-05・PC最適化）。                          */
/*   kt_feedback.css の .kt-fb-fab と同じ考え方で、ビューポート右端では */
/*   なく中央寄せの本文列（.kt-inner）の右端内側に揃える               */
/*   （モバイル≤767pxは一切変更しない）。                              */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .kt-totop {
    right: calc((100vw - var(--kt-app-w, 600px)) / 2 + 16px);
  }
}