/* ============ LLN Vertical Reels (Framed + Perf, per-slide mute, header & mobile brand) ============ */

/* Frame wrapper（背景・ロゴ・本体を包む） */
.lln-reels-frame{
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #0b0b0b;

  --lln-safe: env(safe-area-inset-bottom);
  --lln-cta-space: 66px;          /* CTAの高さ/余白の目安 */
  --lln-phone-width: 400px;        /* デスクトップで中央に出す“スマホ幅” */
}

/* 背景画像 */
.lln-reels-backdrop{
  position: absolute;
  inset: 0;
  background-image: var(--lln-bg-image, none);
  background-size: cover;
  background-position: center;
  filter: blur(var(--lln-bg-blur, 0px));
  transform: scale(1.05);
  z-index: 0;
}
.lln-reels-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--lln-bg-overlay, 0));
  pointer-events: none;
  z-index: 0;
}

/* 左上ロゴ（デスクトップ背景用） */
.lln-reels-logo{
  position: absolute;
  top: var(--lln-logo-top, 24px);
  left: var(--lln-logo-left, 24px);
  z-index: 3;
  opacity: var(--lln-logo-opacity, 1);
  pointer-events: auto;
}
.lln-reels-logo img{
  width: var(--lln-logo-width, 140px);
  height: auto;
  display: block;
  max-width: 60vw;
}

/* スワイパー本体のレイヤー位置 */
.lln-reels-shell{ position: relative; z-index: 1;}

/* ===== 共通タイトル（上部） ===== */
.lln-reel-global-header{
  position: absolute;
  inset: 0 0 auto 0;            /* top only */
  height: 86px;                 /* 視認性のための帯 */
  pointer-events: none;
  z-index: 2;
}
.lln-reel-global-header::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.0) 100%);
}
.lln-reel-global-header-inner{
  position: relative; z-index:1;
  display:flex; align-items:flex-start; justify-content:center;
  padding: 65px 16px 0;
}
.lln-reel-title{
  margin:0; padding:6px 12px;
  color:#fff;
  background: rgba(0,0,0,.35);
  border-radius: 999px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align:center;
  max-width: min(90vw, 560px);
  backdrop-filter: blur(2px);
}
@media (min-width: 780px){
  .lln-reel-title{ font-size: 20px; }
.lln-reels-shell{ padding:20px;}	
}

/* ===== Core（動画ステージ） ===== */
.lln-reels-swiper {
  width: 100vw;
  height: 100vh;                 /* fallback */
  overflow: hidden;
  position: relative;
  background: #000;
}
/* モバイルのアドレスバー高さ変動に追従 */
.lln-reels-swiper { height: 100svh; }
@supports (height: 100dvh) {
  .lln-reels-swiper { height: 100dvh; }
}

.lln-reel-slide  { display: flex; align-items: center; justify-content: center; position: relative; }
.lln-reel-stage  { width: 100%; height: 100%; position: relative; }
.lln-reel-video  { width: 100%; height: 100%; object-fit: cover; background: #000; }

/* ===== Overlay ===== */
.lln-reel-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  padding-bottom: max(50px, var(--lln-safe));
}

/* ★ モバイルブランド（キャプションの上） */
.lln-reel-mobile-brand{
  position: relative;
  align-self: flex-start;
  margin: 0 0 8px 16px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.35);
  border-radius: 999px;
  padding: 6px 10px;
  pointer-events: none;              /* 誤タップ防止（必要ならautoに） */
  backdrop-filter: blur(2px);
}
.lln-reel-brand-logo{
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; display:block; flex: 0 0 auto;
}
.lln-reel-brand-name{
  color:#fff; font-weight:700; font-size:14px; line-height:1;
  white-space: nowrap;
}

/* キャプション（背景・影なし） */
.lln-reel-caption {
  color: #fff;
  padding: 16px 18px 8px;
  font-size: 16px;
  line-height: 1.4;
  background: none !important;
  text-shadow: none !important;
  pointer-events: auto;
}

/* アクション：CTA中央、ミュート右下 */
.lln-reel-actions{
  display: block;
  text-align: center;
  width: 100%;
  padding: 0 0 max(24px, var(--lln-safe));
  pointer-events: auto;
  position: static;
}
.lln-reel-cta{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-weight: 700;
}
.lln-reel-cta:hover { opacity: .92; }

/* ミュートボタン（CTA分だけ底上げ） */
.lln-reel-mute{
  appearance: none;
  border: none;
  background: rgba(0,0,0,.45);
  color: #fff;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 18px;
  position: absolute;
  right: 16px;
  bottom: calc(var(--lln-cta-space) + max(24px, var(--lln-safe)));
  z-index: 2;
  pointer-events: auto;
}

/* ページネーション */
.swiper-pagination { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

/* ===== Desktop：スマホ幅で中央に配置 ===== */
@media (min-width: 780px) {
  .lln-reels-frame.lln-frame-enabled .lln-reels-swiper{
    width: var(--lln-phone-width, 400px);
    height: 92svh;
    margin: 15px auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,.45);
  }
  @supports (height: 92dvh) {
    .lln-reels-frame.lln-frame-enabled .lln-reels-swiper{ height: 92dvh; }
  }
  .lln-reels-frame.lln-frame-enabled .swiper-pagination{ right: 6px; }
}

/* デスクトップ専用フレーム指定時：モバイルでは背景とロゴを隠す */
@media (max-width: 1023.98px) {
  .lln-frame-desktop-only .lln-reels-backdrop,
  .lln-frame-desktop-only .lln-reels-logo { display: none !important; }
}

/* レスポンシブ：小さめ画面のキャプション文字サイズ */
@media (max-width: 768px) { .lln-reel-caption { font-size: 14px; } }

/* （任意）エラーバナー
.lln-reel-error{
  position:absolute;left:12px;bottom:12px;z-index:5;
  background:rgba(220,0,0,.85);color:#fff;padding:6px 8px;border-radius:6px;
  font-size:12px;max-width:70%;
}
*/
/* === Mobile brand chip (logo + company name, shown only on mobile) === */
.lln-reel-mobile-brand{
       /* デフォは非表示 → モバイルで表示 */
  position: relative;
  margin: 0 16px 6px;           /* 左右余白＋キャプションの少し上 */
  padding: 6px 10px;
  align-items: center;
  gap: 8px;
  pointer-events: auto;         /* クリック可能に（親overlayは pointer-events:none） */
  z-index: 2;
}

.lln-reel-brand-logo{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #222;
  border: 1px solid rgba(255,255,255,.35);
}

.lln-reel-brand-name{
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* モバイルで表示、デスクトップでは非表示 */
@media (max-width: 1023.98px){
  .lln-reel-mobile-brand{ display: flex; }
}