/*
 * freemium_gating_demo.css
 * フリーミアムモデルとは｜プランを選んでアクティベートする体験デモ
 * 軸（利用量／機能／人数）ごとに異なる選び方のUI（プランカード／チェックリスト／
 * 人数ティア）を見せ、「アクティベートする」を押すと反映される様子を再現する。
 * 既存サイトのクラスと衝突しないよう fgd- を接頭辞にしています。
 */

#fgd-demo {
	box-sizing: border-box;
	margin: 1.4rem 0;
	padding: 1rem 1.1rem 2.2rem;
	background: #f1f0fb;
	border-radius: 1rem;
	scroll-margin-top: 90px;
}

#fgd-demo *,
#fgd-demo *::before,
#fgd-demo *::after {
	box-sizing: border-box;
}

.fgd-container {
	max-width: 720px;
	margin: 0 auto;
}

.fgd-head {
	text-align: center;
	padding-top: 1.6rem;
	margin-bottom: 1.4rem;
}

.fgd-badge {
	display: inline-block;
	padding: .6rem 1.6rem;
	border-radius: 999px;
	background: #635bff;
	color: #fff;
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .02em;
	margin-bottom: .6rem;
}

h3.fgd-headline {
	display: block;
	background: none;
	margin: .7rem auto 0;
	max-width: 36rem;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.65;
	color: #12233f;
}

.fgd-headline__mark {
	color: #635bff;
}

.fgd-lead {
	font-size: .82rem;
	color: #555;
	line-height: 1.85;
	margin: .6rem auto 0;
	max-width: 36rem;
}

.fgd-panel {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 .6rem 1.8rem rgba(0, 30, 70, .08);
	padding: 1.5rem 1.3rem 1.4rem;
}

.fgd-axes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
	margin-bottom: 1.1rem;
}

.fgd-axis-btn {
	appearance: none;
	cursor: pointer;
	border: .1rem solid #d8d5f5;
	background: #fff;
	color: #445;
	padding: .55rem .4rem;
	border-radius: .7rem;
	font-size: .78rem;
	font-weight: 700;
	text-align: center;
}

.fgd-axis-btn.is-active {
	background: #635bff;
	border-color: #635bff;
	color: #fff;
}

.fgd-mockapp {
	border: .1rem solid #e5e3f7;
	border-radius: .9rem;
	overflow: hidden;
	margin-bottom: 1.2rem;
}

.fgd-mockapp__bar {
	display: flex;
	align-items: center;
	gap: .35rem;
	padding: .55rem .7rem;
	background: #f4f3ff;
	border-bottom: .08rem solid #e5e3f7;
}

.fgd-mockapp__dot {
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: #d8d5f5;
}

.fgd-mockapp__title {
	margin-left: .4rem;
	font-size: .7rem;
	font-weight: 700;
	color: #778;
}

.fgd-mockapp__body {
	padding: 1.1rem .9rem 1.2rem;
}

.fgd-mockapp__hint {
	margin: 0 0 .9rem;
	font-size: .74rem;
	color: #667;
	text-align: center;
}

.fgd-mode {
	display: block;
}

.fgd-mode[hidden] {
	display: none !important;
}

.fgd-free-stage,
.fgd-upgrade-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .8rem;
}

.fgd-free-stage[hidden],
.fgd-upgrade-stage[hidden] {
	display: none !important;
}

.fgd-free-icons {
	font-size: 1.3rem;
	letter-spacing: .15rem;
	text-align: center;
}

.fgd-action-btn {
	appearance: none;
	cursor: pointer;
	border: none;
	padding: .7rem 1.2rem;
	border-radius: .7rem;
	font-size: .84rem;
	font-weight: 800;
	color: #fff;
	background: #12233f;
}

.fgd-action-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* 利用量ベース：プランカード */

.fgd-plan-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .6rem;
}

.fgd-plan-card {
	appearance: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	padding: .9rem .5rem;
	border-radius: .8rem;
	border: .12rem solid #e5e3f7;
	background: #fafaff;
	text-align: center;
}

