/* ============================================================
   Media Single Article — Editorial Style
   Plus Web3 Media 記事詳細ページ

   Sections:
   - Hide default theme on single media
   - CSS Custom Properties
   - mds-progress  — reading progress bar
   - mds-breadcrumb — breadcrumb with schema
   - mds-hero      — article hero with full-width image
   - mds-article   — main article layout (content + sidebar)
   - mds-content   — article body / prose
   - mds-sidebar   — sticky sidebar with TOC
   - mds-toc       — table of contents
   - mds-author    — author info card
   - mds-tags      — article tags
   - mds-share     — share buttons
   - mds-newsletter — newsletter CTA
   - mds-related   — related articles grid
   - mds-career    — career CTA
   - mds-next-carousel — next articles carousel
   - mds-ad        — article inline ad
   - Responsive
   ============================================================ */

/* ------------------------------------------------------------
   0. CSS Custom Properties
   ------------------------------------------------------------ */
:root {
  --mds-color-primary: #2563eb;
  --mds-color-primary-dark: #1d4ed8;
  --mds-color-primary-light: #dbeafe;
  --mds-color-accent: #7c3aed;
  --mds-color-accent-light: #ede9fe;
  --mds-color-text: #111827;
  --mds-color-text-muted: #6b7280;
  --mds-color-text-light: #9ca3af;
  --mds-color-border: #e5e7eb;
  --mds-color-border-light: #f3f4f6;
  --mds-color-bg: #ffffff;
  --mds-color-bg-section: #f3f4f6;
  --mds-color-bg-dark: #111827;
  --mds-color-bg-card: #ffffff;
  --mds-color-success: #059669;
  --mds-color-warning: #d97706;
  --mds-color-danger: #dc2626;
  --mds-font-sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mds-font-serif: 'Noto Serif JP', 'Georgia', serif;
  --mds-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --mds-container: 1200px;
  --mds-content-width: 720px;
  --mds-radius-sm: 6px;
  --mds-radius-md: 8px;
  --mds-radius-lg: 12px;
  --mds-radius-xl: 16px;
  --mds-radius-full: 9999px;
  --mds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --mds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --mds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --mds-transition-fast: 150ms ease;
  --mds-transition-base: 250ms ease;
  --mds-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --mds-header-height: 60px;
}

/* ------------------------------------------------------------
   1. Hide default theme on single media
   ------------------------------------------------------------ */
.single-media .site-header,
.single-media .floating-nav,
.single-media .back-to-top {
  display: none !important;
}

/* Unified footer shows on all pages */
.page-media.single-media .portal-footer {
  margin-top: 0;
}

.single-media {
  padding-top: var(--mds-header-height);
  font-family: var(--mds-font-sans);
  color: var(--mds-color-text);
  background-color: var(--mds-color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.single-media *,
.single-media *::before,
.single-media *::after {
  box-sizing: border-box;
}

.single-media img {
  max-width: 100%;
  height: auto;
  display: block;
}

.single-media a {
  text-decoration: none;
  color: inherit;
  transition: color var(--mds-transition-fast);
}

.single-media h1,
.single-media h2,
.single-media h3,
.single-media h4,
.single-media h5,
.single-media h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
}

.single-media p {
  margin: 0;
}

.single-media ul,
.single-media ol {
  margin: 0;
  padding: 0;
}

/* Container */
.mds-container,
.single-media .container {
  width: 100%;
  max-width: var(--mds-container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------------
   2. mds-progress — Reading progress bar
   ------------------------------------------------------------ */
.mds-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1001;
  background: transparent;
  pointer-events: none;
}

.mds-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--mds-color-primary) 0%, var(--mds-color-accent) 100%);
  transition: width 100ms linear;
  border-radius: 0 2px 2px 0;
}

.mds-progress__bar--complete {
  width: 100%;
}

/* ------------------------------------------------------------
   3. mds-breadcrumb — Breadcrumb with schema
   ------------------------------------------------------------ */
.mds-breadcrumb {
  padding: 16px 0;
  background: var(--mds-color-bg);
  border-bottom: 1px solid var(--mds-color-border-light);
}

.mds-breadcrumb__inner {
  max-width: var(--mds-container);
  margin: 0 auto;
  padding: 0 24px;
}

.mds-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mds-breadcrumb__item {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  color: var(--mds-color-text-muted);
}

.mds-breadcrumb__item::after {
  content: '>';
  margin: 0 8px;
  color: var(--mds-color-text-light);
  font-size: 0.7rem;
}

.mds-breadcrumb__item:last-child::after {
  display: none;
}

.mds-breadcrumb__link {
  color: var(--mds-color-text-muted);
  transition: color var(--mds-transition-fast);
}

.mds-breadcrumb__link:hover {
  color: var(--mds-color-primary);
}

.mds-breadcrumb__current {
  color: var(--mds-color-text);
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 400px;
}

/* ------------------------------------------------------------
   4. mds-hero — Article hero with full-width image
   ------------------------------------------------------------ */
.mds-hero {
  position: relative;
  width: 100%;
  min-height: 400px;
  overflow: hidden;
  background: var(--mds-color-bg-dark);
}

.mds-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mds-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity var(--mds-transition-slow);
}

.mds-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.mds-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--mds-container);
  margin: 0 auto;
  padding: 80px 24px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 400px;
}

.mds-hero__meta-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.mds-hero__category {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--mds-color-primary);
  border-radius: var(--mds-radius-full);
}

.mds-hero__reading-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

.mds-hero__reading-time svg {
  width: 14px;
  height: 14px;
}

.mds-hero__date {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

.mds-hero__title {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  max-width: 800px;
}

.mds-hero__excerpt {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  max-width: 640px;
  margin-bottom: 24px;
}

.mds-hero__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mds-hero__author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.mds-hero__author-info {
  display: flex;
  flex-direction: column;
}

.mds-hero__author-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}

.mds-hero__author-role {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
}

.mds-hero__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.mds-hero__dates {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mds-hero__date--updated {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
}

.mds-hero--no-image .mds-hero__date--updated {
  color: var(--mds-color-text-muted);
}

/* Hero-below share bar */
.mds-share__inner {
  max-width: var(--mds-container);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.mds-hero + .mds-share {
  margin-top: 0;
  border-top: none;
  background: var(--mds-color-bg-card);
  border-bottom: 1px solid var(--mds-color-border);
}

/* Hero without image */
.mds-hero--no-image {
  min-height: auto;
  background: var(--mds-color-bg);
}

.mds-hero--no-image .mds-hero__content {
  min-height: auto;
  padding: 40px 24px;
}

.mds-hero--no-image .mds-hero__title {
  color: var(--mds-color-text);
}

.mds-hero--no-image .mds-hero__excerpt {
  color: var(--mds-color-text-muted);
}

.mds-hero--no-image .mds-hero__date,
.mds-hero--no-image .mds-hero__reading-time {
  color: var(--mds-color-text-muted);
}

.mds-hero--no-image .mds-hero__author-name {
  color: var(--mds-color-text);
}

.mds-hero--no-image .mds-hero__author-role {
  color: var(--mds-color-text-muted);
}

.mds-hero--no-image .mds-hero__author-avatar {
  border-color: var(--mds-color-border);
}

/* ------------------------------------------------------------
   5. mds-article — Main article layout (2-column with sidebar)
   ------------------------------------------------------------ */
.mds-article {
  background: var(--mds-color-bg);
  padding: 48px 0;
}

.mds-article__inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
  min-width: 0;
}

@media (max-width: 1024px) {
  .mds-article__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ---------- Sidebar (White-based design) ---------- */
.mds-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (max-width: 1024px) {
  .mds-sidebar {
    position: relative;
    top: 0;
  }
}

.mds-sidebar__card {
  background: #fff;
  border: 1px solid var(--mds-color-border);
  border-radius: 12px;
  padding: 20px;
}

.mds-sidebar__label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mds-color-primary);
  margin-bottom: 8px;
}

.mds-sidebar__heading {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--mds-color-text);
}

/* Ranking List */
.mds-sidebar__ranking {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mds-sidebar__ranking-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mds-color-border-light);
}

