/*
 * ビクログ テキスト強調ショートコード スタイル集
 * viclog-text-shortcodes.css
 * 配置: /wp-content/themes/子テーマ名/assets/viclog/viclog-text-shortcodes.css
 *
 * ── 収録 ─────────────────────────────────────
 *
 *  【大テキスト】 [vlg_hl]  fontSize: clamp(28px, 5vw, 52px)
 *   style: default / glow / card / quote / line
 *
 *  【中テキスト】 [vlg_md]  fontSize: clamp(17px, 2.2vw, 24px)
 *   style: default / accent / panel / border / badge
 *
 *  【小テキスト】 [vlg_sm]  fontSize: clamp(12px, 1.2vw, 14px)
 *   style: default / muted / tag / inline / alert
 *
 * ─────────────────────────────────────────────
 */

/* Fonts are enqueued in functions.php (viclog single only). */

:root {
  --vlg-bg:      #090b15;
  --vlg-panel:   #0f1222;
  --vlg-card:    #13162a;
  --vlg-border:  rgba(255,255,255,0.07);
  --vlg-accent:  #7c5cfc;
  --vlg-accent2: #fc5c8a;
  --vlg-accent3: #5ceafc;
  --vlg-green:   #5cf4a0;
  --vlg-yellow:  #fcd45c;
  --vlg-text:    #dde1f0;
  --vlg-muted:   #5b6080;
  /* グラデーション定義 */
  --vlg-grad-main:  linear-gradient(to right, #7c5cfc, #fc5c8a);
  --vlg-grad-cool:  linear-gradient(to right, #7c5cfc, #5ceafc);
  --vlg-grad-warm:  linear-gradient(to right, #fc5c8a, #fcd45c);
  --vlg-grad-win:   linear-gradient(to right, #5cf4a0, #5ceafc);
}


/* ══════════════════════════════════════════════════════════════
   ██████╗ ██╗ ██████╗     テキスト  【大】
   ██╔══██╗██║██╔════╝     [vlg_hl]
   ██████╔╝██║██║  ███╗    fontSize: clamp(28px, 5vw, 52px)
   ██╔══██╗██║██║   ██║    用途: 章の冒頭 / 感情の爆発 / ビクロイ報告
   ██████╔╝██║╚██████╔╝
   ╚═════╝ ╚═╝ ╚═════╝
   ══════════════════════════════════════════════════════════════ */

/* ── hl-default : シンプル中央グラデーション ── */
.vlg-hl {
  display: block;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 5vw, 52px);
  text-align: center;
  margin: 52px 0;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.vlg-hl > .vlg-inner {
  background: var(--vlg-grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── hl-glow : 光彩・ビクロイ感 ── */
.vlg-hl-glow {
  display: block;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 5vw, 52px);
  text-align: center;
  margin: 52px 0;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.vlg-hl-glow > .vlg-inner {
  background: var(--vlg-grad-cool);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 28px rgba(124,92,252,.7)) drop-shadow(0 0 60px rgba(92,234,252,.3));
}

/* ── hl-card : カード + 上ライン ── */
.vlg-hl-card {
  display: block;
  margin: 40px 0;
  padding: 36px 32px;
  background: var(--vlg-panel);
  border: 1px solid var(--vlg-border);
  border-radius: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.vlg-hl-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--vlg-grad-main);
}
.vlg-hl-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(124,92,252,.12) 0%, transparent 65%);
  pointer-events: none;
}
.vlg-hl-card > .vlg-inner {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 4.5vw, 46px);
  line-height: 1.3;
  background: var(--vlg-grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── hl-quote : 左ボーダー引用 ── */
.vlg-hl-quote {
  display: block;
  margin: 44px 0;
  padding: 28px 36px;
  background: var(--vlg-panel);
  border-left: 4px solid var(--vlg-accent);
  border-radius: 0 12px 12px 0;
  position: relative;
}
.vlg-hl-quote::before {
  content: '"';
  position: absolute; top: -4px; left: 26px;
  font-size: 80px; line-height: 1;
  color: var(--vlg-accent); opacity: .12;
  font-family: Georgia, serif;
}
.vlg-hl-quote > .vlg-inner {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 900;
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1.35;
  background: var(--vlg-grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── hl-line : 両サイド横ライン ── */
.vlg-hl-line {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 52px 0;
}
.vlg-hl-line::before,
.vlg-hl-line::after {
  content: '';
  flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, rgba(124,92,252,.5));
}
.vlg-hl-line::after {
  background: linear-gradient(to left, transparent, rgba(124,92,252,.5));
}
.vlg-hl-line > .vlg-inner {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 3.5vw, 38px);
  white-space: nowrap;
  background: var(--vlg-grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
}


/* ══════════════════════════════════════════════════════════════
   ███╗   ███╗██████╗     テキスト  【中】
   ████╗ ████║██╔══██╗    [vlg_md]
   ██╔████╔██║██║  ██║    fontSize: clamp(17px, 2.2vw, 24px)
   ██║╚██╔╝██║██║  ██║    用途: リード文 / まとめ / 章末コメント
   ██║ ╚═╝ ██║██████╔╝
   ╚═╝     ╚═╝╚═════╝
   ══════════════════════════════════════════════════════════════ */

/* ── md-default : シンプル中央グラデーション ── */
.vlg-md {
  display: block;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 24px);
  text-align: center;
  margin: 36px 0;
  line-height: 1.6;
}
.vlg-md > .vlg-inner {
  background: var(--vlg-grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── md-accent : アクセントカラー + 下線 ── */
.vlg-md-accent {
  display: block;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 24px);
  text-align: center;
  margin: 36px 0;
  line-height: 1.6;
  position: relative;
  padding-bottom: 16px;
}
.vlg-md-accent::after {
  content: '';
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 2px;
  background: var(--vlg-grad-main);
  border-radius: 2px;
}
.vlg-md-accent > .vlg-inner {
  background: var(--vlg-grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── md-panel : パネル背景 ── */
.vlg-md-panel {
  display: block;
  margin: 32px 0;
  padding: 22px 28px;
  background: var(--vlg-card);
  border: 1px solid var(--vlg-border);
  border-radius: 10px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.65;
  position: relative;
  overflow: hidden;
}
.vlg-md-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: var(--vlg-grad-main);
}
.vlg-md-panel > .vlg-inner {
  background: var(--vlg-grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── md-border : 上下ボーダー ── */
.vlg-md-border {
  display: block;
  margin: 36px 0;
  padding: 20px 0;
  border-top: 1px solid rgba(124,92,252,.35);
  border-bottom: 1px solid rgba(124,92,252,.35);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 22px);
  text-align: center;
  line-height: 1.65;
}
.vlg-md-border > .vlg-inner {
  background: var(--vlg-grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── md-badge : ラベルバッジ付き ── */
.vlg-md-badge {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 32px 0;
  padding: 20px 22px;
  background: var(--vlg-panel);
  border: 1px solid var(--vlg-border);
  border-radius: 10px;
}
.vlg-md-badge-label {
  flex-shrink: 0;
  margin-top: 3px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--vlg-accent);
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: #fff; text-transform: uppercase; white-space: nowrap;
}
.vlg-md-badge > .vlg-inner {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1.65;
  background: var(--vlg-grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ══════════════════════════════════════════════════════════════
   ███████╗███╗   ███╗    テキスト  【小】
   ██╔════╝████╗ ████║    [vlg_sm]
   ███████╗██╔████╔██║    fontSize: clamp(12px, 1.2vw, 14px)
   ╚════██║██║╚██╔╝██║    用途: 補足 / 注釈 / 強調インライン
   ███████║██║ ╚═╝ ██║
   ╚══════╝╚═╝     ╚═╝
   ══════════════════════════════════════════════════════════════ */

/* ── sm-default : シンプルグラデーション（インラインで使う） ── */
.vlg-sm {
  /* block と inline 両方で使えるよう inline-block */
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.7;
  letter-spacing: .04em;
}
.vlg-sm > .vlg-inner {
  background: var(--vlg-grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── sm-muted : ミュート補足テキスト ── */
.vlg-sm-muted {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 1.1vw, 13px);
  line-height: 1.75;
  letter-spacing: .04em;
  margin: 16px 0;
  padding: 12px 18px;
  background: var(--vlg-panel);
  border-radius: 6px;
  border-left: 2px solid var(--vlg-muted);
}
.vlg-sm-muted > .vlg-inner {
  color: var(--vlg-muted);
}

/* ── sm-tag : タグ風ラベル ── */
.vlg-sm-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  border-radius: 20px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  background: rgba(124,92,252,.15);
  border: 1px solid rgba(124,92,252,.3);
  margin: 2px 3px;
  vertical-align: middle;
}
.vlg-sm-tag > .vlg-inner {
  background: var(--vlg-grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
}

/* ── sm-inline : 本文中の強調ハイライト ── */
.vlg-sm-inline {
  display: inline;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 1em; /* 親のフォントサイズを継承 */
  letter-spacing: .02em;
}
.vlg-sm-inline > .vlg-inner {
  background: var(--vlg-grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* アンダーラインで視認性UP */
  text-decoration: underline;
  text-decoration-color: rgba(124,92,252,.4);
  text-underline-offset: 3px;
}

/* ── sm-alert : 小さな警告 / 注意書き ── */
.vlg-sm-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0;
  padding: 10px 14px;
  background: rgba(252,92,138,.06);
  border: 1px solid rgba(252,92,138,.2);
  border-radius: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 1.1vw, 13px);
  line-height: 1.7;
}
.vlg-sm-alert::before {
  content: '⚠';
  flex-shrink: 0;
  color: var(--vlg-accent2);
  font-size: 13px;
  margin-top: 1px;
}
.vlg-sm-alert > .vlg-inner {
  color: rgba(221,225,240,.7);
}
.vlg-sm-alert > .vlg-inner strong {
  color: var(--vlg-accent2);
}