/*
Theme Name: Verselabo Child
Theme URI: https://verselabo.example.com/
Description: Cocoon 子テーマ（Verselabo｜暗号資産アフィリ）。
  ライトベースの編集型クリプトメディア。収益コンポーネントはダークで強調。
  カスタムは全て本子テーマに集約。売却時はフォルダ移管で再現可能。
Author: Verselabo
Template: cocoon-master
Version: 1.4.9
*/

/* ============================================================
 *  Verselabo — Editorial Crypto Media (v1.4.1 · light-only)
 *  v1.4.1: オリジナル v1.4.0 完全準拠ベース。
 *          末尾「SITE_PATCH」ブロックでのみ運用必須機能を追記。
 *          - PR バナー（ステマ規制対応・景表法）
 *          - PV/アクセス数の非表示
 * ============================================================ */

/* ============================================================
 *  Verselabo — Editorial Crypto Media (v1.4.0 · light-only)
 *  Single light theme.  Dark only as deliberate spot-accents:
 *  ticker / revenue band / subscribe panel / media tiles.
 *  Class contracts (.al-*) are immutable; this sheet only styles them.
 * ============================================================ */

/* ---------- 0. Type imports ---------- */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Noto+Sans+JP:wght@400;500;700;900&family=JetBrains+Mono:wght@500;700&display=swap");

/* ---------- 1. Tokens — LIGHT (default) ---------- */
:root{
  /* Surface */
  --bg:        #fbfbff;
  --bg-elev:   #ffffff;
  --panel:     rgba(255, 255, 255, .92);
  --panel-2:   rgba(247, 248, 254, .96);
  --panel-solid:#ffffff;
  --hairline:  rgba(20, 24, 80, .09);
  --hairline-2:rgba(20, 24, 80, .18);
  --topedge:   linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 60%);

  /* Ink */
  --ink:       #0b0d2a;
  --ink-2:     #2a3068;
  --muted:     #6b7299;
  --muted-2:   #99a0c2;

  /* Accents — slightly more saturated for legibility on white */
  --cyan:      #06b6d4;
  --violet:    #8b5cf6;
  --magenta:   #ec4899;
  --electric:  #4f46e5;
  --mint:      #10b981;
  --gold:      #d97706;
  --red:       #ef4444;

  /* Deep surfaces — used by spotlight components (revband, sub, ticker, thumbs) */
  --deep:      #07091a;
  --deep-2:    #0f1230;
  --deep-3:    #1a1252;
  --deep-ink:  #e9ecff;

  /* Composed */
  --grad:      linear-gradient(110deg, #06b6d4 0%, #6366f1 38%, #8b5cf6 62%, #ec4899 100%);
  --grad-soft: linear-gradient(110deg, rgba(6,182,212,.10), rgba(139,92,246,.10) 60%, rgba(236,72,153,.10));

  --glow-violet: 0 0 0 1px rgba(139,92,246,.20), 0 16px 40px -16px rgba(139,92,246,.35);
  --glow-cyan:   0 0 0 1px rgba(6,182,212,.20),  0 16px 40px -16px rgba(6,182,212,.35);
  --shadow-card: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 22px -10px rgba(20,24,80,.14);

  /* Type */
  --font-sans: "Plus Jakarta Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --font-jp:   "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --tx:   .22s cubic-bezier(.2,.7,.2,1);
}

/* ---------- 1b. Tokens ---------- */
/* v1.4.0: dark theme toggle removed. Site is light-only.
   Dark surfaces appear only as deliberate spot-accents on the ticker,
   revenue band, subscribe panel, and media tiles. */

/* ---------- 2. Page chrome ---------- */
html,body{
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans);
  font-feature-settings: "palt" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body{
  background-image:
    /* very faint aurora */
    radial-gradient(60% 40% at 10% 0%,  rgba(139,92,246,.12), transparent 70%),
    radial-gradient(50% 35% at 92% 0%,  rgba(6,182,212,.10),  transparent 70%),
    radial-gradient(40% 30% at 50% 100%, rgba(236,72,153,.06), transparent 70%),
    /* faint grid */
    linear-gradient(0deg,  rgba(20,24,80,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,24,80,.035) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, 56px 56px, 56px 56px !important;
  background-attachment: fixed !important;
}
::selection{ background: rgba(139,92,246,.25); color: var(--ink); }

a{ color: var(--electric); text-decoration: none; }
a:hover{ color: var(--magenta); }

/* ---------- 3. Cocoon container resets ---------- */
#container, #content, #main, .wrap, .content, #wrap, .main,
article, .article, .post, .page, .entry-content, #list, .widget,
#sidebar .widget, .related-entry-card, .a-wrap{
  background-color: transparent !important;
  color: var(--ink) !important;
}

/* Header / navi — white glass */
#header-container, #header, .header, .header-container, .header-in,
#navi, .navi-in, .appeal{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78)) !important;
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
  border-color: var(--hairline) !important;
}
#header-container{ border-bottom: 1px solid var(--hairline) !important; position: relative; }
#header-container::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: var(--grad); opacity:.6;
}

