/* ===== shared tokens (specificity raised via .wn-pwe scope) ===== */
.wn-pwe-profile,
.wn-pwe-works {
	--pwe-fg: #1a1a1a;
	--pwe-muted: #555;
	--pwe-line: #e5e7eb;
	--pwe-bg-soft: #f7f7f8;
	--pwe-accent: #b8362a;
	--pwe-accent-soft: #fff4f1;
	--pwe-radius: 12px;
	--pwe-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
	color: var(--pwe-fg);
	line-height: 1.8;
}

/* ===== /profile/ ===== */
/* navigator 他ページ (/credentials/ など) と同じ container 余白に揃える。
   max-width はリーダブル幅、左右は navigator --gutter (clamp 1rem→2rem)、中央寄せ。
   トークン未定義環境のために fallback も指定。 */
.wn-pwe-profile,
.wn-pwe-works {
	max-width: var(--container, 1200px);
	margin-inline: auto;
	padding-inline: var(--gutter, clamp(1rem, .6rem + 2vw, 2rem));
	box-sizing: border-box;
}
.wn-pwe-profile .wn-pwe-section {
	margin: 2.5rem 0 3rem;
	padding-top: .5rem;
	border-top: 1px solid var(--pwe-line);
}
.wn-pwe-profile .wn-pwe-section:first-of-type { border-top: 0; padding-top: 0; }
.wn-pwe-profile .wn-pwe-h2 {
	font-size: 1.35rem;
	margin: 0 0 1rem;
	padding-left: .75rem;
	border-left: 4px solid var(--pwe-accent);
	line-height: 1.4;
}
.wn-pwe-profile .wn-pwe-lead { margin: .75rem 0 0; }
.wn-pwe-profile .wn-pwe-note { color: var(--pwe-muted); font-size: .92rem; margin: 1rem 0 0; }

/* intro: 写真 + 本文 の 2 カラム配置（運営者についてセクション） */
.wn-pwe-profile .wn-pwe-intro__grid {
	display: grid;
	grid-template-columns: minmax(180px, 240px) 1fr;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
}
.wn-pwe-profile .wn-pwe-intro__portrait {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
}
.wn-pwe-profile .wn-pwe-intro__portrait img {
	width: 100%;
	max-width: 240px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
	background: var(--pwe-bg-soft);
	display: block;
}
.wn-pwe-profile .wn-pwe-intro__portrait.is-fallback img { display: none; }
.wn-pwe-profile .wn-pwe-intro__portrait.is-fallback::before {
	content: "";
	display: block;
	width: 100%;
	max-width: 240px;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	background-color: #e8dfd0;
	/* 写真の特徴を反映した SVG シルエット (男性 / 眼鏡 / 黒短髪 / グレートップス / セピア) */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><defs><linearGradient id='bg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23efe7d9'/><stop offset='1' stop-color='%23c9bda1'/></linearGradient><radialGradient id='hair' cx='50%25' cy='30%25' r='35%25'><stop offset='0' stop-color='%231c1c1c'/><stop offset='1' stop-color='%23000000'/></radialGradient><linearGradient id='skin' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23d3b89c'/><stop offset='1' stop-color='%23b89578'/></linearGradient><linearGradient id='top' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%234a4a52'/><stop offset='1' stop-color='%232a2a32'/></linearGradient></defs><rect width='240' height='240' rx='12' fill='url(%23bg)'/><ellipse cx='120' cy='205' rx='95' ry='70' fill='url(%23top)'/><ellipse cx='120' cy='112' rx='42' ry='52' fill='url(%23skin)'/><path d='M 75 90 Q 80 50 120 45 Q 168 50 168 92 Q 168 75 158 70 Q 145 50 120 50 Q 92 52 82 70 Q 75 80 75 92 Z' fill='url(%23hair)'/><path d='M 88 120 Q 95 115 102 120 L 110 120 Q 117 115 124 120 M 126 120 L 134 120' fill='none' stroke='%23222' stroke-width='2.5'/><circle cx='100' cy='123' r='10' fill='none' stroke='%23222' stroke-width='2'/><circle cx='140' cy='123' r='10' fill='none' stroke='%23222' stroke-width='2'/><line x1='110' y1='123' x2='130' y2='123' stroke='%23222' stroke-width='2'/></svg>");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.wn-pwe-profile .wn-pwe-intro__portrait-cap {
	font-size: .82rem;
	color: var(--pwe-muted);
	text-align: center;
	margin: 0;
}
@media (max-width: 720px) {
	.wn-pwe-profile .wn-pwe-intro__grid {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: left;
	}
	.wn-pwe-profile .wn-pwe-intro__portrait { max-width: 180px; }
	.wn-pwe-profile .wn-pwe-intro__body { width: 100%; }
}