.mds-sidebar__ranking-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mds-sidebar__ranking-item:first-child {
  padding-top: 0;
}

.mds-sidebar__ranking-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--mds-color-text-muted);
  border-radius: 50%;
}

.mds-sidebar__ranking-item:nth-child(1) .mds-sidebar__ranking-num {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.mds-sidebar__ranking-item:nth-child(2) .mds-sidebar__ranking-num {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

.mds-sidebar__ranking-item:nth-child(3) .mds-sidebar__ranking-num {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.mds-sidebar__ranking-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--mds-color-text);
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.mds-sidebar__ranking-link:hover .mds-sidebar__ranking-title {
  color: var(--mds-color-primary);
}

.mds-sidebar__ranking-thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
}

.mds-sidebar__ranking-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mds-sidebar__ranking-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

/* TOC Sidebar */
.mds-toc-sidebar {
  background: #fff;
  border: 1px solid var(--mds-color-border);
  border-radius: 12px;
  padding: 20px;
}

.mds-toc-sidebar__title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mds-color-text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mds-color-border-light);
}

/* TOC list inside sidebar */
.mds-toc-sidebar .mds-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.mds-toc-sidebar .mds-toc__item {
  margin-bottom: 0;
  padding: 6px 0;
  border-bottom: 1px solid var(--mds-color-border-light);
}

.mds-toc-sidebar .mds-toc__item:last-child {
  border-bottom: none;
}

.mds-toc-sidebar .mds-toc__item--sub {
  padding-left: 12px;
}

.mds-toc-sidebar .mds-toc__link {
  display: block;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--mds-color-text-muted);
  text-decoration: none;
  background: none;
  border-radius: 0;
  transition: color 0.2s;
}

.mds-toc-sidebar .mds-toc__link:hover,
.mds-toc-sidebar .mds-toc__link.is-active {
  color: var(--mds-color-primary);
  background: none;
}

/* Sidebar CTA */
.mds-sidebar__cta {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid var(--mds-color-border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.mds-sidebar__cta-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--mds-color-text);
  margin-bottom: 6px;
}

.mds-sidebar__cta-desc {
  font-size: 12px;
  color: var(--mds-color-text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

.mds-sidebar__cta-btn {
  display: block;
  background: var(--mds-color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
  transition: background 0.2s;
}

.mds-sidebar__cta-btn:hover {
  background: var(--mds-color-primary-dark);
}

/* ------------------------------------------------------------
   6. mds-content — Article body / prose styling
   ------------------------------------------------------------ */
.mds-content {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--mds-color-text);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.mds-content__body iframe,
.mds-content__body video,
.mds-content__body embed,
.mds-content__body object {
  max-width: 100%;
}

.mds-content__body .wp-block-embed__wrapper {
  max-width: 100%;
  overflow: hidden;
}

/* Headings */
.mds-content h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-top: 48px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--mds-color-border);
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--mds-color-text);
}

.mds-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 16px;
  color: var(--mds-color-text);
  line-height: 1.4;
  padding-left: 16px;
  border-left: 4px solid var(--mds-color-primary);
}

.mds-content h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 32px;
  margin-bottom: 12px;
  color: var(--mds-color-text);
}

.mds-content h5 {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 8px;
  color: var(--mds-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Paragraphs */
.mds-content p {
  margin-bottom: 24px;
}

.mds-content p:last-child {
  margin-bottom: 0;
}

/* Links */
.mds-content a {
  color: var(--mds-color-primary);
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--mds-transition-fast),
              color var(--mds-transition-fast);
}

.mds-content a:hover {
  color: var(--mds-color-primary-dark);
  text-decoration-color: var(--mds-color-primary-dark);
}

/* Strong & emphasis */
.mds-content strong {
  font-weight: 700;
  color: var(--mds-color-text);
}

.mds-content em {
  font-style: italic;
}

/* Lists */
.mds-content ul,
.mds-content ol {
  margin-bottom: 24px;
  padding-left: 24px;
}

.mds-content ul {
  list-style-type: disc;
}

.mds-content ol {
  list-style-type: decimal;
}

.mds-content li {
  margin-bottom: 8px;
  line-height: 1.8;
}

.mds-content li::marker {
  color: var(--mds-color-primary);
}

.mds-content ul ul,
.mds-content ol ol,
.mds-content ul ol,
.mds-content ol ul {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Blockquote */
.mds-content blockquote {
  margin: 32px 0;
  padding: 24px 24px 24px 28px;
  border-left: 4px solid var(--mds-color-primary);
  background: var(--mds-color-bg-section);
  border-radius: 0 var(--mds-radius-md) var(--mds-radius-md) 0;
  font-size: 1rem;
  color: var(--mds-color-text);
  font-style: italic;
}

.mds-content blockquote p {
  margin-bottom: 0;
}

.mds-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 0.85rem;
  font-style: normal;
  color: var(--mds-color-text-muted);
}

.mds-content blockquote cite::before {
  content: '\2014 ';
}

/* Code */
.mds-content code {
  font-family: var(--mds-font-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  background: var(--mds-color-bg-section);
  border: 1px solid var(--mds-color-border);
  border-radius: var(--mds-radius-sm);
  color: var(--mds-color-accent);
}

.mds-content pre {
  margin: 32px 0;
  padding: 24px;
  background: #1e293b;
  border-radius: var(--mds-radius-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mds-content pre code {
  font-family: var(--mds-font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  color: #e2e8f0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

/* Tables */
.mds-content table {
  width: 100%;
  margin: 32px 0;
  border-collapse: collapse;
  border: 1px solid var(--mds-color-border);
  border-radius: var(--mds-radius-md);
  overflow: hidden;
}

.mds-content thead {
  background: var(--mds-color-bg-section);
}

.mds-content th {
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
  color: var(--mds-color-text);
  border-bottom: 2px solid var(--mds-color-border);
}

.mds-content td {
  padding: 12px 16px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--mds-color-border-light);
  color: var(--mds-color-text);
}

.mds-content tr:last-child td {
  border-bottom: none;
}

.mds-content tbody tr:hover {
  background: var(--mds-color-bg-section);
}

/* Images & figures */
.mds-content img {
  margin: 32px 0;
  border-radius: var(--mds-radius-lg);
  box-shadow: var(--mds-shadow-md);
}

.mds-content figure {
  margin: 32px 0;
}

.mds-content figure img {
  margin: 0;
  width: 100%;
}

.mds-content figcaption {
  font-size: 0.8rem;
  color: var(--mds-color-text-muted);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}

/* Horizontal rule */
.mds-content hr {
  margin: 48px 0;
  border: none;
  height: 1px;
  background: var(--mds-color-border);
}

/* Info / Warning / Note boxes */
.mds-content .mds-note {
  margin: 32px 0;
  padding: 20px 24px;
  border-radius: var(--mds-radius-md);
  font-size: 0.92rem;
  line-height: 1.7;
}

.mds-content .mds-note--info {
  background: #eff6ff;
  border-left: 4px solid var(--mds-color-primary);
  color: #1e40af;
}

.mds-content .mds-note--warning {
  background: #fffbeb;
  border-left: 4px solid var(--mds-color-warning);
  color: #92400e;
}

.mds-content .mds-note--success {
  background: #ecfdf5;
  border-left: 4px solid var(--mds-color-success);
  color: #065f46;
}

.mds-content .mds-note--danger {
  background: #fef2f2;
  border-left: 4px solid var(--mds-color-danger);
  color: #991b1b;
}

.mds-content .mds-note__title {
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Embed / iframe */
.mds-content iframe {
  width: 100%;
  margin: 32px 0;
  border-radius: var(--mds-radius-lg);
  border: none;
}

.mds-content .mds-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 32px 0;
  border-radius: var(--mds-radius-lg);
}

.mds-content .mds-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

/* Internal embed card — compact horizontal style */
.mds-content .ptg-bookmark--internal {
  margin: 32px 0;
}

.mds-content .ptg-bookmark--internal .ptg-bookmark__link {
  display: block;
  border: 1px solid var(--mds-color-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--mds-color-bg, #fff);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.mds-content .ptg-bookmark--internal .ptg-bookmark__link:hover {
  border-color: var(--mds-color-primary, #6366f1);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
  transform: translateY(-2px);
}

.mds-content .ptg-bookmark--internal .ptg-bookmark__inner {
  display: flex;
  align-items: stretch;
}

/* Text side */
.mds-content .ptg-bookmark--internal .ptg-bookmark__text {
  flex: 1;
  min-width: 0;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mds-content .ptg-bookmark--internal .ptg-bookmark__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mds-color-primary, #6366f1);
}

.mds-content .ptg-bookmark--internal .ptg-bookmark__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--mds-color-text, #111827);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mds-content .ptg-bookmark--internal .ptg-bookmark__description {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--mds-color-text-muted, #6b7280);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mds-content .ptg-bookmark--internal .ptg-bookmark__cta {
  margin-top: auto;
  padding-top: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mds-color-primary, #6366f1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mds-content .ptg-bookmark--internal .ptg-bookmark__arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.mds-content .ptg-bookmark--internal .ptg-bookmark__link:hover .ptg-bookmark__arrow {
  transform: translateX(3px);
}

/* Thumbnail side */
.mds-content .ptg-bookmark--internal .ptg-bookmark__thumb {
  flex-shrink: 0;
  width: 180px;
  overflow: hidden;
}

.mds-content .ptg-bookmark--internal .ptg-bookmark__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.mds-content .ptg-bookmark--internal .ptg-bookmark__link:hover .ptg-bookmark__thumb img {
  transform: scale(1.05);
}

/* Mobile: stack vertically */
@media (max-width: 600px) {
  .mds-content .ptg-bookmark--internal .ptg-bookmark__inner {
    flex-direction: column-reverse;
  }

  .mds-content .ptg-bookmark--internal .ptg-bookmark__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .mds-content .ptg-bookmark--internal .ptg-bookmark__text {
    padding: 16px;
  }
}

/* Table of contents link anchor offset */
.mds-content [id] {
  scroll-margin-top: calc(var(--mds-header-height) + 24px);
}

/* Drop cap */
.mds-content--dropcap > p:first-of-type::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: 0.8;
  padding-right: 12px;
  padding-top: 4px;
  font-weight: 800;
  color: var(--mds-color-primary);
}

/* ------------------------------------------------------------
   7. mds-sidebar — Sticky sidebar with TOC
   ------------------------------------------------------------ */
.mds-sidebar {
  position: sticky;
  top: calc(var(--mds-header-height) + 24px);
  max-height: calc(100vh - var(--mds-header-height) - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mds-color-border) transparent;
}

.mds-sidebar::-webkit-scrollbar {
  width: 4px;
}

.mds-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.mds-sidebar::-webkit-scrollbar-thumb {
  background: var(--mds-color-border);
  border-radius: 4px;
}

.mds-sidebar__section {
  margin-bottom: 32px;
}

.mds-sidebar__section:last-child {
  margin-bottom: 0;
}

.mds-sidebar__title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mds-color-text-muted);
  margin-bottom: 16px;
}

/* ------------------------------------------------------------
   8. mds-toc — Table of contents
   ------------------------------------------------------------ */
.mds-toc {
  border-left: 3px solid var(--mds-color-primary);
  padding-left: 16px;
}

.mds-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mds-toc__item {
  margin-bottom: 4px;
}

.mds-toc__link {
  display: block;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mds-color-text-muted);
  border-radius: var(--mds-radius-sm);
  transition: color var(--mds-transition-fast),
              background-color var(--mds-transition-fast);
}

.mds-toc__link:hover {
  color: var(--mds-color-primary);
  background: var(--mds-color-bg-section);
}

.mds-toc__link--active {
  color: var(--mds-color-primary);
  background: var(--mds-color-primary-light);
  font-weight: 600;
}

/* Nested levels */
.mds-toc__item--h3 .mds-toc__link {
  padding-left: 24px;
  font-size: 0.78rem;
}

.mds-toc__item--h4 .mds-toc__link {
  padding-left: 38px;
  font-size: 0.75rem;
}

/* TOC collapse for mobile */
.mds-toc__toggle {
  display: none;
  width: 100%;
  padding: 12px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--mds-font-sans);
  color: var(--mds-color-text);
  background: var(--mds-color-bg-section);
  border: 1px solid var(--mds-color-border);
  border-radius: var(--mds-radius-md);
  cursor: pointer;
  text-align: left;
}

.mds-toc__toggle::after {
  content: '+';
  float: right;
  font-weight: 400;
}

.mds-toc__toggle--open::after {
  content: '\2212';
}

/* ------------------------------------------------------------
   9. mds-author — Author info card (E-E-A-T)
   ------------------------------------------------------------ */
.mds-author {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: var(--mds-color-bg-section);
  border-radius: var(--mds-radius-lg);
  border: 1px solid var(--mds-color-border);
  margin-top: 48px;
}

.mds-author__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--mds-color-border);
}