/* Site name — gradient wordmark on white */
.site-name-text, .logo-text, #site-title a, .site-name a,
.logo-header .site-name-text{
  font-family: var(--font-sans);
  font-weight: 800 !important;
  letter-spacing: .04em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Nav layout */
#navi .navi-in > ul.menu-pc,
#navi .navi-in > ul.menu-header,
#navi .navi-in > ul.menu-top{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#navi .navi-in > ul > li{ list-style: none; }
#navi .navi-in > ul > li > a{
  display: inline-flex;
  align-items: center;
  padding: 16px 18px;
}

/* Nav links */
#navi .navi-in > ul > li > a,
.navi ul a{
  color: var(--ink) !important;
  font-weight: 600;
  letter-spacing: .03em;
  transition: var(--tx);
  position: relative;
}
#navi .navi-in > ul > li > a::after{
  content:""; position:absolute; left:18%; right:18%; bottom:10px; height:2px;
  background: var(--grad); border-radius:2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--tx);
}
#navi .navi-in > ul > li > a:hover{
  color: var(--violet) !important; background: transparent !important;
}
#navi .navi-in > ul > li > a:hover::after{ transform: scaleX(1); }
#navi .navi-in > ul > li.current-menu-item > a{ color: var(--violet) !important; }
#navi .navi-in > ul > li.current-menu-item > a::after{ transform: scaleX(1); }

/* Footer — light, restrained */
#footer, .footer, .footer-in, .footer-container, .footer-bottom{
  background: #f4f5fb !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--hairline) !important;
}
#footer a{ color: var(--ink-2); }
#footer a:hover{ color: var(--electric); }

/* ---------- 4. Editorial body ---------- */
.entry-content{
  color: var(--ink-2) !important;
  font-family: var(--font-jp);
  line-height: 1.95;
  font-size: 1.02rem;
}
.entry-title,
h1.entry-title,
.article h1,
.entry-content h1{
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  letter-spacing: -.01em;
  color: var(--ink) !important;
  line-height: 1.28;
  margin: 0 0 .6em;
  text-wrap: pretty;
}
.entry-meta, .post-date{
  font-family: var(--font-mono);
  color: var(--muted) !important;
  font-size: .82rem;
  letter-spacing: .04em;
}

.entry-content h2{
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  color: var(--ink) !important;
  position: relative;
  margin: 2.6em 0 .9em;
  padding: 0 0 .55em 0;
  border: none !important;
  letter-spacing: -.005em;
}
.entry-content h2::before{
  content:""; position: absolute; left:0; bottom:-1px; height:2px; width:64px;
  background: var(--grad); border-radius:2px;
}
.entry-content h2::after{
  content:""; position: absolute; left:64px; right:0; bottom:-1px; height:1px;
  background: var(--hairline);
}
.entry-content h3{
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--ink) !important;
  padding-left: 14px;
  border-left: 3px solid var(--cyan) !important;
  margin: 2em 0 .7em;
  font-size: 1.12rem;
}
.entry-content p{ margin: 0 0 1.35em; }
.entry-content strong{ color: var(--ink); font-weight: 700; }
.entry-content a{
  color: var(--electric);
  text-decoration: underline;
  text-decoration-color: rgba(79,70,229,.35);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: var(--tx);
}
.entry-content a:hover{
  color: var(--magenta);
  text-decoration-color: rgba(236,72,153,.7);
}
.entry-content ul, .entry-content ol{ margin: 0 0 1.4em 1.2em; }
.entry-content li{ margin: .35em 0; }
.entry-content ul > li::marker{ color: var(--violet); }
.entry-content ol > li::marker{ color: var(--electric); font-family: var(--font-mono); font-weight:700; }
.entry-content hr{
  border: none; height: 1px; margin: 2.4em 0;
  background: linear-gradient(90deg, transparent, var(--hairline-2), transparent);
}

.entry-content blockquote{
  position: relative;
  background: var(--panel-2) !important;
  border: 1px solid var(--hairline) !important;
  border-left: none !important;
  border-radius: var(--r-md);
  padding: 18px 22px 18px 48px !important;
  color: var(--ink-2) !important;
  margin: 1.4em 0;
}
.entry-content blockquote::before{
  content:"\201C"; position:absolute; left:14px; top:2px;
  font-family: var(--font-sans); font-size: 2.4rem; line-height: 1;
  color: var(--violet); opacity:.7;
}
.entry-content blockquote::after{
  content:""; position:absolute; left:0; top:8%; bottom:8%; width:3px;
  background: var(--grad); border-radius:3px;
}

