/* ==========================================================================
   無料姓名判断ツール — /naming/fortune/ (page-naming-fortune.php)
   依存: tokens.css (pmn-design-tokens)。8pxグリッド / パステル / 丸ゴシック。
   ========================================================================== */

.pmn-ft {
	padding-bottom: var(--pm-space-8);
}

.pmn-ft__container {
	max-width: var(--pm-container);
	margin: 0 auto;
	padding: 0 var(--pm-gutter-sp);
}

/* ----- パンくず ----------------------------------------------------------- */
.pmn-ft__bc {
	font-size: var(--pm-caption);
	color: var(--pm-text-sub);
	padding: var(--pm-space-3) 0;
}
.pmn-ft__bc .pmn-ft__container { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pmn-ft__bc a { color: var(--pm-text-sub); text-decoration: none; }
.pmn-ft__bc a:hover { color: var(--pm-primary); }
.pmn-ft__bc .sep { color: var(--pm-border-strong); }
.pmn-ft__bc .here { color: var(--pm-text); font-weight: 600; }

/* ----- Hero --------------------------------------------------------------- */
.pmn-ft__hero {
	background: linear-gradient(180deg, var(--pm-primary-soft) 0%, var(--pm-base) 100%);
	padding: var(--pm-space-6) 0 var(--pm-space-5);
	text-align: center;
}
.pmn-ft__stamp {
	display: inline-flex; align-items: center;
	background: var(--pm-accent-soft); color: #9A7A2E;
	font-size: 12px; font-weight: 700;
	padding: 5px 14px; border-radius: var(--pm-radius-pill);
	margin-bottom: var(--pm-space-3);
}
.pmn-ft__hero h1 {
	margin-bottom: var(--pm-space-3);
	display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.pmn-ft__hero h1 small {
	font-size: 0.5em; font-weight: 600; color: var(--pm-primary);
	font-family: var(--pm-font-heading);
}
.pmn-ft__lead {
	max-width: 720px; margin: 0 auto;
	color: var(--pm-text); font-size: var(--pm-body);
}
.pmn-ft__lead strong { color: var(--pm-primary-press); }

/* ----- 入力フォーム ------------------------------------------------------- */
.pmn-ft__form-card {
	margin-top: calc( -1 * var(--pm-space-5) );
	position: relative; z-index: 2;
	padding: var(--pm-space-5);
}
.pmn-ft__form-h { text-align: center; margin-bottom: var(--pm-space-4); }
.pmn-ft__fields {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--pm-space-4);
}
@media (max-width: 600px) { .pmn-ft__fields { grid-template-columns: 1fr; } }
.pmn-ft__field label {
	display: block; font-weight: 600; font-size: 14px;
	margin-bottom: var(--pm-space-1);
}
.pmn-ft__field label .req {
	display: inline-block; margin-left: 6px;
	font-size: 11px; font-weight: 700; color: #B26447;
	background: var(--pm-warning-soft); padding: 1px 8px; border-radius: var(--pm-radius-pill);
}
.pmn-ft__field small { display: block; margin-top: 4px; color: var(--pm-text-sub); font-size: 12px; }
.pmn-ft__actions { margin-top: var(--pm-space-4); text-align: center; }
.pmn-ft__actions .pm-btn { min-width: 240px; }
.pmn-ft__form-note { text-align: center; margin: var(--pm-space-2) 0 0; color: var(--pm-warning); min-height: 1.2em; font-size: 13px; }

/* ----- 結果 --------------------------------------------------------------- */
.pmn-ft__result { margin-top: var(--pm-space-5); }
.pmn-ft__result-head { text-align: center; margin-bottom: var(--pm-space-4); }
.pmn-ft__result-head h2 span { color: var(--pm-primary-press); }

.pmn-ft__summary { margin-bottom: var(--pm-space-4); }
.pmn-ft__summary h3 { margin-bottom: var(--pm-space-3); }
.pmn-ft__gogaku { width: 100%; border-collapse: collapse; }
.pmn-ft__gogaku th, .pmn-ft__gogaku td {
	padding: var(--pm-space-2) var(--pm-space-3);
	border-bottom: 1px solid var(--pm-border); text-align: left; font-size: 15px;
}
.pmn-ft__gogaku th { width: 40%; color: var(--pm-text-sub); font-weight: 600; }
.pmn-ft__gogaku td b { font-family: var(--pm-font-num); font-size: 18px; }

/* 流派グリッド */
.pmn-ft__schools {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pm-space-4);
}
@media (max-width: 760px) { .pmn-ft__schools { grid-template-columns: 1fr; } }