/* deflist */
.wn-pwe-profile .wn-pwe-deflist {
	display: grid;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: 1rem 1.25rem;
	background: var(--pwe-bg-soft);
	border-radius: var(--pwe-radius);
}
.wn-pwe-profile .wn-pwe-deflist__row {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: .75rem;
	align-items: baseline;
}
.wn-pwe-profile .wn-pwe-deflist dt {
	font-weight: 600;
	color: var(--pwe-muted);
	font-size: .92rem;
}
.wn-pwe-profile .wn-pwe-deflist dd { margin: 0; }

/* timeline */
.wn-pwe-profile .wn-pwe-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .9rem;
}
.wn-pwe-profile .wn-pwe-timeline__item {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 1rem;
	align-items: start;
	padding: .85rem 1rem;
	background: var(--pwe-bg-soft);
	border-left: 3px solid var(--pwe-accent);
	border-radius: 0 var(--pwe-radius) var(--pwe-radius) 0;
}
.wn-pwe-profile .wn-pwe-timeline__year {
	font-weight: 700;
	color: var(--pwe-accent);
	font-variant-numeric: tabular-nums;
}
.wn-pwe-profile .wn-pwe-timeline__body { color: var(--pwe-fg); }

/* cards (scope) */
.wn-pwe-profile .wn-pwe-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: .9rem;
}
.wn-pwe-profile .wn-pwe-card {
	padding: 1rem 1.1rem;
	background: #fff;
	border: 1px solid var(--pwe-line);
	border-radius: var(--pwe-radius);
	box-shadow: var(--pwe-shadow);
}
.wn-pwe-profile .wn-pwe-card h3 {
	font-size: 1rem;
	margin: 0 0 .35rem;
	color: var(--pwe-accent);
}
.wn-pwe-profile .wn-pwe-card p { margin: 0; font-size: .94rem; color: var(--pwe-fg); }

/* policy / before lists */
.wn-pwe-profile .wn-pwe-policy,
.wn-pwe-profile .wn-pwe-before {
	margin: 0;
	padding: 0 0 0 1.25rem;
	display: grid;
	gap: .6rem;
}
.wn-pwe-profile .wn-pwe-policy li,
.wn-pwe-profile .wn-pwe-before li { line-height: 1.8; }

/* stats */
.wn-pwe-profile .wn-pwe-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: .8rem;
	margin: 0;
}
.wn-pwe-profile .wn-pwe-stat {
	background: #fff;
	border: 1px solid var(--pwe-line);
	border-radius: var(--pwe-radius);
	padding: 1rem;
	text-align: center;
	box-shadow: var(--pwe-shadow);
}
.wn-pwe-profile .wn-pwe-stat__num {
	display: block;
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--pwe-accent);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.wn-pwe-profile .wn-pwe-stat__unit {
	font-size: .9rem;
	margin-left: .15rem;
	color: var(--pwe-muted);
}
.wn-pwe-profile .wn-pwe-stat__label {
	display: block;
	margin-top: .3rem;
	font-size: .88rem;
	color: var(--pwe-muted);
}

