@charset "UTF-8";
/* ══════════════════════════════════════════════════
   JAMHUB — Page styles (style.css)
   Linear × Neural DSP × Twitter/X (Posts only)
   共通トークンは common.css を参照
   ══════════════════════════════════════════════════ */

/* ══════════════════════
   PAGE ENTRY ANIMATION
   ══════════════════════ */
@keyframes pageEnter {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes headerSlide {
	from {
		opacity: 0;
		transform: translateY(-100%);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes cardRise {
	from {
		opacity: 0;
		transform: translateY(18px) scale(.97);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

main {
	animation: pageEnter .36s cubic-bezier(.22, 1, .36, 1) both;
}

header {
	animation: headerSlide .30s cubic-bezier(.22, 1, .36, 1) both;
}

footer {
	animation: pageEnter .40s ease .28s both;
}

/* ══════════════════════
   TYPOGRAPHY
   ══════════════════════ */
h2 {
	font-family: 'Orbitron', monospace;
	font-size: 14px;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: .12em;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-md);
	text-transform: uppercase;
}

h3 {
	font-family: 'Orbitron', monospace;
	font-size: 11px;
	font-weight: 700;
	color: var(--text-hi);
	letter-spacing: .08em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

p {
	color: var(--text-md);
	font-size: 14px;
	margin-bottom: 10px;
}

hr {
	border: none;
	border-top: 1px solid var(--border-md);
	margin: 20px 0;
}

a {
	color: var(--accent);
}

/* Section eyebrow label */
.section-eyebrow {
	font-size: 9px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--text-lo);
	margin-bottom: 6px;
}

/* ══════════════════════
   HOME PAGE
   ══════════════════════ */
.home-hero {
	text-align: center;
	padding: 72px 20px 48px;
	position: relative;
}

/* ambient background glow */
.home-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 480px;
	height: 280px;
	background: radial-gradient(ellipse at 50% 30%, rgba(0, 229, 255, .07) 0%, transparent 70%);
	pointer-events: none;
}

.home-hero .hero-title {
	font-family: 'Orbitron', monospace;
	font-size: clamp(30px, 6vw, 56px);
	font-weight: 900;
	color: var(--accent);
	letter-spacing: .12em;
	margin-bottom: 10px;
	border: none;
	padding: 0;
	animation: pageEnter .5s cubic-bezier(.22, 1, .36, 1) .04s both, heroGlow 5s ease-in-out .7s infinite;
}

@keyframes heroGlow {

	0%,
	100% {
		text-shadow: 0 0 40px rgba(0, 229, 255, .18);
	}

	50% {
		text-shadow: 0 0 64px rgba(0, 229, 255, .38), 0 0 120px rgba(0, 229, 255, .08);
	}
}

.home-hero .hero-sub {
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--text-lo);
	animation: pageEnter .5s cubic-bezier(.22, 1, .36, 1) .14s both;
}

/* Stats strip below hero */
.home-stats {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin: 28px 0 0;
	animation: pageEnter .5s cubic-bezier(.22, 1, .36, 1) .22s both;
}

.home-stat {
	text-align: center;
}

.home-stat-value {
	font-family: 'Orbitron', monospace;
	font-size: 20px;
	font-weight: 900;
	color: var(--text-hi);
	display: block;
}

.home-stat-label {
	font-size: 9px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-lo);
}

/* Nav grid */
.home-nav-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	margin-top: 44px;
}

.home-nav-card {
	display: block;
	background: var(--surface-1);
	border: 1px solid var(--border-md);
	border-radius: var(--radius-md);
	padding: 24px 20px;
	text-decoration: none;
	transition: all .18s cubic-bezier(.22, 1, .36, 1);
	animation: cardRise .42s cubic-bezier(.22, 1, .36, 1) both;
	position: relative;
	overflow: hidden;
}

.home-nav-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 55%, var(--accent-subtle) 100%);
	opacity: 0;
	transition: opacity .25s;
	pointer-events: none;
}

.home-nav-card:hover {
	border-color: var(--accent);
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}

.home-nav-card:hover::after {
	opacity: 1;
}

.home-nav-card:nth-child(1) {
	animation-delay: .17s;
}

.home-nav-card:nth-child(2) {
	animation-delay: .25s;
}

.home-nav-card:nth-child(3) {
	animation-delay: .33s;
}

.home-nav-card .card-icon {
	font-size: 24px;
	display: block;
	margin-bottom: 12px;
	transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.home-nav-card:hover .card-icon {
	transform: scale(1.22) rotate(-6deg);
}

.home-nav-card .card-title {
	font-family: 'Orbitron', monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--accent);
	display: block;
	margin-bottom: 7px;
	text-transform: uppercase;
}

.home-nav-card .card-desc {
	font-size: 12px;
	color: var(--text-md);
	line-height: 1.55;
}

/* ══════════════════════
   BUTTONS
   ══════════════════════ */
/* (defined in common.css – additional state styles here) */
.btn-primary::after,
.btn-secondary::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .15);
	opacity: 0;
	transition: opacity .12s;
	pointer-events: none;
}

.btn-primary:active::after,
.btn-secondary:active::after {
	opacity: 1;
}

/* ══════════════════════
   LIST HEADER
   ══════════════════════ */
.list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	gap: var(--space-3);
}

.list-header h2 {
	margin-bottom: 0;
	padding-bottom: 0;
	border: none;
}

/* ══════════════════════
   PROGRESSIONS LIST
   ══════════════════════ */
.prog-filter-row {
	display: flex;
	gap: 6px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.filter-btn {
	background: none;
	border: 1px solid var(--border-md);
	color: var(--text-lo);
	font-size: 11px;
	padding: 5px 14px;
	border-radius: 20px;
	cursor: pointer;
	transition: all .18s cubic-bezier(.34, 1.56, .64, 1);
}

.filter-btn:hover {
	border-color: var(--border-hi);
	color: var(--text-md);
	transform: translateY(-1px);
}

.filter-btn.active {
	border-color: var(--accent);
	color: var(--accent);
	transform: scale(1.04);
}

.prog-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Stagger */
.prog-list .prog-card {
	animation: cardRise .34s cubic-bezier(.22, 1, .36, 1) both;
}

.prog-list .prog-card:nth-child(1) {
	animation-delay: .07s;
}

.prog-list .prog-card:nth-child(2) {
	animation-delay: .11s;
}

.prog-list .prog-card:nth-child(3) {
	animation-delay: .15s;
}

.prog-list .prog-card:nth-child(4) {
	animation-delay: .19s;
}

.prog-list .prog-card:nth-child(5) {
	animation-delay: .23s;
}

.prog-list .prog-card:nth-child(n+6) {
	animation-delay: .27s;
}

.prog-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--surface-1);
	border: 1px solid var(--border-md);
	border-radius: var(--radius-md);
	padding: 14px 18px;
	transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
	position: relative;
	overflow: hidden;
}

