/* ==========================================================================
   スタッフマイページ 詳細ページ
   ========================================================================== */

.aa-mp .aa-section{ min-height:auto }

/* --- HERO --- */
.aa-mp-hero{
	min-height:82svh;
	padding-top:calc(var(--space-block) + 60px);
	overflow:hidden;
	background:
		radial-gradient(56% 46% at 24% 22%, rgb(111 214 255 / .22), transparent 66%),
		radial-gradient(48% 42% at 82% 30%, rgb(185 168 255 / .18), transparent 68%),
		linear-gradient(180deg,#101a3c,#0a1230 62%,#060a1e);
}
.aa-mp-hero__inner{ display:grid; gap:clamp(16px,3svh,30px); max-width:min(1000px,100%) }
.aa-mp-hero__label{
	font-family:var(--font-mono);
	font-size:var(--fs-label);
	letter-spacing:var(--ls-label);
	color:#bfe9ff;
}
.aa-mp-hero__title{
	font-family:var(--font-display);
	font-weight:500;
	font-size:clamp(1.9rem,5vw,4.2rem);
	line-height:var(--lh-tight);
}
.aa-mp-hero__lead{ font-size:var(--fs-lead); color:var(--fg-sub); max-width:48ch }

/* --- 主要機能（交互レイアウト） --- */
.aa-mp-pillar{ padding-block:clamp(48px,8svh,120px) }
.aa-mp-pillar__inner{
	display:grid;
	gap:clamp(28px,4vw,72px);
	align-items:center;
	grid-template-columns:repeat(auto-fit, minmax(min(100%,320px), 1fr));
}
/* 偶数番はメディアを左へ */
.aa-mp-pillar:nth-of-type(even) .aa-mp-pillar__media{ order:-1 }

.aa-mp-pillar__body{ display:grid; gap:.8em; align-content:start }
.aa-mp-pillar__index{
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(2.4rem,5vw,4rem);
	line-height:1;
	color:transparent;
	-webkit-text-stroke:1px var(--rule);
	margin-bottom:.2em;
}
.aa-mp-pillar__label{
	font-family:var(--font-mono);
	font-size:var(--fs-label);
	letter-spacing:var(--ls-label);
	color:var(--c-signal);
}
.aa-mp-pillar__title{
	font-family:var(--font-display);
	font-weight:500;
	font-size:clamp(1.3rem,2.8vw,2.4rem);
	line-height:var(--lh-tight);
}
.aa-mp-pillar__text{ color:var(--fg-sub); max-width:48ch; line-height:1.95 }
.aa-mp-pillar__note{
	font-size:.82rem;
	color:var(--fg-sub);
	padding-left:1em;
	border-left:2px solid var(--c-signal);
	line-height:1.8;
}
.aa-mp-pillar__media{ max-width:min(100%,340px); justify-self:center }

/* --- 着せ替えテーマ --- */
.aa-mp-theme{
	overflow:hidden;
	background:linear-gradient(180deg,#060a1e,#101a3c 55%,#0a1230);
}
.aa-mp-theme__list{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:clamp(24px,4svh,44px);
}
.aa-mp-theme__item{
	padding:.65em 1.2em;
	border-radius:999px;
	border:1px solid rgb(255 255 255 / .2);
	color:rgb(242 246 255 / .82);
	font-size:.8rem;
	transition:border-color var(--dur-fast) linear, background var(--dur-fast) linear;
}
.aa-mp-theme__item:hover{ border-color:#6fd6ff; background:rgb(111 214 255 / .1) }

.aa-mp-theme__phases{ display:flex; flex-wrap:wrap; gap:clamp(12px,2vw,28px) }
.aa-mp-theme__phase{
	display:flex;
	align-items:center;
	gap:.6em;
	font-family:var(--font-mono);
	font-size:.68rem;
	letter-spacing:.14em;
	color:var(--fg-sub);
}
.aa-mp-theme__phase span{
	width:34px;
	height:20px;
	border-radius:6px;
	border:1px solid rgb(255 255 255 / .16);
}
/* 実装の時間帯グラデーション（cosmicテーマ）を縮小して見せる */
.aa-mp-theme__phase[data-phase="dawn"] span{ background:linear-gradient(180deg,#2a2a5a,#7a5a8a 55%,#e0a070) }
.aa-mp-theme__phase[data-phase="day"] span{ background:linear-gradient(180deg,#3a6ab0,#7aa0d0 55%,#c0d8f0) }
.aa-mp-theme__phase[data-phase="dusk"] span{ background:linear-gradient(180deg,#1a1a3a,#5a2a5a 55%,#e07a5a) }
.aa-mp-theme__phase[data-phase="night"] span{ background:linear-gradient(180deg,#101a3c,#060a1e) }

.aa-mp-theme__note{
	margin-top:clamp(20px,3svh,36px);
	color:var(--fg-sub);
	font-size:var(--fs-lead);
	max-width:44ch;
}

/* --- 機能一覧 --- */
.aa-mp-features__grid{
	display:grid;
	gap:1px;
	background:var(--rule);
	border:1px solid var(--rule);
	grid-template-columns:repeat(auto-fill, minmax(min(100%,240px), 1fr));
}
.aa-mp-features__item{
	background:var(--bg);
	padding:clamp(22px,2.6vw,36px);
	display:grid;
	gap:.6em;
	align-content:start;
}
.aa-mp-features__name{ font-size:clamp(1rem,1.4vw,1.2rem); font-weight:400 }
.aa-mp-features__text{ color:var(--fg-sub); font-size:.86rem; line-height:1.85 }

/* --- CTA --- */
.aa-mp-cta__inner{ display:grid; gap:clamp(20px,3svh,40px); justify-items:center; text-align:center }
.aa-mp-cta__title{
	font-family:var(--font-display);
	font-weight:500;
	font-size:var(--fs-display);
	line-height:var(--lh-tight);
}

@media (max-width:599px){
	.aa-mp-pillar:nth-of-type(even) .aa-mp-pillar__media{ order:0 }
}