/* ==========================================================
   Living Skill Map — constellation
   既定 = グループ別一覧（JSなし / モバイル）
   .is-constellation = 星座レイアウト（JS が付与、1101px以上）
   ========================================================== */
.skillmap {
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	background: var(--white);
}

/* ---------- head ---------- */
.skillmap__head {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) minmax(0, 380px);
	align-items: stretch;
	border-bottom: 1px solid var(--line);
}
.skillmap__index {
	margin: 0;
	padding: 24px 26px;
	border-right: 1px solid var(--line);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .15em;
	line-height: 1.5;
}
.skillmap__title { padding: 24px 28px 28px; align-self: end; }
.skillmap__title .display-title { margin-top: 14px; }
.skillmap__title .is-accent { display: inline-block; }
.skillmap__help {
	margin: 0;
	padding: 24px 28px;
	border-left: 1px solid var(--line);
	color: var(--muted);
	font-size: 13px;
	line-height: 1.8;
	align-self: end;
}

/* ---------- stage (list mode) ---------- */
.skillmap__stage { position: relative; }
.skillmap__canvas,
.skillmap__center { display: none; }

.skillmap__card {
	padding: 20px var(--gutter);
	border-bottom: 1px solid var(--line);
	background: var(--white);
}
.skillmap__card-label {
	margin: 0;
	color: var(--green-text);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .14em;
}
.skillmap__card h3 {
	margin: 8px 0 6px;
	font-size: 26px;
	line-height: 1.05;
	letter-spacing: -.04em;
}
.skillmap__card p:last-child {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.7;
	min-height: 1.7em;
}

.skillmap__controls {
	display: flex;
	overflow-x: auto;
	border-bottom: 1px solid var(--ink);
	background: var(--white);
	scrollbar-width: none;
}
.skillmap__controls[hidden] { display: none; }
.skillmap__controls button {
	flex: none;
	min-height: 40px;
	padding: 10px 12px;
	border: 0;
	border-right: 1px solid var(--ink);
	background: var(--white);
	color: var(--ink);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .1em;
	cursor: pointer;
}
.skillmap__controls button:last-child { border-right: 0; }
.skillmap__controls button:hover,
.skillmap__controls button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.skillmap__controls button:focus-visible { outline-offset: -4px; outline-color: var(--blue); }

.skillmap__group {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	border-bottom: 1px solid var(--line);
}
.skillmap__group:last-child { border-bottom: 0; }
.skillmap__domain {
	margin: 0;
	padding: 18px var(--gutter) 18px var(--gutter);
	border-right: 1px solid var(--line);
	position: relative;
}
.skillmap__domain small {
	display: block;
	color: var(--blue-text);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .12em;
}
.skillmap__domain strong {
	display: block;
	margin-top: 4px;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.2;
}
.skillmap__skills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px 20px;
	align-content: center;
}

.skillmap__skill {
	padding: 8px 11px;
	border: 1px solid #9fa9b3;
	background: var(--white);
	color: var(--ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s, color .18s, border-color .18s, opacity .18s;
}
.skillmap__skill:hover { border-color: var(--ink); }
.skillmap__skill.is-focused { background: var(--blue); border-color: var(--blue); color: var(--white); }
.skillmap .is-dimmed { opacity: .18; }

@media (max-width: 800px) {
	.skillmap__head { grid-template-columns: 1fr; }
	.skillmap__index { border-right: 0; border-bottom: 1px solid var(--line); padding: 15px 20px; }
	.skillmap__title { padding: 20px 20px 22px; }
	.skillmap__help { border-left: 0; border-top: 1px solid var(--line); padding: 15px 20px; }
	.skillmap__card { padding: 18px 20px; }
	.skillmap__group { grid-template-columns: 1fr; }
	.skillmap__domain { border-right: 0; padding: 16px 20px 0; }
	.skillmap__domain small { display: none; }
	.skillmap__skills { padding: 10px 20px 18px; }
}

/* ==========================================================
   Constellation mode
   ========================================================== */
.skillmap.is-constellation .skillmap__stage {
	height: clamp(680px, 88svh, 860px);
	overflow: hidden;
	background-color: var(--white);
	background-image:
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 72px 72px;
	background-position: -1px -1px;
}
.skillmap.is-constellation .skillmap__canvas {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.skillmap.is-constellation .skillmap__groups,
.skillmap.is-constellation .skillmap__group,
.skillmap.is-constellation .skillmap__skills,
.skillmap.is-constellation .skillmap__skills li {
	position: static;
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
}

.skillmap.is-constellation [data-node],
.skillmap.is-constellation .skillmap__center {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	will-change: transform;
}

.skillmap.is-constellation .skillmap__center {
	z-index: 6;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 170px;
	height: 170px;
	background: var(--ink);
	color: var(--white);
	text-align: center;
}
.skillmap__center small { color: #8fb8ff; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.skillmap__center strong { margin-top: 10px; font-size: 24px; font-weight: 700; line-height: .98; letter-spacing: -.05em; }

.skillmap.is-constellation .skillmap__domain {
	min-width: 120px;
	padding: 13px 14px;
	border: 1px solid var(--ink);
	background: var(--white);
	transition: background-color .18s, color .18s, opacity .18s;
}
.skillmap.is-constellation .skillmap__domain::after {
	content: "";
	position: absolute;
	left: -1px;
	right: -1px;
	bottom: -1px;
	height: 4px;
	background: var(--green);
}
.skillmap.is-constellation .skillmap__domain small { display: block; }
.skillmap.is-constellation .skillmap__domain.is-focused { background: var(--ink); color: var(--white); }
.skillmap.is-constellation .skillmap__domain.is-focused small { color: #86b2ff; }

.skillmap.is-constellation .skillmap__skill.is-focused { z-index: 9; }

.skillmap.is-constellation .skillmap__card {
	position: absolute;
	right: 24px;
	top: 24px;
	z-index: 15;
	width: min(320px, calc(100% - 48px));
	padding: 16px 18px;
	border: 1px solid var(--ink);
}
.skillmap.is-constellation .skillmap__controls {
	position: absolute;
	left: 24px;
	bottom: 22px;
	z-index: 15;
	max-width: calc(100% - 48px);
	border: 1px solid var(--ink);
}