.mmem-mypage {
	box-sizing: border-box;
	max-width: 960px;
	margin: 0 auto;
	padding: 24px;
	border-radius: 12px;
	font-size: 15px;
	background: var(--mmem-color-bg, #000);
	color: var(--mmem-color-text, #fff);
}

.mmem-mypage * {
	box-sizing: border-box;
}

.mmem-mypage-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: 10px;
	margin-bottom: 16px;
}

.mmem-mypage-title {
	margin: 0;
	color: var(--mmem-color-heading, #fff);
	font-size: 15pt;
	font-weight: 700;
}

.mmem-mypage-header-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mmem-logout-link {
	font-size: 13px;
	color: #666;
	text-decoration: none;
	white-space: nowrap;
}

.mmem-logout-link:hover {
	text-decoration: underline;
}

/* ログイン・会員登録フォーム */
.mmem-auth-form {
	max-width: 400px;
	margin: 20px auto;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 24px;
}

.mmem-auth-notice {
	text-align: center;
}

.mmem-auth-form label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin: 10px 0 4px;
}

.mmem-auth-form .mmem-input {
	max-width: none;
}

.mmem-auth-form .mmem-button {
	width: 100%;
	margin-top: 12px;
	padding: 10px;
	font-size: 14px;
}

.mmem-auth-error {
	background: #fbe9e9;
	color: #b5312f;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 13px;
	margin: 0 0 14px;
}

.mmem-auth-links {
	text-align: center;
	font-size: 13px;
	margin-top: 14px;
}

.mmem-account-field-label {
	color: #ffd400;
	font-weight: 700;
}

.mmem-verified-badge,
.mmem-unverified-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: normal;
	padding: 1px 8px;
	border-radius: 10px;
	margin-left: 4px;
	vertical-align: middle;
}

.mmem-verified-badge {
	background: #e8f9ee;
	color: #1e8a49;
}

.mmem-unverified-badge {
	background: #fbe9e9;
	color: #b5312f;
}

.mmem-notice {
	border-radius: 8px;
	padding: 10px 16px;
	font-size: 13px;
	margin-bottom: 16px;
}

.mmem-notice-success {
	background: #e8f9ee;
	color: #1e8a49;
}

.mmem-notice-error {
	background: #fbe9e9;
	color: #b5312f;
}

.mmem-notice-warning {
	background: #fff6e5;
	color: #7a4b12;
}

.mmem-notice a {
	font-weight: 600;
}

.mmem-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	height: 0;
	overflow: hidden;
}

/* 通知 */
.mmem-notifications {
	position: relative;
}

.mmem-notifications-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 4px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 20px;
	padding: 4px 12px;
	line-height: 1;
	cursor: pointer;
	font-size: 13px;
	color: #000;
	white-space: nowrap;
}

.mmem-notifications-toggle .dashicons {
	width: 14px;
	height: 14px;
	font-size: 14px;
	line-height: 1;
	flex-shrink: 0;
}

.mmem-notifications-toggle:hover {
	background: #3eb489;
	border-color: #3eb489;
	color: #fff;
}

.mmem-notifications-badge {
	display: inline-block;
	background: #d63638;
	color: #fff;
	border-radius: 10px;
	padding: 1px 6px;
	font-size: 11px;
	margin-left: 4px;
}

.mmem-notifications-panel {
	position: absolute;
	right: 0;
	top: 100%;
	margin-top: 6px;
	width: 320px;
	max-height: 400px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	z-index: 50;
}

.mmem-notifications-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mmem-notification-item {
	padding: 10px 14px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13px;
}

.mmem-notifications-list-full .mmem-notification-item {
	padding: 12px 4px;
	font-size: 14px;
}

.mmem-notification-item.is-unread {
	background: #fef8f0;
}

.mmem-notification-item time {
	display: block;
	color: #999;
	font-size: 11px;
	margin-top: 2px;
}

/* タブ */
.mmem-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 2px solid #e2b64c;
	margin-bottom: 20px;
}

.mmem-tab-link {
	padding: 10px 16px;
	text-decoration: none;
	color: #555;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	font-weight: 600;
}

.mmem-tab-link.is-active {
	color: #7a4b12;
	background: #fff6e5;
	border-color: #e2b64c;
}

.mmem-tab-disabled {
	padding: 10px 16px;
	color: #bbb;
	font-weight: 600;
	cursor: not-allowed;
}

.mmem-tab-panel {
	display: none;
}

