/* 詳細スワイプ（PC軸・レスポンシブ）— おおいたイベントDB */
:root{
  --swipe-side:76px;
  --swipe-hd:56px;
}
body.swipe-detail{overflow-x:clip}
body.swipe-detail .detail-grid{display:none} /* legacy guard */

.stage-wrap{max-width:1100px;margin:0 auto;padding:16px 16px 8px}
.stage{
  display:grid;
  grid-template-columns:var(--swipe-side) minmax(0,1fr) var(--swipe-side);
  gap:14px;
  align-items:center;
  min-height:calc(100vh - 120px);
}
.side-btn{
  width:72px;height:72px;border-radius:999px;border:2px solid var(--line,#e4e1db);background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  cursor:pointer;box-shadow:0 8px 22px rgba(20,20,19,.12);font-family:inherit;color:var(--ink,#141413);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;justify-self:center;position:sticky;top:42%;
  padding:0;-webkit-tap-highlight-color:transparent;text-decoration:none;
  transform-origin:center center;will-change:transform;
}
.side-btn:hover{transform:scale(1.04);color:inherit;text-decoration:none}
.side-btn:active{transform:scale(.96)}
.side-btn .ico-txt{font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.side-btn .ico-txt svg{display:block}
.side-btn .lab{font-size:11px;font-weight:900}
.side-btn.pass{color:var(--accent,#e85a5a);border-color:rgba(232,90,90,.5);background:linear-gradient(180deg,#fff,#fff5f5)}
.side-btn.save{color:#1f7a4a;border-color:rgba(31,122,74,.5);background:linear-gradient(180deg,#fff,#f3faf6);width:78px;height:78px}
.side-btn.save .ico-txt{font-size:26px}
.side-btn.home{color:#2f6f9f;border-color:rgba(47,111,159,.4);background:linear-gradient(180deg,#fff,#f0f6fb);width:64px;height:64px}
/* スワイプ追従で拡大中 */
.side-btn.pass.pull{
  box-shadow:0 10px 28px rgba(232,90,90,.35);
  border-color:rgba(232,90,90,.85);
}
.side-btn.save.pull{
  box-shadow:0 10px 28px rgba(31,122,74,.35);
  border-color:rgba(31,122,74,.85);
}
/* PC: トップはカード下中央 */
@media(min-width:821px){
  .stage{position:relative}
  .side-btn.home{
    position:absolute;left:50%;bottom:8px;top:auto;
    transform:translateX(-50%);z-index:20;justify-self:auto;
  }
  .side-btn.home:hover{transform:translateX(-50%) scale(1.04)}
}

.swipe-stage{position:relative;min-width:0}
.swipe-card{
  position:relative;
  background:var(--surface,#fff);border:1px solid var(--line,#e4e1db);border-radius:18px;
  box-shadow:0 8px 28px rgba(20,20,19,.1);
  overflow:hidden;cursor:grab;user-select:none;touch-action:pan-y;will-change:transform,opacity;
  display:flex;flex-direction:column;
  min-height:min(86vh,900px);max-height:min(92vh,980px);
  transform:translate3d(0,0,0); /* GPU レイヤを常時確保して退場時のカクつきを抑える */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.swipe-card.dragging{cursor:grabbing;box-shadow:0 16px 40px rgba(20,20,19,.16);transition:none}
.swipe-card.flying{
  pointer-events:none;
  box-shadow:0 18px 48px rgba(20,20,19,.2);
}

/* パンくず（カード内固定バー） */
.swipe-sticky-crumb{
  flex:none;z-index:6;
  padding:10px 16px 8px;
  background:linear-gradient(180deg,#fff8ef 0%,#eef5ff 100%);
  border-bottom:1px solid var(--line,#e4e1db);
}
.swipe-sticky-crumb .crumb{margin:0;font-size:12px}

/* パンくず以外がスクロール */
.swipe-scroll{
  flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.swipe-card .detail-hero{border-bottom:1px solid var(--line,#e4e1db)}
.swipe-card .detail-hero .inner{max-width:none;padding:14px 16px 12px}
.card-body{
  padding:14px 16px 18px;display:flex;flex-direction:column;gap:12px;
}
.card-body .card{margin:0}
.card-body .detail-ans{
  margin:0;max-width:none;
  padding:14px 16px; /* 要約枠の内側余白 */
  box-sizing:border-box;
}
.card-body .dg-side{display:contents}

.stamp{
  position:absolute;top:48px;z-index:5;padding:8px 14px;border:3px solid;border-radius:10px;
  font-size:18px;font-weight:900;opacity:0;pointer-events:none;background:rgba(255,255,255,.92);line-height:1.1;
}
.stamp.like{left:16px;color:#1f7a4a;border-color:#1f7a4a;transform:rotate(-12deg)}
.stamp.nope{right:16px;color:var(--accent,#e85a5a);border-color:var(--accent,#e85a5a);transform:rotate(12deg)}
.stamp small{display:block;font-size:10px;font-weight:800;margin-top:2px}

.hint-bar{
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px 14px;
  margin:4px 0 18px;padding:0 12px;
  font-size:12px;font-weight:800;color:var(--ink3,#6b6862);
}
.hint-bar .k{
  display:inline-flex;min-width:1.4em;justify-content:center;padding:0 6px;border-radius:4px;
  border:1px solid var(--line2,#d0ccc4);background:#fff;font-size:11px;margin:0 2px;
}

.swipe-flash{
  position:fixed;left:50%;top:18%;transform:translate(-50%,-50%);
  background:rgba(20,20,19,.88);color:#fff;font-weight:800;font-size:14px;
  padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;z-index:70;transition:opacity .18s;
}
.swipe-flash.show{opacity:1}

/* 初回のみ：カードをゆっくり左右に揺らしてスワイプ可能を示す（PC/スマホ共通） */
@keyframes swipe-nudge{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  20%{transform:translate3d(36px,0,0) rotate(4deg)}
  40%{transform:translate3d(0,0,0) rotate(0)}
  60%{transform:translate3d(-36px,0,0) rotate(-4deg)}
  80%{transform:translate3d(0,0,0) rotate(0)}
}
.swipe-card.nudge{
  animation:swipe-nudge 2.4s cubic-bezier(.45,.05,.55,.95) 1;
  will-change:transform;
}
.swipe-card.nudge.dragging,
.swipe-card.nudge.flying{animation:none}

/* ===== スマホ: カード余白 + パンくず固定 + 下部に Tinder 風 ✕ / ♥ 重ね表示 ===== */
@media(max-width:820px){
  :root{--swipe-side:0px;--swipe-fab:72px}

  body.swipe-detail{
    height:100dvh;max-height:100dvh;overflow:hidden;
    display:flex;flex-direction:column;
    background:var(--bg,#f6f5f3);
  }
  body.swipe-detail > .hd{
    flex:none;position:sticky;top:0;
  }
  body.swipe-detail > .site-footer{display:none}

  body.swipe-detail > .stage-wrap{
    flex:1 1 auto;min-height:0;margin:0;padding:0;
    display:flex;flex-direction:column;max-width:none;
  }
  /* カードだとわかるよう枠いっぱいにせず margin */
  .stage{
    flex:1;min-height:0;
    display:block;position:relative;
    padding:8px 10px 12px;
  }
  .swipe-stage{
    height:100%;min-height:0;display:flex;flex-direction:column;
    position:relative;
  }
  .swipe-card{
    flex:1;min-height:0;max-height:none;
    border-radius:16px;
    border:1px solid var(--line,#e4e1db);
    box-shadow:0 8px 28px rgba(20,20,19,.12);
  }
  .swipe-sticky-crumb{
    padding:8px 12px 7px;
    background:rgba(246,245,243,.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .swipe-sticky-crumb .crumb{
    font-size:11.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .swipe-scroll{
    flex:1;min-height:0;
    /* 下部 FAB に被らないよう余白 */
    padding-bottom:calc(var(--swipe-fab) + 28px);
  }
  .swipe-card .detail-hero .inner{padding:12px 14px 10px}
  .card-body{padding:12px 12px 20px}
  /* ヒントは FAB があるので控えめに */
  .hint-bar{
    display:none;
  }
  .stamp{font-size:16px;top:44px;padding:6px 10px}

  /* 下部オーバーレイ: ✕ | 家 | ♥ （Tinder 風） */
  .side-btn{
    display:flex !important;
    position:absolute;
    bottom:16px;
    top:auto;
    z-index:30;
    width:56px;height:56px;
    margin:0;
    box-shadow:0 8px 24px rgba(20,20,19,.18);
    justify-self:auto;
  }
  .side-btn.pass{
    left:calc(50% - 100px);
    transform:none;
  }
  .side-btn.home{
    left:50%;
    transform:translateX(-50%);
    width:52px;height:52px;
    bottom:18px;
  }
  .side-btn.save{
    left:calc(50% + 44px);
    width:60px;height:60px;
    bottom:14px;
    transform:none;
  }
  .side-btn .lab{font-size:10px}
  .side-btn .ico-txt{font-size:20px}
  .side-btn.save .ico-txt{font-size:22px}
  /* インラインの scale（スワイプ追従）を邪魔しないよう hover は無効化 */
  .side-btn.pass:hover,
  .side-btn.save:hover{transform:none}
  .side-btn.home:hover{transform:translateX(-50%)}
  .side-btn.pass:active:not(.pull),
  .side-btn.save:active:not(.pull){transform:scale(.94)}
  .side-btn.home:active{transform:translateX(-50%) scale(.94)}
}
/* 初回チップのイラスト（yubi.png は黒地なので丸く切り抜き） */