.mds-author__info {
  flex: 1;
  min-width: 0;
}

.mds-author__label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mds-color-text-light);
  margin-bottom: 4px;
}

.mds-author__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mds-color-text);
  margin-bottom: 4px;
}

.mds-author__name a {
  color: var(--mds-color-text);
}

.mds-author__name a:hover {
  color: var(--mds-color-primary);
}

.mds-author__role {
  font-size: 0.78rem;
  color: var(--mds-color-text-muted);
  margin-bottom: 8px;
}

.mds-author__bio {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--mds-color-text-muted);
  margin-bottom: 12px;
}

.mds-author__social {
  display: flex;
  gap: 8px;
}

.mds-author__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--mds-color-bg);
  border: 1px solid var(--mds-color-border);
  border-radius: var(--mds-radius-sm);
  color: var(--mds-color-text-muted);
  transition: color var(--mds-transition-fast),
              border-color var(--mds-transition-fast);
}

.mds-author__social-link:hover {
  color: var(--mds-color-primary);
  border-color: var(--mds-color-primary);
}

.mds-author__social-link svg {
  width: 16px;
  height: 16px;
}

/* Reviewer / Fact-checker badge */
.mds-author--reviewer {
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.2);
}

.mds-author--reviewer .mds-author__label {
  color: var(--mds-color-primary);
}

/* ------------------------------------------------------------
   10. mds-tags — Article tags
   ------------------------------------------------------------ */
.mds-tags {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--mds-color-border);
}

.mds-tags__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mds-color-text-muted);
  margin-bottom: 12px;
}

.mds-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mds-tags__item {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--mds-color-text-muted);
  background: var(--mds-color-bg-section);
  border-radius: var(--mds-radius-full);
  transition: all var(--mds-transition-fast);
}

.mds-tags__item:hover {
  color: var(--mds-color-primary);
  background: var(--mds-color-primary-light);
}

/* ------------------------------------------------------------
   11. mds-share — Share buttons (軽量デザイン)
   ------------------------------------------------------------ */
.mds-share {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--mds-color-border);
}

.mds-share__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mds-color-text-muted);
  margin-bottom: 12px;
}

.mds-share__buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mds-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--mds-font-sans);
  color: var(--mds-color-text);
  background: transparent;
  border: 1px solid var(--mds-color-border);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mds-share__btn:hover {
  border-color: var(--mds-color-text-muted);
  background: var(--mds-color-bg-section);
}

.mds-share__btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.mds-share__btn--x {
  color: #000;
}

.mds-share__btn--x:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

.mds-share__btn--linkedin {
  color: #0a66c2;
}

.mds-share__btn--linkedin:hover {
  background: #0a66c2;
  border-color: #0a66c2;
  color: #fff;
}

.mds-share__btn--line {
  color: #06c755;
}

.mds-share__btn--line:hover {
  background: #06c755;
  border-color: #06c755;
  color: #fff;
}

.mds-share__btn--facebook {
  color: #1877f2;
}

.mds-share__btn--facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
}

.mds-share__btn--copy {
  color: var(--mds-color-text-muted);
}

.mds-share__btn--copy:hover {
  background: var(--mds-color-bg-section);
  border-color: var(--mds-color-text-muted);
  color: var(--mds-color-text);
}

.mds-share__btn--copied {
  background: var(--mds-color-success) !important;
  color: #fff !important;
  border-color: var(--mds-color-success) !important;
}