.mmem-tab-panel.is-active {
	display: block;
}

.mmem-section-header {
	margin: 28px 0 10px;
}

.mmem-section-header h3 {
	display: block;
	margin: 0 0 4px;
	background: #c0392b;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 4px;
	border-left: none;
}

.mmem-description {
	color: #666;
	font-size: 13px;
	margin: 0 0 0 14px;
}

.mmem-empty {
	color: #888;
	font-style: italic;
}

/* コンプリート率 */
.mmem-completion {
	margin-bottom: 10px;
}

.mmem-completion-label {
	font-weight: 600;
	margin-bottom: 6px;
}

.mmem-progress-bar {
	background: #eee;
	border-radius: 10px;
	height: 16px;
	overflow: hidden;
}

.mmem-progress-bar-fill {
	background: linear-gradient(90deg, #e2b64c, #b5701c);
	height: 100%;
	transition: width 0.4s ease;
}

.mmem-match-count {
	font-weight: 600;
	font-size: 17px;
	margin-bottom: 8px;
	color: #3eb489;
}

/* トレーディングカード */
.mmem-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 140px);
	gap: 16px;
}

/* PCでは横幅140pxのカードを崩さず、1行あたり必ず6枚になるよう列数・間隔を固定する */
@media (min-width: 601px) {
	.mmem-card-grid {
		grid-template-columns: repeat(6, 140px);
		gap: 10px;
	}
}

.mmem-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #1c1c1c;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
	border: 2px solid #c9a24b;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mmem-card > .mmem-card-page-link {
	margin-top: auto;
}

.mmem-card:hover,
.mmem-card:focus {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
	outline: none;
}

.mmem-card-image {
	position: relative;
	height: 200px;
	overflow: hidden;
	background: #333;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mmem-card-image img {
	width: auto;
	height: 200px;
	max-width: none;
	display: block;
}

.mmem-card-image-placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #2a2a2a, #2a2a2a 10px, #333 10px, #333 20px);
}

.mmem-card-unplayed {
	opacity: 0.85;
}

.mmem-card-mystery {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #222;
	color: #666;
	font-size: 48px;
	font-weight: 700;
}

.mmem-card-unplayed .mmem-card-title {
	padding-bottom: 10px;
}

.mmem-card-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	background: #7a4b12;
	color: #fff;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 4px;
}

.mmem-card-title {
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: 8px 8px 2px;
	line-height: 1.3;
}

.mmem-card-date {
	color: #d8c48f;
	font-size: 11px;
	padding: 0 8px 8px;
}

.mmem-card-page-link {
	display: block;
	text-align: center;
	background: #3eb489;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
	padding: 6px 8px;
}

.mmem-card-page-link:hover {
	background: #339973;
}

.mmem-card-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	line-height: 20px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	padding: 0;
}

/* 遊びたいリスト */
.mmem-wishlist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}

.mmem-wishlist-item {
	display: flex;
	flex-direction: column;
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
	background: #fff;
	cursor: pointer;
}

.mmem-wishlist-item-actions {
	margin-top: auto;
	display: flex;
	flex-direction: column;
}

.mmem-wishlist-item img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
	filter: brightness(0.6);
}

.mmem-wishlist-item-title {
	font-size: 12px;
	font-weight: 600;
	padding: 6px 6px 2px;
}

/* フォーム全般 */
.mmem-input {
	display: block;
	width: 100%;
	max-width: 420px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	margin-bottom: 10px;
	font-size: 14px;
}

.mmem-manual-add,
.mmem-recruitment-create,
.mmem-account-form {
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 16px;
	width: 100%;
	box-sizing: border-box;
}

#mmem-qr-scan-button {
	margin-top: 8px;
}

.mmem-qr-video {
	display: block;
	width: 100%;
	max-width: 360px;
	margin: 12px 0;
	border-radius: 8px;
	background: #000;
}

.mmem-avatar-section {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	width: 100%;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
}

.mmem-avatar-preview-wrap {
	display: flex;
	flex-shrink: 0;
}

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

.mmem-avatar-pending-notice {
	width: 100%;
	box-sizing: border-box;
	margin: -8px 0 16px;
	color: #e33;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.mmem-member-id-cell {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.mmem-qr-toggle {
	display: inline-block;
	margin: 0 0 16px;
	color: #3eb489;
	font-size: 13px;
	font-weight: normal;
	text-decoration: underline;
}