.entry-content pre, .entry-content code{
  font-family: var(--font-mono);
  background: var(--panel-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.entry-content :not(pre) > code{
  padding: .12em .42em; font-size: .88em;
  background: rgba(79,70,229,.06) !important; color: var(--electric) !important;
  border-color: rgba(79,70,229,.18);
}
.entry-content pre{
  font-size: .86em; line-height: 1.7; padding: 16px 18px;
  overflow:auto;
}

.entry-content img{
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
}

.entry-content table{
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md);
  overflow: hidden;
  font-family: var(--font-sans);
}
.entry-content table th{
  background: var(--panel-solid) !important;
  color: var(--ink) !important;
  font-weight: 700;
  letter-spacing: .03em;
}
.entry-content table th, .entry-content table td{
  border-color: var(--hairline) !important;
  padding: 12px 14px;
}

/* Affiliate disclaimer auto-injected by functions.php */
.vl-affiliate-disclaimer{
  margin-top: 2.2em !important;
  padding: 14px 18px !important;
  font-size: .82rem !important;
  color: var(--muted) !important;
  background: rgba(239,68,68,.04) !important;
  border: 1px dashed rgba(239,68,68,.28) !important;
  border-radius: var(--r-md) !important;
  line-height: 1.7 !important;
}

/* ---------- 5. Cocoon card containers ---------- */
.card, .entry-card, .related-entry-card, .widget, .ect-entry-card{
  background: var(--panel) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-card);
}
.entry-card-title, .card-title, .widget-title, .related-entry-card-title{
  color: var(--ink) !important; font-weight: 700;
}
.cat-label, .badge, .tag{
  background: rgba(139,92,246,.10) !important;
  color: var(--violet) !important;
  border: 1px solid rgba(139,92,246,.22);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: .06em;
}

/* ============================================================
 *  6. Verselabo .al-* components (class contract preserved)
 * ============================================================ */

.al-wrap{ max-width: 1180px; margin: 0 auto; padding: 0 18px; }
.al-sec{ margin: 56px auto; }
.al-sec + .al-sec{ margin-top: 64px; }

/* Section heading — editorial */
.al-h{
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink);
  margin: 0 0 22px;
  padding: 0 0 14px 0;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.al-h::before{
  content:""; position: absolute; left:0; bottom:-1px; height:2px; width:84px;
  background: var(--grad); border-radius:2px;
}
.al-h::after{
  content:""; position: absolute; left:84px; right:0; bottom:-1px; height:1px;
  background: var(--hairline);
}

/* Tiny English overlabel — picked up by ::before if .al-h has data-en */
.al-h[data-en]::before{
  content: attr(data-en);
  position: relative; left: 0; bottom: 0; width:auto; height:auto;
  background: transparent;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--violet);
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 4px;
  box-shadow: none;
  margin-right: 4px;
  flex: 0 0 auto;
}
.al-h[data-en]::after{ left: 0; right: 0; bottom: 0; }

/* Thumbnails — used by al_card_thumb(). Dark "media tiles" pop on white. */
.al-thumb{
  display:block; width:100%; aspect-ratio:16/9;
  background-size: cover; background-position: center;
  border-bottom: 1px solid var(--hairline);
}
.al-thumb-ph{
  display: flex; align-items:center; justify-content:center;
  font-family: var(--font-sans);
  font-size: 2.8rem; font-weight: 900;
  color: #fff;
  background:
    radial-gradient(70% 100% at 30% 30%, rgba(6,182,212,.55), transparent 60%),
    radial-gradient(80% 100% at 80% 80%, rgba(236,72,153,.45), transparent 60%),
    linear-gradient(135deg, #160b3e, #0a1f4a);
  text-shadow: 0 0 28px rgba(139,92,246,.7);
  position: relative;
  overflow: hidden;
}
.al-thumb-ph::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 18px 18px;
  mix-blend-mode: overlay; opacity:.5;
}

/* Category tag */
.al-tag{
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--electric);
  background: rgba(79,70,229,.08);
  border: 1px solid rgba(79,70,229,.22);
  padding: 3px 9px;
  border-radius: 4px;
  text-transform: uppercase;
}
.al-date{
  display: block;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: 10px;
}

/* PICKUP — two large editorial cards */
.al-pickup{
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
}
.al-pick{
  display: block; text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  transition: transform var(--tx), border-color var(--tx), box-shadow var(--tx);
  isolation: isolate;
}
.al-pick:hover{
  transform: translateY(-4px);
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 22px 50px -16px rgba(139,92,246,.30);
}
.al-pick .al-thumb,
.al-pick .al-thumb-ph{ aspect-ratio: 16/9; }
.al-pickup .al-pick:first-child .al-thumb,
.al-pickup .al-pick:first-child .al-thumb-ph{ aspect-ratio: 16/10; }
.al-pick-body{
  display: block; padding: 18px 20px 20px;
}
.al-pick-title{
  display: block;
  font-family: var(--font-jp);
  font-size: 1.15rem; font-weight: 800; line-height: 1.5;
  margin: 12px 0 4px;
  color: var(--ink);
  text-wrap: pretty;
}
.al-pickup .al-pick:first-child .al-pick-title{ font-size: 1.32rem; }
.al-pick:hover .al-pick-title{ color: var(--violet); }

