/* =====================================================================
   Skills page — page-specific decoration only.
   Shared layout comes from style.css (.skills-grid / .skill / .tech-tags
   etc.). This file adds the stacked-section spacing, the "New" badge,
   and icon tints for the few chips not colored in style.css.
   No layout duplication.
   ===================================================================== */

/* Pull the second section closer to the first so the two read as one page. */
.skills-next {
	padding-top: 0;
}

/* "New" badge next to the "学習中・今後" heading.
   見た目 (accent 枠/地/文字色/pill) は style.css V17 基底。ここは差分のみ。 */
.skills-badge {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	font-family: var(--font);
	/* 2-4: home/about の見出し脇バッジと寸法(font-size・padding)を統一 */
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: var(--badge-pad);
	line-height: 1.4;
}

/* Card lead text inside the "関心のある領域" card. */
.skills-next .card-text {
	color: var(--muted);
	margin: 6px 0 0;
}

/* tech-tag アイコンのブランド色は style.css の「単一の真実源」ブロックに集約済み
   （全 tech-tags に適用されるため、ここでの skills 個別指定は不要）。 */

/* ── Skill count + legend notes ──────────────────────────────────────
   見た目 (accent ピル) は style.css V17 基底 + 下の寸法差分。
   旧 font-size/color は refine.css に恒常上書きされる死宣言だったため削除。 */
.skills-count {
	display: inline-block;
	margin: 4px 0 18px;
	padding: 3px 12px;
	font-size: 0.8rem;
}

/* V15: .skills-legend は自己評価バー時代の残骸で長らく未参照 (自認済) → 削除。
   将来復活の可能性は薄く、必要になった時点で書き直す方が実装が現状の DOM に合う。 */

/* ── 主要スタック（言語・ツール）: 大きめのピル。寸法・地色・ボーダーは
   style.css に共通化（.ai-toolbelt と共有）。ここではカード内の位置調整のみ。 */
.skills-stack .tech-tags {
	margin-top: 14px;
}

/* ── 関心のある領域: チップをピル型に格上げ。共通の shell は style.css。
   ここでは小さめサイズと位置調整だけ。 */
.skills-next .tech-tags {
	margin-top: 18px;
}

.skills-next .tech-tags li {
	font-size: 0.88rem;
	padding: 9px 16px;
	gap: 8px;
}

.skills-next .tech-tags li .fa-icon {
	font-size: 1.05rem;
}

/* ── 2カードグリッドの高さを揃え、中身（学習中バー）を縦方向に等配分 ─── */
.skills-grid {
	align-items: stretch;
}

.skills-grid > .card {
	display: flex;
	flex-direction: column;
}

/* スタック（tech-tags）カードは中央寄せせず、タグを見出しの真下から並べる。 */
.skills-stack > .card .tech-tags {
	flex: 1 1 auto;
	align-content: flex-start;
}