.mmem-qr-wrapper {
	margin-bottom: 16px;
}

.mmem-divider {
	width: 100%;
	border: none;
	border-top: 1px solid #eee;
	margin: 0 0 16px;
}

.mmem-member-qr {
	width: 160px;
	max-width: 100%;
	padding: 10px;
	margin-bottom: 16px;
	background: #fff;
	border-radius: 8px;
	line-height: 0;
}

.mmem-member-qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.mmem-avatar-controls {
	flex: 1;
	min-width: 0;
}

.mmem-avatar-controls input[type="file"] {
	display: block;
	width: 100%;
	max-width: 260px;
	font-size: 12px;
	margin-bottom: 8px;
	color: inherit;
}

.mmem-avatar-buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.mmem-preset-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.mmem-preset-avatar-option {
	padding: 2px;
	border: 2px solid transparent;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.mmem-preset-avatar-option img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.mmem-preset-avatar-option:hover {
	border-color: #3eb489;
}

.mmem-preset-avatar-option.is-selected {
	border-color: #3eb489;
	box-shadow: 0 0 0 2px rgba( 62, 180, 137, 0.4 );
}

.mmem-search-results {
	max-height: 220px;
	overflow-y: auto;
}

.mmem-search-result-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 4px;
	border-bottom: 1px solid #eee;
	font-size: 13px;
}

.mmem-search-result-item img {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	object-fit: cover;
}

.mmem-search-result-item .mmem-avatar {
	border-radius: 50%;
}

.mmem-search-result-item button {
	margin-left: auto;
}

.mmem-selected-scenario {
	font-weight: 600;
	margin-bottom: 10px;
	min-height: 1.4em;
}

.mmem-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0;
}

.mmem-radio-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0;
}

/* ボタン */
/* ボタンの統一仕様: 通常時は白背景・黒文字、ホバー/選択中はミントグリーン背景・白文字 */
.mmem-button,
.mmem-button-secondary {
	display: inline-block;
	background: #fff;
	color: #000;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 5px 16px;
	line-height: 1.4;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.mmem-button:hover,
.mmem-button-secondary:hover {
	background: #3eb489;
	border-color: #3eb489;
	color: #fff;
}

.mmem-button-small {
	padding: 3px 10px;
	font-size: 12px;
}

/* フレンド一覧 */
.mmem-friend-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mmem-friend-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px;
	border-bottom: 1px solid #eee;
}

.mmem-friend-info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

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

.mmem-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.mmem-avatar-small {
	width: 24px;
	height: 24px;
}

.mmem-friend-name {
	font-weight: 600;
}

.mmem-friend-status {
	color: #999;
	font-size: 12px;
}


.mmem-friend-detail {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 2px dashed #ddd;
}

/* 仮募集 */
.mmem-recruitment-create h3,
.mmem-recruitment-create label {
	color: #fff;
}

.mmem-recruitment-create label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin: 8px 0 4px;
}

.mmem-recruitment-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.mmem-recruitment-card {
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 14px;
	background: #fff;
}

/* フレンドの仮募集カード: 画像(左)+ステータス/タイトル(右)の見出し行 → 募集人数/公演日/募集期限
   → ホスト → 参加者 → 参加ボタン、の縦積み並び */
.mmem-recruitment-row-media {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.mmem-recruitment-scenario-image {
	width: 140px;
	height: 140px;
	object-fit: cover;
	object-position: center;
	border-radius: 8px;
	flex-shrink: 0;
}

.mmem-recruitment-media-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mmem-recruitment-row-host,
.mmem-recruitment-participants li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0;
}

.mmem-recruitment-participants {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ホストの名前(.mmem-recruitment-host-name)がfont-size:12pxを明示指定しているのに対し、
   参加者名側は明示指定が無く周囲のカードから大きめのfont-sizeを継承していたため、
   同じカード内で名前ごとに大きさがバラついていた。ホスト名と揃える。 */
.mmem-recruitment-participants li span {
	font-size: 12px;
}

/* ============================================================
 * 「予約管理」タブ
 * ============================================================ */

.mmem-booking-source-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 10px;
	margin-bottom: 6px;
}

.mmem-booking-source-own {
	background: #3eb489;
	color: #fff;
}

.mmem-booking-source-recruitment {
	background: #ffd400;
	color: #000;
}

.mmem-booking-source-split {
	background: #eee;
	color: #444;
}

