@charset "utf-8";

#charinfo {
	background: var(--pk0);
	border-top: 2px solid var(--pk1);
	border-bottom: 2px solid var(--pk1);
}
.charinfo-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.ci-card {
	background: var(--white);
	border: 2px solid var(--pk1);
	border-radius: var(--radius);
	padding: 26px 24px;
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
}
.ci-card::after {
	content: attr(data-icon);
	position: absolute;
	font-size: 4rem;
	opacity: .07;
	bottom: -6px;
	right: 6px;
	pointer-events: none;
}
.ci-title {
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text3);
	background: var(--pk0);
	border-radius: 20px;
	padding: 4px 12px;
	display: inline-block;
	margin-bottom:14px;
}
.ci-role {
	font-size: .82rem;
	font-weight: 800;
	color: var(--pk4);
	margin-bottom: 6px;
	font-family: var(--fn-jp);
}
.ci-name {
	font-size: 1.1rem;
	font-weight: 900;
	color: var(--text);
	margin-bottom: 8px;
}
.ci-links {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.ci-link {
	display: inline-flex;
	align-items: center; gap: 5px;
	background: var(--pk1);
	color: var(--pk4);
	font-size: .72rem;
	font-weight: 800;
	padding: 5px 14px;
	border-radius: 20px;
	text-decoration: none;
	transition: background .2s,transform .15s;
}
.ci-link:hover {
	background: var(--pk2);
	transform: translateY(-2px);
}

.detail-section {
	margin-top:28px;
}
.detail-section-title {
	font-size: .88rem;
	font-weight: 900;
	color: var(--text);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.detail-section-title::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--pk1);
}

/* Rainbow hashtag colors */
.htag.r1 {
	border-color: var(--rainbow1);
	color: var(--rainbow1);
}
.htag.r2 {
	border-color: var(--rainbow2);
	color: #c87000;
}
.htag.r3 {
	border-color: #d4a000;
	color: #a07800;
}
.htag.r4 {
	border-color: #6ab86a;
	color:#2a7a2a;}
.htag.r5 {
	border-color: #4aa8cc;
	color: #1a6a8a;
}
.htag.r6 {
	border-color: var(--rainbow6);
	color: #6a3aaa;
}