/* CTA */
.wn-pwe-profile .wn-pwe-cta {
	margin: 2.5rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
}
.wn-pwe-profile .wn-pwe-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	padding: .85rem 1.4rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.wn-pwe-profile .wn-pwe-cta__btn--primary {
	background: var(--pwe-accent);
	color: #fff;
}
.wn-pwe-profile .wn-pwe-cta__btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(184,54,42,.25);
}
.wn-pwe-profile .wn-pwe-cta__btn--ghost {
	background: #fff;
	color: var(--pwe-accent);
	border: 1px solid var(--pwe-accent);
}
.wn-pwe-profile .wn-pwe-cta__btn--ghost:hover {
	background: var(--pwe-accent-soft);
}

/* ===== /works/ ===== */
.wn-pwe-works .wn-pwe-works__lead {
	margin: 0 0 1.5rem;
	padding: 1rem 1.2rem;
	background: var(--pwe-accent-soft);
	border-left: 3px solid var(--pwe-accent);
	border-radius: 0 var(--pwe-radius) var(--pwe-radius) 0;
}
.wn-pwe-works .wn-pwe-works__lead code {
	background: #fff;
	padding: .1rem .4rem;
	border-radius: 4px;
	border: 1px solid var(--pwe-line);
	font-size: .9em;
}
.wn-pwe-works .wn-pwe-works__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin: 0 0 2rem;
}
.wn-pwe-works .wn-com-work-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
	padding: 1.1rem 1.2rem 1.2rem;
	background: #fff;
	border: 1px solid var(--pwe-line);
	border-radius: var(--pwe-radius);
	box-shadow: var(--pwe-shadow);
	text-decoration: none;
	color: var(--pwe-fg);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wn-pwe-works .wn-com-work-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
	border-color: var(--pwe-accent);
}
.wn-pwe-works .wn-com-work-card__icon {
	font-size: 1.8rem;
	line-height: 1;
}
.wn-pwe-works .wn-com-work-card__title {
	font-size: 1.05rem;
	margin: .15rem 0 0;
	color: var(--pwe-fg);
}
.wn-pwe-works .wn-com-work-card__desc {
	margin: 0;
	color: var(--pwe-muted);
	font-size: .9rem;
	line-height: 1.65;
}
.wn-pwe-works .wn-com-work-card__cta {
	margin-top: auto;
	padding-top: .5rem;
	color: var(--pwe-accent);
	font-weight: 600;
	font-size: .9rem;
}
.wn-pwe-works .wn-pwe-works__footer {
	margin-top: 1.5rem;
	padding: 1rem 1.2rem;
	background: var(--pwe-bg-soft);
	border-radius: var(--pwe-radius);
	color: var(--pwe-muted);
	font-size: .94rem;
}
.wn-pwe-works .wn-pwe-works__footer a { color: var(--pwe-accent); }

/* ===== responsive ===== */
@media (max-width: 600px) {
	.wn-pwe-profile .wn-pwe-deflist__row {
		grid-template-columns: 5rem 1fr;
	}
	.wn-pwe-profile .wn-pwe-timeline__item {
		grid-template-columns: 4rem 1fr;
		padding: .75rem .85rem;
	}
	.wn-pwe-profile .wn-pwe-h2 { font-size: 1.2rem; }
	.wn-pwe-profile .wn-pwe-stat__num { font-size: 1.5rem; }
	.wn-pwe-profile .wn-pwe-cta__btn { width: 100%; min-width: 0; }
	.wn-pwe-works .wn-pwe-works__grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
	.wn-pwe-works .wn-com-work-card { padding: .85rem .9rem 1rem; }
	.wn-pwe-works .wn-com-work-card__title { font-size: .98rem; }
	.wn-pwe-works .wn-com-work-card__desc { font-size: .82rem; }
}