.mmem-warikan-request-amount {
	font-size: 14px;
	font-weight: 700;
	margin: 6px 0;
}

.mmem-friend-split-group {
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 12px;
	background: #fff;
}

.mmem-friend-split-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.mmem-friend-split-toggle {
	background: none;
	border: 1px solid #ccc;
	border-radius: 6px;
	width: 28px;
	height: 28px;
	font-size: 12px;
	cursor: pointer;
	flex-shrink: 0;
}

.mmem-friend-split-body {
	margin-top: 12px;
	border-top: 1px solid #eee;
	padding-top: 12px;
}

.mmem-split-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #f2f2f2;
}

.mmem-split-share:last-child {
	border-bottom: none;
}

.mmem-split-share-amount {
	font-weight: 700;
	min-width: 70px;
}

.mmem-split-share-status {
	font-size: 12px;
	color: #888;
}

.mmem-split-share-status.is-paid {
	color: #3eb489;
	font-weight: 700;
}

.mmem-split-share-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.mmem-split-friend-picker {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin-top: 6px;
}

.mmem-split-friend-picker .mmem-input {
	margin-bottom: 0;
	max-width: 220px;
}

.mmem-recruitment-title {
	font-weight: 700;
	font-size: 15px;
}

.mmem-recruitment-title a {
	color: #3eb489;
	text-decoration: underline;
}

.mmem-recruitment-datetime {
	font-size: 12px;
	color: #666;
}

.mmem-status-badge {
	display: inline-block;
	box-sizing: border-box;
	margin-top: 4px;
	font-size: 11px;
	line-height: 18px;
	height: 22px;
	padding: 2px 10px;
	border-radius: 10px;
	text-align: center;
	background: #eee;
	white-space: nowrap;
}

.mmem-status-recruiting {
	background: #ffd400;
	color: #000;
}

.mmem-status-completed {
	background: #e8f9ee;
	color: #1e8a49;
}

.mmem-status-confirming {
	background: #fff6e0;
	color: #a3720a;
}

.mmem-status-awaiting_payment {
	background: #f1e9ff;
	color: #5a2fb3;
}

.mmem-status-cancelled,
.mmem-status-expired {
	background: #fbe9e9;
	color: #b5312f;
}

.mmem-status-unused {
	background: #e8f9ee;
	color: #1e8a49;
}

.mmem-status-reserved {
	background: #fff6e0;
	color: #a3720a;
}

.mmem-status-used {
	background: #eee;
	color: #666;
}

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

.mmem-coupon-item {
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 12px 16px;
}

.mmem-coupon-item.is-inactive {
	opacity: 0.55;
}

.mmem-coupon-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.mmem-coupon-label {
	font-size: 16px;
	font-weight: 700;
}

.mmem-coupon-meta {
	margin-top: 6px;
	display: flex;
	gap: 14px;
	font-size: 12px;
	color: #666;
}

.mmem-coupon-hint {
	font-size: 12px;
	color: #666;
}

.mmem-recruitment-deadline {
	font-size: 12px;
	color: #666;
	margin-bottom: 8px;
}

/* フレンドの仮募集カードのみ: 公演日・募集期限のフォントサイズを募集人数(13px)に揃える */
.mmem-recruitment-datetime,
.mmem-recruitment-deadline {
	font-size: 15px;
}


.mmem-recruitment-host-name {
	font-size: 12px;
	font-weight: 600;
	color: #444;
}

.mmem-confirm-label {
	font-size: 11px;
	padding: 1px 8px;
	border-radius: 10px;
	background: #fbe9e9;
	color: #b5312f;
}

.mmem-confirm-label.is-confirmed {
	background: #e8f9ee;
	color: #1e8a49;
}

.mmem-recruitment-payment-section {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed #ddd;
	font-size: 13px;
}

.mmem-recruitment-qr {
	max-width: 140px;
	margin-top: 6px;
	background: #fff;
}

.mmem-recruitment-qr svg {
	width: 100%;
	height: auto;
	display: block;
}

.mmem-recruitment-create-datetime {
	font-weight: 700;
	margin: 0 0 8px;
}

.mmem-host-badge {
	margin-left: 6px;
	font-size: 10px;
	background: #7a4b12;
	color: #fff;
	padding: 1px 6px;
	border-radius: 4px;
}

/* 募集人数は特に目立たせる(タイトルの15pxより大きく、黄色) */
.mmem-recruitment-capacity {
	font-size: 18px;
	font-weight: 700;
	color: #ffd400;
	margin-bottom: 8px;
}