.prog-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 60%, var(--accent-subtle) 100%);
	opacity: 0;
	transition: opacity .22s;
	pointer-events: none;
	border-radius: inherit;
}

.prog-card:hover {
	border-color: var(--border-hi);
	background: var(--surface-2);
	transform: translateX(2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}

.prog-card:hover::after {
	opacity: 1;
}

.prog-card.is-favorite {
	border-color: rgba(0, 229, 255, .5);
}

.prog-card-main {
	flex: 1;
	min-width: 0;
}

.prog-card-header {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.prog-card-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-hi);
}

.prog-card-chords {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 5px;
}

.prog-label-badge {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent3);
	background: var(--accent3-dim);
	border: 1px solid rgba(0, 229, 255, .25);
	border-radius: 3px;
	padding: 1px 6px;
	white-space: nowrap;
}

.prog-source-badge {
	font-size: 11px;
	color: var(--text-lo);
	margin-top: 3px;
}

.prog-audio-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	color: var(--accent3);
	background: var(--accent3-dim);
	border: 1px solid rgba(0, 229, 255, .25);
	border-radius: 3px;
	padding: 1px 6px;
	margin-top: 3px;
	width: fit-content;
}

.prog-card-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.fav-btn {
	background: none;
	border: 1px solid var(--border-md);
	color: var(--text-lo);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 15px;
	transition: all .18s cubic-bezier(.34, 1.56, .64, 1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fav-btn:hover {
	transform: scale(1.2) rotate(8deg);
	border-color: rgba(0, 229, 255, .5);
}

.fav-btn.active {
	border-color: var(--accent);
	color: var(--accent);
}

/* ══════════════════════
   EMPTY STATE
   ══════════════════════ */
.empty-state {
	text-align: center;
	padding: 56px 24px;
	color: var(--text-lo);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	border: 1px dashed var(--border-md);
	border-radius: var(--radius-lg);
	margin-top: 12px;
}

/* ══════════════════════
   FORM
   ══════════════════════ */
.jamhub-form {
	background: var(--surface-1);
	border: 1px solid var(--border-md);
	border-radius: var(--radius-lg);
	padding: 28px;
	max-width: 520px;
	animation: pageEnter .38s cubic-bezier(.22, 1, .36, 1) .06s both;
}

.form-group {
	margin-bottom: 18px;
	animation: cardRise .28s cubic-bezier(.22, 1, .36, 1) both;
}

.form-group:nth-child(1) {
	animation-delay: .10s;
}

.form-group:nth-child(2) {
	animation-delay: .16s;
}

.form-group:nth-child(3) {
	animation-delay: .22s;
}

.form-group:nth-child(4) {
	animation-delay: .28s;
}

.form-group:nth-child(5) {
	animation-delay: .32s;
}

.form-label {
	display: block;
	font-size: 9px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--text-lo);
	margin-bottom: 7px;
}

.form-input {
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border-md);
	color: var(--text-hi);
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	padding: 10px 13px;
	border-radius: var(--radius-sm);
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}

.form-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-dim);
}

.form-input::placeholder {
	color: var(--text-placeholder);
}

.form-actions {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}

/* ══════════════════════
   AUTH PAGES
   ══════════════════════ */
.auth-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px;
}

.auth-card {
	background: var(--surface-1);
	border: 1px solid var(--border-md);
	border-radius: var(--radius-lg);
	padding: 44px 40px;
	width: 100%;
	max-width: 400px;
	box-shadow: 0 16px 56px rgba(0, 0, 0, .5);
	animation: cardRise .44s cubic-bezier(.22, 1, .36, 1) both;
}

.auth-logo {
	font-family: 'Orbitron', monospace;
	font-size: 28px;
	font-weight: 900;
	color: var(--accent);
	text-align: center;
	letter-spacing: .16em;
	text-shadow: 0 0 28px var(--accent-glow);
}

.auth-sub {
	text-align: center;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--text-lo);
	margin: 6px 0 28px;
}

.auth-notice {
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	margin-bottom: 18px;
}

.auth-notice.success {
	background: rgba(0, 229, 255, .08);
	border: 1px solid var(--accent3);
	color: var(--accent3);
}

.auth-notice.error {
	background: var(--accent2-dim);
	border: 1px solid var(--accent2);
	color: var(--accent2);
}

.auth-notice.info {
	background: var(--accent-dim);
	border: 1px solid var(--accent);
	color: var(--accent);
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.auth-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.auth-field label {
	font-size: 11px;
	color: var(--text-md);
	letter-spacing: .06em;
}

.auth-field input {
	background: var(--surface-2);
	border: 1px solid var(--border-md);
	border-radius: var(--radius-sm);
	padding: 10px 13px;
	color: var(--text-hi);
	font-size: 14px;
	transition: border-color .15s, box-shadow .15s;
	outline: none;
}

.auth-field input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-dim);
}

.auth-hint {
	color: var(--text-lo);
	font-size: 11px;
	margin-left: 6px;
}

.auth-btn {
	margin-top: 6px;
	background: var(--accent);
	border: none;
	border-radius: var(--radius-sm);
	padding: 13px;
	font-family: 'Orbitron', monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--on-accent);
	cursor: pointer;
	transition: filter .15s, box-shadow .15s, transform .12s;
}

.auth-btn:hover {
	filter: brightness(1.1);
	box-shadow: 0 4px 20px var(--accent-glow);
	transform: translateY(-1px);
}

.auth-link {
	text-align: center;
	font-size: 13px;
	color: var(--text-md);
	margin-top: 20px;
}

.auth-link a {
	color: var(--accent);
	text-decoration: none;
}

.auth-link a:hover {
	text-decoration: underline;
}

/* ══════════════════════
   MYPAGE
   ══════════════════════ */
.mypage-main {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 16px 64px;
}

.mypage-container {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.mypage-profile-card {
	background: var(--surface-1);
	border: 1px solid var(--border-md);
	border-radius: var(--radius-lg);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

/* guitar string texture behind card */
.mypage-profile-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
}

.mypage-avatar-wrap {
	position: relative;
}

.mypage-avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--accent);
}

.mypage-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mypage-avatar-initial {
	width: 96px !important;
	height: 96px !important;
	font-size: 36px !important;
	border: 2px solid var(--accent);
}

.mypage-display-name {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text-hi);
	margin: 0;
}

.mypage-username {
	font-size: .82rem;
	color: var(--text-lo);
	margin: 2px 0 0;
}

.mypage-bio {
	font-size: .88rem;
	color: var(--text-md);
	margin: 8px 0 0;
	white-space: pre-wrap;
	max-width: 480px;
}

.mypage-bio-empty {
	opacity: .4;
	font-style: italic;
}

