/* =====================================================================
   tarotnow.net — 掲示板（jp.pyol.net）と同じ見た目にする共通テーマ（2026-10-07）

   ・各ページの CSS の「あと」に読み込み、色・角丸・影・文字だけを上書きする
   ・HTML の並び、JS が使う ID・クラス、画像・動画、カードの大きさ・めくる動きは変えない
   ・明るい画面／暗い画面は端末の設定で自動に切り替わる（掲示板と同じ）
   ・アプリごとの CSS が !important や style 属性を使っているところは、こちらも !important で上書きする
   ===================================================================== */

/* ---- 色（掲示板 jp.pyol.net/assets/app.css と同じ値） ----------------------- */
:root{
  --bg:#eef1fb;--ink:#1c2242;--ink2:#4a5375;--ink3:#7b83a3;
  --surface:rgba(255,255,255,.82);--surface2:#ffffff;--surface3:#f4f6ff;
  --line:rgba(76,88,160,.15);--head-bg:rgba(246,247,255,.78);
  --p1:#6b7dff;--p2:#9a6bff;--p3:#57b0ff;--orange:#ff9d5c;--green:#3fcf8c;--red:#e5484d;
  --pink:#d9467f;
  --shadow:0 12px 34px rgba(76,88,160,.14);--shadow-s:0 4px 14px rgba(76,88,160,.10);
  --r:22px;
  --grad:linear-gradient(135deg,var(--p1),var(--p2));
  --font:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Yu Gothic UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1330;--ink:#eaedff;--ink2:#b9bfe2;--ink3:#8d94bb;
  --surface:rgba(30,36,80,.72);--surface2:#1d2352;--surface3:#232a60;
  --line:rgba(150,160,255,.16);--head-bg:rgba(15,19,48,.78);
  --pink:#ff8ac1;
  --shadow:0 12px 34px rgba(0,0,0,.38);--shadow-s:0 4px 14px rgba(0,0,0,.30);
}}
html{color-scheme:light dark!important;background:var(--bg)!important}

/* ---- 全体 ------------------------------------------------------------- */
html body{
  background:var(--bg)!important;background-image:none!important;color:var(--ink)!important;
  font-family:var(--font)!important;font-feature-settings:"palt";
  -webkit-font-smoothing:auto;
}
body:lang(ko){word-break:keep-all}
html body h1,html body h2,html body h3,html body h4{color:var(--ink);text-shadow:none}
html body .muted,html body .card.muted,html body .card.note{color:var(--ink3)!important}
html body ::placeholder{color:var(--ink3)!important;opacity:1}
html body :where(a,button,[role="button"],input,textarea,select):focus-visible{
  outline:2px solid rgba(107,125,255,.55)!important;outline-offset:2px;box-shadow:none!important}