/* 中止/期限切れ、または予約確定して全員の支払いが完了した仮募集は目立たせない */
.mmem-recruitment-capacity-muted {
	color: #888;
}

.mmem-recruitment-members {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.mmem-recruitment-members li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	padding: 3px 0;
}

.mmem-recruitment-members li span:first-of-type {
	flex: 1;
}

.mmem-payment-label {
	display: inline-block;
	font-size: 11px;
	padding: 1px 8px;
	border-radius: 10px;
}

.mmem-payment-unpaid {
	background: #fbe9e9;
	color: #b5312f;
}

.mmem-payment-paid {
	background: #e8f9ee;
	color: #1e8a49;
}

.mmem-recruitment-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

/* モーダル */
.mmem-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
}

.mmem-modal:not([hidden]) {
	display: flex;
}

.mmem-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.mmem-mypage .mmem-modal-content .mmem-input {
	background: #fff;
	color: #222;
	border-color: #ccc;
}

.mmem-modal-content input[type="date"] {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.mmem-modal-content {
	position: relative;
	background: #fff;
	color: #222;
	border-radius: 10px;
	max-width: 480px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 24px;
}

.mmem-choice-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
}

.mmem-choice-actions .mmem-button {
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px 16px;
	box-sizing: border-box;
}

.mmem-card-character {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
	text-align: center;
}

.mmem-card-character-illustration-wrap {
	max-height: 300px;
	overflow: hidden;
	border-radius: 6px;
	flex-shrink: 0;
}

.mmem-card-character-illustration {
	display: block;
	width: auto;
	height: auto;
	max-width: 280px;
}

.mmem-card-character-label {
	font-weight: 700;
	font-size: 13px;
	margin: 0;
}

.mmem-card-character-name {
	font-weight: 700;
	font-size: 16px;
	margin: 0;
}

.mmem-card-character-furigana,
.mmem-card-character-meta,
.mmem-card-character-occupation {
	color: #666;
	font-size: 12px;
	margin: 0;
}

.mmem-card-character-picker {
	margin-top: 10px;
}

.mmem-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	color: #222;
	font-size: 22px;
	cursor: pointer;
}

/* トースト */
.mmem-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: #222;
	color: #fff;
	padding: 10px 20px;
	border-radius: 20px;
	font-size: 13px;
	z-index: 2000;
}

.mmem-toast.is-error {
	background: #b5312f;
}

.mmem-guest-notice {
	text-align: center;
	padding: 40px 20px;
}

.mmem-locked-notice {
	text-align: center;
	padding: 40px 20px;
	color: #888;
}

