/* ==========================================================================
   Studio 出力に無い追加分（すべて「実績カード（Embed の代替）」用。Studio 本体の見た目には触れない）
   Embed の中身は公開ページから取得できていないため、ここは仕様書 §7.4 の目視概算で作った暫定実装。
   ========================================================================== */
.frame > .wk-host { display: block; width: 100%; height: 100%; }

/* --- 「swipe →」（158×58）: 仕様書 §7.4「swipe（グレー・細字・約15px）＋薄いグレーの → を横並び、swipe の左端は左から約73px」 */
.swipe { position: relative; width: 100%; height: 100%; display: flex; align-items: center; padding-left: 73px; gap: 6px; }
.swipe-t { font-family: var(--s-font-89862173); font-size: 15px; font-weight: 400; color: #979797; line-height: 1; }
.swipe-a { font-family: var(--s-font-89862173); font-size: 15px; color: #cccccc; line-height: 1; }

/* --- 実績カード（360×250 の枠内）: Studio の Embed HTML（source-assets/studio-embed/card1-slideshow.html, card2-toggle.html）の CSS をそのまま移した。
       Embed は iframe 内の body（flex 中央寄せ・min-height:100vh・背景 #f6f7fb）に .photo-wrap（幅100%・最大480・16:10）を置く構成。
       ここでは iframe の代わりに .wk を body 相当にしている。カード3〜12 の HTML は未受領で、カード2（切替版）と同じと仮定（カード8以降は別テンプレートとの報告あり）。 */
.wk { --w: 480px; --anim-duration: 0.36s; --slide-interval: 1s; --total-slides: 3; --total-time: calc(var(--slide-interval) * var(--total-slides));
  position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; margin: 0; background: #f6f7fb; overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif; }
.wk .photo-wrap { width: 100%; max-width: var(--w); aspect-ratio: 16/10; position: relative; overflow: hidden; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(20,30,50,0.08); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; background: #ddd; }
.wk .photo-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; backface-visibility: hidden; }
.wk .photo-wrap img.photo { transition: opacity var(--anim-duration) ease, transform var(--anim-duration) ease; }
.wk .photo-front { opacity: 1; transform: scale(1); }
.wk .photo-back { opacity: 0; transform: scale(1.03); }
/* スライドショー版（カード1）: 表面 z-index:2、裏面はスライド 3 枚が 1 秒ごとに切り替わり続ける */
.wk .photo-wrap > img.photo-front:not(.photo) { z-index: 2; transition: opacity var(--anim-duration) ease, transform var(--anim-duration) ease; }
.wk .slideshow-container { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity var(--anim-duration) ease; background: #fff; }
.wk .slideshow-container img.slide { opacity: 0; animation: wk-slideLoop var(--total-time) infinite; }
.wk .slideshow-container img.slide:nth-child(1) { animation-delay: 0s; }
.wk .slideshow-container img.slide:nth-child(2) { animation-delay: 1s; }
.wk .slideshow-container img.slide:nth-child(3) { animation-delay: 2s; }
@keyframes wk-slideLoop { 0% { opacity: 1; z-index: 1; } 33.33% { opacity: 1; z-index: 1; } 33.34% { opacity: 0; z-index: 0; } 100% { opacity: 0; z-index: 0; } }
/* 切替の発火条件はテンプレートごとに違う（Embed の実コードどおり）:
     A・S = PC のホバー（(hover:hover) and (pointer:fine)）＋クリック / B = ホバー（条件なし）＋クリック / C = クリックのみ。
   裏面の画像を持たないカード（has-alt なし）は切り替えない */
@media (hover: hover) and (pointer: fine) {
  .wk:is(.wk-tA, .wk-tS) .photo-wrap.has-alt:hover .photo-front { opacity: 0; transform: scale(0.98); }
  .wk:is(.wk-tA, .wk-tS) .photo-wrap.has-alt:hover .photo-back { opacity: 1; transform: scale(1); }
  .wk:is(.wk-tA, .wk-tS) .photo-wrap.has-alt:hover .slideshow-container { opacity: 1; }
  .wk:is(.wk-tA, .wk-tS) .photo-wrap.has-alt:hover .hover-guide { opacity: 0; transform: translate(-50%, -48%); }
}
.wk.wk-tB .photo-wrap.has-alt:hover .photo-front { opacity: 0; transform: scale(0.98); }
.wk.wk-tB .photo-wrap.has-alt:hover .photo-back { opacity: 1; transform: scale(1); }
.wk.wk-tB .photo-wrap.has-alt:hover .hover-guide { opacity: 0; transform: translate(-50%, -48%); }
.wk .photo-wrap.has-alt.active .photo-front { opacity: 0; transform: scale(0.98); }
.wk .photo-wrap.has-alt.active .photo-back { opacity: 1; transform: scale(1); }
.wk .photo-wrap.has-alt.active .slideshow-container { opacity: 1; }
.wk .photo-wrap.has-alt.active .hover-guide { opacity: 0; transform: translate(-50%, -48%); }
/* B・C: フォーカス枠と小型ピル。Embed は @media(max-width:420px) だが、iframe の幅は 360px で常に該当するため無条件で適用 */
.wk:is(.wk-tB, .wk-tC) .photo-wrap:focus { outline: 3px solid rgba(59,130,246,0.18); outline-offset: 6px; }
.wk:is(.wk-tB, .wk-tC) .hover-guide { font-size: 13px; padding: 6px 12px; }
.wk:is(.wk-tB, .wk-tC) .hover-guide::before { width: 38px; height: 38px; }
.wk.wk-tB .hover-guide { line-height: normal; }   /* B の Embed は hover-guide に line-height:1 が無い */
.wk:is(.wk-tB, .wk-tC) .hover-icon { display: inline-flex; align-items: center; justify-content: center; }
/* 「Tap Here ↺」ガイド */
.wk .hover-guide { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.48); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 14px; line-height: 1; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.24s ease; opacity: 1; }
.wk .hover-guide::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.14); z-index: -1; animation: wk-pulse 1.9s infinite; }
.wk .hover-guide, .wk .hover-guide > span { color: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif; }   /* 土台 CSS が div/span の色・書体を上書きするため明示 */
.wk .hover-icon { animation: wk-bounce 2.4s infinite; }
@keyframes wk-pulse { 0% { transform: translate(-50%,-50%) scale(1); opacity: .9; } 60% { transform: translate(-50%,-50%) scale(1.9); opacity: 0; } 100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; } }
@keyframes wk-bounce { 0%, 30%, 100% { transform: translateY(0); } 15% { transform: translateY(-4px); } }
.wk.wk-unassigned { display: block; background: #eeeeee; border-radius: 10px; position: absolute; left: 0; top: 12.5px; width: 360px; height: 225px; }
.wk-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--s-font-89862173); font-size: 12px; color: #979797; text-align: center; padding: 0 12px; }