/* =========================================================
   R-LLM SEO Intro Page (intro.css)
   - System fonts only
   - No Tailwind / No external fonts
   - Scoped to #r-llm-seo-admin
========================================================= */

/* ---------- Base ---------- */
#r-llm-seo-admin{
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Hiragino Sans",
		"Hiragino Kaku Gothic ProN",
		"Yu Gothic UI",
		"Yu Gothic",
		Meiryo,
		sans-serif;
}

/* link reset（1箇所に統一） */
#r-llm-seo-admin a{
	text-decoration:none;
	box-shadow:none;
}

/* strong */
#r-llm-seo-admin strong{
	font-weight:bold;
}

/* ---------- Page / Layout ---------- */
#r-llm-seo-admin .rllm-page{
	background:#f8fafc;
	min-height:100vh;
	padding:24px;
	color:#0f172a;
}
@media (min-width:768px){
	#r-llm-seo-admin .rllm-page{ padding:48px; }
}

#r-llm-seo-admin .rllm-container{
	max-width:1024px;
	margin:0 auto;
}

#r-llm-seo-admin .rllm-card{
	background:#fff;
	border:1px solid #e2e8f0;
	border-radius:32px;
	box-shadow:0 1px 2px rgba(15,23,42,.06);
	margin-bottom:24px;
}

/* ---------- Header ---------- */
#r-llm-seo-admin .rllm-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	margin-bottom:40px;
}
#r-llm-seo-admin .rllm-brand{
	display:flex;
	align-items:center;
	gap:16px;
}
#r-llm-seo-admin .rllm-logo{
	width:48px;height:48px;
	background:#4f46e5;
	border-radius:16px;
	display:flex;align-items:center;justify-content:center;
	color:#fff;font-weight:900;font-size:24px;
	box-shadow:0 12px 22px rgba(79,70,229,.22);
}
#r-llm-seo-admin .rllm-title{
	margin:0;
	font-size:24px;
	font-weight:900;
	letter-spacing:-.02em;
}
#r-llm-seo-admin .rllm-title span{ color:#4f46e5; }
#r-llm-seo-admin .rllm-subtitle{
	margin:0;
	font-size:10px;
	font-weight:900;
	color:#94a3b8;
	letter-spacing:.2em;
	text-transform:uppercase;
}

#r-llm-seo-admin .rllm-badgewrap{ display:none; }
@media (min-width:768px){
	#r-llm-seo-admin .rllm-badgewrap{ display:flex; }
}

/* ---------- Pills (header badge / system status 共通) ---------- */
#r-llm-seo-admin .rllm-pill{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 12px;
	border-radius:9999px;
	font-size:10px;
	font-weight:900;
	letter-spacing:.22em;
	text-transform:uppercase;
}
#r-llm-seo-admin .rllm-pill-dot{
	width:8px;height:8px;border-radius:9999px;
}
#r-llm-seo-admin .rllm-pill-ok{ background:#ecfdf5; color:#047857; }
#r-llm-seo-admin .rllm-pill-dot-ok{ background:#10b981; }
#r-llm-seo-admin .rllm-pill-warn{ background:#fffbeb; color:#b45309; }
#r-llm-seo-admin .rllm-pill-dot-warn{ background:#f59e0b; }
#r-llm-seo-admin .rllm-pill-ng{ background:#fef2f2; color:#b91c1c; }
#r-llm-seo-admin .rllm-pill-dot-ng{ background:#ef4444; }

/* 互換（既存クラスが残っててもOKにする） */
#r-llm-seo-admin .rllm-status-pill{ /* legacy wrapper */
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:10px 14px;
	border-radius:9999px;
	font-size:11px;
	font-weight:900;
	letter-spacing:.22em;
	text-transform:uppercase;
}
#r-llm-seo-admin .rllm-dot{ width:8px;height:8px;border-radius:9999px; }
#r-llm-seo-admin .rllm-status-ok{ background:#ecfdf5; color:#047857; }
#r-llm-seo-admin .rllm-status-ok .rllm-dot{ background:#10b981; }
#r-llm-seo-admin .rllm-status-warn{ background:#fffbeb; color:#b45309; }
#r-llm-seo-admin .rllm-status-warn .rllm-dot{ background:#f59e0b; }
#r-llm-seo-admin .rllm-status-ng{ background:#fef2f2; color:#b91c1c; }
#r-llm-seo-admin .rllm-status-ng .rllm-dot{ background:#ef4444; }

/* ---------- Hero ---------- */
#r-llm-seo-admin .rllm-hero-inner{
	padding:32px;
	text-align:center;
}
@media (min-width:768px){
	#r-llm-seo-admin .rllm-hero-inner{ padding:40px; }
}