@media (max-width: 600px) {
	.mmem-card-grid,
	.mmem-wishlist-grid {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}

	.mmem-recruitment-list {
		grid-template-columns: 1fr;
	}

	/* タブナビゲーションをスマホのみ横3列×縦nの長方形ボタングリッドに切り替える(タブ風の下線・角丸なしデザインは廃止)。
	   ボタンの縦幅はテキストに合わせた自動サイズ(固定高さは持たせない)。 */
	.mmem-tabs {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
		border-bottom: none;
		margin-bottom: 16px;
	}

	.mmem-tab-link,
	.mmem-tab-disabled {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 0;
		padding: 6px 4px;
		border: 1px solid #ccc;
		border-radius: 6px;
		background: #fff;
		color: #000;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mmem-tab-link.is-active,
	.mmem-tab-link:hover {
		background: #3eb489;
		color: #fff;
		border-color: #3eb489;
	}

	.mmem-tab-disabled {
		background: #f7f7f7;
		border-color: #eee;
		color: #bbb;
	}

	/* ヘッダーが折り返した場合でも通知ボタンが縦長にならないよう、スマホでも明示的にコンパクトなサイズを維持する */
	.mmem-mypage-header-actions {
		flex-wrap: nowrap;
	}

	.mmem-notifications-toggle {
		padding: 4px 10px;
		font-size: 12px;
	}

	/* フレンド一覧: アイコン+名前を1行、ボタンをその下に幅統一で配置する */
	.mmem-friend-row {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.mmem-friend-actions {
		width: 100%;
	}

	.mmem-friend-actions .mmem-button {
		flex: 1;
		text-align: center;
	}
}

/* ============================================================
 * マイページ専用ダークテーマ
 * .mmem-mypage 配下(マイページ本体)にのみ適用され、サイトテーマ本体や
 * ログイン/会員登録ページ([mm_login]/[mm_register]、.mmem-auth-form)には
 * 影響しない。ボタン類(.mmem-button、通知ボタン、バッジ・ステータスの
 * 色付きチップ)は元の配色のまま据え置き、それ以外のテキスト・カード・
 * 入力欄の背景をダークトーンに揃える。
 * ============================================================ */

.mmem-mypage .mmem-logout-link {
	color: #ddd;
}

.mmem-mypage .mmem-checkbox-label,
.mmem-mypage .mmem-radio-label,
.mmem-mypage .mmem-avatar-controls input[type="file"],
.mmem-mypage .mmem-member-id-cell {
	color: #fff;
}

.mmem-mypage .mmem-description {
	color: #aaa;
}

.mmem-mypage .mmem-empty,
.mmem-mypage .mmem-locked-notice,
.mmem-mypage .mmem-guest-notice {
	color: #999;
}

.mmem-mypage .mmem-friend-status,
.mmem-mypage .mmem-recruitment-datetime,
.mmem-mypage .mmem-recruitment-deadline,
.mmem-mypage .mmem-notification-item time {
	color: #aaa;
}

.mmem-mypage .mmem-recruitment-host-name {
	color: #ddd;
}

.mmem-mypage .mmem-recruitment-payment-section {
	border-top-color: #333;
}

.mmem-mypage .mmem-progress-bar {
	background: #333;
}

.mmem-mypage .mmem-manual-add,
.mmem-mypage .mmem-recruitment-create,
.mmem-mypage .mmem-account-form {
	background: #141414;
	border-color: #333;
}

.mmem-mypage .mmem-avatar-section {
	border-bottom-color: #333;
}

.mmem-mypage .mmem-divider {
	border-top-color: #333;
}

.mmem-mypage .mmem-input {
	background: #1c1c1c;
	color: #fff;
	border-color: #444;
}

.mmem-mypage .mmem-search-result-item {
	border-bottom-color: #333;
}

.mmem-mypage .mmem-wishlist-item,
.mmem-mypage .mmem-recruitment-card {
	background: #141414;
	border-color: #333;
}

.mmem-mypage .mmem-friend-split-group {
	background: #141414;
	border-color: #333;
}

.mmem-mypage .mmem-friend-split-toggle {
	background: #1c1c1c;
	border-color: #444;
	color: #fff;
}

.mmem-mypage .mmem-friend-split-body {
	border-top-color: #333;
}

.mmem-mypage .mmem-split-share {
	border-bottom-color: #2a2a2a;
}

.mmem-mypage .mmem-split-share-status {
	color: #aaa;
}

.mmem-mypage .mmem-booking-source-split {
	background: #333;
	color: #fff;
}

.mmem-mypage .mmem-notifications-panel {
	background: #141414;
	border-color: #333;
}

.mmem-mypage .mmem-notification-item {
	border-bottom-color: #2a2a2a;
}

.mmem-mypage .mmem-notification-item.is-unread {
	background: #241d0d;
}

.mmem-mypage .mmem-friend-row {
	border-bottom-color: #2a2a2a;
}

.mmem-mypage .mmem-friend-detail {
	border-top-color: #444;
}

.mmem-mypage .mmem-auth-error {
	background: #3a1414;
	color: #ff8a8a;
}

/* デスクトップ表示のタブ文字色のみ調整(スマホ用ボタングリッドは白背景の独立ボタンのため対象外) */
@media (min-width: 601px) {
	.mmem-mypage .mmem-tab-link {
		color: #ccc;
	}

	.mmem-mypage .mmem-tab-disabled {
		color: #666;
	}
}

/* ============================================================
 * マイページ上部の「使い方」バナー
 * ============================================================ */

.mmem-guide-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #3eb489;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	padding: 10px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
}

.mmem-guide-banner:hover,
.mmem-guide-banner:focus {
	background: #349a75;
	color: #fff;
}

.mmem-guide-banner .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.mmem-guide-banner-image {
	display: block;
	background: none;
	padding: 0;
}

.mmem-guide-banner-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* ============================================================
 * 「使い方」ページ([mm_guide])。マイページとは独立した通常の
 * (明るい配色の)ページとして表示する。サイトテーマ本体には影響しない
 * よう .mmem-guide 配下にのみスコープする。
 * ============================================================ */

.mmem-guide {
	max-width: 820px;
	margin: 0 auto;
	padding: 24px;
	background: #000;
	font-size: 15px;
	line-height: 1.8;
	color: #fff;
}

.mmem-guide-header h1 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: #ffd400;
}