/* Sticky side share (desktop) */
.mds-share--sticky {
  position: fixed;
  left: calc((100vw - var(--mds-container)) / 2 - 80px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
}

.mds-share--sticky .mds-share__buttons {
  flex-direction: column;
}

.mds-share--sticky .mds-share__btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--mds-radius-full);
}

.mds-share--sticky .mds-share__label {
  display: none;
}

/* ------------------------------------------------------------
   12. mds-newsletter — Newsletter CTA
   ------------------------------------------------------------ */
.mds-newsletter {
  margin: 48px 0;
  padding: 32px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f0ff 100%);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: var(--mds-radius-xl);
  text-align: center;
}

.mds-newsletter__icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.mds-newsletter__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--mds-color-text);
  margin-bottom: 8px;
}

.mds-newsletter__desc {
  font-size: 0.88rem;
  color: var(--mds-color-text-muted);
  margin-bottom: 20px;
  line-height: 1.6;
}

.mds-newsletter__form {
  display: flex;
  gap: 8px;
  max-width: 400px;
  margin: 0 auto;
}

.mds-newsletter__input {
  flex: 1;
  padding: 12px 16px;
  font-size: 0.88rem;
  font-family: var(--mds-font-sans);
  color: var(--mds-color-text);
  background: var(--mds-color-bg);
  border: 1px solid var(--mds-color-border);
  border-radius: var(--mds-radius-md);
  outline: 2px solid transparent;
  transition: border-color var(--mds-transition-fast);
}

.mds-newsletter__input:focus {
  border-color: var(--mds-color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.mds-newsletter__input::placeholder {
  color: var(--mds-color-text-light);
}

.mds-newsletter__btn {
  padding: 12px 24px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--mds-font-sans);
  color: #fff;
  background: var(--mds-color-primary);
  border: none;
  border-radius: var(--mds-radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--mds-transition-fast);
}

.mds-newsletter__btn:hover {
  background: var(--mds-color-primary-dark);
}

/* Sidebar newsletter variant */
.mds-newsletter--sidebar {
  padding: 24px;
  text-align: left;
}

.mds-newsletter--sidebar .mds-newsletter__form {
  flex-direction: column;
  max-width: none;
}

/* ------------------------------------------------------------
   13. mds-related — Related articles grid
   ------------------------------------------------------------ */
.mds-related {
  padding: 64px 0;
  background: var(--mds-color-bg-section);
}

.mds-related__inner {
  max-width: var(--mds-container);
  margin: 0 auto;
  padding: 0 24px;
}

.mds-related__title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--mds-color-text);
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}

.mds-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.mds-related__card {
  display: flex;
  flex-direction: column;
  background: var(--mds-color-bg-card);
  border-radius: var(--mds-radius-lg);
  overflow: hidden;
  border: 1px solid var(--mds-color-border);
  box-shadow: var(--mds-shadow-sm);
  transition: transform var(--mds-transition-base),
              box-shadow var(--mds-transition-base);
}

.mds-related__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mds-shadow-lg);
}

.mds-related__card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.mds-related__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mds-transition-slow);
}

.mds-related__card:hover .mds-related__card-thumb img {
  transform: scale(1.05);
}

.mds-related__card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mds-related__card-category {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mds-color-primary);
  margin-bottom: 8px;
}

.mds-related__card-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--mds-color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}

.mds-related__card-date {
  font-size: 0.72rem;
  color: var(--mds-color-text-muted);
  margin-top: auto;
}

/* ------------------------------------------------------------
   14. mds-career — Career CTA (フルブリード)
   ------------------------------------------------------------ */
.mds-career {
  padding: 72px 24px;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

.mds-career::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 40%, rgba(99, 102, 241, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 60%, rgba(139, 92, 246, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.mds-career__inner {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.mds-career__title {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.mds-career__desc {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 28px;
  line-height: 1.8;
}

.mds-career__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 48px;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--mds-font-sans);
  color: #0f172a;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3);
}

.mds-career__btn:hover {
  color: #0f172a;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(251, 191, 36, 0.45);
}

/* ------------------------------------------------------------
   15. mds-next-carousel — Next articles carousel
   ------------------------------------------------------------ */
.mds-next-carousel {
  padding: 48px 0;
  background: var(--mds-color-bg);
  border-top: 1px solid var(--mds-color-border);
}

.mds-next-carousel__inner {
  max-width: var(--mds-container);
  margin: 0 auto;
  padding: 0 24px;
}

.mds-next-carousel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.mds-next-carousel__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mds-color-text);
}

.mds-next-carousel__controls {
  display: flex;
  gap: 8px;
}

.mds-next-carousel__control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--mds-color-border);
  border-radius: var(--mds-radius-full);
  background: var(--mds-color-bg);
  cursor: pointer;
  color: var(--mds-color-text);
  transition: all var(--mds-transition-fast);
}

.mds-next-carousel__control:hover {
  border-color: var(--mds-color-primary);
  color: var(--mds-color-primary);
}

.mds-next-carousel__control--disabled {
  opacity: 0.3;
  pointer-events: none;
}

.mds-next-carousel__scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mds-next-carousel__scroll::-webkit-scrollbar {
  display: none;
}

.mds-next-carousel__item {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

.mds-next-carousel__card {
  display: flex;
  flex-direction: column;
  background: var(--mds-color-bg);
  border: 1px solid var(--mds-color-border);
  border-radius: var(--mds-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--mds-transition-base),
              transform var(--mds-transition-base);
}

.mds-next-carousel__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mds-shadow-md);
}

.mds-next-carousel__card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.mds-next-carousel__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mds-transition-slow);
}

.mds-next-carousel__card:hover .mds-next-carousel__card-thumb img {
  transform: scale(1.05);
}

.mds-next-carousel__card-body {
  padding: 16px;
}

.mds-next-carousel__card-title {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--mds-color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.mds-next-carousel__card-date {
  font-size: 0.72rem;
  color: var(--mds-color-text-muted);
}

/* Previous / Next article navigation */
.mds-prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: var(--mds-container);
  margin: 0 auto;
  padding: 48px 24px;
  background: var(--mds-color-bg);
}

.mds-prev-next__item {
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  background: var(--mds-color-bg-card);
  border: 1px solid var(--mds-color-border);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mds-prev-next__item:hover {
  border-color: var(--mds-color-primary);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
  transform: translateY(-2px);
}

.mds-prev-next__item--next {
  text-align: right;
  align-items: flex-end;
}

.mds-prev-next__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--mds-color-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mds-prev-next__item--next .mds-prev-next__label {
  justify-content: flex-end;
}

.mds-prev-next__title {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mds-color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mds-prev-next__item:hover .mds-prev-next__title {
  color: var(--mds-color-primary);
}

/* ------------------------------------------------------------
   16. mds-ad — Article inline ad
   ------------------------------------------------------------ */
.mds-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 40px 0;
  padding: 16px;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: var(--mds-radius-md);
  text-align: center;
}

.mds-ad__label {
  font-size: 0.6rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.mds-ad__content {
  width: 100%;
}

.mds-ad__content img {
  width: 100%;
  height: auto;
  border-radius: var(--mds-radius-sm);
}

.mds-ad--sidebar {
  max-width: 300px;
  min-height: 250px;
  margin: 0 0 32px;
}

/* ------------------------------------------------------------
   17. Sidebar widgets
   ------------------------------------------------------------ */
/* Popular articles widget */
.mds-sidebar-popular {
  padding: 20px;
  background: var(--mds-color-bg-section);
  border-radius: var(--mds-radius-lg);
  border: 1px solid var(--mds-color-border);
}

.mds-sidebar-popular__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mds-sidebar-popular__item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.mds-sidebar-popular__rank {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--mds-color-text-light);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.mds-sidebar-popular__item:nth-child(1) .mds-sidebar-popular__rank {
  color: var(--mds-color-primary);
}

.mds-sidebar-popular__item:nth-child(2) .mds-sidebar-popular__rank {
  color: var(--mds-color-accent);
}

.mds-sidebar-popular__item:nth-child(3) .mds-sidebar-popular__rank {
  color: var(--mds-color-warning);
}

.mds-sidebar-popular__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--mds-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.mds-sidebar-popular__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mds-sidebar-popular__info {
  flex: 1;
  min-width: 0;
}

.mds-sidebar-popular__title {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mds-color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--mds-transition-fast);
}

.mds-sidebar-popular__item:hover .mds-sidebar-popular__title {
  color: var(--mds-color-primary);
}

.mds-sidebar-popular__date {
  font-size: 0.68rem;
  color: var(--mds-color-text-light);
  margin-top: 2px;
}

/* Sidebar CTA */
.mds-sidebar-cta {
  padding: 24px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: var(--mds-radius-lg);
  text-align: center;
  color: #fff;
}

.mds-sidebar-cta__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.mds-sidebar-cta__desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 16px;
}