.mypage-profile-info {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mypage-gear-section {
	width: 100%;
	text-align: left;
	border-top: 1px solid var(--border-lo);
	padding-top: 16px;
}

.mypage-follow-stats {
	display: flex;
	gap: 18px;
	margin-top: 12px;
}

.mypage-follow-stat {
	color: inherit;
	text-decoration: none;
	font-size: .85rem;
	opacity: .85;
}

.mypage-follow-stat strong {
	color: var(--accent);
	margin-right: 4px;
}

.mypage-follow-stat:hover {
	opacity: 1;
	text-decoration: underline;
}

.follow-toggle-btn {
	margin-top: 14px;
}

.follow-toggle-btn.is-following {
	opacity: 0.7;
}

.mypage-practice-stats {
	display: flex;
	gap: 18px;
	margin-top: 8px;
}

.mypage-practice-stat {
	font-size: .85rem;
	opacity: .85;
}

.mypage-practice-stat strong {
	color: var(--accent);
	margin: 0 2px;
}

/* ── 獲得バッジのコレクション表示（マイページ・他ユーザープロフ共通） ──
   Call of Dutyのプレステージシステムのような「視覚的に実力が伝わる」ことを
   狙いつつ、フェーズ1(マイルストーンバッジのみ)では派手な演出は入れず、
   シンプルなグリッド表示にとどめている。将来シーズン制Top10バッジ等を
   追加する際に、ここへ光沢・枠の色分け等の演出を足していく想定 */
.badge-collection {
	margin-top: 14px;
}

.badge-collection-title {
	font-size: .78rem;
	font-weight: 700;
	color: var(--accent);
	margin: 0 0 8px;
	letter-spacing: .08em;
}

.badge-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.badge-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 76px;
	padding: 8px 4px;
	background: var(--surface-2);
	border: 1px solid var(--border-md);
	border-radius: var(--radius-md);
	text-align: center;
	transition: border-color .15s, transform .15s;
	cursor: default;
}

.badge-item:hover {
	border-color: var(--accent3);
	transform: translateY(-2px);
}

.badge-icon {
	font-size: 22px;
	line-height: 1;
}

/* 実画像バッジ用（tier-bronze/silver/gold/platinum.png）。
   元画像は正方形キャンバスに円形のメダルが収まっている構図で、四隅は黒背景のため、
   円形にクリップしてカードのダーク背景に自然に馴染むようにする */
.badge-icon-img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.badge-name {
	font-size: 9.5px;
	color: var(--text-lo);
	line-height: 1.3;
	word-break: break-word;
}

/* シーズンバッジ(season_champion等)にのみ表示する、獲得シーズン名のキャプション。
   同じバッジ(例: 🏆シーズンチャンピオン)を複数シーズンで獲得した場合に区別できるようにする */
.badge-season {
	font-size: 8px;
	color: var(--accent3);
	line-height: 1.2;
	margin-top: 1px;
}

.mypage-section-title {
	font-size: .78rem;
	font-weight: 700;
	color: var(--accent);
	margin: 0 0 6px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mypage-gear-text {
	font-size: .85rem;
	color: var(--text-md);
	white-space: pre-wrap;
	margin: 0;
}

.mypage-edit-section {
	background: var(--surface-1);
	border: 1px solid var(--border-md);
	border-radius: var(--radius-lg);
	padding: 28px;
}

.mypage-edit-title {
	font-size: .95rem;
	font-weight: 700;
	color: var(--text-hi);
	margin: 0 0 20px;
	letter-spacing: .06em;
}

.mypage-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mypage-textarea {
	height: 88px;
	resize: vertical;
}

.mypage-img-preview-wrap {
	margin-bottom: 8px;
}

.mypage-img-preview {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--accent);
	display: block;
}

.mypage-img-placeholder {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--surface-3);
	border: 2px dashed var(--border-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .65rem;
	color: var(--text-lo);
}

/* ══════════════════════════════════════════════
   POSTS — Twitter/X style layout
   ══════════════════════════════════════════════ */

/* Posts page overrides main max-width */
body:has(.posts-layout) main {
	max-width: 100%;
	padding: 0;
}

.posts-layout {
	display: grid;
	grid-template-columns: 200px 1fr 220px;
	min-height: calc(100vh - var(--header-h));
	max-width: 1400px;
	margin: 0 auto;
}

/* ── Left sidebar (nav) ── */
.posts-sidebar-left {
	border-right: 1px solid var(--border-lo);
	padding: 24px 16px;
	position: sticky;
	top: var(--header-h);
	height: calc(100vh - var(--header-h));
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.posts-nav-btn {
	display: flex;
	align-items: center;
	gap: 14px;
	background: none;
	border: none;
	border-radius: var(--radius-lg);
	padding: 11px 16px;
	cursor: pointer;
	font-family: 'Barlow', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-md);
	width: 100%;
	text-align: left;
	transition: background .15s, color .15s;
}

.posts-nav-btn .nav-icon {
	font-size: 20px;
	flex-shrink: 0;
	width: 24px;
	text-align: center;
}

.posts-nav-btn:hover {
	background: var(--surface-2);
	color: var(--text-hi);
}

.posts-nav-btn.active {
	color: var(--accent);
	background: var(--accent-dim);
}

.posts-nav-btn.nav-post-btn {
	margin-top: 16px;
	background: var(--accent);
	color: var(--on-accent);
	font-family: 'Orbitron', monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .10em;
	justify-content: center;
	border-radius: 24px;
	padding: 13px 20px;
	transition: filter .15s, box-shadow .15s, transform .12s;
}

.posts-nav-btn.nav-post-btn:hover {
	filter: brightness(1.1);
	box-shadow: 0 4px 20px var(--accent-glow);
	transform: translateY(-1px);
	background: var(--accent);
	color: var(--on-accent);
}

/* ── Feed center ── */
.posts-feed-col {
	border-right: 1px solid var(--border-lo);
	min-height: calc(100vh - var(--header-h));
	min-width: 0;
	/* .posts-layoutのグリッド列は初期値min-width:autoのため、
	   中身(タブ等)が折り返さない場合そのサイズ分だけ列・ページ全体が
	   広がってしまう。min-width:0でその制約を外し、
	   .posts-tabs側のoverflow-x:autoが正しく機能するようにする */
}

.posts-feed-header {
	position: sticky;
	top: var(--header-h);
	z-index: 100;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border-lo);
	padding: 0;
}

.posts-tabs {
	display: flex;
	border: none;
	margin: 0;
}

.tab-btn {
	flex: 1;
	background: none;
	border: none;
	color: var(--text-lo);
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	font-weight: 600;
	padding: 16px 12px;
	cursor: pointer;
	position: relative;
	transition: color .15s, background .15s;
}

.tab-btn:hover {
	background: var(--surface-2);
	color: var(--text-md);
}

.tab-btn.active {
	color: var(--text-hi);
}

