/* ============================================================
   SOFT HUB YOUTH : ホワイトベーステーマ
   style_v2.css / add8.css の後に読み込んで、配色だけを上書きする
   ============================================================ */
html:root {
  --bg-darkest:  #ffffff;               /* ヘッダー・フッター */
  --bg-dark:     #f3f6f9;               /* メイン背景 */
  --bg-card:     #ffffff;               /* カード背景 */
  --bg-card2:    #f1f4f7;               /* サブカード背景 */
  --bg-input:    #ffffff;               /* 入力欄 */
  --border:      #dfe4ea;
  --border-light:#cdd4dc;
  --text:        #1a2230;
  --text-light:  #3f4b5c;
  --text-muted:  #667385;
  --neon-yellow: #6c8c00;               /* 白地で読める黄緑 */
  --neon-cyan:   #0a79b0;
  --gold:        #b07d00;
  --shadow:      0 2px 12px rgba(20,34,56,0.08);
  --shadow-hover:0 8px 24px rgba(20,34,56,0.14);
  --shadow-glow: 0 0 16px rgba(232,64,64,0.12);
}
body { background: var(--bg-dark); color: var(--text); }

/* ---- ヘッダー ---- */
.site-header { background: #fff; box-shadow: 0 1px 10px rgba(20,34,56,0.10); border-bottom: 1px solid var(--border); }
.logo-link, .logo-link:hover { color: var(--text); }
.header-logo-catchcopy { color: #4a5668; }
.nav-link { color: var(--text-light); }
.nav-link:hover { color: var(--text); background: rgba(20,34,56,0.06); }
.hamburger span { background: #1a2230; }
.hamburger.open span:nth-child(1), .hamburger.open span:nth-child(3) { background: #1a2230; }

/* ---- フッター ---- */
.site-footer { background: #fff; color: var(--text-light); border-top: 1px solid var(--border); }
.site-footer a { color: var(--text-light); }
.site-footer a:hover { color: var(--text); }
.footer-sns-icon { color: #3f4b5c !important; }

/* ---- 共通パーツ ---- */
.hero-section::before { opacity: .6; }
.tab-btn:hover { background: var(--bg-card2); }
.tab-btn.active .tab-count { background: rgba(255,255,255,0.28); }
.status-closed { background: rgba(20,34,56,0.18); }
.share-x { background: #1a2230; color: #fff; border-color: #1a2230; }
.share-x:hover { background: #33405a; color: #fff; }
.team-url-link:hover { color: #fff; }
.admin-table tr:hover td { background: var(--bg-card2); }
.pickup-post-item { background: #f6f8fb; border-color: var(--border); }
.pickup-post-item label { color: var(--text-light); }
.pickup-order-input { background: #fff; color: var(--text); border-color: var(--border-light); }
#modalOverlay, .modal-overlay { background: rgba(20,34,56,0.55); }

/* ---- 左ボーダー付きカード等のホバー ---- */
.post-card { background: #fff; }
.post-card:hover { box-shadow: 0 6px 20px rgba(20,34,56,0.14); }

/* ---- スマホ下部ナビ ---- */
@media screen and (max-width: 768px) {
  .sp-bottom-nav, .bottom-nav, .mobile-bottom-nav { background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(20,34,56,0.10); }
}

/* ---- スマホ下部ナビ（add8.css の .sp-bottom-nav を上書き） ---- */
@media screen and (max-width: 768px) {
  .sp-bottom-nav { background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(20,34,56,0.10); }
  .sp-bottom-nav__item { color: #3f4b5c; border-right: 1px solid #e6eaef; }
  .sp-bottom-nav__item:active, .sp-bottom-nav__item:focus { background: #eef2f6; color: #1a2230; }
}

/* ---- トップ：ヒーロー右カード(画像上なので暗めガラスのまま文字は白) は維持 ---- */

/* ---- フォーム・入力 ---- */
input, select, textarea { color: var(--text); }
input::placeholder, textarea::placeholder { color: #8a95a5; }

/* ---- 汎用の白文字固定を読める色に ---- */
.detail-body, .detail-content, .post-body { color: var(--text); }
.f_bnr .inner .l p { color: var(--text); }
.f_bnr .inner .l p .c { color: #6c8c00; }
.f_bnr { border-color: var(--border); }

/* ---- 白文字固定になっていた見出し・本文を読める色に ---- */
.hero-title, .hero-desc { color: var(--text); }
.hero-title .hero-highlight { color: var(--neon-yellow); }
.sidebar-promo { color: var(--text); }
.sp-promo-block h3 { color: var(--text); }
.featured-title { color: var(--text); }
.footer-logo, .footer-logo-main { color: var(--text); }
.footer-nav-title { color: var(--text); border-bottom-color: var(--border); }
.footer-nav a, .footer-copy a { color: var(--text-muted); }
.footer-nav a:hover, .footer-copy a:hover { color: var(--text); }
.footer-bottom { border-top-color: var(--border); }
.footer-top { border-bottom-color: var(--border); }
a:hover { color: var(--text); }
.mobile-link:hover { color: var(--text); }
.btn-secondary:hover { color: var(--text); }
.auto-link:hover { color: var(--text); }

/* ---- ヒーロー画像上の訪問者バッジ・カードは画像の上なので暗いまま ---- */
.hero-visitor-badge-label, .hero-visitor-badge-unit { color: rgba(255,255,255,0.7); }

/* ---- 告知ページ(event.php) ---- */
.event-page-header { border-bottom-color: var(--border); }
.event-page-title { color: #8a7a00; }
.event-page-desc { color: var(--text-light); }
.event-type-item { background: #fff; border-color: var(--border); }
.event-type-item:hover { border-color: #d4c400; background: #fffbe0; }
.event-type-label { color: #8a7a00; }
.event-type-desc { color: var(--text-muted); }
.event-hero-banner { box-shadow: 0 4px 16px rgba(20,34,56,0.18); }
.event-post-btn { color: #1a1a2e; }

/* ===== ページ内インラインstyle(後読み)に勝つため html body で詳細度を上げる ===== */
html body .event-page-header { border-bottom-color: var(--border); }
html body .event-page-title { color: #8a7a00; }
html body .event-page-desc { color: var(--text-light); }
html body .event-type-item { background: #fff; border-color: var(--border); }
html body .event-type-item:hover { border-color: #d4c400; background: #fffbe0; }
html body .event-type-label { color: #8a7a00; }
html body .event-type-desc { color: var(--text-muted); }
html body .event-hero-banner { box-shadow: 0 4px 16px rgba(20,34,56,0.18); }

/* お問い合わせ・通報フォームの上部バナー：白ベース＋緑のアクセントライン */
html body .contact-banner,
html body .report-banner { background: #fff; border-bottom: 1px solid var(--border); border-top: 3px solid #6c8c00; }
html body .contact-banner-title,
html body .report-banner-title { color: var(--text); }
html body .contact-banner-desc,
html body .report-banner-desc { color: var(--text-light); }

/* ---- 管理画面(admin.php は style.css を読むため、入力欄などをここで上書き) ---- */
html body .admin-login .form-input,
html body .form-input, html body .form-select, html body .form-textarea { background: #fff; color: var(--text); border-color: var(--border-light); }
html body .form-label { color: var(--text-light); }
html body .admin-login a { color: #0a79b0; }

/* ===== PC版 メインビジュアル右側の説明カードを一時的に非表示（769px以上のみ） =====
   元に戻す場合は、下の @media ブロックごと削除（またはコメントアウト）してください。
   SP/TB(768px以下)の表示には影響しません。 */
@media screen and (min-width: 769px) {
  html body .main-content.top .main_v .main_copy { display: none; }
}
/* ===== /PC版 説明カード非表示 ===== */

/* ===== PC版 「会員登録不要で無料」バッジ（769px以上のみ）=====
   サイズはSOFT HUBと同じ(add8.css: 幅23vw)。位置のみYOUTHビジュアル用に調整(左下・サブコピーの下、画像の下端ぎりぎり)。 */
@media screen and (min-width: 769px) {
  html body .main-content.top .main_v .mv-free-badge-pc-wrap {
    left: 6.4vw;
    top: auto;
    bottom: 0.9vw;
  }
}

/* ===== スマホ/タブレット(768px以下)のみ: ヒーロー説明カードを下げる + 「会員登録不要で無料」バッジを中央・大きめ・カード近くに配置 ===== */
@media screen and (max-width: 480px) {
  html body .main-content.top .main_v .main_copy { margin-top: -7.5vw; }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  html body .main-content.top .main_v .main_copy { margin-top: -6vw; }
}
@media screen and (max-width: 768px) {
  /* 親要素に幅を直接指定(left:50%だと親の幅が半分に縮み、画像が小さくなるため)。SOFT HUB(58vw)より大きい63vw */
  html body .main-content.top .main_v .mv-free-badge {
    left: 50%;
    transform: translateX(-50%);
    bottom: 3.5%;
    width: 63vw;
  }
  html body .main-content.top .main_v .mv-free-badge .mv-free-badge-sp {
    width: 100%;
    max-width: none;
  }
}
@media screen and (max-width: 768px) {
  /* ヒーロー説明カードの背景を訪問者カウンター(.mv-visitor-badge)と同じ色に。文字色は変更なし */
  html body .main-content.top .main_v .main_right {
    background: rgba(10, 18, 30, 0.68);
  }
}
/* ===== /スマホ用 カード位置・バッジ ===== */

/* ===== 投稿数の数字・矢印: 薄い水色 #5cc8f5(縁取り・影なし、タイル背景は元のまま) ===== */
html body .stat-num,
html body .stat-arrow {
  color: #5cc8f5;
  text-shadow: none;
}
/* ===== /投稿数の数字 ===== */

/* ===== スマホ/タブレット: ヒーロー説明カードのソフトボールを明るく ===== */
@media screen and (max-width: 768px) {
  html body .main-content.top .main_v .ball { filter: brightness(1.85) saturate(1.3) contrast(1.05); }
}
/* ===== /ソフトボール ===== */

/* ===== お問い合わせ: 送信ボタンをサイト共通のCTA(赤・白文字)に統一 ===== */
html body .contact-submit-btn {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(232, 64, 64, 0.4);
}
html body .contact-submit-btn:hover {
  background: var(--primary-dark);
  color: #fff;
  box-shadow: 0 8px 28px rgba(232, 64, 64, 0.55);
}
/* ===== /お問い合わせ 送信ボタン ===== */

/* ===== ヘッダー「今すぐ投稿する」: ホバー時に白く抜けないよう赤系を維持 ===== */
html body .nav-link.nav-post-btn { background: var(--primary); color: #fff !important; }
html body .nav-link.nav-post-btn:hover {
  background: var(--primary-dark);
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(232, 64, 64, 0.5);
}
/* ===== /ヘッダー投稿ボタン ===== */

/* ===== NO IMAGE(画像なし)サムネイル: 薄い色に ===== */
html body .post-thumb--empty {
  background: linear-gradient(135deg, #f1f4f8 0%, #e6ebf2 100%);
  border-color: #dfe4ea;
}
html body .post-thumb--empty::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b6c0cf' fill-rule='evenodd'%3E%3Cpath d='M9 2 7.17 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-3.17L15 2H9zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10z M12 15.2a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body .post-thumb--empty::after { color: #aab5c4; }
html body .edit-image-frame.is-broken::after { color: #aab5c4; }
/* ===== /NO IMAGE ===== */