.mds-sidebar-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--mds-font-sans);
  color: #fff;
  background: var(--mds-color-primary);
  border: none;
  border-radius: var(--mds-radius-md);
  cursor: pointer;
  transition: background-color var(--mds-transition-fast);
}

.mds-sidebar-cta__btn:hover {
  background: var(--mds-color-primary-dark);
  color: #fff;
}

/* ------------------------------------------------------------
   18. Updated / Published date display
   ------------------------------------------------------------ */
.mds-date-info {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.78rem;
  color: var(--mds-color-text-muted);
  margin-bottom: 24px;
}

.mds-date-info__item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mds-date-info__item svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

.mds-date-info__item--updated {
  color: var(--mds-color-success);
  font-weight: 600;
}

/* Reading time & word count */
.mds-reading-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--mds-color-bg-section);
  border-radius: var(--mds-radius-md);
  margin-bottom: 32px;
  font-size: 0.8rem;
  color: var(--mds-color-text-muted);
}

.mds-reading-info__item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mds-reading-info__sep {
  width: 1px;
  height: 16px;
  background: var(--mds-color-border);
}

/* ------------------------------------------------------------
   19. Responsive — max-width: 1024px
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .mds-article {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .mds-article__sidebar {
    position: static;
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid var(--mds-color-border);
  }

  .mds-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .mds-share--sticky {
    display: none;
  }

  .mds-hero__title {
    font-size: 1.8rem;
  }

  .mds-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mds-prev-next {
    gap: 16px;
  }

  /* Show TOC toggle on tablet */
  .mds-toc__toggle {
    display: block;
  }

  .mds-toc__list {
    display: none;
    margin-top: 12px;
  }

  .mds-toc__list--open {
    display: block;
  }
}

/* ------------------------------------------------------------
   20. Responsive — max-width: 768px
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  :root {
    --mds-header-height: 56px;
  }

  .mds-container,
  .single-media .container {
    padding: 0 16px;
  }

  /* Hero */
  .mds-hero {
    min-height: 300px;
  }

  .mds-hero__content {
    padding: 60px 16px 32px;
    min-height: 300px;
  }

  .mds-hero__title {
    font-size: 1.4rem;
  }

  .mds-hero__excerpt {
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Hide sidebar TOC on mobile */
  .mds-toc-sidebar {
    display: none;
  }

  /* Article */
  .mds-article {
    padding: 32px 0;
  }

  /* Content */
  .mds-content {
    font-size: 1rem;
    line-height: 1.85;
  }

  .mds-content h2 {
    font-size: 1.3rem;
    margin-top: 40px;
  }

  .mds-content h3 {
    font-size: 1.1rem;
    margin-top: 32px;
  }

  .mds-content blockquote {
    margin: 24px 0;
    padding: 20px;
  }

  .mds-content pre {
    margin: 24px -16px;
    border-radius: 0;
    padding: 20px 16px;
  }

  .mds-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mds-content img {
    margin: 24px 0;
  }

  /* Author */
  .mds-author {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .mds-author__social {
    justify-content: center;
  }

  /* Share */
  .mds-share__buttons {
    flex-wrap: wrap;
  }

  .mds-share__btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  /* Newsletter */
  .mds-newsletter {
    padding: 24px 16px;
    margin: 32px 0;
  }

  .mds-newsletter__form {
    flex-direction: column;
  }

  /* Related */
  .mds-related {
    padding: 40px 0;
  }

  .mds-related__inner {
    padding: 0 16px;
  }

  .mds-related__grid {
    grid-template-columns: 1fr;
  }

  .mds-related__title {
    font-size: 1.1rem;
    margin-bottom: 24px;
  }

  /* Career CTA */
  .mds-career {
    padding: 48px 16px;
  }

  .mds-career__title {
    font-size: 1.25rem;
  }

  .mds-career__desc {
    font-size: 0.88rem;
  }

  .mds-career__btn {
    padding: 14px 36px;
    font-size: 0.92rem;
    width: auto;
  }

  /* Next carousel */
  .mds-next-carousel__inner {
    padding: 0 16px;
  }

  .mds-next-carousel__item {
    flex: 0 0 260px;
  }

  /* Prev/Next nav */
  .mds-prev-next {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 32px 16px;
  }

  .mds-prev-next__item {
    padding: 16px 20px;
  }

  .mds-prev-next__item--next {
    text-align: left;
    align-items: flex-start;
  }

  .mds-prev-next__item--next .mds-prev-next__label {
    justify-content: flex-start;
  }

  /* Breadcrumb */
  .mds-breadcrumb__inner {
    padding: 0 16px;
  }

  .mds-breadcrumb__current {
    max-width: 200px;
  }

  /* Reading info */
  .mds-reading-info {
    flex-wrap: wrap;
    gap: 8px;
  }

  .mds-reading-info__sep {
    display: none;
  }
}

/* ------------------------------------------------------------
   21. Responsive — max-width: 480px
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .mds-hero {
    min-height: 240px;
  }

  .mds-hero__content {
    min-height: 240px;
    padding: 48px 16px 24px;
  }

  .mds-hero__title {
    font-size: 1.2rem;
  }

  .mds-hero__excerpt {
    display: none;
  }

  .mds-hero__meta-top {
    flex-wrap: wrap;
    gap: 8px;
  }

  .mds-content {
    font-size: 0.95rem;
  }

  .mds-content h2 {
    font-size: 1.2rem;
  }

  .mds-content h3 {
    font-size: 1.05rem;
  }

  .mds-share__btn {
    padding: 8px 12px;
    font-size: 0.75rem;
  }

  .mds-author__avatar {
    width: 52px;
    height: 52px;
  }

  .mds-tags__item {
    padding: 4px 10px;
    font-size: 0.72rem;
  }
}

/* ------------------------------------------------------------
   22. Print styles
   ------------------------------------------------------------ */
@media print {
  .mds-progress,
  .mds-share,
  .mds-newsletter,
  .mds-career,
  .mds-next-carousel,
  .mds-ad,
  .mds-sidebar,
  .mds-share--sticky {
    display: none !important;
  }

  .single-media {
    padding-top: 0;
  }

  .mds-article {
    display: block;
  }

  .mds-hero {
    min-height: auto;
    background: #fff;
  }

  .mds-hero__image {
    position: relative;
    opacity: 1;
    max-height: 300px;
  }

  .mds-hero__overlay {
    display: none;
  }

  .mds-hero__title {
    color: #000;
  }

  .mds-content {
    font-size: 11pt;
    line-height: 1.6;
  }

  .mds-content a {
    color: #000;
    text-decoration: underline;
  }

  .mds-content a::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #666;
  }

  .mds-content img {
    max-width: 100%;
    box-shadow: none;
  }

  .mds-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .mds-related__card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
}

/* ------------------------------------------------------------
   23. Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mds-progress__bar {
    transition: none;
  }

  .mds-related__card,
  .mds-next-carousel__card {
    transition: none !important;
  }

  .mds-related__card:hover,
  .mds-next-carousel__card:hover {
    transform: none !important;
  }

  .mds-related__card-thumb img,
  .mds-next-carousel__card-thumb img {
    transition: none !important;
  }

  .mds-share__btn:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------
   24. High contrast mode
   ------------------------------------------------------------ */