.tab-btn.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--accent);
	border-radius: 1px 1px 0 0;
}

/* Tab pane */
.tab-pane {
	display: none;
}

.tab-pane.active {
	display: block;
}

@keyframes tabFadeIn {
	from {
		opacity: 0;
		transform: translateX(6px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.tab-pane.active {
	animation: tabFadeIn .24s ease both;
}

/* Posts feed */
.posts-feed {
	display: flex;
	flex-direction: column;
}

/* Stagger */
.posts-feed .post-card {
	animation: cardRise .32s cubic-bezier(.22, 1, .36, 1) both;
}

.posts-feed .post-card:nth-child(1) {
	animation-delay: .06s;
}

.posts-feed .post-card:nth-child(2) {
	animation-delay: .11s;
}

.posts-feed .post-card:nth-child(3) {
	animation-delay: .16s;
}

.posts-feed .post-card:nth-child(4) {
	animation-delay: .21s;
}

.posts-feed .post-card:nth-child(5) {
	animation-delay: .26s;
}

.posts-feed .post-card:nth-child(n+6) {
	animation-delay: .30s;
}

/* Post card — Twitter/X style: full-width, thin divider, no card border-radius */
.post-card {
	padding: 16px 18px;
	border-bottom: 1px solid var(--border-lo);
	background: transparent;
	transition: background .12s;
}

.post-card:hover {
	background: var(--surface-1);
}

/* Author row */
.post-author {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 6px;
}

.post-author-link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	flex: 1;
	min-width: 0;
}

.post-author-link:hover .post-author-name {
	text-decoration: underline;
}

.post-author-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	overflow: hidden;
}

.post-author-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-hi);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.post-author-id {
	font-size: 12px;
	color: var(--text-lo);
}

.post-follow-btn {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--accent);
	background: transparent;
	color: var(--accent);
	cursor: pointer;
	white-space: nowrap;
	transition: opacity .15s;
}

.post-follow-btn:hover {
	opacity: .8;
}

.post-follow-btn.is-following {
	background: var(--accent);
	color: var(--bg);
	opacity: .7;
}

/* Card header (type badge + time) */
.post-card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.post-type-badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 2px 8px;
	border-radius: 20px;
}

.badge-backing {
	background: rgba(0, 229, 255, .10);
	color: var(--accent);
	border: 1px solid rgba(0, 229, 255, .30);
}

.badge-improv {
	background: rgba(176, 110, 70, .12);
	color: #c87a50;
	border: 1px solid rgba(176, 110, 70, .28);
}

.badge-normal {
	background: rgba(150, 150, 160, .12);
	color: var(--text-md);
	border: 1px solid rgba(150, 150, 160, .28);
}

.post-time {
	font-size: 12px;
	color: var(--text-lo);
	margin-left: auto;
}

/* Content */
.post-content {
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-hi);
	margin: 0 0 10px;
}

.post-comment {
	font-size: 14px;
	line-height: 1.65;
	color: var(--text-md);
	margin: -4px 0 10px;
	white-space: pre-wrap;
	word-break: break-word;
}

.post-creator-badge {
	font-size: 11px;
	color: var(--text-lo);
	margin: -4px 0 10px;
}

/* Chords row */
.post-chords-row {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 10px;
}

.bpm-badge {
	font-size: 10px;
	padding: 2px 7px;
	border-radius: 3px;
	background: var(--surface-3);
	color: var(--text-lo);
}

/* ── 使用スケールタグ（インプロ投稿・任意設定） ──
   violet系(--accent3)を使い、badge-improv/.tag.improv と同じ配色でインプロ関連だと分かるようにする */
.post-scale-tag-row {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.scale-tag-badge {
	display: inline-block;
	background: var(--accent3-dim);
	border: 1px solid rgba(123, 97, 255, 0.22);
	border-radius: var(--radius-sm);
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	color: var(--accent3);
}

/* インプロ投稿フォームの使用スケール入力（ルート音・スケール名の2つのselectを横並びにする） */
.scale-tag-input-row {
	display: flex;
	gap: 8px;
}

.scale-tag-root-select {
	flex: 0 0 72px;
}

.scale-tag-name-select {
	flex: 1;
	min-width: 0;
}

/* インプロ投稿フォームの「使用したバッキング」選択（ダイアログ方式のトリガー行） */
.backing-select-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.backing-selected-label {
	font-size: 13px;
	color: var(--text-hi);
}

/* ── 難易度 ── */
.post-difficulty {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 10px;
	font-size: 12px;
}

.post-difficulty .diff-label {
	color: var(--text-lo);
	font-size: 10px;
	margin-right: 2px;
}

.diff-star {
	color: var(--surface-4, #333);
	font-size: 13px;
	letter-spacing: 1px;
}

.diff-star.filled {
	color: var(--accent);
	text-shadow: 0 0 8px var(--accent-glow);
}

.difficulty-select {
	display: inline-flex;
	gap: 2px;
}

.diff-star-btn {
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: var(--surface-4, #333);
	cursor: pointer;
	padding: 2px;
	transition: transform .08s ease, color .15s ease, text-shadow .15s ease;
}

.diff-star-btn.active {
	color: var(--accent);
	text-shadow: 0 0 8px var(--accent-glow);
}

.diff-star-btn:hover {
	transform: scale(1.2);
}

.prog-difficulty-display {
	display: flex;
	gap: 2px;
	font-size: 13px;
	margin: 2px 0 6px;
}

.prog-creator-badge {
	font-size: 11px;
	color: var(--text-lo);
	margin: 0 0 6px;
}

/* Video */
.post-video-wrap {
	margin-bottom: 10px;
}

.post-video-link {
	font-size: 12px;
	color: var(--accent);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* ════════════════════════════════════
   YouTubeサムネイル付き動画リンク
   ------------------------------------------------------------------
   投稿の動画URLがYouTubeの場合、YouTube Data API等のAPIキーを使わず、
   動画IDから決め打ちで組み立てたサムネイル画像(hqdefault.jpg)を表示する
   (抽出・URL組み立てはYouTubeUtil.java、サーバー側で計算して渡す)。
   クリックすると従来どおり新しいタブでYouTube側の動画を開く（埋め込み
   iframe化はしない）。サムネイル画像の読み込みに失敗した場合（動画の
   非公開化等）は.yt-thumb-errorが付与され、サムネイル枠を隠して
   キャプションのテキストリンクのみのフォールバック表示にする。
   ════════════════════════════════════ */
.post-video-link--thumb {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	width: 100%;
	max-width: 320px;
}

.post-video-thumb-box {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--surface-2);
	border: 1px solid var(--border-md);
	transition: border-color .15s;
}

.post-video-link--thumb:hover .post-video-thumb-box {
	border-color: var(--accent);
}

.post-video-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-video-play-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	padding-left: 3px;
	/* ▶ の視覚的重心を中央に合わせる */
	transition: background .15s, transform .15s;
}

.post-video-link--thumb:hover .post-video-play-badge {
	background: var(--accent);
	color: #000;
	transform: translate(-50%, -50%) scale(1.08);
}

.post-video-caption {
	font-size: 12px;
	color: var(--accent);
}

/* サムネイル画像の読み込みに失敗した場合は枠ごと隠し、キャプションのみ残す */
.post-video-thumb-box.yt-thumb-error {
	display: none;
}

/* Player */
.post-player {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--surface-2);
	border: 1px solid var(--border-md);
	border-radius: var(--radius-md);
	padding: 10px 14px;
	margin-bottom: 10px;
}

.player-play-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--accent3);
	color: var(--on-accent);
	font-size: 12px;
	cursor: pointer;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .15s, transform .1s;
}