/* ---- ヘッダー（掲示板と同じ：すりガラス・ロゴ・言語の切り替え・メニュー） ------------- */
html body .site-header,html body .simple-header{
  background:var(--head-bg)!important;color:var(--ink)!important;
  backdrop-filter:saturate(1.4) blur(14px)!important;-webkit-backdrop-filter:saturate(1.4) blur(14px)!important;
  border-bottom:1px solid var(--line)!important;box-shadow:none!important;
}
html body .site-header .brand,html body .brand{
  color:var(--ink)!important;font-weight:800!important;font-size:1.02rem!important;letter-spacing:.02em!important;gap:.6rem!important;
}
/* ロゴ（白い天使）は、掲示板のアイコンと同じ角丸の四角に入れる（明るい画面でも見えるように） */
html body .site-header .brand img,html body .brand img{
  width:40px!important;height:40px!important;padding:3px;border-radius:11px!important;
  background:var(--grad)!important;box-shadow:var(--shadow-s);object-fit:contain;
}
/* 言語の切り替え（掲示板と同じ、ひとつながりのボタン） */
html body .lang-switch:not(.centered),html body .site-header .menu-right,html body .site-header .lang-list,
html body .lang-switch.centered,html body .menu-panel .chip-row{
  gap:0!important;border:1px solid var(--line)!important;border-radius:999px!important;overflow:hidden;
  background:var(--surface2)!important;padding:0!important;flex-wrap:nowrap!important;
}
html body .site-header .lang-list{display:none}
/* 言語の切り替えは右（メニューの左隣）にそろえる（掲示板と同じ） */
html body .site-header>.lang-switch{margin-left:auto!important;margin-right:8px!important}
@media (max-width:840px){html body .site-header .lang-list{display:flex!important;width:max-content;margin-left:auto}}
html body .lang-switch.centered{display:flex!important;width:max-content;margin:0 auto}
html body .lang-switch a,html body .site-header .menu-right .chip,html body .site-header .lang-list .chip,html body .lang-switch .chip{
  display:inline-flex!important;align-items:center;justify-content:center;
  height:auto!important;min-width:0!important;padding:.3rem .75rem!important;margin:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  color:var(--ink2)!important;font-size:.8rem!important;font-weight:700!important;letter-spacing:.02em!important;line-height:1.4!important;
  text-decoration:none!important;
}
html body .lang-switch a:hover,html body .site-header .chip:hover{background:var(--surface3)!important}
html body .lang-switch a.is-active,html body .site-header .chip.is-active,html body .lang-switch .chip.is-active{
  background:var(--grad)!important;color:#fff!important;
}
/* ハンバーガー */
html body .hamburger,html body .menu-toggle{
  background:transparent!important;border:0!important;border-radius:999px!important;box-shadow:none!important;
}
html body .hamburger:hover,html body .menu-toggle:hover{background:var(--surface3)!important}
html body .hamburger span,html body .menu-toggle span{background:var(--ink)!important}
/* メニュー（開いたとき） */
html body .menu-panel{
  background:var(--surface2)!important;border:1px solid var(--line)!important;border-radius:18px!important;
  box-shadow:var(--shadow)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:8px!important;
}
html body .menu-panel ul{padding:0!important;gap:2px!important}
html body .menu-panel a{
  color:var(--ink)!important;background:transparent!important;border:0!important;box-shadow:none!important;
  font-weight:600!important;border-radius:12px!important;padding:12px 14px!important;filter:none!important;
}
html body .menu-panel a:hover{background:var(--surface3)!important}
html body .menu-panel .menu-lang{border-top:1px solid var(--line)!important}
@media (max-width:840px){
  /* タロット：スマホのメニューは画面の左右いっぱいだったので、少し内側に */
  html body.has-fixed-header .menu-panel{left:10px!important;right:10px!important}
}

