/* ============================================================
   SPOLOG - チーム掲示板 共通CSS (team-bbs.css)
   全チームBBSページで読み込む共通スタイル
   ============================================================ */
:root {
  --red: #E8001D; --red-dark: #B0001A; --red-pale: #FFF0F2;
  --black: #0f0f0f; --white: #ffffff;
  --gray-100: #f7f7f7; --gray-200: #efefef;
  --gray-400: #bbbbbb; --gray-600: #777777; --gray-800: #333333;
  --gold: #F0A500;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { padding-top:64px; background:var(--gray-100); color:var(--gray-800); font-family:'Noto Sans JP',sans-serif; }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(10,10,10,0.95); backdrop-filter:blur(12px); border-bottom:2px solid #E8001D; display:flex; align-items:center; justify-content:space-between; padding:0 2rem; height:64px; }
.nav-logo { display:flex; align-items:center; gap:8px; text-decoration:none; }
.nav-links { display:flex; gap:2rem; align-items:center; }
.nav-links a { color:#aaa; text-decoration:none; font-size:13px; font-weight:500; transition:color .2s; }
.nav-links a:hover { color:var(--red); }
.nav-links a.active { color:var(--white); }
.nav-share { display:flex; gap:6px; align-items:center; }
.nav-share-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:6px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:var(--white); text-decoration:none; transition:all .2s; font-size:19px; }
.nav-share-btn:hover { background:rgba(255,255,255,0.2); }
@media(max-width:1024px) { .nav-links { display:none; } }
@media(max-width:768px) { nav { padding:0 1rem; } }

/* AUTH BUTTONS */
.auth-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; border-radius:6px; font-size:13px; font-weight:700; cursor:pointer; border:none; font-family:'Noto Sans JP'; transition:all .2s; white-space:nowrap; }
.auth-btn i { font-size:19px; line-height:1; }
.auth-btn-login { background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.2); padding:0 14px; }
.auth-btn-login:hover { background:rgba(255,255,255,0.25); }
@media(max-width:768px) { .auth-btn-login .login-text { display:none; } .auth-btn-login { width:36px; padding:0; } }
.auth-btn-logout { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.2); width:36px; padding:0; }
.auth-btn-logout:hover { background:rgba(255,255,255,0.2); }
.auth-avatar { width:36px; height:36px; border-radius:6px; object-fit:cover; flex-shrink:0; }