.player-play-btn:hover {
	opacity: .85;
	transform: scale(1.08);
}

.player-play-btn.playing {
	background: var(--accent);
}

.player-track {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.player-progress {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 3px;
	border-radius: 2px;
	background: var(--border-hi);
	outline: none;
	cursor: pointer;
}

.player-progress::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--accent3);
	cursor: pointer;
}

.player-time {
	font-size: 10px;
	color: var(--text-lo);
	font-variant-numeric: tabular-nums;
}

.player-label {
	font-size: 10px;
	color: var(--accent3);
	flex-shrink: 0;
	white-space: nowrap;
}

/* バッキング音源のダウンロードボタン（自分のバッキング音源・インプロ投稿から
   参照している他者のバッキング音源の両方で使う。ダウンロードして自分のDAW等に
   取り込み、それを聴きながらインプロを録音してもらう想定） */
.player-download-btn {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-lo);
	background: var(--surface-3);
	border: 1px solid var(--border-md);
	font-size: 12px;
	text-decoration: none;
	transition: color .15s, border-color .15s, background .15s;
}

.player-download-btn:hover {
	color: var(--accent3);
	border-color: var(--accent3);
	background: var(--accent3-dim);
}

/* Actions bar */
.post-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.action-btn {
	font-family: 'Barlow', sans-serif;
	font-size: 12px;
	background: none;
	border: 1px solid var(--border-md);
	color: var(--text-md);
	padding: 5px 12px;
	border-radius: 20px;
	cursor: pointer;
	transition: all .15s;
}

.action-btn:hover {
	transform: translateY(-1px);
}

.btn-practice {
	color: var(--accent);
	border-color: rgba(0, 229, 255, .3);
}

.btn-practice:hover {
	background: var(--accent-dim);
	border-color: var(--accent);
}

.btn-save-prog {
	color: var(--accent);
	border-color: rgba(0, 229, 255, .3);
}

.btn-save-prog:hover {
	background: rgba(0, 229, 255, .1);
	border-color: var(--accent);
}

.btn-delete {
	color: var(--text-lo);
	font-size: 11px;
}

.btn-delete:hover {
	color: var(--accent2);
	border-color: var(--accent2);
}

.btn-report {
	color: var(--text-lo);
	font-size: 11px;
}

.btn-report:hover {
	color: #a25060;
	border-color: #a25060;
}

/* Like */
.like-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: 1px solid transparent;
	color: var(--text-lo);
	padding: 5px 10px;
	border-radius: 20px;
	cursor: pointer;
	font-size: 13px;
	transition: all .2s cubic-bezier(.34, 1.56, .64, 1);
}

.like-btn:hover {
	border-color: rgba(185, 90, 90, .4);
	color: #c06060;
	transform: scale(1.06);
}

.like-btn.liked {
	background: rgba(185, 90, 90, .10);
	border-color: #c06060;
	color: #c06060;
}

@keyframes likePop {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.22);
	}

	100% {
		transform: scale(1);
	}
}

.like-btn.liked {
	animation: likePop .32s cubic-bezier(.34, 1.56, .64, 1) both;
}

.like-pop {
	position: absolute;
	font-size: 22px;
	animation: pop .75s ease-out forwards;
	pointer-events: none;
}

@keyframes pop {
	0% {
		transform: translateY(0) scale(.5);
		opacity: 1;
	}

	100% {
		transform: translateY(-70px) scale(1.4);
		opacity: 0;
	}
}

.post-likes-inline {
	font-size: 12px;
	color: var(--text-lo);
	margin-left: auto;
}

/* ── Right sidebar (rankings / trending) ── */
.posts-sidebar-right {
	padding: 20px 16px;
	position: sticky;
	top: var(--header-h);
	height: calc(100vh - var(--header-h));
	overflow-y: auto;
}

.sidebar-widget {
	background: var(--surface-1);
	border: 1px solid var(--border-md);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: 16px;
}

.sidebar-widget-title {
	font-family: 'Orbitron', monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-hi);
	padding: 14px 16px 10px;
	border-bottom: 1px solid var(--border-lo);
}

/* ── Inline post form (Twitter compose box style) ── */
.post-compose-area {
	border-bottom: 1px solid var(--border-lo);
	padding: 16px 18px;
}

.post-compose-inner {
	display: flex;
	gap: 12px;
}

.post-compose-body {
	flex: 1;
	min-width: 0;
}

.compose-textarea {
	width: 100%;
	background: none;
	border: none;
	outline: none;
	color: var(--text-hi);
	font-family: 'Barlow', sans-serif;
	font-size: 17px;
	resize: none;
	min-height: 52px;
	line-height: 1.5;
}

.compose-textarea::placeholder {
	color: var(--text-placeholder);
}

.compose-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-top: 10px;
	border-top: 1px solid var(--border-lo);
	margin-top: 8px;
}

/* ── Post form (expanded in tab) ── */
.post-form-container {
	padding: 20px 18px;
	max-width: 100%;
}

.post-form-login-prompt {
	padding: 40px 18px;
	text-align: center;
	font-size: 14px;
	color: var(--text-lo);
}

.post-form-login-prompt a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}

.form-type-toggle {
	display: flex;
	gap: 4px;
	margin-bottom: 20px;
}

.type-toggle-btn {
	flex: 1;
	padding: 10px;
	font-family: 'Barlow', sans-serif;
	font-size: 13px;
	font-weight: 600;
	background: var(--surface-1);
	border: 1px solid var(--border-md);
	color: var(--text-lo);
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: all .15s;
}

.type-toggle-btn.active {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-dim);
}

.type-toggle-btn:hover:not(.active) {
	border-color: var(--border-hi);
	color: var(--text-md);
}

/* Char counter */
.char-counter {
	margin-top: 4px;
	font-size: 11px;
	text-align: right;
	color: var(--text-lo);
	transition: color .2s;
}

.char-counter.over-limit {
	color: var(--accent2);
	font-weight: 700;
}