/* RECENT — 3 column grid */
.al-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.al-card{
  display: block; text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--tx), border-color var(--tx), box-shadow var(--tx);
  isolation: isolate;
}
.al-card:hover{
  transform: translateY(-3px);
  border-color: rgba(6,182,212,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -14px rgba(6,182,212,.30);
}
.al-card-body{ display:block; padding: 14px 16px 16px; }
.al-card-title{
  display: block;
  font-family: var(--font-jp);
  font-size: 1rem; font-weight: 700; line-height: 1.55;
  margin: 8px 0 2px;
  color: var(--ink);
}
.al-card:hover .al-card-title{ color: var(--electric); }

/* RANKING — leaderboard */
.al-rank{
  list-style: none; margin: 0; padding: 0;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  counter-reset: rank;
}
.al-rank li{ counter-increment: rank; }
.al-rank li a{
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: var(--ink);
  transition: background var(--tx);
}
.al-rank li:last-child a{ border-bottom: none; }
.al-rank li a:hover{
  background: linear-gradient(90deg, rgba(139,92,246,.06), rgba(6,182,212,.04));
}
.al-rank-n{
  flex: 0 0 36px; height: 36px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1rem;
  color: var(--muted);
  background: rgba(20,24,80,.04);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  letter-spacing: .04em;
}
.al-rank li:nth-child(1) .al-rank-n{
  color:#fff; background: linear-gradient(135deg,#f59e0b,#d97706); border-color: rgba(217,119,6,.6);
  box-shadow: 0 6px 14px -4px rgba(217,119,6,.4);
}
.al-rank li:nth-child(2) .al-rank-n{
  color:#fff; background: linear-gradient(135deg,#ec4899,#8b5cf6); border-color: rgba(236,72,153,.5);
  box-shadow: 0 6px 14px -4px rgba(236,72,153,.4);
}
.al-rank li:nth-child(3) .al-rank-n{
  color:#fff; background: linear-gradient(135deg,#4f46e5,#06b6d4); border-color: rgba(6,182,212,.5);
  box-shadow: 0 6px 14px -4px rgba(6,182,212,.4);
}
.al-rank-t{
  font-family: var(--font-jp);
  font-weight: 600; font-size: .98rem; line-height: 1.5;
  color: var(--ink);
}

/* REVENUE BAND — KEEP DARK for spotlight contrast on white site */
.al-revband{
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: 38px 34px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
  color: #fff;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(6,182,212,.30), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(236,72,153,.28), transparent 55%),
    linear-gradient(135deg, #120a32 0%, #1a0d52 38%, #0b1e4a 78%, #051a30 100%);
  border: 1px solid rgba(139,92,246,.45);
  box-shadow: 0 24px 60px -24px rgba(139,92,246,.40), inset 0 1px 0 rgba(255,255,255,.08);
  isolation: isolate;
}
.al-revband::before{
  /* aurora streak */
  content:""; position:absolute; inset:-2px;
  background:
    conic-gradient(from 200deg at 50% 50%,
      rgba(6,182,212,.0) 0deg, rgba(6,182,212,.45) 40deg,
      rgba(139,92,246,.45) 120deg, rgba(236,72,153,.45) 200deg,
      rgba(6,182,212,.0) 280deg);
  filter: blur(40px);
  opacity: .5;
  animation: al-aurora 22s linear infinite;
  z-index: -1;
}
.al-revband::after{
  content:""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .7; pointer-events: none;
}
@keyframes al-aurora{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .al-revband::before{ animation: none; }
}
.al-revband > div{ flex: 1 1 380px; min-width: 0; }
.al-revband .al-revband-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: #67e8f9;
  padding: 4px 10px;
  border: 1px solid rgba(103,232,249,.4);
  border-radius: 4px;
  margin-bottom: 14px;
}
.al-revband h2{
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem);
  font-weight: 800;
  margin: 0 0 10px;
  color:#fff;
  line-height: 1.32;
  letter-spacing: -.005em;
  text-shadow: 0 0 30px rgba(6,182,212,.35);
}
.al-revband p{
  margin: 0;
  color: #d8dcff;
  font-size: .96rem;
  line-height: 1.7;
  max-width: 60ch;
}
.al-revband .al-btn{ flex: 0 0 auto; }

/* Primary CTA */
.al-btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-weight: 800; font-size: .98rem;
  padding: 15px 26px;
  border-radius: 12px;
  text-decoration: none !important;
  color: #ffffff !important;
  background: var(--grad);
  background-size: 200% 200%;
  background-position: 0% 50%;
  box-shadow:
    0 10px 28px -8px rgba(139,92,246,.45),
    0 0 0 1px rgba(255,255,255,.15) inset;
  white-space: nowrap;
  letter-spacing: .02em;
  transition: background-position var(--tx), transform var(--tx), box-shadow var(--tx);
}
.al-btn:hover{
  color: #ffffff !important;
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px -8px rgba(236,72,153,.5),
    0 0 0 1px rgba(255,255,255,.22) inset;
}
.al-btn::after{
  content:"\2192"; font-family: var(--font-mono); font-weight: 700;
  transition: transform var(--tx);
}
.al-btn:hover::after{ transform: translateX(3px); }

