:root{
  --text:#111;
  --surface:#fff;
  --border:rgba(0,0,0,.12);
}

*{ box-sizing:border-box }
html {
  overflow-y: auto; /* ← 二重スクロール防止 */
  overflow-x: auto;
  height: 100%;
}

#page-content {
  margin-top: 8vh;
  padding-bottom: 6vh;
  min-height: calc(100vh - 14vh); /* header+footer分を除外 */
}

react-header,
react-footer {
  display: block;
  width: 100%;
}

body{
  margin:0;
  background:#ffffff;
  color:var(--text);
  font-family:"Zen Antique Soft", serif;
  font-weight:400;
  font-style:normal;
}

.wrap{ max-width:900px; margin:0 auto; padding:20px 12px 80px }

.detail-main{
  padding:0 16px;
}

/* 下部に余白を確保して戻るボタンを配置 */
.back-bottom{
  margin-top:20px;
  display:flex;
  justify-content:flex-start;
}

/* 初期状態の表示制御（JSで必要に応じて表示） */
#content, #notfound{ display:none }

/* ヘッダー戻るボタン */
a.btn-back{
  display:inline-block;
  margin:10px 0 12px;
  text-decoration:none;
  border:1px solid var(--border);
  padding:8px 12px;
  border-radius:999px;
  background:#ffffff;
  color:#111;
}

/* メインカード */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  box-shadow:10px 12px 20px rgba(0,0,0,.14);
}

h1{ margin:0 0 8px; font-size:clamp(20px,4vw,28px) }
.meta{
  opacity:.9;
  font-size:14px;
  margin-bottom:12px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* 1:1 サムネ領域（画像がなくても枠は出す） */
.thumbbox{
  width:100%;
  aspect-ratio:1/1;
  border:1px dashed var(--border);
  border-radius:12px;
  background:#f6f6f6;
  display:grid;
  place-items:center;
  color:#777;
  margin:8px 0 14px;
}
.thumbbox img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:12px;
}

.chips{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 12px }
.tag{
  background:#f0f0f0;
  border:1px solid var(--border);
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
}
.tag[data-cat="すべて"]{ background:#607d8b; color:#fff; border-color:transparent; }
.tag[data-cat="学部祭"]{ background:#6d4c41; color:#fff; border-color:transparent; }
.tag[data-cat="文化祭"]{ background:#ec407a; color:#fff; border-color:transparent; }
.tag[data-cat="体育祭"]{ background:#ff9800; color:#fff; border-color:transparent; }
.tag[data-cat="ステージ企画"]{ background:#26a69a; color:#fff; border-color:transparent; }
.tag[data-cat="式典"]{ background:#ab47bc; color:#fff; border-color:transparent; }
.tag[data-cat="展示"]{ background:#8d6e63; color:#fff; border-color:transparent; }
.tag[data-cat="体験型（遊ぶ系）"]{ background:#00acc1; color:#fff; border-color:transparent; }
.tag[data-cat="ワークショップ（作る系）"]{ background:#f4511e; color:#fff; border-color:transparent; }
.tag[data-cat="企業・外部団体"]{ background:#43a047; color:#fff; border-color:transparent; }
.tag[data-cat="その他"]{ background:#78909c; color:#fff; border-color:transparent; }

.section{ margin-top:18px }
.section h3{ margin:0 0 6px; font-size:16px }

/* 関連リンク（画像ボタン・外枠なし） */
.related-links{ margin-top:18px }
.related-links .sns-buttons{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.related-links .sns-btn{
  display:inline-block;
  padding:0;
  margin:0;
  background:none;
  border:none;
  outline:none;
  line-height:0;
}
.related-links .sns-btn img{
  display:block;
  width:36px;
  height:36px;
  object-fit:contain;
}

/* 下部ナビ的スペース */
.note{ margin-top:14px; font-size:13px; color:#555 }