/* ══════════════════════════════════════
   RANKING (right sidebar style)
   ══════════════════════════════════════ */
.ranking-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	padding: 8px 0;
}

@media (max-width: 700px) {
	.ranking-container {
		grid-template-columns: 1fr;
	}
}

.ranking-section {
	background: var(--surface-1);
	border: 1px solid var(--border-md);
	border-radius: var(--radius-lg);
	padding: 18px;
}

.ranking-title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--text-hi);
}

/* シーズンランキングのヘッダー行（タイトル＋過去シーズン選択セレクトを横並びに） */
.season-ranking-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.season-ranking-header .ranking-title {
	margin-bottom: 0;
}

.season-select {
	width: auto;
	max-width: 200px;
	font-size: 12px;
	padding: 4px 8px;
}

.ranking-empty {
	color: var(--text-lo);
	font-size: 12px;
	text-align: center;
	padding: 20px 0;
}

.ranking-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ranking-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	border: 1px solid transparent;
	transition: border-color .15s;
}

.ranking-item:hover {
	border-color: var(--border-md);
}

.ranking-item.rank-gold {
	border-color: rgba(255, 200, 60, .35);
	background: rgba(255, 200, 60, .06);
}

.ranking-item.rank-silver {
	border-color: rgba(200, 200, 210, .35);
	background: rgba(200, 200, 210, .05);
}

.ranking-item.rank-bronze {
	border-color: rgba(210, 140, 90, .35);
	background: rgba(210, 140, 90, .06);
}

.rank-number {
	font-size: 16px;
	font-weight: 900;
	min-width: 26px;
	text-align: center;
	color: var(--text-lo);
}

.rank-gold .rank-number {
	color: #e8c468;
}

.rank-silver .rank-number {
	color: #c4c0ba;
}

.rank-bronze .rank-number {
	color: #cf8a5c;
}

.ranking-item-body {
	flex: 1;
	min-width: 0;
}

.ranking-item-author {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 3px;
	font-size: 11px;
	color: var(--text-lo);
	flex-direction: row;
}

.ranking-item-title {
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text-hi);
}

.ranking-chords {
	margin-top: 4px;
}

.ranking-video-link a {
	font-size: 10px;
	color: var(--accent);
	text-decoration: none;
}

.ranking-item-likes {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.ranking-likes-count {
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	color: var(--text-hi);
}

.ranking-likes-label {
	font-size: 10px;
	color: var(--accent2);
}

/* ══════════════════════
   POST CARD — backing card
   ══════════════════════ */
.backing-card .post-card-header {
	margin-bottom: 8px;
}

/* ══════════════════════
   DIALOG
   ══════════════════════ */
.jh-dialog-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .7);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	backdrop-filter: blur(4px);
}

.jh-dialog {
	background: var(--surface-1);
	border: 1px solid var(--border-hi);
	border-radius: var(--radius-lg);
	width: 100%;
	max-width: 560px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 16px 56px rgba(0, 0, 0, .6);
	animation: cardRise .3s cubic-bezier(.22, 1, .36, 1) both;
}

.jh-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px 12px;
	border-bottom: 1px solid var(--border-md);
}

.jh-dialog-header h3 {
	margin: 0;
	font-size: 15px;
}

.jh-dialog-close {
	background: none;
	border: none;
	font-size: 17px;
	cursor: pointer;
	color: var(--text-md);
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	transition: all .15s;
}

.jh-dialog-close:hover {
	color: var(--text-hi);
	background: var(--surface-3);
}

.assign-dialog-hint {
	margin: 10px 20px 0;
	font-size: 13px;
	color: var(--text-md);
}

.assign-backing-list {
	flex: 1;
	overflow-y: auto;
	padding: 12px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.assign-loading,
.assign-empty {
	text-align: center;
	color: var(--text-lo);
	font-size: 13px;
	padding: 20px 0;
}

.assign-backing-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--border-md);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	transition: border-color .15s;
	cursor: pointer;
}

.assign-backing-item:hover {
	border-color: var(--accent);
}

.assign-item-info {
	flex: 1;
	min-width: 0;
}

.assign-item-title {
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
	color: var(--text-hi);
}

.assign-item-chords {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 4px;
}

.assign-item-likes {
	font-size: 11px;
	color: var(--text-lo);
}

/* バッキング選択ダイアログ内の各項目のダウンロードリンク
   （DAWでの練習用に、選ぶ前に音源を入手できるようにする） */
.assign-item-download {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-lo);
	background: var(--surface-3);
	border: 1px solid var(--border-md);
	font-size: 12px;
	text-decoration: none;
	transition: color .15s, border-color .15s, background .15s;
}

.assign-item-download:hover {
	color: var(--accent3);
	border-color: var(--accent3);
	background: var(--accent3-dim);
}

.jh-dialog-actions {
	padding: 12px 20px 16px;
	border-top: 1px solid var(--border-md);
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* assign section (edit page) */
.assign-backing-section {
	margin-top: 28px;
	padding: 18px;
	border: 1px dashed var(--border-md);
	border-radius: var(--radius-lg);
}

.assign-section-title {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-hi);
}

.assign-section-desc {
	font-size: 13px;
	color: var(--text-md);
	margin: 0 0 12px;
	line-height: 1.6;
}

.assign-current-badge {
	display: inline-block;
	margin-bottom: 12px;
	padding: 4px 10px;
	border-radius: 20px;
	background: var(--accent3-dim);
	color: var(--accent3);
	font-size: 11px;
	font-weight: 600;
}

/* ══════════════════════
   POST AUTHOR LINK
   ══════════════════════ */
a.user-icon {
	text-decoration: none;
	cursor: pointer;
}

.post-author-link .post-author-name {
	color: var(--text-hi);
}

/* ══════════════════════
   PB CLICK GROUP
   ══════════════════════ */
.pb-click-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ══════════════════════
   POSTS PLACEHOLDER
   ══════════════════════ */
.posts-placeholder {
	padding: 56px 24px;
	text-align: center;
}

.posts-placeholder .ph-icon {
	font-size: 32px;
	opacity: .12;
	display: block;
	margin-bottom: 14px;
}

.posts-placeholder .ph-text {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-lo);
}

/* ══════════════════════
   RESPONSIVE
   ══════════════════════ */
@media (max-width: 1100px) {
	.posts-layout {
		grid-template-columns: 200px 1fr 0;
	}

	.posts-sidebar-right {
		display: none;
	}
}