/* E-E-A-T block */
.al-eeat{
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  font-family: var(--font-jp);
  font-size: .9rem; color: var(--muted);
  line-height: 1.95;
  position: relative;
  box-shadow: var(--shadow-card);
}
.al-eeat::before{
  content:"編集ポリシー";
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .7rem; font-weight: 800; letter-spacing: .18em;
  color: var(--violet);
  background: rgba(139,92,246,.08);
  border: 1px solid rgba(139,92,246,.30);
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: 10px;
}
.al-eeat strong{ color: var(--ink); font-weight: 700; }
.al-eeat strong:first-of-type{ color: var(--violet); }

/* Subscribe / Newsletter — KEEP DARK as a stand-out CTA panel */
.al-sub{
  text-align: center;
  border-radius: var(--r-xl);
  padding: 40px 32px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(6,182,212,.28), transparent 70%),
    linear-gradient(160deg, #110a36 0%, #0a1f4a 100%);
  border: 1px solid rgba(6,182,212,.32);
  box-shadow: 0 24px 60px -24px rgba(6,182,212,.4);
  position: relative; overflow: hidden;
  color:#fff;
}
.al-sub::before{
  content:""; position:absolute; inset:-1px; border-radius: inherit; padding:1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.55; pointer-events:none;
}
.al-sub h2{
  font-family: var(--font-sans);
  color:#fff !important;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem);
  font-weight: 800;
  margin: 0 0 8px;
  text-shadow: 0 0 22px rgba(139,92,246,.5);
}
.al-sub p{ color:#d8dcff; margin: 0; font-family: var(--font-jp); }
.al-sub a{
  color:#67e8f9; font-weight: 800;
  border-bottom: 1px solid rgba(103,232,249,.45);
  padding-bottom: 2px;
}
.al-sub a:hover{ color:#fff; border-color:#fff; }

/* ============================================================
 *  7. Comparison table & Exchange cards — quiet editorial
 * ============================================================ */

.al-cmp{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-sans);
  font-size: .92rem;
  margin: 22px 0;
  background: var(--panel-solid);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.al-cmp th, .al-cmp td{
  border-bottom: 1px solid var(--hairline);
  padding: 13px 14px;
  text-align: center;
  color: var(--ink-2);
  vertical-align: middle;
}
.al-cmp thead th{
  background: var(--panel-2) !important;
  color: var(--ink) !important;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: .76rem;
  text-transform: uppercase;
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--hairline-2);
}
.al-cmp tbody td:first-child{
  text-align: left;
  font-weight: 700;
  color: var(--ink);
}
.al-cmp tbody td:first-child strong{
  display: inline-flex; align-items:center; gap: 10px;
}
.al-cmp tbody tr:nth-child(even) td{ background: rgba(20,24,80,.018); }
.al-cmp tbody tr:hover td{ background: rgba(79,70,229,.04); }
.al-cmp tbody tr:last-child td{ border-bottom: none; }
.al-cmp tbody tr.is-winner td,
.al-cmp tbody tr:first-child td{
  background: rgba(217,119,6,.05) !important;
  position: relative;
}
.al-cmp tbody tr:first-child td:first-child::before{
  content: "BEST"; display: inline-block;
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .16em;
  color: var(--gold); background: transparent;
  border: 1px solid rgba(217,119,6,.55);
  padding: 2px 6px; border-radius: 3px;
  margin-right: 10px;
  vertical-align: middle;
}

/* In-table CTA — outline */
.al-cmp .al-btn{
  font-size: .78rem;
  padding: 8px 14px;
  border-radius: 8px;
  background: transparent;
  color: var(--electric) !important;
  border: 1px solid rgba(79,70,229,.45);
  box-shadow: none;
}
.al-cmp .al-btn::after{ content:""; }
.al-cmp .al-btn:hover{
  background: rgba(79,70,229,.08);
  color: var(--electric) !important;
  border-color: var(--electric);
  transform: none;
  box-shadow: none;
}

/* Exchange card — quiet block-quote style */
.al-exch{
  position: relative;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-md);
  padding: 22px 24px;
  margin: 22px 0;
  background: var(--panel-2);
  box-shadow: none;
}
.al-exch h3{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 12px !important;
  color: var(--ink) !important;
  border: none !important;
  padding: 0 !important;
  letter-spacing: .02em;
}
.al-exch ul{ margin: 0 0 14px 1.1em; }
.al-exch ul li{
  font-family: var(--font-jp);
  font-size: .92rem;
  line-height: 1.8;
  color: var(--ink-2);
  margin: .2em 0;
}
.al-exch ul li::marker{ color: var(--muted); }
.al-exch p{ margin: 12px 0 0; }
.al-exch p:last-child{ margin-top: 16px; }
.al-exch > p:last-child .al-btn{
  background: transparent;
  color: var(--electric) !important;
  border: 1px solid rgba(79,70,229,.45);
  box-shadow: none;
  padding: 10px 18px;
  font-size: .9rem;
}
.al-exch > p:last-child .al-btn:hover{
  background: rgba(79,70,229,.08);
  color: var(--electric) !important;
  border-color: var(--electric);
  box-shadow: none;
  transform: none;
}