#r-llm-seo-admin .rllm-hero-title{
	margin:0 0 24px;
	font-size:30px;
	font-weight:900;
	line-height:1.15;
}
@media (min-width:768px){
	#r-llm-seo-admin .rllm-hero-title{ font-size:48px; }
}

/* gradient text */
#r-llm-seo-admin .gradient-text{
	background:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}

#r-llm-seo-admin .rllm-hero-lead{
	margin:0 auto 24px;
	max-width:42rem;
	color:#475569;
	font-weight:600;
	line-height:1.8;
}

#r-llm-seo-admin .rllm-only-md{ display:none; }
@media (min-width:768px){
	#r-llm-seo-admin .rllm-only-md{ display:block; }
}

/* safe block */
#r-llm-seo-admin .rllm-safe{
	margin:16px auto 0;
	max-width:42rem;
	background:#ecfdf5;
	border:1px solid #a7f3d0;
	border-radius:16px;
	padding:16px 18px;
	text-align:left;
	display:flex;
	gap:12px;
	align-items:flex-start;
}
#r-llm-seo-admin .rllm-safe-icon{
	width:36px;height:36px;
	border-radius:12px;
	background:#059669;
	color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-weight:900;
}
#r-llm-seo-admin .rllm-safe-title{
	margin:0;
	font-size:14px;
	font-weight:900;
	color:#064e3b;
}
#r-llm-seo-admin .rllm-safe-list{
	margin:8px 0 0;
	padding-left:18px;
	color:rgba(6,78,59,.92);
	font-weight:700;
	line-height:1.7;
	font-size:14px;
	list-style: disc;
	list-style-position: outside;
}
#r-llm-seo-admin .rllm-safe-list li{
	display: list-item;
}

/* hero links */
#r-llm-seo-admin .rllm-links{
	margin-top:28px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px 24px;
	font-size:14px;
}
#r-llm-seo-admin .rllm-links a{
	color:#64748b;
	font-weight:800;
}
#r-llm-seo-admin .rllm-links a:hover{ color:#0f172a; }

/* ---------- Steps ---------- */
#r-llm-seo-admin .rllm-steps{
	padding:24px;
}
@media (min-width:768px){
	#r-llm-seo-admin .rllm-steps{ padding:40px; }
}

#r-llm-seo-admin .rllm-steps-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	margin-bottom:24px;
}
#r-llm-seo-admin .rllm-steps-title{
	margin:0;
	font-size:20px;
	font-weight:900;
}
@media (min-width:768px){
	#r-llm-seo-admin .rllm-steps-title{ font-size:24px; }
}

#r-llm-seo-admin .rllm-chip{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 12px;
	border-radius:9999px;
	background:#f1f5f9;
	color:#475569;
	font-size:10px;
	font-weight:900;
	letter-spacing:.12em;
	text-transform:uppercase;
}

#r-llm-seo-admin .rllm-steps-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:16px;
}
@media (min-width:768px){
	#r-llm-seo-admin .rllm-steps-grid{ grid-template-columns:repeat(3,1fr); }
}

#r-llm-seo-admin .rllm-step{
	background:#f8fafc;
	border:1px solid #e2e8f0;
	border-radius:16px;
	padding:24px;
}
#r-llm-seo-admin .rllm-step-head{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:12px;
}
#r-llm-seo-admin .rllm-step-no{
	width:32px;height:32px;
	border-radius:12px;
	background:#4f46e5;
	color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-weight:900;
}
#r-llm-seo-admin .rllm-step-ttl{ margin:0; font-weight:900; }
#r-llm-seo-admin .rllm-step-desc{
	margin:0;
	color:#475569;
	font-size:14px;
	line-height:1.7;
	font-weight:600;
}

#r-llm-seo-admin .rllm-step-links{ margin-top:16px; }

/* step links */
#r-llm-seo-admin .rllm-link,
#r-llm-seo-admin .rllm-link-sub{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-weight:900;
	color:#4338ca;
}
#r-llm-seo-admin .rllm-link:hover,
#r-llm-seo-admin .rllm-link-sub:hover{ color:#312e81; }

#r-llm-seo-admin .rllm-register{
	margin-top:8px;
	font-size:12px;
	font-weight:800;
	color:#64748b;
}

/* ---------- CTA Section ---------- */
#r-llm-seo-admin .rllm-cta{ padding:24px; }
@media (min-width:768px){
	#r-llm-seo-admin .rllm-cta{ padding:40px; }
}

#r-llm-seo-admin .rllm-cta-row{
	display:flex;
	flex-direction:column;
	gap:16px;
	justify-content:center;
	align-items:stretch;
}
@media (min-width:640px){
	#r-llm-seo-admin .rllm-cta-row{
		flex-direction:row;
		align-items:center;
	}
}

