/* 応援企画タブ（support_campaigns.html）専用のスタイル。
   ヘッダー・トークンはmap.css/events.css/gallery.cssと同じ値をそのまま複製している
   （各画面が独立したCSSファイルを持つ既存方針を踏襲）。 */

:root {
	--ink: #2F5233;
	--ink-soft: #6D8670;
	--bg: #F6F3E8;
	--bg-soft: #FDFEFD;
	--line: #DEE3DE;
	--accent: #8FBFA0;
	--badge-bg: #E6EAE7;
}

body {
	font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	background: var(--bg);
	color: var(--ink);
	margin: 0;
	padding: 20px;
}
.container { max-width: 1000px; margin: 0 auto; }

/* --- ヘッダー（events.css/gallery.cssと同じ実装） --- */
.header-area {
	background: var(--bg-soft);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin-left: -20px;
	margin-right: -20px;
	margin-bottom: 16px;
}
.header-inner {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 18px;
	overflow: hidden;
	max-width: 1000px;
	margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; position: relative; }
.brand .club-mark { width: 72px; height: auto; flex: none; }
.brand .title-block h1 { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.3; color: var(--ink); }
.brand .title-block .en { font-size: 9px; letter-spacing: 0.1em; color: var(--ink-soft); margin: 2px 0 0; font-weight: 700; }
.header-confetti { position: absolute; inset: 0; pointer-events: none; opacity: 0.3; }
.header-confetti span { position: absolute; display: block; }
.header-confetti .tri { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 17px solid var(--accent); right: 18%; top: 12%; transform: rotate(18deg); }
.header-confetti .circ { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); right: 6%; top: 30%; }
.header-confetti .dia { width: 11px; height: 11px; background: var(--accent); transform: rotate(45deg); right: 30%; top: 55%; }

.section-heading { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; }
.section-heading .count { font-size: 11.5px; font-weight: 400; color: var(--ink-soft); }
.section-sub { font-size: 12px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.6; }

/* --- 応援企画一覧・カレンダーの2カラムレイアウト（events.cssの.lower-layoutと同じパターン） --- */
.lower-layout { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 900px) {
	.lower-layout { flex-direction: row; align-items: flex-start; gap: 28px; }
	.campaigns-list-section { flex: 1.3; min-width: 0; }
	.calendar-section { flex: 1; min-width: 0; position: sticky; top: 20px; }
}

.applied-banner {
	background: var(--badge-bg); color: var(--ink); border-radius: 10px; padding: 10px 14px;
	font-size: 12.5px; font-weight: 700; margin: 0 0 14px;
}

.btn-apply {
	display: inline-block; background: var(--ink); color: var(--bg-soft); text-decoration: none;
	padding: 9px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700; margin-bottom: 18px;
}
.btn-apply:hover { opacity: 0.88; }

.campaign-list { display: flex; flex-direction: column; gap: 12px; }
.campaign-card {
	display: flex; gap: 12px; background: var(--bg-soft); border: 1px solid var(--line);
	border-radius: 14px; padding: 12px; align-items: flex-start;
}
.campaign-card.is-cancelled { opacity: 0.6; }
.campaign-image { flex: none; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--badge-bg); }
.campaign-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.campaign-body { flex: 1; min-width: 0; }
.campaign-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.campaign-title-row h3 { font-size: 14.5px; font-weight: 700; margin: 0; color: var(--ink); }
.cancelled-badge {
	font-size: 10.5px; font-weight: 700; color: #fff; background: #B25454;
	border-radius: 999px; padding: 2px 9px; flex: none;
}
.campaign-dates { font-size: 12px; color: var(--ink-soft); margin: 4px 0 0; }
.campaign-idol-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; }
.idol-tag {
	font-size: 10.5px; font-weight: 700; color: var(--ink); background: var(--badge-bg);
	border-radius: 999px; padding: 2px 9px;
}
.campaign-description { font-size: 12.5px; color: var(--ink); margin: 8px 0 0; line-height: 1.6; }
.campaign-credit { font-size: 11.5px; color: var(--ink-soft); margin: 6px 0 0; }
/* 企画者への連絡先リンク（任意）。目立たせすぎず「押せる」ことだけ分かる程度の控えめな下線にする */
.organizer-link { color: var(--ink-soft); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.organizer-link:hover { color: var(--ink); }
.campaign-links { display: flex; gap: 12px; margin-top: 8px; }
.campaign-links a { font-size: 12px; font-weight: 700; color: var(--ink); text-decoration: none; }
.campaign-links a:hover { color: var(--accent); }

.empty-message { font-size: 13px; color: var(--ink-soft); text-align: center; padding: 30px 0; }

/* --- カレンダー（events.cssの#calendarと同じFullCalendarテーマ変数を複製。
   応援企画は/api/calendar-events側でcolorをSpotごとに個別指定しているため、events.cssのような
   fc-event-themed等の!important上書きクラスは不要（インラインcolorがそのまま反映される） --- */
.calendar-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
#calendar {
	font-size: 13px;
	--fc-border-color: var(--line);
	--fc-button-bg-color: var(--badge-bg);
	--fc-button-border-color: var(--line);
	--fc-button-text-color: var(--ink);
	--fc-button-hover-bg-color: var(--accent);
	--fc-button-hover-border-color: var(--accent);
	--fc-button-active-bg-color: var(--ink);
	--fc-button-active-border-color: var(--ink);
	--fc-today-bg-color: rgba(143,191,160,0.18);
	--fc-page-bg-color: var(--bg-soft);
	--fc-neutral-bg-color: var(--bg);
}
#calendar .fc-toolbar-title { color: var(--ink); font-size: 15px; }
#calendar .fc-col-header-cell-cushion, #calendar .fc-daygrid-day-number { color: var(--ink-soft); text-decoration: none; }
#calendar .fc-daygrid-more-link { color: var(--ink-soft); font-weight: 600; background: var(--badge-bg); border-radius: 6px; padding: 0 4px; }
#calendar .fc-daygrid-more-link:hover { background: var(--accent); color: var(--bg-soft); }
#calendar .fc-popover { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 20px -8px rgba(47,82,51,0.35); }
#calendar .fc-popover-header { background: var(--badge-bg); color: var(--ink); border-radius: 10px 10px 0 0; }
#calendar .fc-popover-body { max-height: 220px; overflow-y: auto; }
.calendar-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--ink-soft); flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.legend-swatch-cancelled { background: #B25454; }
.legend-swatch-birthday { border-radius: 50%; background: #E0654A; }

/* --- フッター（gallery.css等と同じ実装） --- */
.site-footer { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.footer-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.site-footer a { display: inline-flex; align-items: center; gap: 6px; background: var(--badge-bg); color: var(--ink); text-decoration: none; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; transition: background 0.2s, color 0.2s; }
.site-footer a:hover { background: var(--accent); color: var(--bg-soft); }
.x-icon { flex-shrink: 0; }

@media (max-width: 600px) {
	body { padding: 12px; }
	.brand .club-mark { width: 56px; }
	.brand .title-block h1 { font-size: 15px; }
	.header-area { margin-bottom: 14px; margin-left: -12px; margin-right: -12px; }
	.campaign-image { width: 72px; height: 72px; }
}