/* h2 anchoring an exchange (cta-coincheck, …) — editorial weight */
.entry-content h2[id^="cta-"]{
  margin-top: 2.6em;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.45rem);
}

/* ============================================================
 *  8. Scaffolding (ticker / crumb / chips / score / theme toggle)
 * ============================================================ */

/* Price ticker — KEEP DARK so it reads as a "live data" strip */
.al-ticker{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #07091a, #0a0d2e);
  color: #e9ecff;
}
.al-ticker-track{
  display: flex; gap: 28px;
  padding: 10px 0;
  width: max-content;
  animation: al-marquee 60s linear infinite;
  font-family: var(--font-mono);
  font-size: .82rem;
  white-space: nowrap;
}
.al-ticker:hover .al-ticker-track{ animation-play-state: paused; }
.al-ticker-item{
  display: inline-flex; align-items:center; gap: 8px;
  color: #c8ccf2;
  letter-spacing: .03em;
}
.al-ticker-item .sym{ color:#fff; font-weight: 700; }
.al-ticker-item .px{ color: #e9ecff; }
.al-ticker-item .pct{ font-weight: 700; }
.al-ticker-item .pct.up{ color: #34d399; }
.al-ticker-item .pct.dn{ color: #f87171; }
.al-ticker-item .dot{
  width:6px; height:6px; border-radius: 50%; background: #22d3ee;
  box-shadow: 0 0 8px #22d3ee;
}
@keyframes al-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .al-ticker-track{ animation: none; }
}

/* Breadcrumb */
.al-crumb{
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 18px 0 22px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.al-crumb a{ color: var(--ink-2); }
.al-crumb a:hover{ color: var(--electric); }
.al-crumb .sep{ color: var(--muted-2); }

/* Article hero meta chips */
.al-meta-row{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 26px;
  row-gap: 8px;
}
.al-chip{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-2);
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.al-chip.is-update{ color: var(--gold); border-color: rgba(217,119,6,.40); }
.al-chip.is-author{ color: var(--electric); border-color: rgba(79,70,229,.35); }
.al-chip.is-cat   { color: var(--violet); border-color: rgba(139,92,246,.35); }

/* Score bar */
.al-score{
  display: grid; grid-template-columns: 130px 1fr 44px;
  gap: 12px; align-items: center;
  margin: 6px 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
}
.al-score-bar{
  position: relative; height: 4px; border-radius: 999px;
  background: rgba(20,24,80,.08);
  overflow: hidden;
}
.al-score-bar > i{
  position:absolute; left:0; top:0; bottom:0;
  background: var(--electric);
  border-radius: inherit;
}
.al-score-val{ text-align: right; color: var(--ink); font-weight: 700; }

/* Mobile menu trigger */
.al-mnav-trigger{
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--hairline);
  background: var(--panel-solid);
  border-radius: 10px;
  color: var(--ink);
  align-items: center; justify-content: center;
  cursor: pointer;
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  z-index: 5;
}
#header{ position: relative; }

/* ============================================================
 *  9. Responsive
 * ============================================================ */
@media (max-width: 1024px){
  .al-pickup{ grid-template-columns: 1fr; }
  .al-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px){
  .al-wrap{ padding: 0 14px; }
  .al-sec{ margin: 40px auto; }
  .al-grid{ grid-template-columns: 1fr; }
  .al-revband{
    flex-direction: column; align-items: flex-start; text-align: left;
    padding: 28px 22px;
  }
  .al-revband .al-btn{ width: 100%; justify-content: center; }
  body{ background-size: auto, auto, auto, 36px 36px, 36px 36px !important; }
  .al-cmp{ font-size: .82rem; }
  .al-cmp th, .al-cmp td{ padding: 10px 8px; }
  .al-cmp .al-btn{ font-size: .72rem; padding: 7px 10px; }
  .al-pickup .al-pick:first-child .al-pick-title{ font-size: 1.15rem; }
  .entry-content{ font-size: .98rem; line-height: 1.9; }
  .al-mnav-trigger{ display: inline-flex; }

  #navi .navi-in > ul.menu-pc,
  #navi .navi-in > ul.menu-header,
  #navi .navi-in > ul.menu-top{
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
  }
  #navi-in.is-open > ul.menu-pc,
  #navi-in.is-open > ul.menu-header,
  #navi-in.is-open > ul.menu-top{ display: flex; }
  #navi .navi-in > ul > li{ width: 100%; }
  #navi .navi-in > ul > li > a{
    padding: 14px 18px;
    border-bottom: 1px solid var(--hairline);
    justify-content: flex-start;
  }
  #navi .navi-in > ul > li > a::after{ display: none; }
}

@media print{
  html, body{ background:#fff !important; color:#000 !important; }
  .al-btn, .al-revband, .al-sub{ background:#f5f5f5 !important; color:#000 !important; box-shadow:none !important; }
  .al-ticker, .al-theme-toggle{ display:none !important; }
}

/* ============================================================
 * ===== SITE_PATCH (v1.4.1) — オリジナル v1.4.0 への追加分のみ
 *  以下は本サイト固有の運用要件で必要なため追加。
 *  オリジナルテーマ世界観には影響しない補助的なルールのみ。
 * ============================================================ */

/* [SITE_PATCH] ステマ規制対応 PR バナー（functions.php が自動挿入） */
.vl-pr-banner{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 1.4em; padding:8px 14px;
  font-size:.82rem; line-height:1.5;
  background:rgba(20,24,80,.05);
  border:1px solid var(--hairline,#e0e3f0);
  border-left:3px solid var(--gold,#d97706);
  border-radius:8px;
  color:var(--ink-2,#2a3068);
}
.vl-pr-banner .vl-pr-tag{
  display:inline-block; padding:2px 8px;
  font-family:var(--font-mono,monospace); font-weight:800; font-size:.72rem;
  color:#fff; background:var(--gold,#d97706); border-radius:4px; letter-spacing:.08em;
}
.vl-pr-banner .vl-pr-text{ flex:1; }
@media(max-width:782px){ .vl-pr-banner{ font-size:.78rem; padding:8px 12px; } }

/* [SITE_PATCH] PV/アクセス集計の表示を訪問者から隠す（管理画面の集計は維持） */
.post-views,
.entry-card-meta .post-views, .entry-card-info .post-views,
.post-info .post-views, .entry-meta .post-views,
.entry-card-pv, .entry-pv, .post-pv,
.popular-entry-card-pv, .related-entry-card-pv,
.card-pv, .pv-num, .views-count,
.entry-card-info .pv, .entry-card-info [class*="pv"],
.entry-card-info .access, .entry-card-info [class*="access"],
.fa-eye, .fa-bar-chart, .fa-chart-bar{
  display:none !important;
}
.entry-card-meta:has(i.fa-bar-chart),
.entry-card-meta:has(i.fa-chart-bar),
.entry-card-info:has(i.fa-bar-chart),
.entry-card-info:has(i.fa-chart-bar){
  display:none !important;
}

/* [SITE_PATCH] Cocoonデフォルトのh2背景/枠が al-sub/al-revband 内に侵入し
 * 「白背景白文字」になる問題への上書き。
 */
.entry-content .al-sub h2,
.entry-content .al-revband h2,
.al-sub h2, .al-revband h2{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  color: #fff !important;
}
/* TOCがspan化したテキストにも色を効かせる */
.al-sub h2 span, .al-revband h2 span{
  background: transparent !important;
  color: #fff !important;
}

/* [SITE_PATCH] al-h: Cocoonデフォルトのh2背景/枠を抑制
 * (本サイトはライトベースで現状は可読だが、将来のCocoon更新で崩れ防止)
 */
.entry-content .al-h,
.al-h{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  color: var(--ink) !important;
}
.al-h span{
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

/* [SITE_PATCH] アーカイブ(カテゴリー/タグ)ページのPV表示を抑制
 * Cocoonは entry-card-{today,week,month,all}-pv-count 等の固有クラスを使う。
 * 上の包括ルールで取り逃した分の補完。
 */
.entry-card-today-pv-count,
.entry-card-week-pv-count,
.entry-card-month-pv-count,
.entry-card-all-pv-count,
.entry-card-today-pv,
.entry-card-week-pv,
.entry-card-month-pv,
.entry-card-all-pv,
[class*="pv-count"],
[class$="-pv"]{
  display: none !important;
}
/* PV関連spanを含む親コンテナ全体を非表示（アーカイブカードのPV帯を消す） */
.entry-card-info:has([class*="pv-count"]),
.entry-card-info:has(i.fa-bar-chart),
.entry-card-info:has(i.fa-chart-bar),
.entry-card-meta:has([class*="pv-count"]){
  display: none !important;
}

/* ============================================================
 * [SITE_PATCH v1.4.7] 編集部ヒーロー（著者アーカイブ先頭）
 *   - /author/verselabo-editorial/ で表示
 *   - .al-editorial-hero : 2カラム（アバター + 紹介本文）
 *   - 既存のライトテーマ（v1.4.x）配色変数に追随
 * ============================================================ */
.al-editorial-hero{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  padding: 28px 28px 26px;
  margin: 20px 0 40px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f6fb 100%);
  border: 1px solid rgba(15, 18, 38, 0.08);
  box-shadow: 0 1px 0 rgba(15, 18, 38, 0.03), 0 10px 32px rgba(110, 86, 240, 0.08);
  align-items: center;
}
.al-editorial-hero .al-editorial-avatar{ display: flex; justify-content: center; }
.al-editorial-hero .al-editorial-avatar img{
  width: 120px; height: 120px;
  border-radius: 22px;
  display: block;
  box-shadow: 0 6px 20px rgba(15, 18, 38, 0.18);
}
.al-editorial-hero .al-editorial-eyebrow{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #6E56F0;
  margin: 0 0 6px;
  text-transform: uppercase;
}
.al-editorial-hero .al-editorial-name{
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 12px;
  color: #0F1226;
}
.al-editorial-hero .al-editorial-bio{
  font-size: 14px;
  line-height: 1.85;
  color: #3A4358;
  margin: 0 0 14px;
}
.al-editorial-hero .al-editorial-bio br + br{ display: block; content: ""; margin-top: 6px; }
.al-editorial-hero .al-editorial-meta{
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12px;
  color: #4B5874;
  border-top: 1px dashed rgba(15, 18, 38, 0.10);
  border-bottom: 1px dashed rgba(15, 18, 38, 0.10);
  padding: 10px 0;
  margin: 0 0 14px;
}
.al-editorial-hero .al-editorial-meta strong{ color: #0F1226; font-weight: 700; margin: 0 2px; }
.al-editorial-hero .al-editorial-cta{ display: flex; gap: 10px; flex-wrap: wrap; }
.al-editorial-hero .al-editorial-cta .al-btn{
  display: inline-flex; align-items: center;
  padding: 9px 18px;
  font-size: 13px; font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  background: linear-gradient(135deg, #6E56F0 0%, #18D6C5 120%);
  color: #fff;
  border: 1px solid transparent;
}
.al-editorial-hero .al-editorial-cta .al-btn-ghost{
  background: transparent;
  color: #0F1226;
  border-color: rgba(15, 18, 38, 0.18);
}
@media (max-width: 640px){
  .al-editorial-hero{
    grid-template-columns: 1fr;
    text-align: center;
    padding: 24px 20px;
  }
  .al-editorial-hero .al-editorial-avatar img{ margin: 0 auto; }
  .al-editorial-hero .al-editorial-meta{ justify-content: center; }
  .al-editorial-hero .al-editorial-cta{ justify-content: center; }
}

/* ============================================================
 * [SITE_PATCH v1.4.8] ホーム再構成
 *   - ヘッダー直下「TOP STORIES」ヒーロー（背景: assets/hero-home.svg）
 *   - ホーム時のページタイトル「ホーム」を非表示
 *   - ホーム時の目次(TOC)を非表示
 * ============================================================ */

/* (a) ホームのページタイトル「ホーム」を非表示 */
body.home .entry-title,
body.home .a-wrap > .entry-header,
body.home article > header.entry-header h1{
  display: none !important;
}

/* (b) ホームの目次を非表示 */
body.home .toc,
body.home .cocoon-block-toc,
body.home #toc{
  display: none !important;
}

/* (c) ヘッダー直下ヒーロー */
.al-home-hero{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  margin: 14px 0 56px;
  padding: 60px 36px 64px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(8,9,30,0.30) 0%, rgba(8,9,30,0.78) 100%),
    url("assets/hero-home.svg") center/cover no-repeat;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 24px 60px -20px rgba(110,86,240,0.30);
}
.al-home-hero::after{
  /* 微細なグレイン感 */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 110%, rgba(8,9,30,0.55), transparent 60%);
}
.al-home-hero-inner{
  position: relative; z-index: 1;
  max-width: 1100px; width: 100%; margin: 0 auto;
}
.al-home-hero-eyebrow{
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.26em;
  color: rgba(255,255,255,0.92);
  text-transform: uppercase;
  margin: 0 0 22px;
  padding: 4px 0 4px 14px;
  border-left: 3px solid #18D6C5;
  background: transparent !important;
  border-bottom: none !important;
}
.al-home-hero-eyebrow::after,
.al-home-hero-eyebrow::before{ display: none !important; }

/* ヒーロー内のピックアップカード — 既存 .al-pickup を流用しつつ
   背景の濃さで沈まないようコントラストを少し上げる */
.al-home-hero .al-pickup{ margin-top: 0; }
.al-home-hero .al-pick{
  background: rgba(255,255,255,0.98) !important;
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 28px 60px -22px rgba(0,0,0,0.55);
}
.al-home-hero .al-pick:hover{
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 32px 72px -24px rgba(110,86,240,0.55);
}

@media (max-width: 980px){
  .al-home-hero{ padding: 48px 22px 54px; min-height: 420px; border-radius: 16px; }
  .al-home-hero-eyebrow{ font-size: 11px; letter-spacing: 0.22em; }
}
@media (max-width: 640px){
  .al-home-hero{ padding: 36px 16px 40px; min-height: 360px; border-radius: 14px; }
}