@media (max-width: 768px) {
	.posts-layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto;
	}

	/* 左サイドバーのタブ(全投稿/投稿/バッキング/インプロ/ランキング/投稿する)は、
	   posts-feed-header内の.posts-tabsと機能が完全に重複しているため、
	   モバイルでは非表示にする（PC表示では両方残す）。
	   .posts-nav-btnがwidth:100%のため、狭い画面でflex-wrapさせようとすると
	   1つずつ改行されて縦に間延びしてしまう問題もあったため、
	   「詰めて表示する」のではなく「重複している方を消す」方針にした */
	.posts-sidebar-left {
		display: none;
	}

	/* 唯一のタブ切り替えになったposts-tabsは、6項目を無理に詰め込まず
	   横スクロールできるようにする（Twitter等でよく見る形式） */
	.posts-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tab-btn {
		flex: 0 0 auto;
		white-space: nowrap;
		font-size: 12px;
		padding: 14px 14px;
	}

	.posts-feed-col {
		border-right: none;
	}

	main {
		padding: var(--space-4) var(--space-3);
	}
}

/* ── プログレッション一覧のカードをモバイルでは縦積みに ──
   .prog-cardは元々display:flexで「情報エリア＋操作ボタン」が横並びだったため、
   狭い画面では情報エリア（コード名・コードバッジ・各種タグ）が極端に圧縮され、
   日本語テキストが1文字ずつ改行されるほど窮屈になり、逆に操作ボタン側は
   カードからはみ出して見えなくなっていた。
   縦積みに変えることで、情報エリア・操作ボタンの両方に画面の全幅を確保する。 */
@media (max-width: 768px) {
	.prog-card {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.prog-card-actions {
		flex-wrap: wrap;
	}
}

/* ── 投稿の試聴プレーヤー（バッキング投稿）がモバイルで右にはみ出す不具合の修正 ──
   .post-playerは[再生ボタン(flex-shrink:0) + シークバー/時間(flex:1) + "🎵 音源"ラベル
   (flex-shrink:0, white-space:nowrap)]の横並び。狭い画面では、縮まない2要素
   （再生ボタン・ラベル）の分だけでシークバーの最小幅を圧迫し、収まりきらない分だけ
   行全体が右にはみ出していた（ラベルがoverflow:visibleで見切れて見える形になっていた）。
   ラベルは再生ボタン・シークバーで既に「音声プレーヤーである」ことが分かる
   装飾的な補足情報のため、モバイルでは非表示にして幅を確保する。 */
@media (max-width: 768px) {
	.player-label {
		display: none;
	}
}

/* ── ランキング→投稿ジャンプ ハイライト ── */
@keyframes highlight-flash {
	0% {
		box-shadow: 0 0 0 2px var(--accent), 0 0 24px var(--accent-glow);
		background: var(--accent-subtle);
	}

	70% {
		box-shadow: 0 0 0 2px var(--accent), 0 0 24px var(--accent-glow);
		background: var(--accent-subtle);
	}

	100% {
		box-shadow: none;
		background: transparent;
	}
}

.highlight-flash {
	animation: highlight-flash 1.8s ease forwards;
}

/* ── フォロワー一覧 / フォロー一覧 ── */
.follow-list-container {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px 16px;
}

.follow-list-title {
	font-size: 1.2rem;
	margin-bottom: 16px;
}

.follow-list-title a {
	color: var(--accent);
	text-decoration: none;
}

.follow-list-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--border-md);
}

.follow-list-tab {
	padding: 8px 14px;
	color: inherit;
	text-decoration: none;
	opacity: 0.6;
}

.follow-list-tab.active {
	opacity: 1;
	border-bottom: 2px solid var(--accent);
}

.follow-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.follow-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--surface-2);
	border: 1px solid var(--border-md);
	border-radius: 10px;
	padding: 10px 14px;
}

.follow-list-user {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

.follow-list-name {
	font-weight: 600;
}

.follow-toggle-btn.is-following {
	opacity: 0.7;
}

.follow-list-empty {
	opacity: 0.6;
	padding: 24px 0;
	text-align: center;
}

/* ─────────────────────────────────────────────
   リプライ機能（投稿カード下の件数バッジ + スレッドモーダル）
   ───────────────────────────────────────────── */

.reply-count-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: transparent;
	border: none;
	color: var(--text-md);
	font-size: 13px;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: var(--radius-sm);
	transition: color .15s, background .15s;
}

.reply-count-btn:hover {
	color: var(--text-hi);
	background: var(--surface-3);
}

.reply-count-num {
	font-weight: 700;
}

.reply-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1000;
	align-items: center;
	justify-content: center;
}

.reply-modal-overlay.open {
	display: flex;
}

.reply-modal {
	width: min(92vw, 480px);
	max-height: 80vh;
	background: var(--surface-2);
	border: 1px solid var(--border-lo);
	border-radius: var(--radius-md, 8px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.reply-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border-lo);
	flex-shrink: 0;
}

.reply-modal-title {
	font-weight: 700;
	color: var(--text-hi);
}

.reply-modal-close {
	background: none;
	border: none;
	color: var(--text-md);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.reply-modal-close:hover {
	color: var(--text-hi);
}

.reply-modal-list {
	overflow-y: auto;
	overflow-x: hidden;
	/* 中の要素(reply-meta/reply-actions等)が万一収まりきらなくても、
	   横スクロールやはみ出しではなく折り返し・非表示側で吸収させるための保険 */
	padding: 8px 16px;
	flex: 1;
	min-height: 80px;
}

.reply-loading,
.reply-empty {
	text-align: center;
	color: var(--text-lo);
	padding: 24px 0;
	font-size: 13px;
}

.reply-item {
	display: flex;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border-lo);
}

.reply-item-child {
	border-bottom: none;
	padding: 8px 0;
}

.reply-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

.reply-avatar-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
}

.reply-body {
	flex: 1;
	min-width: 0;
}