/* 目次(背景付きのボックス)だけは明るい配色のまま、文字色も暗い色を明示する */
.mmem-guide-toc {
	background: #f7f7f7;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 16px 24px;
	margin: 24px 0;
	color: #222;
}

.mmem-guide-toc h2 {
	margin-top: 0;
	font-size: 16px;
	color: #222;
}

.mmem-guide-toc ol {
	padding-left: 1.4em;
}

.mmem-guide-toc a {
	color: #1568b8;
	text-decoration: none;
}

.mmem-guide-toc a:hover {
	text-decoration: underline;
}

.mmem-guide-section {
	margin: 40px 0;
	padding-top: 8px;
	border-top: 3px solid #3eb489;
}

.mmem-guide-section h2 {
	margin-top: 0;
	font-size: 18px;
	font-weight: 700;
	color: #ffd400;
}

.mmem-guide-section h3 {
	margin-top: 28px;
	padding-bottom: 4px;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	border-bottom: 1px solid #333;
}

.mmem-guide-back-to-toc {
	margin-top: 20px;
}

.mmem-guide-back-to-toc a {
	color: #3eb489;
	font-weight: 600;
	text-decoration: none;
}

.mmem-guide-back-to-toc a:hover {
	text-decoration: underline;
}

.mmem-guide-steps {
	padding-left: 1.4em;
}

.mmem-guide-steps li {
	margin-bottom: 10px;
}

.mmem-guide-note {
	background: #fff8e1;
	border-left: 4px solid #f9a825;
	padding: 10px 14px;
	font-size: 15px;
	color: #6b5600;
}

.mmem-guide-button {
	display: inline-block;
	background: #3eb489;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	padding: 10px 20px;
	border-radius: 6px;
	margin: 8px 8px 8px 0;
}

.mmem-guide-button:hover,
.mmem-guide-button:focus {
	background: #349a75;
	color: #fff;
}

.mmem-guide-button-secondary {
	background: #fff;
	color: #3eb489;
	border: 2px solid #3eb489;
}

.mmem-guide-button-secondary:hover,
.mmem-guide-button-secondary:focus {
	background: #eafaf3;
	color: #3eb489;
}

@media (max-width: 600px) {
	.mmem-guide {
		padding: 16px;
	}

	.mmem-guide-toc {
		padding: 12px 16px;
	}
}

/* ============================================================
 * アカウント設定タブ: プロフィール項目(性別・X・Instagram・コメント)
 * ============================================================ */

.mmem-required-mark {
	color: #e0554f;
}

.mmem-privacy-toggle {
	margin-top: -4px;
	margin-bottom: 14px;
	font-size: 13px;
	color: #888;
}

.mmem-mypage .mmem-privacy-toggle {
	color: #aaa;
}

.mmem-textarea {
	resize: vertical;
	min-height: 80px;
	font-family: inherit;
}

/* ============================================================
 * 「プロフィール」ページ([mm_profile])。使い方ページと同様、
 * マイページとは独立した暗い配色のページとして .mmem-profile-page 配下にのみスコープする。
 * ============================================================ */

.mmem-profile-page {
	max-width: 560px;
	margin: 0 auto;
	padding: 24px;
	background: #000;
	font-size: 15px;
	line-height: 1.8;
	color: #fff;
}

.mmem-profile-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.mmem-profile-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

.mmem-profile-name {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

.mmem-profile-fields {
	margin: 0 0 24px;
}

.mmem-profile-fields dt {
	font-size: 12px;
	color: #ffd400;
	font-weight: 700;
	margin-top: 14px;
}

.mmem-profile-fields dd {
	margin: 4px 0 0;
	color: #fff;
}

.mmem-profile-fields a {
	color: #3eb489;
	text-decoration: underline;
}

.mmem-profile-empty {
	color: #888;
}

.mmem-profile-hidden-note {
	margin-left: 6px;
	font-size: 12px;
	color: #888;
}

.mmem-profile-comment h3 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	border-bottom: 1px solid #333;
	padding-bottom: 4px;
}

.mmem-profile-comment p {
	white-space: pre-wrap;
	color: #fff;
}

.mmem-profile-page .mmem-guest-notice {
	color: #999;
}