/* ---------- Icons ---------- */
#r-llm-seo-admin .rllm-ico{ width:16px;height:16px; opacity:.8; }
#r-llm-seo-admin .rllm-ico-lg{ width:20px;height:20px; opacity:.9; }

/* ---------- CTA Buttons (WP admin hover耐性あり) ---------- */
#r-llm-seo-admin a.rllm-btn{
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	gap:8px !important;
	cursor:pointer !important;
	user-select:none !important;
	transition:transform .2s cubic-bezier(0.4,0,0.2,1),
				background-color .2s cubic-bezier(0.4,0,0.2,1),
				border-color .2s cubic-bezier(0.4,0,0.2,1),
				color .2s cubic-bezier(0.4,0,0.2,1),
				box-shadow .2s cubic-bezier(0.4,0,0.2,1) !important;
	will-change:transform !important;
	transform:translateZ(0) !important;
}
#r-llm-seo-admin a.rllm-btn:hover{
	transform:translateY(-1px) scale(1.02) !important;
}

/* Primary */
#r-llm-seo-admin a.rllm-btn-primary{
	background:#4f46e5 !important; /* indigo-600 */
	color:#fff !important;
	border:1px solid rgba(0,0,0,0) !important;
	padding:18px 44px !important;
	border-radius:16px !important;
	font-weight:900 !important;
	font-size:16px !important;
	box-shadow:0 18px 35px rgba(79,70,229,.15) !important;
}
#r-llm-seo-admin a.rllm-btn-primary:hover{
	background:#4338ca !important; /* indigo-700 */
	color:#fff !important;
}

/* Secondary */
#r-llm-seo-admin a.rllm-btn-secondary{
	background:#fff !important;
	color:#4338ca !important; /* indigo-700 */
	border:2px solid #c7d2fe !important; /* indigo-200 */
	padding:18px 38px !important;
	border-radius:16px !important;
	font-weight:900 !important;
	font-size:16px !important;
	box-shadow:0 1px 2px rgba(15,23,42,.06) !important;
}
#r-llm-seo-admin a.rllm-btn-secondary:hover{
	background:#eef2ff !important; /* indigo-50 */
	border-color:#a5b4fc !important; /* indigo-300 */
	color:#312e81 !important; /* indigo-900 */
}

/* ---------- Step1 URL box ---------- */
#r-llm-seo-admin .rllm-urlbox{
	background:#fff;
	border:1px solid #e2e8f0;
	border-radius:16px;
	padding:14px 16px;
	margin: 16px 0 0 0;
}
#r-llm-seo-admin .rllm-urlbox-label{
	font-size:12px;
	font-weight:900;
	color:#64748b;
	margin:0 0 6px;
}
#r-llm-seo-admin .rllm-urlbox-value{
	font-size:16px;
	font-weight:900;
	color:#0f172a;
	line-height:1.4;
	word-break:break-all;
	margin:0;
}

/* Copy button: 下に置いて右寄せ */
#r-llm-seo-admin .rllm-copy-row{
	margin-top:12px;
	display:flex;
	justify-content:flex-end;
}
#r-llm-seo-admin button.rllm-copy-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:12px 18px;
	border-radius:14px;
	font-weight:900;
	font-size:14px;
	cursor:pointer;
	border:2px solid #c7d2fe;
	background:#fff;
	color:#4338ca;
	transition:transform .2s cubic-bezier(0.4,0,0.2,1),
				background-color .2s cubic-bezier(0.4,0,0.2,1),
				border-color .2s cubic-bezier(0.4,0,0.2,1),
				color .2s cubic-bezier(0.4,0,0.2,1);
}
#r-llm-seo-admin button.rllm-copy-btn:hover{
	transform:translateY(-1px) scale(1.02);
	background:#eef2ff;
	border-color:#a5b4fc;
	color:#312e81;
}

/* ---------- Footer ---------- */
#r-llm-seo-admin .rllm-footer{
	text-align:center;
}
#r-llm-seo-admin .rllm-footer-status{
	display:flex;
	justify-content:center;
	margin-bottom:24px;
}
#r-llm-seo-admin .rllm-footer-links{
	margin-top:8px;
	font-size:12px;
	font-weight:800;
	color:#94a3b8;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:8px;
}
#r-llm-seo-admin .rllm-footer-links a{ color:#94a3b8; }
#r-llm-seo-admin .rllm-footer-links a:hover{ color:#64748b; }
#r-llm-seo-admin .rllm-footer-copy{
	margin-top:24px;
	font-size:10px;
	color:#cbd5e1;
	font-weight:900;
	letter-spacing:.3em;
	text-transform:uppercase;
}