.reply-meta {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.reply-author {
	font-weight: 700;
	font-size: 13px;
	color: var(--text-hi);
}

.reply-time {
	font-size: 11px;
	color: var(--text-lo);
}

.reply-content {
	font-size: 13px;
	color: var(--text-md);
	white-space: pre-wrap;
	margin: 2px 0 4px;
	word-break: break-word;
}

.reply-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.reply-action-btn {
	background: none;
	border: none;
	color: var(--text-lo);
	font-size: 12px;
	cursor: pointer;
	padding: 0;
}

.reply-action-btn:hover {
	color: var(--accent);
}

.reply-report-btn {
	background: none;
	border: none;
	color: var(--text-lo);
	font-size: 12px;
	cursor: pointer;
	padding: 0;
}

.reply-report-btn:hover {
	color: #a25060;
}

.reply-like-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	color: var(--text-lo);
	font-size: 12px;
	cursor: pointer;
	padding: 0;
	transition: color .2s, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.reply-like-btn:hover {
	color: #c06060;
}

.reply-like-btn.liked {
	color: #c06060;
}

.reply-like-btn:disabled {
	cursor: not-allowed;
	opacity: .5;
}

.reply-like-btn:disabled:hover {
	color: var(--text-lo);
}

.reply-like-btn.liked .reply-like-icon {
	animation: likePop .32s cubic-bezier(.34, 1.56, .64, 1) both;
}

.reply-like-icon {
	font-size: 12px;
}

.reply-children-toggle {
	display: block;
	background: none;
	border: none;
	color: var(--accent);
	font-size: 12px;
	cursor: pointer;
	padding: 6px 0 0;
}

.reply-children {
	display: none;
	margin-top: 6px;
	padding-left: 12px;
	border-left: 2px solid var(--border-lo);
}

.reply-children.open {
	display: block;
}

.reply-child-form-wrap {
	margin-top: 6px;
}

.reply-child-form {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.reply-child-input {
	flex: 1;
	min-width: 0;
	resize: none;
	background: var(--surface-3);
	border: 1px solid var(--border-lo);
	border-radius: var(--radius-sm);
	color: var(--text-hi);
	font-size: 12px;
	padding: 6px 8px;
}

.reply-child-submit,
.reply-child-cancel {
	font-size: 12px;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	border: none;
	cursor: pointer;
}

.reply-child-submit {
	background: var(--accent);
	color: var(--bg);
	font-weight: 700;
}

.reply-child-cancel {
	background: transparent;
	color: var(--text-lo);
}

.reply-modal-form {
	display: flex;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--border-lo);
	flex-shrink: 0;
}

.reply-modal-input {
	flex: 1;
	resize: none;
	background: var(--surface-3);
	border: 1px solid var(--border-lo);
	border-radius: var(--radius-sm);
	color: var(--text-hi);
	font-size: 13px;
	padding: 8px 10px;
}

.reply-modal-submit {
	align-self: flex-end;
	background: var(--accent);
	color: var(--bg);
	font-weight: 700;
	border: none;
	border-radius: var(--radius-sm);
	padding: 8px 16px;
	cursor: pointer;
}

.reply-login-prompt {
	padding: 14px 16px;
	margin: 0;
	font-size: 13px;
	text-align: center;
	color: var(--text-lo);
	border-top: 1px solid var(--border-lo);
	flex-shrink: 0;
}

.reply-login-prompt a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}
/* ── デフォルトバッキング進行セクション ─────────────── */
/* ══════════════════════════════════════
   デフォルトバッキング進行セクション
   ------------------------------------------------------------------
   以前の実装には3つの不具合があった（デザインが「地味」に見えた主因）。
   1. border: 1px solid var(--border) の --border という変数がそもそも
      common.cssに定義されておらず（--border-hi/--border-md/--border-lo は
      あるが --border は無い）、無効なカスタムプロパティ値としてborder
      宣言全体が無効になり、枠線が一切描画されていなかった。
   2. コード進行の各コードに付けていた class="chord-chip" にCSS定義が
      存在せず、完全に無装飾のテキストとして表示されていた
      （既存のchord-badge相当のスタイルを持たせるべきところ）。
   3. th:each="chord : ${#strings.arraySplit(p.chords, ',')}" がカンマ区切りで
      分割していたが、実際のchordsカラムはスペース区切り（例:"C G Am F"）
      だったため分割が機能せず、進行全体が1個の巨大なチップとして
      表示されていた。
   併せてフォントサイズを全体的に引き上げ、カードのホバー演出・
   メタ情報のピル表示・difficultyの★を金色にする等、視覚的な情報量を増やした。
   ════════════════════════════════════ */
.default-prog-section {
	max-width: 960px;
	margin: 2.5rem auto 0;
	padding: 0 1rem 3rem;
}

.default-prog-heading {
	font-size: 1.35rem;
	font-weight: 800;
	margin-bottom: 8px;
	color: var(--text-hi);
}

.default-prog-desc {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--text-lo);
	margin-bottom: 1.5rem;
}

.default-genre-block {
	margin-bottom: 14px;
}

.default-genre-details {
	border: 1px solid var(--border-md);
	border-radius: 12px;
	overflow: hidden;
	background: var(--surface-1);
	transition: border-color .15s;
}

.default-genre-details[open] {
	border-color: var(--accent3);
}

.default-genre-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	background: var(--surface-2);
	cursor: pointer;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text-hi);
	list-style: none;
	user-select: none;
	transition: background .15s;
}

.default-genre-summary::-webkit-details-marker {
	display: none;
}

.default-genre-summary::before {
	content: '▸';
	display: inline-block;
	color: var(--accent3);
	font-size: .85em;
	transition: transform .15s;
	flex-shrink: 0;
}

.default-genre-details[open]>.default-genre-summary::before {
	transform: rotate(90deg);
}

.default-genre-summary:hover {
	background: var(--surface-3);
}

.default-genre-count {
	font-size: 0.85rem;
	color: var(--text-lo);
	font-weight: 500;
	margin-left: auto;
}

/* キー階層（ジャンル配下、BPMグリッドの上位）。ジャンルより一段インデントして
   入れ子であることを視覚的に示す */
.default-key-block {
	margin: 10px 14px;
}

.default-key-details {
	border: 1px solid var(--border-md);
	border-radius: 8px;
	overflow: hidden;
	background: var(--surface-1);
}

.default-key-summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--surface-1);
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-hi);
	list-style: none;
	user-select: none;
}

.default-key-summary::-webkit-details-marker {
	display: none;
}

.default-key-summary::before {
	content: '▸';
	display: inline-block;
	color: var(--text-lo);
	font-size: .8em;
	transition: transform .15s;
}

.default-key-details[open]>.default-key-summary::before {
	transform: rotate(90deg);
}

.default-key-summary:hover {
	background: var(--surface-2);
}

.default-prog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
	padding: 14px;
	background: var(--surface-1);
}

.default-prog-card {
	background: var(--surface-2);
	border: 1px solid var(--border-md);
	border-radius: 10px;
	padding: 14px;
	transition: border-color .15s, transform .15s;
}

.default-prog-card:hover {
	border-color: var(--accent3);
	transform: translateY(-2px);
}

.default-prog-card-name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-hi);
	margin-bottom: 8px;
}

.default-prog-meta {
	display: flex;
	gap: 6px;
	font-size: 0.82rem;
	color: var(--text-lo);
	margin-bottom: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.default-prog-meta-chip {
	background: var(--surface-3);
	border-radius: 20px;
	padding: 2px 10px;
	font-weight: 600;
}

.default-prog-meta-stars {
	color: #ffb300;
	letter-spacing: 1px;
	font-size: .95rem;
}

.default-prog-chords {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 14px;
}

/* このセクション内のchord-badgeは、既存の投稿カード内(10px)より少し大きめにして
   進行の内容をひと目で読み取りやすくする */
.default-prog-chords .chord-badge {
	font-size: 11.5px;
	padding: 3px 9px;
}

.default-prog-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.default-login-hint {
	font-size: 0.85rem;
	color: var(--text-lo);
}

.default-login-hint a {
	color: var(--accent);
	font-weight: 600;
}