@media (forced-colors: active) {
  .mds-toc {
    border-left-color: LinkText;
  }

  .mds-content h3 {
    border-left-color: LinkText;
  }

  .mds-related__card,
  .mds-author,
  .mds-next-carousel__card {
    border: 2px solid ButtonText;
  }

  .mds-share__btn {
    border: 1px solid ButtonText;
  }

  .mds-progress__bar {
    background: Highlight;
  }
}

/* ============================================================
   25. Typography Enhancement Classes
   サイトカラースキームに統一: Primary #2563eb / Accent #7c3aed
   ============================================================ */

/* ---------- 見出し強調カラー ---------- */

/* プライマリ（青） */
.mds-content h2.has-primary-color,
.mds-content h3.has-primary-color,
.mds-content h4.has-primary-color {
  color: var(--mds-color-primary, #2563eb);
  border-color: var(--mds-color-primary, #2563eb);
}

/* アクセント（紫） */
.mds-content h2.has-accent-color,
.mds-content h3.has-accent-color,
.mds-content h4.has-accent-color {
  color: var(--mds-color-accent, #7c3aed);
  border-color: var(--mds-color-accent, #7c3aed);
}

/* 背景付き見出し - グラデーション */
.mds-content h2.has-primary-background,
.mds-content h3.has-primary-background,
.mds-content h4.has-primary-background {
  background: linear-gradient(135deg, var(--mds-color-primary, #2563eb) 0%, var(--mds-color-accent, #7c3aed) 100%);
  color: #fff;
  padding: 16px 20px;
  border: none;
  border-radius: 8px;
}

/* 背景付き見出し - ダーク */
.mds-content h2.has-dark-background,
.mds-content h3.has-dark-background,
.mds-content h4.has-dark-background {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  padding: 16px 20px;
  border: none;
  border-radius: 8px;
}

/* ---------- マーカー下線（サイトカラーに統一） ---------- */

/* デフォルト（プライマリライトブルー） */
.marker,
.marker-line,
mark.marker {
  background: transparent;
  background-image: linear-gradient(transparent 60%, var(--mds-color-primary-light, #dbeafe) 60%);
  padding: 0 4px;
  font-style: normal;
}

/* ブルーマーカー */
.marker-blue,
mark.marker-blue {
  background: transparent;
  background-image: linear-gradient(transparent 60%, var(--mds-color-primary-light, #dbeafe) 60%);
}

/* パープルマーカー */
.marker-purple,
mark.marker-purple {
  background: transparent;
  background-image: linear-gradient(transparent 60%, var(--mds-color-accent-light, #ede9fe) 60%);
}

/* グレーマーカー */
.marker-gray,
mark.marker-gray {
  background: transparent;
  background-image: linear-gradient(transparent 60%, #e2e8f0 60%);
}

/* 太いマーカー */
.marker-bold,
.marker-thick {
  background-image: linear-gradient(transparent 40%, var(--mds-color-primary-light, #dbeafe) 40%);
}

.marker-bold.marker-purple,
.marker-thick.marker-purple {
  background-image: linear-gradient(transparent 40%, var(--mds-color-accent-light, #ede9fe) 40%);
}

/* ---------- テキスト装飾クラス ---------- */

/* プライマリ（青） */
.mds-content .text-primary,
.mds-content .has-primary-text {
  color: var(--mds-color-primary, #2563eb) !important;
}

/* アクセント（紫） */
.mds-content .text-accent,
.mds-content .has-accent-text {
  color: var(--mds-color-accent, #7c3aed) !important;
}

/* ミュート */
.mds-content .text-muted {
  color: var(--mds-color-text-muted, #6b7280) !important;
}

/* 太字強調 */
.mds-content .text-bold,
.mds-content strong.emphasis {
  font-weight: 700;
}

/* フォントサイズ */
.mds-content .text-lg {
  font-size: 1.125em;
}

.mds-content .text-xl {
  font-size: 1.25em;
}

.mds-content .text-sm {
  font-size: 0.875em;
}

/* ---------- ボックス装飾 ---------- */

/* 補足ボックス（プライマリ） */
.mds-content .box-note,
.mds-content .note-box {
  background: var(--mds-color-primary-light, #dbeafe);
  border-left: 4px solid var(--mds-color-primary, #2563eb);
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 0 8px 8px 0;
}

/* ポイントボックス（アクセント） */
.mds-content .box-point,
.mds-content .point-box {
  background: var(--mds-color-accent-light, #ede9fe);
  border-left: 4px solid var(--mds-color-accent, #7c3aed);
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 0 8px 8px 0;
}

/* グレーボックス */
.mds-content .box-gray,
.mds-content .gray-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 8px;
}

/* 注意ボックス */
.mds-content .box-warning,
.mds-content .warning-box {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 0 8px 8px 0;
}

/* ---------- インラインコード & コードブロック ---------- */

.mds-content code:not(pre code) {
  background: #f1f5f9;
  color: var(--mds-color-accent, #7c3aed);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.mds-content pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 24px 0;
}

.mds-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* ---------- 引用ブロック ---------- */

.mds-content blockquote {
  background: linear-gradient(135deg, #f8fafc 0%, var(--mds-color-primary-light, #dbeafe) 100%);
  border-left: 4px solid var(--mds-color-primary, #2563eb);
  padding: 24px 28px;
  margin: 32px 0;
  font-style: normal;
  position: relative;
  border-radius: 0 12px 12px 0;
}

.mds-content blockquote::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 16px;
  font-size: 4rem;
  font-family: Georgia, serif;
  color: var(--mds-color-primary, #2563eb);
  opacity: 0.15;
  line-height: 1;
}

.mds-content blockquote p {
  position: relative;
  z-index: 1;
  margin: 0;
}

.mds-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--mds-color-text-muted);
}

.mds-content blockquote cite::before {
  content: '— ';
}

/* ---------- インライン表示のアイキャッチ画像 ---------- */

.mds-featured-image {
  max-width: var(--mds-container);
  margin: 0 auto 32px;
  padding: 0 24px;
}

.mds-featured-image__img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .mds-featured-image {
    padding: 0 16px;
    margin-bottom: 24px;
  }

  .mds-featured-image__img {
    border-radius: 8px;
  }
}

/* ==========================================================================
   Interview Style - Bottom Sections
   ========================================================================== */

/* ---------- Article Tags ---------- */

.mds-article-tags {
  background: var(--mds-color-bg-alt);
  padding: 32px 0;
  border-top: 1px solid var(--mds-color-border);
}

.mds-article-tags__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mds-color-text-muted);
  margin-bottom: 12px;
}

.mds-article-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mds-article-tags__link {
  display: inline-block;
  font-size: 13px;
  color: var(--mds-color-primary);
  background: rgba(37, 99, 235, 0.1);
  padding: 6px 14px;
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.mds-article-tags__link:hover {
  background: var(--mds-color-primary);
  color: #fff;
}

/* ---------- Share Section (Interview Style) ---------- */

.mds-share {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 24px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}

.mds-share__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mds-color-text-muted, #6b7280);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 4px;
}

.mds-share__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--mds-color-border, #e5e7eb);
  background: var(--mds-color-bg, #fff);
  color: var(--mds-color-text-muted, #6b7280);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.mds-share__btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mds-share__btn--x:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

.mds-share__btn--linkedin:hover {
  background: #0a66c2;
  color: #fff;
  border-color: #0a66c2;
}

.mds-share__btn--line:hover {
  background: #06c755;
  color: #fff;
  border-color: #06c755;
}

.mds-share__btn--copy:hover {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}

.mds-share__toast {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.mds-share__toast.is-visible {
  opacity: 1;
}

/* ---------- Prev/Next Navigation (Interview Style) ---------- */

.mds-prevnext {
  background: #111827;
}

.mds-prevnext__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mds-prevnext__link {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 200px;
  padding: 32px;
  text-decoration: none;
  color: #fff !important;
  overflow: hidden;
  transition: opacity 0.3s;
}

.mds-prevnext__link:hover {
  color: #fff !important;
}

/* Category color gradients */
.mds-prevnext__link--web3     { background: linear-gradient(160deg, #1e293b 0%, #312e81 70%, #6d28d9 100%); }
.mds-prevnext__link--ai       { background: linear-gradient(160deg, #1e293b 0%, #701a75 70%, #a21caf 100%); }
.mds-prevnext__link--deeptech { background: linear-gradient(160deg, #1e293b 0%, #064e3b 70%, #047857 100%); }
.mds-prevnext__link--startup  { background: linear-gradient(160deg, #1e293b 0%, #1e3a5f 70%, #0369a1 100%); }
.mds-prevnext__link--empty    { background: #1e293b; }

.mds-prevnext__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  transition: background 0.3s;
}

.mds-prevnext__link:hover .mds-prevnext__overlay {
  background: rgba(0, 0, 0, 0.05);
}

.mds-prevnext__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mds-prevnext__dir {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.mds-prevnext__cat {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.06em;
}

.mds-prevnext__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mds-prevnext__link--next {
  text-align: right;
}

.mds-prevnext__link--next .mds-prevnext__content {
  align-items: flex-end;
}

/* ---------- Related Articles (Interview Style) ---------- */

.mds-related {
  padding: 80px 0;
  background: var(--mds-color-bg-section, #f9fafb);
  border-top: 1px solid var(--mds-color-border, #e5e7eb);
}

.mds-related .container {
  text-align: center;
}

.mds-related__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--mds-color-text-muted, #6b7280);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.mds-related__heading {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--mds-color-text, #111827);
  margin-bottom: 48px;
  letter-spacing: -0.01em;
}

.mds-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: left;
}

/* Card (Interview Style) */
.mds-card {
  display: flex;
  flex-direction: column;
  background: var(--mds-color-bg, #fff);
  border: 1px solid var(--mds-color-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--mds-color-text, #111827) !important;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.mds-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #d1d5db;
}

.mds-card__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--mds-color-bg-section, #f3f4f6);
  overflow: hidden;
}

.mds-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.mds-card:hover .mds-card__photo {
  transform: scale(1.03);
}

.mds-card__num {
  display: none;
}

.mds-card__cat {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
}

/* Category colors for cards */
.mds-card__cat--web3     { background: #7c3aed; }
.mds-card__cat--ai       { background: #a21caf; }
.mds-card__cat--deeptech { background: #059669; }
.mds-card__cat--startup  { background: #0369a1; }

.mds-card__body {
  padding: 16px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mds-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 8px;
  color: var(--mds-color-text, #111827);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mds-card__summary {
  font-size: 0.8rem;
  color: var(--mds-color-text-muted, #6b7280);
  line-height: 1.6;
  margin: 0 0 12px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mds-card__read {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mds-color-primary, #6366f1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mds-card__arrow {
  display: inline-block;
  transition: transform 0.2s;
}

.mds-card:hover .mds-card__arrow {
  transform: translateX(3px);
}

/* ---------- CTA Section ---------- */

.mds-cta {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 64px 0;
}

.mds-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 768px) {
  .mds-cta__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
}

.mds-cta__label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mds-color-primary);
  margin-bottom: 8px;
}

.mds-cta__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .mds-cta__title {
    font-size: 1.35rem;
  }
}

.mds-cta__text {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.7;
  margin: 0 0 20px;
}

.mds-cta__actions {
  display: flex;
  gap: 12px;
}

@media (max-width: 768px) {
  .mds-cta__actions {
    flex-direction: column;
    align-items: center;
  }
}

/* Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
}

.btn--lg {
  padding: 14px 28px;
  font-size: 14px;
}

.btn--neon {
  background: var(--mds-color-primary);
  color: #fff;
}

.btn--neon:hover {
  background: var(--mds-color-primary-dark);
}

.btn--outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ---------- Category Banners (Interview Style) ---------- */

.mds-cat-banners {
  padding: 48px 0 56px;
  background: var(--mds-color-bg, #fff);
  overflow: hidden;
}

.mds-cat-banners__track {
  display: flex;
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
}

.mds-cat-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  flex-shrink: 0;
  padding: 36px 40px;
  border-radius: 14px;
  text-decoration: none;
  overflow: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease;
  /* Default gradient for unmatched categories */
  background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
  border: 1px solid rgba(100, 116, 139, 0.25);
}

/* Web3 */
.mds-cat-banner--web3 {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
  border: 1px solid rgba(124, 58, 237, 0.25);
}

/* AI */
.mds-cat-banner--ai {
  background: linear-gradient(135deg, #4a044e 0%, #701a75 50%, #86198f 100%);
  border: 1px solid rgba(162, 28, 175, 0.25);
}

/* DeepTech */
.mds-cat-banner--deeptech {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #065f46 100%);
  border: 1px solid rgba(5, 150, 105, 0.25);
}

/* Startup */
.mds-cat-banner--startup {
  background: linear-gradient(135deg, #0c2341 0%, #1e3a5f 50%, #0369a1 100%);
  border: 1px solid rgba(3, 105, 161, 0.25);
}

/* Current category highlight */
.mds-cat-banner.is-current {
  border-width: 2px;
  border-color: rgba(100, 116, 139, 0.6); /* Default for unmatched categories */
}

.mds-cat-banner--web3.is-current     { border-color: rgba(124, 58, 237, 0.6); }
.mds-cat-banner--ai.is-current       { border-color: rgba(162, 28, 175, 0.6); }
.mds-cat-banner--deeptech.is-current { border-color: rgba(5, 150, 105, 0.6); }
.mds-cat-banner--startup.is-current  { border-color: rgba(3, 105, 161, 0.6); }

.mds-cat-banner__body {
  flex: 1;
  min-width: 0;
}

.mds-cat-banner__label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}

.mds-cat-banner__name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.mds-cat-banner__sub {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.mds-cat-banner__text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin-top: 10px;
}

.mds-cat-banner__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.mds-cat-banner__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.08em;
}

.mds-cat-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.mds-cat-banner:hover .mds-cat-banner__cta {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}

.mds-cat-banner__cta-arrow {
  transition: transform 0.2s;
}

.mds-cat-banner:hover .mds-cat-banner__cta-arrow {
  transform: translateX(3px);
}

/* Slide indicators */
.mds-cat-banners__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.mds-cat-banners__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.mds-cat-banners__dot.is-active {
  transform: scale(1.3);
  background: #64748b; /* Default active color */
}

.mds-cat-banners__dot--web3.is-active     { background: #7c3aed; }
.mds-cat-banners__dot--ai.is-active       { background: #a21caf; }
.mds-cat-banners__dot--deeptech.is-active { background: #059669; }
.mds-cat-banners__dot--startup.is-active  { background: #0369a1; }

/* ---------- Responsive: Tablet ---------- */
@media (max-width: 1024px) {
  .mds-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mds-share {
    padding: 24px 16px 32px;
  }

  .mds-cat-banner {
    padding: 28px 24px;
    gap: 20px;
  }

  .mds-cat-banner__name {
    font-size: 1.3rem;
  }
}

/* ---------- Responsive: Mobile ---------- */
@media (max-width: 768px) {
  .mds-share {
    gap: 10px;
    padding: 20px 16px 28px;
  }

  .mds-share__label {
    display: none;
  }

  .mds-prevnext__inner {
    grid-template-columns: 1fr;
  }

  .mds-prevnext__link {
    min-height: 140px;
    padding: 24px;
  }

  .mds-prevnext__link--next {
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mds-prevnext__link--next .mds-prevnext__content {
    align-items: flex-start;
  }

  .mds-related {
    padding: 56px 0;
  }

  .mds-related__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mds-cat-banners {
    padding: 0 0 48px;
  }

  .mds-cat-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px;
    gap: 16px;
  }

  .mds-cat-banner__right {
    align-items: flex-start;
    flex-direction: row;
    gap: 12px;
  }

  .mds-cat-banner__name {
    font-size: 1.2rem;
  }

  .mds-cat-banner__sub {
    display: none;
  }
}

/* ==========================================================================
   共通CTAバナー — .single-media コンテキストでの詳細度オーバーライド
   .single-media a / p / h2 のリセット（詳細度 0,1,1）が
   .ptg-cta-banner の各スタイル（詳細度 0,1,0）を上書きしてしまうため、
   .single-media プレフィックス付きで再指定する。
   ========================================================================== */
.single-media .ptg-cta-banner {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #f5f3ff 0%, #eff6ff 40%, #fdf2f8 100%);
}

.single-media .ptg-cta-banner__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.single-media .ptg-cta-banner__title {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
  color: #1f2937;
}

.single-media .ptg-cta-banner__text {
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.8;
  margin: 0 0 2rem;
}

.single-media .ptg-cta-banner__buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.single-media .ptg-cta-banner__btn {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.875rem 2rem;
  border-radius: 100px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.single-media .ptg-cta-banner__btn--primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
}

.single-media .ptg-cta-banner__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(99, 102, 241, 0.35);
  color: #fff;
}

.single-media .ptg-cta-banner__btn--secondary {
  background: transparent;
  border: 1.5px solid #d1d5db;
  color: #1f2937;
}

.single-media .ptg-cta-banner__btn--secondary:hover {
  border-color: #6366f1;
  color: #6366f1;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .single-media .ptg-cta-banner {
    padding: 3rem 1.5rem;
  }
  .single-media .ptg-cta-banner__buttons {
    flex-direction: column;
    align-items: center;
  }
  .single-media .ptg-cta-banner__btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
}

/* ==========================================================================
   Press Release (prn_release) — PRN固有スタイル
   mds-* 共通デザインシステムの上に追加する最小限のスタイル
   ========================================================================== */

/* PR Newswire ソースバッジ（ヒーロー内） */
.mds-prn-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0a1628;
  padding: 6px;
  text-decoration: none;
  transition: opacity var(--mds-transition-fast);
  flex-shrink: 0;
}

.mds-prn-source-badge:hover {
  opacity: 0.85;
}

.mds-prn-source-badge__logo {
  height: 12px;
  width: auto;
  object-fit: contain;
}

/* 元記事リンクボタン */
.mds-prn-original {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--mds-color-border);
}

.mds-prn-original__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mds-color-primary) !important;
  text-decoration: none !important;
  padding: 10px 20px;
  border: 1.5px solid var(--mds-color-primary);
  border-radius: var(--mds-radius-md);
  transition: all var(--mds-transition-fast);
}

.mds-prn-original__link:hover {
  background: var(--mds-color-primary);
  color: #fff !important;
}

.mds-prn-original__link svg {
  flex-shrink: 0;
}

/* PR Newswire 帰属表示（契約要件 3.1.1） */
.mds-prn-attribution {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--mds-color-border);
}

.mds-prn-attribution__text {
  font-size: 0.78rem;
  color: var(--mds-color-text-muted);
  font-weight: 600;
}

.mds-prn-attribution__logo {
  height: 18px;
  width: auto;
  opacity: 0.5;
  transition: opacity var(--mds-transition-fast);
}

.mds-prn-attribution__logo:hover {
  opacity: 0.8;
}

/* 一覧に戻るセクション */
.mds-prn-back-section {
  padding: 32px 0 48px;
  text-align: center;
  background: var(--mds-color-bg);
}

.mds-prn-back-section__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mds-color-text-muted) !important;
  text-decoration: none !important;
  padding: 12px 28px;
  border: 1px solid var(--mds-color-border);
  border-radius: var(--mds-radius-md);
  transition: all var(--mds-transition-fast);
  background: var(--mds-color-bg-card);
}

.mds-prn-back-section__btn:hover {
  color: var(--mds-color-primary) !important;
  border-color: var(--mds-color-primary);
  box-shadow: var(--mds-shadow-sm);
}

.mds-prn-back-section__btn svg {
  flex-shrink: 0;
}

/* ==========================================================================
   著者カード (E-E-A-T)
   ========================================================================== */
.mds-author-card {
  padding: 48px 0;
}

.mds-author-card__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--mds-color-text-muted, #94a3b8);
  margin-bottom: 16px;
}

.mds-author-card__inner {
  display: flex;
  gap: 24px;
  padding: 32px;
  background: var(--mds-color-bg-card, #fff);
  border: 1px solid var(--mds-color-border, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.mds-author-card__avatar-wrap {
  flex-shrink: 0;
}

.mds-author-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--mds-color-border, #e2e8f0);
}

.mds-author-card__info {
  flex: 1;
  min-width: 0;
}

.mds-author-card__name {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--mds-color-text, #334155);
}

.mds-author-card__role {
  display: block;
  font-size: 0.8rem;
  color: var(--mds-color-text-muted, #6b7280);
  margin-bottom: 8px;
}

.mds-author-card__specialty {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.mds-author-card__specialty-tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--mds-color-primary, #6366f1);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(167, 139, 250, 0.1));
  border-radius: 20px;
  border: 1px solid rgba(99, 102, 241, 0.15);
}

.mds-author-card__bio {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--mds-color-text-muted, #6b7280);
  margin: 0 0 12px;
}

.mds-author-card__links {
  display: flex;
  gap: 10px;
}

.mds-author-card__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--mds-color-bg-alt, #f1f5f9);
  color: var(--mds-color-text-muted, #6b7280);
  transition: all 0.2s ease;
}

.mds-author-card__social:hover {
  background: var(--mds-color-primary, #6366f1);
  color: #fff;
}

.mds-author-card__social--text {
  width: auto;
  padding: 0 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* Editorial avatar: square with subtle radius instead of circle */
.mds-author-card__avatar--logo {
  border-radius: 12px;
  object-fit: contain;
  background: var(--mds-color-bg-alt, #f1f5f9);
  padding: 6px;
}

@media (max-width: 640px) {
  .mds-author-card__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
  }
  .mds-author-card__specialty {
    justify-content: center;
  }
  .mds-author-card__links {
    justify-content: center;
  }
}

/* ── Contribute CTA ── */
.mds-contribute-cta {
  padding: 0 0 48px;
}

.mds-contribute-cta__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  border-radius: 12px;
  border: 1px solid rgba(99, 102, 241, 0.10);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
}

.mds-contribute-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.12));
  color: var(--mds-color-primary, #6366f1);
}

.mds-contribute-cta__body {
  flex: 1;
  min-width: 0;
}

.mds-contribute-cta__heading {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mds-color-text-muted, #475569);
}

.mds-contribute-cta__text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--mds-color-text-muted, #94a3b8);
}

.mds-contribute-cta__action {
  position: relative;
  flex-shrink: 0;
}

.mds-contribute-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  background: transparent;
  color: var(--mds-color-primary, #6366f1);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mds-contribute-cta__btn:hover {
  background: var(--mds-color-primary, #6366f1);
  border-color: var(--mds-color-primary, #6366f1);
  color: #fff;
  transform: translateY(-1px);
}

.mds-contribute-cta__btn svg {
  transition: transform 0.2s ease;
}

.mds-contribute-cta__btn:hover svg {
  transform: translateX(3px);
}

/* Mail app popover */
.mds-contribute-cta__popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 200px;
  padding: 8px;
  background: var(--mds-color-bg-card, #fff);
  border: 1px solid var(--mds-color-border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.mds-contribute-cta__popover[hidden] {
  display: none;
}

.mds-contribute-cta__popover-label {
  display: block;
  padding: 4px 10px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--mds-color-text-muted, #94a3b8);
  letter-spacing: 0.03em;
}

.mds-contribute-cta__mail-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--mds-color-text, #334155);
  text-decoration: none;
  transition: background 0.15s ease;
}

.mds-contribute-cta__mail-option:hover {
  background: var(--mds-color-bg-alt, #f1f5f9);
  color: var(--mds-color-primary, #6366f1);
}

.mds-contribute-cta__mail-option svg {
  flex-shrink: 0;
  color: var(--mds-color-text-muted, #94a3b8);
}

.mds-contribute-cta__mail-option:hover svg {
  color: var(--mds-color-primary, #6366f1);
}

.mds-contribute-cta__popover-divider {
  border: none;
  border-top: 1px solid var(--mds-color-border, #e2e8f0);
  margin: 4px 0;
}

@media (max-width: 768px) {
  .mds-contribute-cta__inner {
    flex-direction: column;
    text-align: center;
    padding: 24px;
    gap: 16px;
  }
  .mds-contribute-cta__action {
    width: 100%;
  }
  .mds-contribute-cta__btn {
    width: 100%;
    justify-content: center;
  }
  .mds-contribute-cta__popover {
    right: 0;
    left: 0;
  }
}