/* ---- 動画（ヒーロー）はそのまま。下の背景との境目だけなじませる ------------------- */
html body .about-hero{background:#0f1330}

/* ---- 中身の入れ物 ------------------------------------------------------- */
html body .contact-section,html body .hero-intro,html body .brandlist-section,html body main,html body .romance-app{
  background:transparent!important;color:var(--ink)!important;border-bottom:0!important;
}
html body .card,html body .pz-card,html body .result-card,html body .card-box,html body .contact-inner,
html body .policy-card,html body .brand-card{
  background:var(--surface2)!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;border-radius:var(--r)!important;
  box-shadow:var(--shadow-s)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html body .contact-inner{padding:clamp(18px,3vw,28px)!important}
html body .card h2,html body .card h3,html body .pz-h2,html body .board h2,html body .result-card h2,html body .result-card h3{color:var(--ink)!important}

/* ---- ボタン（掲示板と同じ：主ボタンは紫のグラデーション、ほかは白い枠つき） ---------- */
html body .btn,html body .btn-primary,html body .caption .cta,html body #pz-viewBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--grad)!important;color:#fff!important;border:0!important;border-radius:999px!important;
  box-shadow:0 10px 24px rgba(107,125,255,.32)!important;font-weight:700!important;letter-spacing:.02em!important;
  text-decoration:none!important;filter:none!important;backdrop-filter:none!important;white-space:nowrap;
}
html body .btn:hover,html body .btn-primary:hover,html body .caption .cta:hover{filter:brightness(1.06)!important}
html body .btn[disabled],html body .btn:disabled,html body .btn-primary:disabled{opacity:.5!important;box-shadow:none!important}
html body .btn.ghost,html body .btn-ghost,html body #backLink,html body #btn-reset,html body #btn-back,
html body .pz-back-site,html body .pz-nav .pz-btn,html body .menu-item{
  background:var(--surface2)!important;color:var(--ink)!important;border:1px solid var(--line)!important;
  border-radius:999px!important;box-shadow:none!important;font-weight:700!important;text-decoration:none!important;
}
html body .btn.ghost:hover,html body .btn-ghost:hover,html body #backLink:hover,html body #btn-reset:hover,html body #btn-back:hover,
html body .pz-back-site:hover,html body .pz-nav .pz-btn:hover{background:var(--surface3)!important;filter:none!important}
/* 「いいね！」は控えめに */
html body .btn.like-btn{background:rgba(255,157,92,.14)!important;color:#c45f1c!important;box-shadow:none!important;border:1px solid rgba(255,157,92,.45)!important}
@media (prefers-color-scheme:dark){html body .btn.like-btn{color:#ffb78a!important}}
html body .like-count{color:var(--p1)!important}

/* ---- 入力欄 ------------------------------------------------------------ */
html body input[type=text],html body input[type=email],html body input[type=number],html body input[type=search],
html body textarea,html body select,html body #topicInput,html body .field input,html body .field textarea,html body .q-form textarea,
html body .dob-row select{
  background:var(--surface2)!important;color:var(--ink)!important;border:1px solid var(--line)!important;
  border-radius:12px!important;box-shadow:none!important;font-family:inherit!important;
  color-scheme:light dark!important;
}
html body input:focus,html body textarea:focus,html body select:focus{
  outline:2px solid rgba(107,125,255,.45)!important;outline-offset:1px;border-color:var(--p1)!important;background:var(--surface2)!important;
}
html body select option,html body select optgroup{color:var(--ink)!important;background:var(--surface2)!important}
html body .label,html body .field label,html body .q-form label,html body .sex-row label{color:var(--ink)!important}
html body input[type=radio],html body input[type=checkbox]{accent-color:var(--p1)}

/* ---- 読み込み中・点滅 ----------------------------------------------------- */
html body .spinner,html body .pz-spinner,html body .loading .spinner{
  border-color:var(--line)!important;border-top-color:var(--p1)!important;box-shadow:none!important}
html body .blink,html body .pz-blink,html body .blink-pink,html body .progress--blink,html body .reading-indicator{
  color:var(--pink)!important;text-shadow:none!important}

/* ---- フッター・SNS ------------------------------------------------------- */
html body .footer{background:transparent!important;color:var(--ink3)!important;border-top:1px solid var(--line)!important;padding-top:18px}
html body .footer a{color:var(--p1)!important}
html body .footer-copyright{color:var(--ink3)!important}
html body .social-links h4{color:var(--ink)!important}
html body .social-btn{background:var(--surface2)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-s)!important}
html body .social-btn svg{fill:var(--ink2)!important;color:var(--ink2)}
html body .social-btn:hover{background:var(--grad)!important;border-color:transparent!important}
html body .social-btn:hover svg{fill:#fff!important;color:#fff}

/* =====================================================================
   アプリごと
   ===================================================================== */

/* ---- ポータル（トップ）：スライドの写真と文字はそのまま。ボタンだけ掲示板の形に ------------- */
html body .hero .caption h2,html body .hero .caption p{color:#fff}
html body .hero .nav{background:rgba(15,19,48,.38)!important}

/* ---- タロット ----------------------------------------------------------- */
html body .wrap .head h1{color:var(--ink)!important}
html body .caption{color:var(--ink2)!important;text-shadow:none!important}
html body .hero .caption{color:#fff!important}
html body .title{color:var(--ink)!important;text-shadow:none!important}
html body .chosen h3,html body .chosen-item .cap{color:var(--ink2)!important}
html body .reading{
  background:var(--surface3)!important;color:var(--ink)!important;border:1px solid var(--line)!important;box-shadow:none!important;border-radius:16px!important}
html body .foot{color:var(--ink3)!important}
/* カードの影は紫に（画像の大きさ・めくる動きは変えない） */
html body .slot img,html body .chosen-item .thumb img,html body .wrap .face{
  box-shadow:0 6px 16px rgba(76,88,160,.22)!important}
html body .cards.slots-locked .slot img{box-shadow:0 4px 10px rgba(76,88,160,.14)!important}

/* ---- 12星座（entertainment）・今日の運勢（fortune_today） ------------------------- */
html body .item{
  background:var(--surface3)!important;border:1px solid var(--line)!important;border-left:6px solid var(--p1)!important;
  border-radius:14px!important;box-shadow:none!important}
html body .item h3{color:var(--ink)!important}
html body .desc,html body .item .desc{color:var(--ink2)!important}
html body .step-title,html body .page-title{color:var(--ink)!important}
html body .simple-header{padding-bottom:4px}
html body .actions--sticky{background:linear-gradient(180deg,transparent,var(--surface2))!important}
html body .cards--two .face{border-color:var(--line)!important}

/* ---- AI性格診断（personality） -------------------------------------------- */
html body #pquiz{--pz-text:var(--ink);--pz-muted:var(--ink3);--pz-border:var(--line);--pz-primary:var(--p1)}
html body .pz-title{color:var(--ink)!important}
html body .pz-sub,html body .pz-qno,html body .pz-footnote,html body .pz-nav>div{color:var(--ink3)!important}
html body .pz-qtxt{color:var(--ink)!important}
html body .pz-progress{background:var(--surface3)!important;border:1px solid var(--line)!important}
html body .pz-bar{background:var(--grad)!important}
html body button.pz-btn{border-radius:999px!important;box-shadow:none!important;font-weight:700}
html body .pz-btns .pz-b1{background:rgba(107,125,255,.16)!important;color:var(--ink)!important;border:1px solid rgba(107,125,255,.40)!important}
html body .pz-btns .pz-b2{background:var(--surface3)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
html body .pz-btns .pz-b3{background:rgba(154,107,255,.14)!important;color:var(--ink)!important;border:1px solid rgba(154,107,255,.38)!important}
html body .pz-btns .pz-btn:hover{filter:brightness(1.03)!important}
html body .pz-item{background:var(--surface3)!important;border-left:6px solid var(--p1)!important;box-shadow:none!important}
html body .pz-item h3{color:var(--ink)!important}
html body #pz-answersList{color:var(--ink2)}
html body .pz-ripple{background:var(--p1)!important;mix-blend-mode:normal!important;opacity:.18}

/* ---- 相性診断（compatibility） -------------------------------------------- */
html body .contact-inner h1{color:var(--ink)!important}
html body .contact-lead,html body .count,html body .note{color:var(--ink3)!important}
html body .field.required label span{color:var(--red)!important}
html body .field .err{color:var(--red)!important}
html body .result-card p{color:var(--ink2)}
html body .big-score{
  background:var(--surface3)!important;border:1px solid var(--line)!important;color:var(--p1)!important;
  background-image:none!important}

/* ---- 恋愛TAROT（romance） ------------------------------------------------ */
html body .hero-intro h1{color:var(--ink)!important}
html body .hero-intro p,html body .hint,html body .progress{color:var(--ink3)!important}
html body .hero-intro p b{color:var(--ink)}
html body .card-frame{background:var(--surface3)!important;box-shadow:0 8px 20px rgba(76,88,160,.22)!important}
html body .card-slot .label{background:var(--surface2)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
html body .result>h2{color:var(--ink)!important}
html body .answer{background:var(--surface2)!important;color:var(--ink)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-s)!important}
html body .answer p{color:var(--ink)!important}
html body .answer code{background:var(--surface3)!important;border-color:var(--line)!important}
html body .answer-actions .btn-ghost{border-color:var(--line)!important}

/* ---- ご案内（about）・ブランド一覧 ---------------------------------------- */
html body .about-block--altA{background:var(--surface2)!important;color:var(--ink)!important}
html body .about-block--altB{background:var(--bg)!important;color:var(--ink)!important}
html body .about-block__text h2{color:var(--ink)!important}
html body .about-block__text p,html body .brand-card__text{color:var(--ink2)!important}

/* ---- 規約・ポリシー（tarot/legal） ---------------------------------------- */
html body header.site-header .site-title{color:var(--ink)!important}
html body .policy-card a,html body .policy-body a{color:var(--p1)!important}
html body .policy-title{color:var(--ink)!important}

/* 相性診断：生年月日の3つの欄がスマホで枠からはみ出さないように */
html body .dob-row{min-width:0}
html body .dob-row select{min-width:0!important;flex:1 1 0;padding-left:.55rem!important;padding-right:.3rem!important}

/* メニュー：いま開いているページ */
html body .menu-panel a[aria-current=page]{background:var(--surface3)!important;color:var(--p1)!important}

/* ---- 掲示板（jp.pyol.net）への案内：占いの下のバナーと、メニューの「掲示板」（2026-10-07） ---------- */
html body .bbs-banner-wrap{display:block!important;max-width:760px!important;margin:28px auto 32px!important;padding:0 16px!important;box-sizing:border-box!important;clear:both;text-align:left!important}
html body .wrap .bbs-banner-wrap,html body .container .bbs-banner-wrap{padding:0!important}
html body a.bbs-banner{
  display:flex!important;flex-direction:column;overflow:hidden;border-radius:var(--r)!important;
  background:var(--surface2)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important;
  color:var(--ink)!important;text-decoration:none!important;transition:transform .18s ease,box-shadow .18s ease;
}
html body a.bbs-banner:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(76,88,160,.24)!important}
html body .bbs-banner .bbs-pic{position:relative;display:block;aspect-ratio:3/1;background:#141a3f;overflow:hidden}
html body .bbs-banner .bbs-pic>img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;border-radius:0!important;margin:0!important}
html body .bbs-banner .bbs-logo{position:absolute;left:14px;bottom:12px;display:flex;align-items:center;gap:10px;color:#fff!important;font-weight:800;font-size:1.2rem;letter-spacing:.01em;text-shadow:0 2px 10px rgba(0,0,0,.6)}
html body .bbs-banner .bbs-logo img{width:44px!important;height:44px!important;border-radius:11px!important;box-shadow:0 4px 12px rgba(0,0,0,.35);margin:0!important}
html body .bbs-banner .bbs-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px}
html body .bbs-banner .bbs-tag{align-self:flex-start;padding:3px 11px;border-radius:999px;background:var(--grad);color:#fff!important;font-size:.75rem;font-weight:800;letter-spacing:.02em}
html body .bbs-banner .bbs-title{font-size:1.14rem;font-weight:800;line-height:1.45;color:var(--ink)!important}
html body .bbs-banner .bbs-desc{font-size:.9rem;line-height:1.75;color:var(--ink2)!important}
html body .bbs-banner .bbs-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;padding:12px 22px;border-radius:999px;
  background:var(--grad);color:#fff!important;font-weight:800;font-size:1rem;white-space:nowrap;box-shadow:0 8px 20px rgba(107,125,255,.35);
}
html body .bbs-banner .bbs-btn svg{width:17px;height:17px;flex:none}
@media (min-width:720px){
  html body a.bbs-banner{flex-direction:row}
  html body .bbs-banner .bbs-pic{flex:0 0 42%;aspect-ratio:auto;min-height:230px}
  html body .bbs-banner .bbs-body{justify-content:center;padding:22px 26px}
  html body .bbs-banner .bbs-btn{align-self:flex-start}
}
/* メニューの「掲示板」：別サイト（新しいタブ）なので色と ↗ で分ける */
html body .menu-panel a.menu-bbs{color:var(--p1)!important;font-weight:800!important}
html body .menu-panel a.menu-bbs::after{content:"↗";margin-left:.35em;font-size:.92em}
html body .menu-panel li:has(>a.menu-bbs){border-top:1px solid var(--line);margin-top:4px;padding-top:4px}