/* AUTH MODAL */
.auth-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:2000; align-items:center; justify-content:center; }
.auth-modal-overlay.open { display:flex; }
.auth-modal { background:#fff; border-radius:16px; padding:1.75rem; max-width:380px; width:90%; position:relative; max-height:90vh; overflow-y:auto; }
.auth-modal-close { position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.2rem; cursor:pointer; color:#888; }
.auth-tabs { display:flex; gap:0; margin-bottom:1.25rem; border-bottom:2px solid #f0f0f0; }
.auth-tab { flex:1; background:none; border:none; font-size:14px; font-weight:700; font-family:'Noto Sans JP'; color:#bbb; padding:.6rem 0; cursor:pointer; position:relative; transition:color .2s; }
.auth-tab.active { color:#111; }
.auth-tab.active::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; background:#E8001D; }
.auth-oauth-group { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.auth-provider-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; border:1px solid #e0e0e0; background:#fff; font-family:'Noto Sans JP'; transition:all .2s; }
.auth-provider-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
.auth-provider-btn.google { border-color:#dadce0; }
.auth-provider-btn.google:hover { background:#f8f9fa; }
.auth-provider-btn.twitter { background:#000; color:#fff; border-color:#000; }
.auth-provider-btn.twitter:hover { background:#1a1a1a; }
.auth-divider { display:flex; align-items:center; gap:.75rem; margin:.75rem 0; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:#ebebeb; }
.auth-divider span { font-size:11px; color:#aaa; white-space:nowrap; }
.auth-field { margin-bottom:.75rem; }
.auth-label { display:block; font-size:11px; font-weight:700; color:#666; margin-bottom:.3rem; }
.auth-input { width:100%; padding:10px 12px; border:1.5px solid #e5e5e5; border-radius:8px; font-size:14px; font-family:'Noto Sans JP'; outline:none; transition:border-color .2s; box-sizing:border-box; }
.auth-input:focus { border-color:#E8001D; }
.auth-select { padding:9px 12px; color:#333; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:10px; }
.auth-error { font-size:12px; color:#E8001D; margin-bottom:.5rem; min-height:1.2em; }
.auth-submit-btn { width:100%; padding:12px; background:#E8001D; color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:700; font-family:'Noto Sans JP'; cursor:pointer; transition:all .2s; margin-top:.25rem; }
.auth-submit-btn:hover { background:#c0001a; }
.auth-submit-btn:disabled { background:#ccc; cursor:not-allowed; }
.auth-anon-note { font-size:10px; color:#aaa; text-align:center; margin-top:.75rem; line-height:1.7; }

/* HERO */
.sport-hero { background:var(--black); position:relative; overflow:hidden; padding:3rem 1.5rem 0; min-height:320px; display:flex; align-items:stretch; }
.sport-hero::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 30% 50%, rgba(232,0,29,0.08) 0%, transparent 70%); pointer-events:none; }
.sport-hero-inner { max-width:1400px; margin:0 auto; width:100%; position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end; }
.sport-hero-left { padding-bottom:2.5rem; }
.sport-tag { display:flex; align-items:center; gap:6px; color:var(--gray-400); font-size:14px; font-weight:500; letter-spacing:1px; margin-bottom:1rem; flex-wrap:wrap; }
.sport-tag a { color:var(--gray-400); text-decoration:none; }
.sport-tag a:hover { color:var(--white); }
.sport-tag span { color:var(--gray-600); }
.sport-hero h1 { font-family:'Bebas Neue'; font-size:clamp(2.8rem,8vw,5.5rem); color:var(--white); letter-spacing:0; line-height:0.9; margin-bottom:1rem; }
.sport-hero h1 .line-white { display:block; color:var(--white); }
.sport-hero h1 .line-red { display:block; color:var(--red); }
.sport-hero-sub { font-size:13px; color:rgba(255,255,255,0.4); margin-bottom:2rem; }
.hero-kpis { display:flex; gap:2rem; flex-wrap:wrap; margin-bottom:2rem; }
.hero-kpi { border-left:2px solid rgba(232,0,29,0.4); padding-left:1rem; }
.hero-kpi .kv { font-family:'Bebas Neue'; font-size:2rem; color:var(--white); line-height:1; }
.hero-kpi .kl { font-size:10px; color:rgba(255,255,255,0.4); margin-top:2px; font-weight:700; letter-spacing:1px; }
.sport-hero-char { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:1.5rem; gap:1rem; min-width:180px; }
.hero-actions { display:flex; flex-direction:column; gap:.5rem; width:100%; }
.hero-btn { display:flex; align-items:center; justify-content:center; gap:.4rem; padding:10px 14px; border-radius:6px; font-size:13px; font-weight:700; text-decoration:none; transition:all .2s; cursor:pointer; border:none; white-space:nowrap; font-family:'Noto Sans JP'; }
.hero-btn-primary { background:var(--red); color:#fff; border:1px solid var(--red); }
.hero-btn-primary:hover { background:#fff; color:#222; border-color:#fff; }
.hero-btn-secondary { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.15); }
.hero-btn-secondary:hover { background:rgba(255,255,255,0.14); color:var(--white); }

/* PAGE BODY */
.page-body { max-width:1450px; margin:0 auto; padding:1.5rem; display:grid; grid-template-columns:1fr 300px; gap:1.5rem; align-items:start; }

/* FORM */
.post-form-card { background:var(--white); border-radius:10px; border:1px solid var(--gray-200); overflow:hidden; margin-bottom:1.25rem; }
.post-form-head { padding:.875rem 1.25rem; border-bottom:1px solid var(--gray-200); background:var(--white); display:flex; align-items:center; gap:.5rem; }
.post-form-title { font-size:13px; font-weight:700; color:var(--gray-800); display:flex; align-items:center; gap:.5rem; }
.post-form-title i { color:var(--red); }
.post-form-body { padding:1rem 1.25rem; }
.form-row { margin-bottom:.75rem; }
.form-label { font-size:12px; font-weight:700; color:var(--gray-600); display:block; margin-bottom:.35rem; letter-spacing:.04em; }
.form-input { width:100%; padding:.7rem .875rem; border:1px solid var(--gray-200); border-radius:8px; font-family:'Noto Sans JP'; font-size:13px; color:var(--gray-800); transition:border .15s; box-sizing:border-box; }
.form-input:focus { outline:none; border-color:var(--red); }
.form-textarea { width:100%; padding:.7rem .875rem; border:1px solid var(--gray-200); border-radius:8px; font-family:'Noto Sans JP'; font-size:13px; color:var(--gray-800); resize:vertical; min-height:100px; transition:border .15s; box-sizing:border-box; line-height:1.7; }
.form-textarea:focus { outline:none; border-color:var(--red); }
.form-meta-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:.75rem; }
.char-count { font-size:11px; color:var(--gray-400); text-align:right; margin-top:.25rem; }
.form-note { font-size:11px; color:var(--gray-400); line-height:1.6; }
.submit-btn { background:var(--red); color:var(--white); border:none; padding:.75rem 2.5rem; font-family:'Noto Sans JP'; font-size:14px; font-weight:700; cursor:pointer; transition:all .2s; letter-spacing:.05em; clip-path:polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%); width:300px; border-radius:0; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; white-space:nowrap; }
.submit-btn:hover { background:var(--red-dark); transform:translateY(-1px); }
.submit-btn:disabled { background:var(--gray-400); cursor:not-allowed; }

/* SECTION HEADING */
.section-badge { background:var(--red); color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:2px; letter-spacing:.05em; display:inline-flex; align-items:center; gap:.3rem; }

/* POSTS */
.posts-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; width:100%; }
.post-count-badge { font-size:12px; font-weight:700; color:#fff; background:var(--red); border-radius:20px; padding:3px 12px; }
.sort-btn { padding:4px 12px; border-radius:20px; font-size:12px; border:1px solid var(--gray-200); background:var(--white); cursor:pointer; transition:all .15s; font-family:'Noto Sans JP'; }
.sort-btn.active { background:var(--red); color:var(--white); border-color:var(--red); }
.post-item { background:var(--white); border-radius:10px; border:1px solid var(--gray-200); padding:1rem 1.25rem; margin-bottom:.75rem; transition:all .2s; position:relative; overflow:hidden; }
.post-item:hover { border-color:#ddd; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.post-item.new-post { animation:highlightPost .8s ease; }
@keyframes highlightPost { 0%{background:#FFF0F2;border-color:var(--red);} 100%{background:var(--white);border-color:var(--gray-200);} }
.post-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.625rem; }
.post-num { font-family:'Bebas Neue'; font-size:1.1rem; color:var(--gray-400); line-height:1; }
.post-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }
.post-name { font-size:13px; font-weight:700; color:var(--gray-800); }
.delete-btn { color:#e53935 !important; }
.delete-btn:hover { background:#fff0f0 !important; }
.post-avatar-img { width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.post-time { font-size:11px; color:var(--gray-400); margin-left:auto; }
.post-body { font-size:14px; color:#444; line-height:1.85; margin-bottom:.625rem; white-space:pre-wrap; word-break:break-word; }
.post-actions { display:flex; gap:.5rem; align-items:center; }
.post-action-btn { background:none; border:1px solid var(--gray-200); border-radius:20px; padding:6px 14px; font-size:13px; color:#888; cursor:pointer; transition:all .2s; font-family:'Noto Sans JP'; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.post-action-btn:hover { border-color:var(--red); color:var(--red); }
.post-num-badge { padding:6px 14px; font-size:13px; border:1px solid var(--gray-200); border-radius:20px; color:#888; display:inline-flex; align-items:center; gap:5px; user-select:none; }
@media(max-width:600px) { .post-action-btn { padding:4px 10px; font-size:11px; } .post-num-badge { padding:4px 10px; font-size:11px; } }
.post-action-btn.liked { background:rgba(232,0,29,0.08); border-color:var(--red); color:var(--red); }
.reply-ref { font-size:12px; color:var(--red); cursor:pointer; margin-bottom:.4rem; display:inline-block; }
.reply-ref:hover { text-decoration:underline; }
.reply-indicator { display:none; background:var(--red-pale); border-left:3px solid var(--red); padding:.4rem .75rem; font-size:12px; color:var(--red); border-radius:4px; margin-bottom:.5rem; align-items:center; justify-content:space-between; }
.reply-indicator.show { display:flex; }
.no-posts { text-align:center; padding:3rem; color:var(--gray-400); font-size:14px; }
.no-posts i { font-size:2rem; display:block; margin-bottom:.75rem; opacity:.4; }

/* POST MODAL */
.post-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center; }
.post-modal-overlay.open { display:flex; }
.post-modal { background:#fff; border-radius:12px; padding:2.5rem 2.5rem 2rem; max-width:560px; width:90%; max-height:85vh; overflow-y:auto; position:relative; }
.post-modal-close { position:absolute; top:1.2rem; right:1.2rem; background:none; border:none; font-size:1.2rem; cursor:pointer; color:#888; line-height:1; }

/* SIDEBAR */
.sidebar { display:flex; flex-direction:column; gap:1rem; }
.side-card { background:var(--white); border-radius:10px; border:1px solid var(--gray-200); overflow:hidden; }
.side-card-head { padding:.75rem 1rem; border-bottom:1px solid var(--gray-200); }
.side-card-title { font-size:12px; font-weight:700; color:var(--gray-800); display:flex; align-items:center; gap:.4rem; }
.side-card-title::before { content:''; width:3px; height:13px; background:var(--red); border-radius:2px; display:inline-block; }
.side-card-body { padding:.75rem 1rem; }
.rank-list { display:flex; flex-direction:column; }
.rank-item { display:flex; align-items:center; gap:.5rem; padding:.45rem .75rem; border-bottom:1px solid var(--gray-200); text-decoration:none; color:#333; position:relative; transition:padding-left .15s, color .15s; }
.rank-item::after { content:''; position:absolute; inset:0; background:var(--red-pale); opacity:0; transition:opacity .15s; }
.rank-item:hover::after { opacity:1; }
.rank-item:hover { color:var(--red); padding-left:1rem; }
.rank-item:last-child { border-bottom:none; }
.rank-num { font-family:'Bebas Neue'; font-size:1.05rem; color:var(--gray-400); width:18px; flex-shrink:0; position:relative; z-index:1; text-align:center; }
.rank-item:nth-child(1) .rank-num { color:var(--gold); }
.rank-item:nth-child(2) .rank-num { color:#9e9e9e; }
.rank-item:nth-child(3) .rank-num { color:#a0724a; }
.rank-logo { width:24px; height:24px; object-fit:contain; position:relative; z-index:1; flex-shrink:0; }
.rank-name { font-size:11px; font-weight:700; flex:1; position:relative; z-index:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-count { font-size:11px; color:#555; font-weight:700; white-space:nowrap; position:relative; z-index:1; display:inline-flex; align-items:center; gap:3px; background:#eee; padding:2px 8px; border-radius:20px; }
.recent-list { display:flex; flex-direction:column; }
.recent-item { display:flex; align-items:center; gap:.5rem; padding:.45rem .75rem; border-bottom:1px solid var(--gray-200); cursor:pointer; position:relative; transition:padding-left .15s, color .15s; }
.recent-item::after { content:''; position:absolute; inset:0; background:var(--red-pale); opacity:0; transition:opacity .15s; }
.recent-item:hover::after { opacity:1; }
.recent-item:hover { color:var(--red); padding-left:1rem; }
.recent-item:last-child { border-bottom:none; }
.recent-item a { font-size:11px; font-weight:700; color:#333; text-decoration:none; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; z-index:1; }
.recent-item:hover a { color:var(--red); }
.recent-item img, .recent-item > div:first-child { position:relative; z-index:1; flex-shrink:0; }
.recent-meta { font-size:10px; color:var(--gray-400); margin-top:1px; position:relative; z-index:1; }

.related-link { display:flex; align-items:center; gap:.5rem; padding:.5rem; border-radius:6px; font-size:12px; font-weight:700; color:var(--gray-800); text-decoration:none; transition:all .15s; border:1px solid var(--gray-200); margin-bottom:.5rem; }
.related-link:last-child { margin-bottom:0; }
.related-link:hover { background:var(--red-pale); color:var(--red); border-color:var(--red); }
.related-link i { font-size:13px; color:var(--red); width:16px; text-align:center; }

/* TOAST */
.toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(20px); background:var(--gray-800); color:var(--white); padding:.625rem 1.25rem; border-radius:20px; font-size:13px; font-weight:700; opacity:0; transition:all .3s; z-index:300; pointer-events:none; white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* PAGINATION */
.pagination { display:flex; gap:.35rem; justify-content:center; margin-top:1rem; flex-wrap:wrap; }
.page-btn { padding:6px 12px; border-radius:6px; border:1px solid var(--gray-200); background:var(--white); font-size:12px; font-weight:700; cursor:pointer; font-family:'Noto Sans JP'; transition:all .15s; }
.page-btn.active { background:var(--red); color:var(--white); border-color:var(--red); }
.page-btn.disabled { opacity:.4; cursor:not-allowed; }

/* REPORT MODAL */
.report-label { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border:1px solid var(--gray-200); border-radius:8px; cursor:pointer; font-size:13px; transition:all .15s; }
.report-label:hover { background:#fff0f2; border-color:var(--red); }
.report-label input:checked + span { color:var(--red); font-weight:700; }

/* HAMBURGER */
#spolog-hamburger-btn { display:none; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:6px; color:#fff; font-size:18px; cursor:pointer; width:36px; height:36px; align-items:center; justify-content:center; padding:0; transition:all .2s; flex-shrink:0; }
#spolog-hamburger-btn:hover { background:rgba(255,255,255,0.2); }
@media(max-width:1024px) { #spolog-hamburger-btn { display:inline-flex; } }
.nav-links.sp-open { display:flex!important; flex-direction:column; align-items:stretch; position:fixed; top:64px; left:0; right:0; background:#111; z-index:1500; padding:.25rem 0; gap:0; border-top:1px solid rgba(255,255,255,0.12); box-shadow:0 8px 32px rgba(0,0,0,.5); }
.nav-links.sp-open a { padding:1rem 1.5rem; border-bottom:1px solid rgba(255,255,255,0.07); font-size:15px!important; color:#ddd!important; display:block; }
.nav-links.sp-open a:last-child { border-bottom:none; }
.nav-links.sp-open a:hover { background:rgba(255,255,255,0.06); color:#fff!important; }
.nav-links.sp-open a.active { color:#fff!important; }

/* RESPONSIVE */
@media(max-width:900px) { .page-body { grid-template-columns:1fr; } .sidebar { order:2; } }
@media(max-width:768px) {
  .sport-hero { padding:2.5rem 1rem 0; }
  .sport-hero-inner { display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem; }
  .sport-hero-left { padding-bottom:0; width:100%; }
  .hero-kpis { margin-bottom:0; gap:1.25rem; }
  .sport-hero-char { min-width:unset; width:100%; padding-bottom:1.5rem; align-items:stretch; }
  .hero-actions { flex-direction:column; width:100%; }
  .hero-btn { width:100%; justify-content:center; }
  .submit-btn { width:100%; clip-path:none; border-radius:8px; }
  .form-meta-row { grid-template-columns:1fr; }
}
@media(max-width:768px){input,textarea,select{font-size:16px !important;}}