.fgd-plan-card.is-selected {
	border-color: #635bff;
	background: #f4f3ff;
	box-shadow: 0 0 0 .12rem rgba(99, 91, 255, .18);
}

.fgd-plan-card__name {
	font-size: .84rem;
	font-weight: 800;
	color: #12233f;
}

.fgd-plan-card__quota {
	font-family: 'Courier New', monospace;
	font-size: .74rem;
	font-weight: 700;
	color: #635bff;
}

.fgd-plan-card__desc {
	font-size: .64rem;
	color: #889;
}

/* 機能ベース：チェックリスト */

.fgd-feature-list {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.fgd-feature-item {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem .8rem;
	border-radius: .7rem;
	border: .1rem solid #e5e3f7;
	background: #fafaff;
	cursor: pointer;
	font-size: .8rem;
	font-weight: 700;
	color: #445;
}

.fgd-feature-item.is-checked {
	border-color: #635bff;
	background: #f4f3ff;
}

.fgd-feature-checkbox {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: #635bff;
	flex-shrink: 0;
}

.fgd-feature-item__name {
	flex: 1;
}

/* 人数ベース：人数ティアボタン */

.fgd-seat-tiers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .5rem;
}

.fgd-tier-btn {
	appearance: none;
	cursor: pointer;
	padding: .75rem .3rem;
	border-radius: .7rem;
	border: .12rem solid #e5e3f7;
	background: #fafaff;
	font-size: .8rem;
	font-weight: 800;
	color: #445;
}

.fgd-tier-btn.is-selected {
	border-color: #635bff;
	background: #f4f3ff;
	color: #12233f;
	box-shadow: 0 0 0 .12rem rgba(99, 91, 255, .18);
}

/* アクティベートボタン・結果表示 */

.fgd-activate-btn {
	appearance: none;
	cursor: pointer;
	border: none;
	width: 100%;
	padding: .8rem .6rem;
	border-radius: .7rem;
	font-size: .9rem;
	font-weight: 800;
	color: #fff;
	background: #12233f;
	margin-top: 1.1rem;
}

.fgd-activate-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.fgd-result[hidden] {
	display: none !important;
}

.fgd-result {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
	padding: .8rem .9rem;
	border-radius: .7rem;
	background: #f2fbf4;
	border: .08rem solid #bfe8cd;
	color: #0d7a33;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.6;
	animation: fgd-result-in .25s ease;
}

@keyframes fgd-result-in {
	from { opacity: 0; transform: translateY(.3rem); }
	to { opacity: 1; transform: translateY(0); }
}

.fgd-result__icon {
	font-size: 1rem;
	flex-shrink: 0;
}

.fgd-code-wrap {
	background: #12233f;
	border-radius: .8rem;
	padding: .8rem .9rem .9rem;
	margin-bottom: 1.1rem;
}

.fgd-code-label {
	font-size: .64rem;
	font-weight: 700;
	color: #9aa8c9;
	letter-spacing: .03em;
	margin-bottom: .4rem;
}

.fgd-code {
	margin: 0;
	font-family: 'Courier New', monospace;
	font-size: .74rem;
	line-height: 1.7;
	color: #d6e0ff;
	white-space: pre-wrap;
	word-break: break-word;
}

.fgd-reset-btn {
	appearance: none;
	border: none;
	cursor: pointer;
	display: block;
	margin: 0 auto;
	padding: .5rem 1.2rem;
	border-radius: 999px;
	background: #eef2f5;
	color: #667;
	font-size: .78rem;
	font-weight: 700;
}

.fgd-reset-btn:hover {
	background: #e2e8ed;
}

@media screen and (max-width: 640px) {
	#fgd-demo { padding: 1rem .8rem 1.8rem; border-radius: .7rem; }
	.fgd-panel { padding: 1.1rem .9rem 1rem; border-radius: .7rem; }
	.fgd-axes { grid-template-columns: 1fr; }
	.fgd-badge { font-size: .8rem; padding: .5rem 1.1rem; }
	h3.fgd-headline { font-size: 1.05rem; }
	.fgd-plan-cards { grid-template-columns: 1fr; }
	.fgd-seat-tiers { grid-template-columns: repeat(2, 1fr); }
}