/* Shared site components. Loaded after page-specific styles. */
:root {
 --ui-text: #ffffff; --ui-muted: #94a3b8; --ui-note: #8896aa;
 --ui-cyan: #38d9e6; --ui-orange: #f5ad42;
 --ui-panel: rgba(255,255,255,.03); --ui-border: rgba(255,255,255,.1);
 --color-text: var(--ui-text); --color-text-mute: var(--ui-muted);
 --text: var(--ui-text); --muted: var(--ui-muted);
}
body .btn-cta { padding: 18px 32px; font-family: 'Rajdhani','Noto Sans JP',sans-serif; font-size: 1.2rem; line-height: 1.5; border-radius: 6px; }
body .btn-small { padding: 10px 18px; font-size: 1rem; }
.price-anchor, .feature-desc, .price span { color: var(--ui-note); }
.category { color: var(--ui-orange); }
.method-note, .sort-note, .article-body figcaption { color: var(--ui-note); }
.article-body .notification-cta, .article-body .video-guide, .article-body .next-question, .evaluation-note, .review-link a {
 background: var(--ui-panel); border: 1px solid var(--ui-border); border-radius: 16px; padding: 24px;
}
.cta-links a { border: 1px solid var(--ui-cyan); border-radius: 6px; padding: 10px 18px; color: var(--ui-cyan); text-decoration: none; line-height: 1.5; }
.cta-links a:hover { background: rgba(56, 217, 230,.1); }
footer.site-footer { background: #000; border-top: 1px solid var(--ui-border); color: var(--ui-muted); text-align: center; padding: 50px 20px; font-size: .85rem; line-height: 1.8; }
.site-footer .footer-logo { font-family: 'Rajdhani',sans-serif; font-size: 1.8rem; font-weight: 700; color: #fff; margin: 0 0 20px; }
.site-footer p { margin: 10px 0 0; }
.site-footer .footer-social { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 28px; margin: 10px 0; }
.site-footer a { text-decoration: none; }
.site-footer .footer-social a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Noto Sans JP',sans-serif; font-size: .95rem; color: var(--ui-muted); padding: 8px 0; line-height: 1.8; }
.site-footer a:hover { color: var(--ui-cyan); }
.site-footer a:focus-visible { outline: 2px solid var(--ui-cyan); outline-offset: 5px; }
.site-footer .footer-note { margin-top: 10px; font-size: .75rem; color: var(--ui-note); }
@media(max-width:768px) { body .btn-cta { padding: 16px 20px; } body .btn-small { padding: 10px 18px; } }