/**
 * 생활도구 허브 — typography/thin-divider/whitespace 위주, 큰 pastel card
 * 반복 없음. 아이콘도 의도적으로 사용하지 않음(제한된 도구 수에서는 텍스트
 * 위계만으로 충분하다고 판단).
 */

.salimpick-tools-hub__header {
	max-width: 640px;
	margin-bottom: var(--sp-space-6);
}

.salimpick-tools-hub__title {
	font-size: var(--sp-font-size-3xl);
	margin: 0 0 var(--sp-space-2);
	word-break: keep-all;
	overflow-wrap: break-word;
}

.salimpick-tools-hub__desc {
	font-size: var(--sp-font-size-lg);
	color: var(--sp-color-text-muted);
	margin: 0;
}

.salimpick-tools-hub__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.salimpick-tools-hub__subheading {
	font-size: var(--sp-font-size-sm);
	font-weight: 700;
	color: var(--sp-color-text-muted);
	margin: 0 0 var(--sp-space-3);
	padding-top: var(--sp-space-6);
	border-top: var(--sp-border-width) solid var(--sp-color-border);
}

.salimpick-tools-hub__item {
	border-bottom: var(--sp-border-width) solid var(--sp-color-border);
}

.salimpick-tools-hub__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block: var(--sp-space-4);
	text-decoration: none;
	min-height: 44px;
}

/* Explicit :link/:visited so a visited tool never renders in the browser's
   default purple — Sage is reserved for hover/focus only, per design brief. */
.salimpick-tools-hub__link:link .salimpick-tools-hub__name,
.salimpick-tools-hub__link:visited .salimpick-tools-hub__name {
	color: var(--sp-color-text);
}

.salimpick-tools-hub__link:hover .salimpick-tools-hub__name,
.salimpick-tools-hub__link:focus-visible .salimpick-tools-hub__name {
	color: var(--sp-color-primary);
}

/* --sp-color-link-accessible, not --sp-color-primary: sage measures
   ~2.99:1, under the WCAG 2.1 SC 1.4.11 3:1 non-text-contrast minimum
   for a focus indicator (2026-09-16 a11y pass). */
.salimpick-tools-hub__link:focus-visible {
	outline: 2px solid var(--sp-color-link-accessible);
	outline-offset: 2px;
}

.salimpick-tools-hub__name {
	font-size: var(--sp-font-size-lg);
	font-weight: 700;
	color: var(--sp-color-text);
	word-break: keep-all;
	overflow-wrap: break-word;
}

.salimpick-tools-hub__summary {
	font-size: var(--sp-font-size-sm);
	color: var(--sp-color-text-muted);
}

.salimpick-tools-hub__item--disabled {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block: var(--sp-space-4);
	min-height: 44px;
	justify-content: center;
}

.salimpick-tools-hub__item--disabled .salimpick-tools-hub__name {
	color: var(--sp-color-text-muted);
}

.salimpick-tools-hub__badge {
	font-size: var(--sp-font-size-xs);
	color: var(--sp-color-text-muted);
}

.salimpick-tools-hub__badge::before {
	content: "· ";
}

@media (max-width: 599px) {
	.salimpick-tools-hub__title {
		font-size: var(--sp-font-size-2xl);
	}

	.salimpick-tools-hub__desc {
		font-size: var(--sp-font-size-base);
	}
}