/* ============================================================
   Interactive content experience v2
   ex-diagnosis / trauma-check / aruaru / landmine
   ============================================================ */

:root {
	--xp-ink: #231a3a;
	--xp-muted: #675d79;
	--xp-line: rgba(74, 53, 96, .13);
	--xp-paper: #fff;
	--xp-soft: #f8f5fb;
	--xp-purple: #7654b4;
	--xp-pink: #d55d92;
	--xp-shadow: 0 18px 48px rgba(44, 29, 72, .1);
}

.xp-shell { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.xp-reading { max-width: 860px; margin: 0 auto; }
.xp-kicker { margin: 0 0 10px; font: 800 .75rem/1.2 "Poppins", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.xp-lead { font-size: clamp(1rem, 2.1vw, 1.15rem); line-height: 1.95; }
.xp-muted { color: var(--xp-muted); }
.xp-anchor { scroll-margin-top: 88px; }

.xp-proof {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	max-width: 660px;
	margin: 28px auto 0;
}
.xp-proof__item {
	background: rgba(255,255,255,.78);
	border: 1px solid rgba(255,255,255,.86);
	border-radius: 16px;
	padding: 13px 10px;
	box-shadow: 0 8px 24px rgba(58,38,88,.08);
	backdrop-filter: blur(8px);
}
.xp-proof__item strong { display: block; color: var(--xp-ink); font-size: .94rem; }
.xp-proof__item span { display: block; margin-top: 3px; color: var(--xp-muted); font-size: .72rem; }

.xp-jump {
	display: flex;
	gap: 9px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 26px auto 0;
}
.xp-jump a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border: 1px solid var(--xp-line);
	border-radius: 999px;
	background: rgba(255,255,255,.9);
	color: var(--xp-ink);
	font-size: .78rem;
	font-weight: 800;
	text-decoration: none;
}

.xp-section { padding: 74px 0; }
.xp-section--soft { background: linear-gradient(180deg, #faf8fc 0%, #fff 100%); }
.xp-section__head { max-width: 720px; margin: 0 auto 30px; text-align: center; }
.xp-section__head h2 { margin: 0 0 14px; color: var(--xp-ink); font-size: clamp(1.55rem, 4vw, 2.25rem); line-height: 1.45; }
.xp-section__head p { margin: 0; color: var(--xp-muted); font-size: .95rem; line-height: 1.9; }

.xp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.xp-card {
	position: relative;
	background: var(--xp-paper);
	border: 1px solid var(--xp-line);
	border-radius: 22px;
	padding: 25px;
	box-shadow: 0 10px 32px rgba(43, 28, 70, .06);
	overflow: hidden;
}
.xp-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(#8b6cc1,#d65c9a); }
.xp-card__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; background: #f3ecfb; font-size: 1.35rem; }
.xp-card h3 { margin: 0 0 9px; color: var(--xp-ink); font-size: 1.05rem; line-height: 1.55; }
.xp-card p { margin: 0; color: var(--xp-muted); font-size: .88rem; line-height: 1.85; }

.xp-flow { counter-reset: flow; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.xp-flow__item { counter-increment: flow; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--xp-line); }
.xp-flow__item::before { content: "0" counter(flow); display: block; margin-bottom: 12px; color: var(--xp-purple); font: 900 1.25rem/1 "Poppins",sans-serif; }
.xp-flow__item h3 { margin: 0 0 8px; color: var(--xp-ink); font-size: 1rem; }
.xp-flow__item p { margin: 0; color: var(--xp-muted); font-size: .84rem; line-height: 1.8; }

.xp-note {
	margin: 28px 0;
	padding: 22px 24px;
	border: 1px solid #e3d8f2;
	border-radius: 18px;
	background: #fbf8ff;
	color: #524466;
	font-size: .88rem;
	line-height: 1.9;
}
.xp-note strong { color: var(--xp-ink); }
.xp-note--safety { border-color: #ead9ba; background: #fffaf0; color: #68583c; }

.xp-article { color: #3b314b; }
.xp-article h2 { margin: 60px 0 18px; color: var(--xp-ink); font-size: clamp(1.45rem,3.2vw,1.95rem); line-height: 1.55; }
.xp-article h3 { margin: 34px 0 12px; color: var(--xp-ink); font-size: 1.12rem; line-height: 1.6; }
.xp-article p, .xp-article li { font-size: .94rem; line-height: 2; }
.xp-article ul { padding-left: 1.25em; }
.xp-article a { color: #6d48aa; font-weight: 700; text-underline-offset: 3px; }
.xp-article__toc { margin: 32px 0; padding: 24px; border-radius: 20px; background: #f7f2fb; border: 1px solid #e7ddf0; }
.xp-article__toc strong { display: block; margin-bottom: 10px; color: var(--xp-ink); }
.xp-article__toc ol { margin: 0; padding-left: 1.4em; }
.xp-article__toc li { margin: 5px 0; font-size: .85rem; }

.xp-faq { border-top: 1px solid var(--xp-line); }
.xp-faq details { border-bottom: 1px solid var(--xp-line); }
.xp-faq summary { position: relative; cursor: pointer; list-style: none; padding: 20px 42px 20px 0; color: var(--xp-ink); font-weight: 800; line-height: 1.6; }
.xp-faq summary::-webkit-details-marker { display: none; }
.xp-faq summary::after { content: "+"; position: absolute; right: 8px; top: 18px; color: var(--xp-purple); font-size: 1.35rem; }
.xp-faq details[open] summary::after { content: "−"; }
.xp-faq p { margin: 0; padding: 0 38px 22px 0; color: var(--xp-muted); font-size: .9rem; line-height: 1.9; }

.xp-related { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.xp-related a { display: block; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--xp-line); color: var(--xp-ink); text-decoration: none; transition: .2s ease; }
.xp-related a:hover { transform: translateY(-3px); box-shadow: var(--xp-shadow); }
.xp-related strong { display: block; margin-bottom: 5px; font-size: .95rem; }
.xp-related span { display: block; color: var(--xp-muted); font-size: .78rem; line-height: 1.65; }

/* Enhanced application surfaces */
.xp-app-wrap { position: relative; z-index: 2; max-width: 820px; margin: -28px auto 0; padding: 0 20px; }
.xp-app-wrap > .ex-diag__screen,
.xp-app-wrap > .tr-check__screen { margin-top: 0; }
.xp-app-title { margin: 0 0 10px; color: var(--xp-ink); font-size: 1.2rem; }
.xp-app-sub { margin: 0 0 22px; color: var(--xp-muted); font-size: .86rem; line-height: 1.8; }
.xp-app-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 22px 0; }
.xp-app-meta span { padding: 10px 8px; border-radius: 12px; background: #f8f4fb; color: #5a4d6f; font-size: .75rem; font-weight: 800; text-align: center; }

.xp-axis { margin: 18px 0; }
.xp-axis__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.xp-axis__head strong { color: var(--xp-ink); font-size: .86rem; }
.xp-axis__head span { color: var(--xp-muted); font: 800 .78rem/1 "Poppins",sans-serif; }
.xp-axis__track { height: 10px; border-radius: 999px; background: #eee8f4; overflow: hidden; }
.xp-axis__bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7960c5,#d75d94); transition: width .8s ease; }
.xp-axis__note { margin: 7px 0 0 !important; color: var(--xp-muted) !important; font-size: .76rem !important; line-height: 1.6 !important; }

.xp-result-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.xp-result-tile { padding: 17px; border-radius: 15px; background: #faf7fc; border: 1px solid #eee5f4; }
.xp-result-tile strong { display: block; margin-bottom: 6px; color: var(--xp-ink); font-size: .88rem; }
.xp-result-tile p { margin: 0 !important; font-size: .8rem !important; line-height: 1.75 !important; }
.xp-result-callout { padding: 18px; border-radius: 16px; background: linear-gradient(135deg,#fff6f9,#f8f3ff); border: 1px solid #eadcf2; }
.xp-result-callout strong { display: block; margin-bottom: 7px; color: var(--xp-ink); }
.xp-result-callout p { margin: 0 !important; }

/* aruaru v2 */
.ar-page .xp-intro-strip,
.lm .xp-intro-strip { margin: -18px auto 30px; position: relative; z-index: 2; }
.ar-selector, .lm__selector { box-shadow: var(--xp-shadow); }
.ar-category-nav { display: flex; gap: 8px; overflow-x: auto; margin: 22px 0 8px; padding: 4px 0 8px; scrollbar-width: thin; }
.ar-category-nav button { flex: 0 0 auto; border: 1px solid #ded1e9; border-radius: 999px; padding: 9px 15px; background: #fff; color: #5c496e; font-size: .78rem; font-weight: 800; cursor: pointer; }
.ar-category-nav button.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg,#7654b4,#d55d92); }
.ar-cards__intro { margin: 25px 0 14px; padding: 22px; border-radius: 20px; background: linear-gradient(135deg,#342253,#6e478d); color: #fff; }
.ar-cards__intro h2 { margin: 0 0 7px; color: #fff; font-size: 1.25rem; }
.ar-cards__intro p { margin: 0; color: rgba(255,255,255,.84); font-size: .84rem; line-height: 1.8; }
.ar-card__category { display: inline-flex; margin-bottom: 9px; padding: 4px 9px; border-radius: 999px; background: #f1e9f8; color: #6e4a92; font-size: .66rem; font-weight: 900; }
.ar-card__why { margin: 0 0 14px; color: #75677e; font-size: .76rem; line-height: 1.7; }
.ar-combo-insight { grid-column: 1 / -1; padding: 25px; border-radius: 20px; background: linear-gradient(135deg,#fff2f6,#f4effc); border: 1px solid #ead8e5; }
.ar-combo-insight h3 { margin: 0 0 9px; color: var(--xp-ink); font-size: 1.05rem; }
.ar-combo-insight p { margin: 0; color: var(--xp-muted); font-size: .86rem; line-height: 1.9; }

/* landmine v2 */
.lm-item { overflow: hidden; }
.lm-item__context { display: inline-flex; margin-bottom: 8px; padding: 4px 9px; border-radius: 999px; background: #fff0ec; color: #a74c42; font-size: .68rem; font-weight: 900; }
.lm-item__repair { margin-top: 11px; padding: 11px 13px; border-radius: 11px; background: #f3faf7; color: #356a55; font-size: .78rem; line-height: 1.65; }
.lm-item__repair strong { color: #245844; }
.lm-guide { margin: 20px 0; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #eadfe6; }
.lm-guide h3 { margin: 0 0 10px; color: var(--xp-ink); font-size: 1rem; }
.lm-guide p { margin: 0; color: var(--xp-muted); font-size: .84rem; line-height: 1.85; }
.lm-result__notice { margin: 16px 0 0; color: #72667a; font-size: .75rem; line-height: 1.65; }
.lm-result__head { display: flex; align-items: center; gap: 22px; text-align: left; }
.lm-result__avatar { flex: 0 0 auto; width: 124px; height: 124px; border-radius: 24px; object-fit: cover; background: #fff; box-shadow: 0 12px 28px rgba(50,30,50,.14); }
.lm-result__head > div { flex: 1; min-width: 0; }
.lm-result__head .lm-result__title { margin-bottom: 6px; }

@media (max-width: 767px) {
	.xp-shell { padding: 0 16px; }
	.xp-proof { grid-template-columns: 1fr; max-width: 360px; }
	.xp-proof__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; }
	.xp-proof__item span { margin: 0; text-align: right; }
	.xp-section { padding: 54px 0; }
	.xp-grid, .xp-flow, .xp-related { grid-template-columns: 1fr; }
	.xp-card { padding: 22px; }
	.xp-app-wrap { margin-top: -14px; padding: 0 14px; }
	.xp-app-meta { grid-template-columns: 1fr; }
	.xp-result-grid { grid-template-columns: 1fr; }
	.xp-grid[style], .xp-flow[style] { grid-template-columns: 1fr !important; }
	.xp-article h2 { margin-top: 44px; }
	.lm-result__head { align-items: flex-start; gap: 14px; }
	.lm-result__avatar { width: 84px; height: 84px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.xp-related a, .xp-axis__bar { transition: none; }
}