/* =====================================================
   pages/lounge.css — ファンラウンジ（2026-07 新規）
===================================================== */

/* ステータス */
.lg-lead { font-size: var(--text-md); text-align: center; }
.lg-lead-sub { text-align: center; color: var(--color-text-secondary); margin-top: var(--space-2); }
.lg-lead-sub a { color: var(--color-brand-primary); }
#lounge-status { text-align: center; }
#lounge-status .lg-btn { margin-top: var(--space-4); }
.lg-joined {
  background: var(--color-brand-bg);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-weight: 700; text-align: center;
  margin-bottom: var(--space-4);
}

/* ボタン */
.lg-btn {
  display: inline-block;
  background: var(--color-brand-primary); color: #fff;
  border: none; border-radius: var(--radius-full);
  padding: 10px 24px; font-size: var(--text-sm); font-family: var(--font-body);
  cursor: pointer; text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.lg-btn:hover { background: var(--color-brand-deep); transform: translateY(-1px); }
.lg-btn:disabled { opacity: .5; cursor: default; transform: none; }
.lg-btn--primary { font-weight: 700; }
.lg-btn--ghost { background: none; color: var(--color-text-secondary); border: 1.5px solid #ccc; }
.lg-btn--ghost:hover { background: #f5f5f5; }

/* ロールバッジ */
.lg-role-badge {
  display: inline-block; border-radius: var(--radius-full);
  padding: 2px 12px; font-size: var(--text-2xs); font-weight: 800;
  vertical-align: middle; letter-spacing: .08em;
}
.lg-role-badge--basic { background: var(--color-brand-pale); color: var(--color-brand-deep); }
.lg-role-badge--plus  { background: var(--gradient-brand); color: #fff; }
.lg-role-badge--superfan { background: #2b2140; color: #ffd76a; }

/* プランカード */
.lg-plan-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6); max-width: 720px; margin-inline: auto;
}
.lg-plan {
  border: 1.5px solid var(--color-brand-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--color-surface-card);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.lg-plan--plus { border-color: var(--color-brand-primary); box-shadow: var(--shadow-md); }
.lg-plan--mine { outline: 2px solid var(--color-brand-primary); }
.lg-plan__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.lg-plan__price { font-size: var(--text-2xl); font-weight: 800; color: var(--color-brand-deep); }
.lg-plan__price span { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
.lg-plan__features { list-style: none; padding: 0; margin: 0; text-align: left; flex: 1; }
.lg-plan__features li {
  font-size: var(--text-sm); padding: 6px 0 6px 1.4em; position: relative;
  border-bottom: 1px dashed var(--color-brand-border);
}
.lg-plan__features li::before { content: '✦'; position: absolute; left: 0; color: var(--color-warm-gold); }
.lg-plan__current { font-weight: 800; color: var(--color-brand-deep); }
.lg-plan__msg { font-size: var(--text-xs); color: var(--color-text-muted); min-height: 1.2em; margin: 0; }

/* ティザー（未加入向け） */
.lg-teaser-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.lg-teaser {
  border: 1.5px dashed var(--color-brand-border); border-radius: var(--radius);
  padding: var(--space-6) var(--space-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  color: var(--color-text-secondary); background: rgba(255,255,255,.4);
}
.lg-teaser__icon { font-size: 2rem; filter: grayscale(.6); }
.lg-teaser__lock { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ドロップ */
.lg-drop {
  border: 1px solid var(--color-brand-border); border-radius: var(--radius-lg);
  padding: var(--space-5); margin-bottom: var(--space-4);
  background: var(--color-surface-card);
}
.lg-drop--current { border-color: var(--color-brand-primary); box-shadow: var(--shadow-sm); }
.lg-drop__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.lg-drop__month { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.lg-drop__now {
  background: var(--color-brand-primary); color: #fff;
  border-radius: var(--radius-full); padding: 2px 10px;
  font-size: var(--text-2xs); font-weight: 800;
}
.lg-drop__title { color: var(--color-text-secondary); }
.lg-drop__video { aspect-ratio: 16 / 9; margin-bottom: var(--space-3); }
.lg-drop__video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
.lg-drop__ytlink { display: inline-block; margin-bottom: var(--space-3); color: var(--color-brand-primary); }
.lg-drop__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.lg-drop__note { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-3); }
.lg-locked { font-size: var(--text-xs); color: var(--color-text-muted); }

/* バッジ・ランキング */
.lg-mybadge {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  border: 1px solid var(--color-brand-border); border-radius: var(--radius);
  background: var(--color-brand-bg);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
}
.lg-mybadge__icon { font-size: 1.6rem; }
.lg-mybadge__label { font-weight: 800; }
.lg-mybadge__months { color: var(--color-text-secondary); font-size: var(--text-sm); }
.lg-rank-list { list-style: none; padding: 0; margin: 0; }
.lg-rank {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px dashed var(--color-brand-border);
  font-size: var(--text-base);
}
.lg-rank__pos { width: 2em; text-align: right; font-weight: 800; color: var(--color-text-muted); }
.lg-rank--top1 .lg-rank__pos { color: #d4a017; }
.lg-rank--top2 .lg-rank__pos { color: #8e959c; }
.lg-rank--top3 .lg-rank__pos { color: #a5622d; }
.lg-rank__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lg-rank__months { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* 共通 */
.lg-note { font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; margin-bottom: var(--space-4); }
.lg-loading, .lg-empty { color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; padding: var(--space-4) 0; }

/* bp-phone */
@media (max-width: 520px) {
  .lg-plan-grid { grid-template-columns: 1fr; }
  .lg-drop__actions { flex-direction: column; align-items: stretch; }
  .lg-drop__actions .lg-btn { text-align: center; }
}

/* 限定記事一覧 */
.lg-article-list { list-style: none; padding: 0; margin: 0; }
.lg-article-list li { border-bottom: 1px dashed var(--color-brand-border); }
.lg-article-list a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  text-decoration: none; color: var(--color-text-primary);
  transition: background var(--transition-fast);
}
.lg-article-list a:hover { background: var(--color-brand-bg); }
.lg-article-date { font-size: var(--text-xs); color: var(--color-text-muted); flex-shrink: 0; }
.lg-article-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }