/*
	Theme Name: diver_child
	Template: diver
	Description:  Diverの子テーマです。
	Theme URI: http://tan-taka.com/diver/
	Author: Takato Takagi
 */

/* カスタマイズする場合にはこれより下に追記してください  */

/* ===== YOEN SKIN BEGIN (blog/design/diver-yoen.css) ===== */
/* ==== Diver スキン「妖艶」（自動生成: blog/design/build.js。手で編集しない。元: tokens.css + diver-yoen.src.css） ==== */
/* サイトの見た目の定義（妖艶なイメージ）。色・書体・影は、ここだけで決める。
 *
 *   試作（blog/prototype）、WordPressプラグイン（blog/wp-plugin）、Diverのスキン（blog/design/diver-yoen.css）が、この値を使う。
 *   値を変えたら、プラグインとスキンは、それぞれ node build.js で作り直す。
 *
 * 方針:
 *   - 黒に近いワイン色の地に、シャンパンゴールドと深いローズを差す。光は控えめに（にじむ程度）。
 *   - 見出しは明朝体で、艶を出す。本文は読みやすさを優先する（明るい文字を、暗い地に）。
 *   - 露骨な画像や表現には頼らない。雰囲気は、色・書体・余白・光だけで作る。
 *   - 文字の色は、背景に対して読みやすい比率（WCAG AA以上）を保つ。変えるときは contrast.js で確かめる。
 */
