/*
Theme Name: Manga Chikubin Child
Theme URI: https://chikubin.com/
Template: manga-base-theme
Description: 乳痴 -CHIKUBI- サイト用の子テーマ。アングラ濃厚系のアクセント色とフォント、追加装飾を適用する。
Author: manga-hub project
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.2
Text Domain: manga-chikubin
*/

/* ===========================================================================
   CSS変数の上書き
   親テーマの :root を上書きすることで、サイト全体のトーンを変える
   =========================================================================== */
:root {
  /* 背景：より黒く */
  --bg-base:        #0a0608;
  --bg-surface:     #121014;
  --bg-card:        #1a1518;
  --bg-elevated:    #221b1f;

  /* テキスト：わずかに赤味 */
  --text-primary:   #f3eaea;
  --text-secondary: #c9bcbf;
  --text-muted:     #6b5d62;

  /* アクセント：ネオンピンク */
  --accent:         #ff1654;
  --accent-glow:    #ff3d6e;
  --accent-deep:    #b80b3d;

  /* 機能色 */
  --price:          #ffb800;
  --sale:           #ff2d2d;
  --rating:         #fbbf24;

  /* タイポ：明朝＋装飾 */
  --font-serif:     "Shippori Mincho", serif;
  --font-sans:      "Zen Kaku Gothic New", -apple-system, sans-serif;
  --font-display:   "Bebas Neue", sans-serif;
}

/* ===========================================================================
   フォント読み込み
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@600;800&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Bebas+Neue&display=swap');

/* ===========================================================================
   グレイン（フィルムノイズ）
   =========================================================================== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* 血色フィルター */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(ellipse at top, rgba(255,22,84,0.06), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(184,11,61,0.05), transparent 50%);
}

/* ===========================================================================
   ブランドロゴをグラデに
   =========================================================================== */
.mb-brand__logo {
  font-family: var(--font-serif);
  font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 26px;
}

.mb-brand__sub {
  font-family: var(--font-display);
  letter-spacing: 0.3em;
}

/* ===========================================================================
   ヘッダーをガラス感に
   =========================================================================== */
.mb-header {
  background: rgba(10, 6, 8, 0.85);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(255, 22, 84, 0.15);
}

/* ===========================================================================
   セクションタイトルを明朝で
   =========================================================================== */
.mb-section__title {
  font-family: var(--font-serif);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 24px;
}

/* ===========================================================================
   作品ヒーロー（ピンク影 + 明朝タイトル）
   =========================================================================== */
.mb-work-hero__title {
  font-family: var(--font-serif);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 32px;
}
.mb-work-hero__image {
  box-shadow: 0 30px 60px rgba(0,0,0,0.6),
              0 0 0 1px rgba(255, 22, 84, 0.15);
}

/* ===========================================================================
   作品カード（ホバーで赤いライン）
   =========================================================================== */
.mb-card__thumb {
  position: relative;
}
.mb-card__thumb::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px; width: 0;
  background: var(--accent);
  transition: width .4s ease;
  z-index: 3;
}
.mb-card:hover .mb-card__thumb::after { width: 100%; }

.mb-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14px;
}

/* ===========================================================================
   CTAボタン（ホバーで光が走る）
   =========================================================================== */
.mb-cta {
  position: relative;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.25em;
  border-radius: 0;
  padding: 22px;
}
.mb-cta::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left .5s;
}
.mb-cta:hover::before { left: 100%; }

/* ===========================================================================
   価格ボックス（左に赤いライン）
   =========================================================================== */
.mb-price-box {
  position: relative;
  overflow: hidden;
}
.mb-price-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--accent);
}
.mb-price-box__price {
  font-family: var(--font-display);
  font-size: 48px;
}

/* ===========================================================================
   タグピル（ホバー左ボーダー）
   =========================================================================== */
.mb-tag-pill {
  border-left: 2px solid transparent;
  transition: all .2s;
  border-radius: 0;
}
.mb-tag-pill:hover {
  border-left-color: var(--accent);
}

/* ===========================================================================
   年齢確認モーダル（上部にピンクのライン）
   =========================================================================== */
.mb-age-modal__inner {
  border: 1px solid rgba(255, 22, 84, 0.3);
  position: relative;
}
.mb-age-modal__inner::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.mb-age-modal__title {
  font-family: var(--font-serif);
  font-weight: 800;
}
.mb-age-btn {
  font-family: var(--font-display);
  letter-spacing: 0.3em;
  border-radius: 0;
}

/* ===========================================================================
   フッター（ピンクの細ライン）
   =========================================================================== */
.mb-footer {
  background: #050304;
  border-top: 1px solid rgba(255, 22, 84, 0.1);
}