/* ============================================================
   公開ページ（ファン向け）
   ============================================================ */

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px; }

/* ---------- ヘッダー ---------- */
.site-header{
  background:linear-gradient(180deg,#FFFDFA 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
  padding:22px 0 26px; text-align:center;
}
.site-header .eyebrow{
  font-size:12px; letter-spacing:.16em; color:var(--ink-3);
  margin:0 0 10px; font-weight:600;
}
.site-header .eyebrow a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:1px; }
.site-header .eyebrow a:hover{ color:var(--gold-deep); }
.site-title{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(23px, 6.4vw, 34px); line-height:1.35;
  margin:0; letter-spacing:.04em;
}
.site-title .jp{ display:block; font-size:.62em; letter-spacing:.22em; color:var(--gold-deep); margin-bottom:6px; }
.site-tagline{ margin:12px 0 0; font-size:14px; color:var(--ink-2); }
.rule{ width:46px; height:2px; background:var(--gold); margin:16px auto 0; border-radius:2px; }

/* ---------- セクション見出し ---------- */
.section{ margin:34px 0; }
.section-head{
  display:flex; align-items:baseline; gap:12px;
  margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.section-head h2{
  margin:0; font-family:var(--font-serif); font-size:18px; letter-spacing:.12em; font-weight:600;
}
.section-head .count{ font-size:13px; color:var(--ink-3); margin-left:auto; white-space:nowrap; }

/* ---------- NEXT LIVE ---------- */
.next-live{
  background:var(--surface); border:1.5px solid var(--gold);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden;
}
.next-live .ribbon{
  background:var(--gold); color:#fff; font-size:12px; font-weight:700;
  letter-spacing:.2em; padding:7px 16px; text-align:center;
}
.next-live .body{ padding:18px 18px 20px; }
.next-live .nl-date{
  font-family:var(--font-serif); font-size:26px; font-weight:600; line-height:1.2;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.next-live .nl-date .yobi{ font-size:15px; color:var(--ink-2); }
.next-live .nl-date .countdown{
  margin-left:auto; font-family:var(--font-sans); font-size:13px; font-weight:700;
  color:var(--gold-deep); background:var(--gold-soft); padding:3px 10px; border-radius:999px;
}
.next-live .nl-title{
  font-size:19px; font-weight:700; margin:10px 0 6px; line-height:1.5;
  overflow-wrap:anywhere;
}
.next-live .nl-meta{ color:var(--ink-2); font-size:14.5px; overflow-wrap:anywhere; }
.next-live .nl-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.next-live .nl-actions .btn{ flex:1 1 150px; }

/* ---------- フィルター ---------- */
.filters{ margin:26px 0 8px; }
.filter-row + .filter-row{ margin-top:10px; }
.filter-label{
  font-size:12px; font-weight:700; color:var(--ink-3);
  letter-spacing:.08em; margin:0 0 6px;
}


/* ---------- イベントカード ---------- */
.event-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }

.event{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.event.is-open{ border-color:var(--line-strong); }

.event-main{ padding:14px 16px; display:flex; gap:14px; align-items:flex-start; }
.event-date{
  flex:none; width:58px; text-align:center; padding-top:2px;
}
.event-date .md{ font-family:var(--font-serif); font-size:20px; font-weight:600; line-height:1.15; }
.event-date .yobi{
  display:inline-block; margin-top:3px; font-size:12px; font-weight:700;
  color:var(--ink-2); background:var(--bg-soft); border-radius:5px; padding:1px 7px;
}
.event-date .yobi.sat{ color:#1C5FA8; background:#E8F1FA; }
.event-date .yobi.sun{ color:#A32C1C; background:#FBEAE7; }

.event-body{ flex:1 1 auto; min-width:0; }
.event-place{
  font-size:12.5px; font-weight:700; color:var(--ink-3); letter-spacing:.04em;
  display:flex; flex-wrap:wrap; gap:0 8px; margin-bottom:3px;
}
.event-place .pref{ color:var(--gold-deep); }
.event-title{
  font-size:16.5px; font-weight:700; line-height:1.5; margin:0 0 6px;
  overflow-wrap:anywhere;
}
.event-venue{ font-size:14px; color:var(--ink-2); overflow-wrap:anywhere; }
.event-time{ font-size:13.5px; color:var(--ink-2); margin-top:3px; }
.event-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; align-items:center; }

.event-actions{
  display:flex; gap:8px; padding:0 16px 14px; flex-wrap:wrap;
}
.event-actions .btn{ flex:1 1 130px; }

/* ---------- 詳細 ---------- */
.event-detail{ border-top:1px solid var(--line); padding:16px; background:#FEFCF9; }
.event-detail[hidden]{ display:none; }
.flyer{
  border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
  margin:0 0 16px; background:var(--bg-soft);
}
.flyer img{ width:100%; }
.dl{ margin:0; }
.dl div{ display:flex; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); }
.dl div:last-child{ border-bottom:0; }
.dl dt{ flex:none; width:82px; font-size:13px; font-weight:700; color:var(--ink-3); padding-top:2px; }
.dl dd{ margin:0; flex:1 1 auto; min-width:0; font-size:14.5px; overflow-wrap:anywhere; }
.dl dd a{ overflow-wrap:anywhere; }
.a11y-list{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.a11y-list li{
  font-size:13px; font-weight:700; background:var(--gold-soft); color:var(--gold-deep);
  border:1px solid #E7D6BC; border-radius:999px; padding:3px 11px;
}
.detail-cta{ margin-top:16px; }

/* ---------- 過去のライブ ---------- */
.past .event{ background:#FCFAF7; }
.past .event-title{ font-weight:600; }
.past-note{ font-size:13.5px; color:var(--ink-3); margin:0 0 14px; }

/* ---------- 空の状態 ---------- */
.empty{
  text-align:center; padding:40px 20px; color:var(--ink-3);
  background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--radius);
}
.empty strong{ display:block; color:var(--ink); font-size:16px; margin-bottom:6px; }

/* ---------- フッター ---------- */
.site-footer{
  margin-top:48px; border-top:1px solid var(--line);
  padding:26px 0 40px; text-align:center; color:var(--ink-3); font-size:13px;
}
.site-footer a{ color:var(--ink-2); }
.site-footer .admin-link{ display:inline-block; margin-top:12px; font-size:12px; color:var(--ink-3); }

@media (min-width:640px){
  .event-date{ width:70px; }
  .event-date .md{ font-size:23px; }
  .event-actions .btn{ flex:0 0 auto; min-width:150px; }
}