:root {
  color-scheme: dark;       /* セレクトボックス・スクロールバーなどの標準部品も、暗い配色にする */
  /* 地 */
  --bg: #130a14;            /* 黒に近いプラム */
  --card: #1e1120;          /* カード・パネル */
  --card-2: #281629;        /* 入力欄・押したときの面 */
  --line: #3d2539;          /* 罫線 */
  /* 文字 */
  --text: #f5ecef;          /* 温かみのある白 */
  --muted: #bda5b3;         /* 補足の文字（くすんだローズグレー） */
  /* 差し色 */
  --accent: #d8b46b;        /* シャンパンゴールド */
  --accent-ink: #1c0f14;    /* ゴールドの上に置く文字 */
  --accent-soft: #321d2f;   /* タグ・選択の背景 */
  --cta: #c8165f;           /* 行動ボタン（深いローズ） */
  --cta-hover: #e0216f;
  --cta-grad: linear-gradient(135deg, #d11a68 0%, #94104f 100%);
  --live: #d81c66;
  --goal: #d8b46b;
  --goal-grad: linear-gradient(90deg, #94104f 0%, #d8b46b 100%);
  /* 注意書き（PR表記など） */
  --note: #2b1728;
  --note-line: #5e3b53;
  /* 形・影 */
  --radius: 16px;
  --shadow: 0 1px 0 rgba(216, 180, 107, .10) inset, 0 12px 32px rgba(0, 0, 0, .45);
  --glow: 0 0 0 1px rgba(216, 180, 107, .35), 0 8px 34px rgba(200, 22, 95, .28);
  /* 背景の光（左上にワイン、右上にバイオレット） */
  --bg-glow: radial-gradient(1100px 560px at 8% -12%, rgba(148, 16, 79, .32), transparent 62%),
             radial-gradient(900px 520px at 104% -4%, rgba(86, 36, 120, .30), transparent 58%);
  /* 書体（外部フォントは読み込まない。端末にある明朝体を使う） */
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "MS PMincho", serif;
  --font-sans: "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
}

/* Diver 用スキン「妖艶」。色・書体・影は tokens.css の値（先頭に、build.js が連結する）。
 * Diver本体（親テーマ）は書き換えず、子テーマの style.css の末尾に貼って上書きする。
 * Diverのカスタマイザーの色設定より後に効くよう、html body を前に付けている。 */

/* Diverは、カスタマイザーの色設定を、クラス指定のCSSとしてページ内に出力する（本スキンより優先される）。
 * 地・カード・ヘッダー・フッターの背景だけは、!important で上書きする。 */

/* ---- 土台 ---- */
html body { background: var(--bg-glow), var(--bg) !important; color: var(--text); font-family: var(--font-sans); }
html body a { color: var(--accent); }
html body a:hover { color: #ecd08f; }
html body ::selection { background: rgba(200, 22, 95, .55); color: #fff; }

/* ---- ヘッダー（ミニヘッダー・ロゴ・ナビ） ---- */
html body .header_small_menu { background: #0d060e !important; border-bottom: 1px solid var(--line); }
html body .header_small_menu a, html body .header_small_menu li, html body .header_small_menu span { color: var(--muted) !important; }
html body .header_small_menu a:hover { color: var(--accent) !important; }
html body .header-wrap { background: rgba(19, 10, 20, .94) !important; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(216, 180, 107, .12); }
html body #header { background: transparent !important; }
html body #description { background: transparent; color: var(--muted); }
html body .header-logo a, html body .header-logo a:hover, html body #logo .logo_title, html body .logo_title { color: var(--accent) !important; font-family: var(--font-serif); font-weight: 600; letter-spacing: .16em; }
html body .logo_description, html body #description, html body .site-description { color: var(--muted) !important; }
html body #nav_fixed, html body #nav_fixed.fixed { background: rgba(19, 10, 20, .96) !important; border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
html body #nav_fixed .logo_title, html body #nav_fixed a { color: var(--accent) !important; }
html body #nav-menu, html body .nav, html body #header nav, html body #header .nav ul { background: transparent !important; }
html body #header nav a, html body .nav a, html body #nav-menu a, html body #nav_fixed nav a { color: var(--text) !important; letter-spacing: .06em; }
html body #header nav a:hover, html body .nav a:hover, html body #nav-menu a:hover { color: var(--accent) !important; }
html body #header nav li, html body .nav li { border-color: var(--line) !important; }
html body #header nav .menu_desc, html body .nav .menu_desc { color: var(--muted) !important; }

/* ---- 左のメニューバー（PC幅）----------------------------------------------------------
 * 管理画面の「外観 → メニュー」で、表示場所を「ヘッダーのナビゲーション」にしたメニューを、左に固定の縦メニューにする。
 * メニュー項目の「CSSクラス」に、次を入れると、見た目が変わる（「CSSクラス」は、画面右上の「表示オプション」で出せる）:
 *   menu-section … 見出し（リンクは「#」にする。押せない）   menu-cta … 登録ボタン（広告リンクなので、rel="sponsored" の設定が別に要る）
 * スマホ幅は、Diver標準の☰ボタンと、左から出るドロワーメニューをそのまま使う（下の「スマホのメニュー」で配色を合わせている）。 */
@media (min-width: 1024px) {
  html body { padding-left: 232px; }
  /* 配置に関わる指定は、Diver側のID付きの指定に勝つため、!important にしている */
  html body .header-logo { position: fixed !important; z-index: 90; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 232px !important; height: auto !important; margin: 0 !important; padding: 18px 14px !important;
    display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 6px;
    background: var(--card) !important; border-right: 1px solid var(--line); box-shadow: 1px 0 0 rgba(216, 180, 107, .12); overflow-y: auto; }
  html body #logo { width: auto !important; height: auto !important; flex: none !important; margin: 0 !important; padding: 4px 8px 14px !important; border-bottom: 1px solid var(--line); text-align: left !important; }
  html body #logo a, html body #logo .logo_title { font-size: 17px !important; line-height: 1.4 !important; text-align: left !important; }
  html body #nav { display: block !important; flex: 1 1 auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; }
  /* 項目は、1行に1つ（flex: 0 0 100%）。CSSクラス menu-chip を付けた項目だけ、丸いタグにして、横に並べる（ジャンル用） */
  html body #mainnavul { position: static !important; float: none !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 2px 6px; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; }
  html body #nav li { flex: 0 0 100%; float: none !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
  html body #nav li.menu-chip { flex: 0 0 auto !important; }
  html body #nav li.menu-chip > a { padding: 5px 12px !important; font-size: 13px !important; border: 1px solid var(--line) !important; border-radius: 999px; }
  html body #nav li.menu-chip > a:hover, html body #nav li.menu-chip > a:focus-visible { border-color: var(--accent) !important; background: transparent !important; }
  html body #nav li.menu-chip.current-menu-item:not(.mf-genre-current) > a { color: var(--text) !important; font-weight: 400; background: transparent !important; border-color: var(--line) !important; }
  html body #nav li.menu-chip.mf-genre-current > a { color: var(--accent-ink) !important; font-weight: 700; background: var(--accent) !important; border-color: var(--accent) !important; }
  html body #nav li a { display: block !important; width: auto !important; height: auto !important; white-space: normal !important; overflow-wrap: anywhere; line-height: 1.5 !important; padding: 10px 12px !important; text-align: left !important; font-size: 14px !important; letter-spacing: .02em;
    border-radius: 10px; border-left: 2px solid transparent; color: var(--text) !important; background: transparent !important; }
  html body #nav li a::before, html body #nav li a::after { display: none !important; }
  html body #nav li a:hover, html body #nav li a:focus-visible { background: var(--accent-soft) !important; color: var(--text) !important; }
  html body #nav li.current-menu-item > a, html body #nav li.current_page_item > a { border-left-color: var(--accent); color: var(--accent) !important; font-weight: 700;
    background: linear-gradient(90deg, rgba(216, 180, 107, .14), transparent 85%) !important; }
  /* 「ジャンル」のリンク（…#genre=japanese）は、WordPressが全部「現在のページ」にするので、いったん普通の見た目に戻し、
     プラグインが付ける mf-genre-current（いま選んでいるジャンルだけ）で、金色にする */
  html body #nav li.current-menu-item:not(.mf-genre-current) > a[href*="#genre="] { border-left-color: transparent; color: var(--text) !important; font-weight: 400; background: transparent !important; }
  html body #nav li.mf-genre-current > a { border-left-color: var(--accent); color: var(--accent) !important; font-weight: 700; background: linear-gradient(90deg, rgba(216, 180, 107, .14), transparent 85%) !important; }
  html body #nav li.menu-section > a { pointer-events: none; padding: 14px 8px 4px !important; font-size: 11px !important; letter-spacing: .14em; color: var(--muted) !important; font-weight: 700; }
  html body #nav li.menu-cta { margin-top: 14px !important; }
  html body #nav li.menu-cta > a { text-align: center !important; border-left: 0; border-radius: 999px; color: #fff !important; font-weight: 700; background: var(--cta-grad) !important; box-shadow: 0 4px 18px rgba(200, 22, 95, .35); }
  html body #nav_fixed, html body #nav_fixed.fixed { display: none !important; }   /* スクロールで出る上部の固定メニューは、左バーと重複するので出さない */
}

/* ---- パンくず・メタ情報 ---- */
html body #breadcrumb, html body .breadcrumb { background: transparent; color: var(--muted); }
html body #breadcrumb a, html body #breadcrumb li, html body .breadcrumb a { color: var(--muted); }
html body .post-meta, html body .post-meta a, html body .post-meta time, html body .post-date, html body .post-author-name { color: var(--muted); }

/* ---- 記事・カード・ウィジェット ---- */
html body article, html body .hentry, html body .post-box, html body .post-box-contents, html body #single-main .post-sub, html body .widget, html body #sidebar .widget, html body .wrap-post-title {
  background: var(--card) !important; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
html body .post-box-contents { border: 0; box-shadow: none; }   /* カードの外枠は .post-box が持つので、内側の二重の枠は消す */
html body .wrap-post-title { padding: 12px 18px; font-family: var(--font-serif); letter-spacing: .08em; }
html body .post-box { transition: box-shadow .25s, border-color .25s; }
html body .post-box:hover { box-shadow: var(--glow); border-color: transparent; }
html body .post-box .post-title, html body .post-box .post-title a { color: var(--text); font-family: var(--font-serif); letter-spacing: .03em; }
html body .post-substr { color: var(--muted); }
html body .post-cat a, html body .post-cat { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line); border-radius: 999px; }
html body .newlabel { filter: hue-rotate(300deg) saturate(1.1); }

/* ---- 記事の本文 ---- */
html body h1.page_title, html body .page_title { background: transparent !important; color: var(--text) !important; font-family: var(--font-serif); font-weight: 600; letter-spacing: .05em; border: 0; }
html body .single-post-title, html body h1.entry-title, html body article h1 { color: var(--text); font-family: var(--font-serif); font-weight: 600; letter-spacing: .05em; }
html body .content, html body .content p, html body .content li, html body .content dd, html body .content dt, html body .content td, html body .content th { color: var(--text); }
html body .content p a, html body .content li a, html body .content td a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
html body .content p.lead { color: var(--muted); }
html body .content h2, html body .widget h2, html body .wp-block-heading, html body .widgettitle {
  background: linear-gradient(90deg, rgba(216, 180, 107, .14), transparent 72%); color: var(--text); font-family: var(--font-serif); font-weight: 600;
  letter-spacing: .06em; border: 0; border-left: 2px solid var(--accent); border-radius: 0; padding: 10px 14px 10px 16px; }
html body .content h3 { background: transparent; color: var(--accent); font-family: var(--font-serif); letter-spacing: .05em; border: 0; border-bottom: 1px solid var(--line); padding: 4px 0 8px; }
html body .content h4, html body .content h5 { background: transparent; color: var(--text); font-family: var(--font-serif); border: 0; border-left: 2px solid var(--line); padding-left: 10px; }
html body .content blockquote { background: var(--card-2); color: var(--text); border-left: 2px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
html body .content hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
html body .content table, html body .content th, html body .content td { border-color: var(--line); }
html body .content th { background: var(--card-2); }
html body .content ul li::marker, html body .content ol li::marker { color: var(--accent); }

/* ---- 記事の下（前後の記事・著者・関連記事）・サムネイルの枠・スマホのメニュー ---- */
html body ul.navigation, html body ul.navigation li, html body .post_footer_author_title, html body .post_footer_author { background: var(--card-2) !important; color: var(--text) !important; border-color: var(--line) !important; }
html body ul.navigation a { color: var(--accent) !important; }
html body figure.post-box-thumbnail, html body .post-box-thumbnail__wrap, html body figure.recommend-thumb, html body .post_thumbnail { background: var(--card-2) !important; }
html body .drawer-nav { background: var(--card) !important; border-right: 1px solid var(--line); }
html body .drawer-nav a, html body .drawer-nav li, html body .drawer-nav span { background: transparent !important; color: var(--text) !important; }
/* ドロワー（スマホの、左から出るメニュー）の中身を、PC幅の左バーと同じ見た目にする */
html body .drawer-nav .widget { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 12px !important; border-radius: 0 !important; }
html body .drawer_content_title, html body .drawer-nav .widgettitle { background: transparent !important; color: var(--accent) !important; font-family: var(--font-serif); font-weight: 600; letter-spacing: .12em;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 14px 12px 12px !important; }
html body .drawer-nav li { border: 0 !important; }
html body .drawer-nav ul { margin: 0; padding: 0 10px 10px; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 6px; }
html body .drawer-nav li { flex: 0 0 100%; }
html body .drawer-nav li.menu-chip { flex: 0 0 auto; }
html body .drawer-nav li.menu-chip > a { padding: 7px 14px; font-size: 14px; border: 1px solid var(--line); border-radius: 999px; }
html body .drawer-nav li.menu-chip.current-menu-item:not(.mf-genre-current) > a { color: var(--text) !important; font-weight: 400; background: transparent !important; border-color: var(--line); }
html body .drawer-nav li.menu-chip.mf-genre-current > a { color: var(--accent-ink) !important; font-weight: 700; background: var(--accent) !important; border-color: var(--accent); }
html body .drawer-nav li a { display: block; padding: 12px 14px; border-radius: 10px; border: 0; border-left: 2px solid transparent; font-size: 15px; line-height: 1.5; }
html body .drawer-nav li a:hover, html body .drawer-nav li a:focus-visible { background: var(--accent-soft) !important; }
html body .drawer-nav li.current-menu-item > a { border-left-color: var(--accent); color: var(--accent) !important; font-weight: 700; background: linear-gradient(90deg, rgba(216, 180, 107, .14), transparent 85%) !important; }
html body .drawer-nav li.current-menu-item:not(.mf-genre-current) > a[href*="#genre="] { border-left-color: transparent; color: var(--text) !important; font-weight: 400; background: transparent !important; }
html body .drawer-nav li.mf-genre-current > a { border-left-color: var(--accent); color: var(--accent) !important; font-weight: 700; background: linear-gradient(90deg, rgba(216, 180, 107, .14), transparent 85%) !important; }
html body .drawer-nav li.menu-section > a { pointer-events: none; padding: 16px 10px 4px; font-size: 11px; letter-spacing: .14em; color: var(--muted) !important; font-weight: 700; }
html body .drawer-nav li.menu-cta > a { margin-top: 12px; text-align: center; border-left: 0; border-radius: 999px; color: #fff !important; font-weight: 700; background: var(--cta-grad) !important; box-shadow: 0 4px 18px rgba(200, 22, 95, .35); }
html body .drawer-nav-btn span, html body .drawer-nav-btn span::before, html body .drawer-nav-btn span::after { background: var(--accent) !important; }
html body .newlabel { filter: none; }
html body .newlabel span { background: var(--cta) !important; color: #fff !important; }

/* ---- フォーム・ボタン ---- */
html body input[type="text"], html body input[type="search"], html body input[type="email"], html body input[type="url"], html body input.s, html body textarea, html body select, html body .wp-block-search__input {
  background: var(--card-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; }
html body input::placeholder, html body textarea::placeholder { color: var(--muted); }
html body input.s, html body #searchform input[type="text"], html body .searchform input[type="text"] { background: var(--card-2) !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
html body input[type="submit"], html body button[type="submit"], html body .wp-block-search__button, html body .wp-element-button {
  background: linear-gradient(135deg, #ecd08f, var(--accent)); color: var(--accent-ink); border: 0; border-radius: 999px; font-weight: 700; }
html body input[type="submit"]:hover, html body .wp-block-search__button:hover { filter: brightness(1.08); }
/* 検索ボタンは、Diverの標準だと大きな円になるので、横長の丸ボタンにする */
html body .wp-block-search__button, html body .wp-block-search__inside-wrapper input[type="submit"] { border-radius: 999px !important; width: auto !important; height: auto !important; min-height: 0; padding: 10px 22px; aspect-ratio: auto; white-space: nowrap; flex: none; }
/* 画像がないときの標準画像（明るい灰色の「NO IMAGE」）は、見せない。下地の暗い面だけが見える。（色を反転させる方法は、Diver 6.1.21 の画像の読み込みの動きと合わず、明るいままになった） */
html body img[src*="noimage"] { opacity: 0 !important; }
html body :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- サイドバー・SNSボタン・フッター ---- */
html body .widget a, html body .widget li, html body .widget li a { color: var(--text); }
html body .widget a:hover { color: var(--accent); }
html body .share a, html body .sns a { filter: saturate(.7); background-image: linear-gradient(rgba(0, 0, 0, .38), rgba(0, 0, 0, .38)) !important; }   /* 背景だけ暗くする。文字は白のまま（LINEの緑で、比率が足りなかった）。Diverは「.sns a.line { background: … }」と一括指定で背景画像を消すため、!important が要る */
html body #share_plz, html body .sns-side { background: var(--card) !important; border: 1px solid var(--line); border-radius: 12px; padding: 6px; }   /* 記事の横に出る、縦並びのシェアボタンの台 */
html body #footer, html body footer#footer { background: #0d060e !important; color: var(--muted); border-top: 1px solid var(--line); box-shadow: 0 -1px 0 rgba(216, 180, 107, .10); }
html body #footer a { color: var(--muted); }
html body #footer a:hover { color: var(--accent); }
html body #scrollbtn a, html body .totop, html body #page-top a { background: var(--card-2); color: var(--accent); }

/* ---- Diver 6.1.21 対応（2026-10-21）----
   Diver 6.1.21 は、カスタマイザーの色を、IDつきの指定や !important つきでページ内に出力する。
   サイドバーのウィジェット（WordPress標準のブロック）の見出し・リンク・検索欄・検索ボタンが、青や濃紺のままになるので、ここで上書きする。 */
html body .widget.widget_block .wp-block-group h2:first-child,
html body .widget.widget_block .wp-block-group h3:first-child,
html body #sidebar .widgettitle, html body .widget .widgettitle {
  background: linear-gradient(90deg, rgba(216, 180, 107, .14), transparent 72%) !important; color: var(--text) !important;
  border: 0 !important; border-left: 2px solid var(--accent) !important; border-radius: 0 !important;
  font-family: var(--font-serif); font-weight: 600; letter-spacing: .06em; padding: 10px 14px 10px 16px; }
html body #sidebar .widget a, html body #sidebar .widget li, html body .widget a { color: var(--text) !important; }
html body #sidebar .widget a:hover, html body .widget a:hover { color: var(--accent) !important; }
html body .wp-block-search .wp-block-search__input { background: var(--card-2) !important; color: var(--text) !important; border: 1px solid var(--line) !important; border-radius: 10px; }
html body .wp-block-search .wp-block-search__button, html body .wp-block-search .wp-element-button {
  background: linear-gradient(135deg, #ecd08f, var(--accent)) !important; color: var(--accent-ink) !important; border: 0 !important; }

/* 一覧のカードでは、投稿者のアイコンと名前を出さない（運営者名を前面に出さない。カードが狭いと、日付に重なってしまう）。 */
html body .post-box .post-author { display: none !important; }
html body .single_title a { color: var(--accent) !important; }   /* 記事の下のカテゴリ名が、Diverの青のままだった */

/* ---- 準備中のメニュー項目（リンク先のページがまだ無いもの。管理画面のメニューで、CSSクラス menu-soon を付ける） ----
   公開できたら、メニューのURLを本来のページに変えて、menu-soon を外す。 */
html body .menu-soon > a { opacity: .55; pointer-events: none; cursor: default; }
html body .menu-soon > a::after, html body #nav li.menu-soon > a::after { content: "準備中"; display: inline !important; position: static !important; width: auto !important; height: auto !important; background: none !important; margin-left: .6em; font-size: .72em; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }   /* 「準備中」は、1つのまとまりで折り返す（「準備」「中」と割れない）。Diver のメニューは ::after を線の飾りに使い、display:none にしているので、上書きする */
html body .menu-chip.menu-soon > a::after, html body #nav li.menu-chip.menu-soon > a::after { content: none !important; display: none !important; }   /* 小さな丸いタグには、「準備中」の文字を付けず、薄くするだけ */

/* 記事の下の「この記事を書いた人」は出さない（運営者名・アイコンを前面に出さない。運営者の案内は「運営者情報」のページ）。 */
html body .post_footer_author_title, html body .post_footer_author { display: none !important; }

/* ---- 年齢確認（age-gate.php）----
   確認済みでなければ（html に age-open が付く）、画面いっぱいに出す。確認済み（age-ok）なら、出さない。 */
html body .age-gate { display: none; position: fixed; inset: 0; z-index: 2147483000; align-items: center; justify-content: center; padding: 16px; overflow-y: auto;
  background: rgba(10, 4, 12, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.age-open body .age-gate { display: flex; }
html.age-open { overflow: hidden; }
html body .age-gate__panel { box-sizing: border-box; width: 100%; max-width: 460px; margin: auto; padding: 30px 24px 24px; text-align: center; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--glow); }
html body .age-gate__badge { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 0 14px; border-radius: 50%;
  border: 2px solid var(--accent); color: var(--accent); font-family: var(--font-serif); font-size: 22px; font-weight: 700; letter-spacing: .02em; }
html body .age-gate__title { margin: 0 0 10px; padding: 0; background: none !important; border: 0 !important; color: var(--accent) !important; font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: .06em; }
html body .age-gate__desc { margin: 0 0 20px; color: var(--text); font-size: 14px; line-height: 1.8; }
html body .age-gate__actions { display: flex; flex-direction: column; gap: 12px; }
html body .age-gate__yes { display: block; width: 100%; padding: 14px 20px; border: 0 !important; border-radius: 999px !important; cursor: pointer; font-size: 16px; font-weight: 700;
  color: #fff !important; background: var(--cta-grad) !important; box-shadow: 0 6px 22px rgba(200, 22, 95, .35); }
html body .age-gate__yes:hover { filter: brightness(1.08); }
html body .age-gate__no { display: block; padding: 8px; color: var(--muted) !important; font-size: 13px; text-decoration: underline; }
html body .age-gate__note { margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
html body .age-gate__note a { color: var(--accent) !important; text-decoration: underline; }
/* ===== YOEN SKIN END ===== */