.pmn-ft__school {
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-card);
	box-shadow: var(--pm-shadow-1);
	padding: var(--pm-space-4);
}
.pmn-ft__school-head {
	display: flex; align-items: center; justify-content: space-between; gap: var(--pm-space-2);
	margin-bottom: var(--pm-space-3); padding-bottom: var(--pm-space-2);
	border-bottom: 1px dashed var(--pm-border);
}
.pmn-ft__school-head h3 { margin: 0; font-size: 17px; }
.pmn-ft__school-body { font-size: 14px; }

/* 運勢バッジ */
.pmn-ft__rating {
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 13px;
	padding: 3px 12px; border-radius: var(--pm-radius-pill);
	white-space: nowrap;
}
.pmn-ft__rating--good { background: var(--pm-success-soft); color: #4A8A4A; }
.pmn-ft__rating--mid { background: var(--pm-info-soft); color: #4A7BA0; }
.pmn-ft__rating--caution { background: var(--pm-warning-soft); color: #B26447; }

/* 各格リスト */
.pmn-ft__grades { list-style: none; margin: 0; padding: 0; }
.pmn-ft__grades li {
	display: grid; grid-template-columns: 3em 1fr auto; align-items: center; gap: var(--pm-space-2);
	padding: 6px 0; border-bottom: 1px solid var(--pm-border);
}
.pmn-ft__grades li:last-child { border-bottom: 0; }
.pmn-ft__grades .g-name { color: var(--pm-text-sub); font-weight: 600; }
.pmn-ft__grades .g-str { font-family: var(--pm-font-num); color: var(--pm-text); }
.pmn-ft__sline { margin: var(--pm-space-2) 0; }
.pmn-ft__sline b { color: var(--pm-primary-press); }

.pmn-ft__result-note { margin-top: var(--pm-space-4); text-align: center; }

/* ----- 解説セクション ----------------------------------------------------- */
.pmn-ft__section { margin-top: var(--pm-space-6); }
.pmn-ft__section > h2 {
	position: relative; padding-left: var(--pm-space-3);
	border-left: 4px solid var(--pm-primary);
}

.pmn-ft__table-wrap { overflow-x: auto; }
.pmn-ft__compare {
	width: 100%; border-collapse: collapse; min-width: 480px;
	background: var(--pm-surface); border-radius: var(--pm-radius-card); overflow: hidden;
	box-shadow: var(--pm-shadow-1);
}
.pmn-ft__compare th, .pmn-ft__compare td {
	padding: var(--pm-space-3); text-align: left; font-size: 14px; line-height: 1.7;
	border-bottom: 1px solid var(--pm-border); vertical-align: top;
}
.pmn-ft__compare thead th { background: var(--pm-surface-2); color: var(--pm-text); font-weight: 700; }
.pmn-ft__compare tbody th { white-space: nowrap; color: var(--pm-primary-press); font-weight: 700; }

.pmn-ft__gogaku-legend { padding-left: 1.2em; }
.pmn-ft__gogaku-legend li { margin-bottom: 6px; }
.pmn-ft__gogaku-legend b { color: var(--pm-primary-press); }

/* FAQ */
.pmn-ft__faq dl { margin: 0; }
.pmn-ft__faq dt {
	font-weight: 700; font-family: var(--pm-font-heading);
	margin-top: var(--pm-space-3); padding-left: 1.6em; position: relative;
}
.pmn-ft__faq dt::before {
	content: "Q"; position: absolute; left: 0; top: 0;
	color: var(--pm-primary); font-weight: 700;
}
.pmn-ft__faq dd {
	margin: 6px 0 var(--pm-space-3) 1.6em; color: var(--pm-text);
	padding-bottom: var(--pm-space-3); border-bottom: 1px solid var(--pm-border);
}

.pmn-ft__notice { margin-top: var(--pm-space-5); }

/* 関連導線 */
.pmn-ft__related {
	margin-top: var(--pm-space-6);
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pm-space-3);
}
@media (max-width: 760px) { .pmn-ft__related { grid-template-columns: 1fr; } }
.pmn-ft__related-card {
	display: flex; flex-direction: column; gap: 4px;
	background: var(--pm-surface); border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-card); padding: var(--pm-space-3) var(--pm-space-4);
	text-decoration: none; box-shadow: var(--pm-shadow-1);
	transition: transform var(--pm-dur-2) var(--pm-ease), box-shadow var(--pm-dur-2) var(--pm-ease);
}
.pmn-ft__related-card:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow-2); }
.pmn-ft__related-card b { color: var(--pm-text); font-family: var(--pm-font-heading); }
.pmn-ft__related-card span { font-size: 12px; color: var(--pm-text-sub); }
