/* ショート動画: タイル共通スタイル(一覧・ホーム帯どちらでも使う) */
.tile {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  background: #111 center/cover no-repeat;
  border-radius: 8px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile .play-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
}
.tile .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 8px 8px;
  font-size: 12px;
  line-height: 1.4;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}

/* ショート動画: 一覧ページ */
.shorts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 20px 0;
}
.shorts-empty {
  padding: 40px 0;
  text-align: center;
  color: #888;
}
.shorts-sort-tabs {
  display: flex;
  gap: 8px;
  padding-top: 12px;
}
.shorts-sort-tabs a {
  padding: 6px 16px;
  border-radius: 999px;
  background: #eee;
  color: #555;
  font-size: 13px;
  text-decoration: none;
}
.shorts-sort-tabs a.active {
  background: #ff3b5c;
  color: #fff;
  font-weight: bold;
}

/* ショート動画: ホーム帯 */
.shorts-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  -webkit-overflow-scrolling: touch;
}
.shorts-strip .tile {
  flex: 0 0 auto;
  width: 110px;
}

/* ショート動画: トップページ帯
   タイルサイズは/shorts/一覧(.shorts-grid)のminmax(150px, 1fr)の最小値に合わせて固定。
   ネイティブの横スクロール(スクロールバー非表示)+矢印クリックで見える分だけまとめて送る */
.shortshome {
  position: relative;
  padding: 4% 5%;
}
.shortshome-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.shortshome-strip::-webkit-scrollbar {
  display: none;
}
.shortshome-strip .tile {
  flex: 0 0 auto;
  width: 150px;
}
/* .shortshomeの外側(負のoffset)に置くと、コンテナが画面幅いっぱいになる
   スマホ幅で矢印が画面からはみ出すため、内側に収まる位置に固定する */
.shortshome .slick-prev { left: 4px; }
.shortshome .slick-next { right: 4px; }

/* ショート動画: フルスクリーンフィード */
body:has(.shorts-feed) {
  overflow: hidden;
}
.shorts-feed {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100000;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: y mandatory;
}
.shorts-feed::-webkit-scrollbar {
  display: none;
}
.shorts-feed .slide {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.shorts-feed .slide video {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.shorts-feed .slide .tap-layer {
  position: absolute;
  inset: 0;
}
.shorts-feed .close-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 100001;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff;
  border: none;
  font-size: 18px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}
.shorts-feed .mute-btn {
  position: absolute;
  right: 14px;
  bottom: 90px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
}
.shorts-feed .like-btn {
  position: absolute;
  right: 14px;
  bottom: 150px;
  z-index: 2;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.shorts-feed .like-btn .icon {
  font-size: 32px;
  line-height: 1;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
  transition: transform .15s ease;
}
.shorts-feed .like-btn.liked .icon {
  color: #ff3b5c;
  transform: scale(1.15);
}
.shorts-feed .like-btn .count {
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.shorts-feed .caption-bar {
  position: absolute;
  left: 0; right: 70px; bottom: 0;
  padding: 16px;
  color: #fff;
  font-size: 14px;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
  pointer-events: none;
}
.shorts-feed .cta-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background: var(--shorts-accent, #ff3b5c);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  pointer-events: auto;
}