/* ===========================
   base.css  完全版
   =========================== */

/* =========================================================
   Base Theme Variables (Member / Admin)
   ========================================================= */

/* Default = 一般（青） */
:root {
  --accent: #3b82f6;         /* blue-500 */
  --accent-dark: #1e40af;    /* blue-900 */
  --accent-soft: #eff6ff;    /* blue-50 */
  --accent-border: #bfdbfe;  /* blue-200 */

  --text-main: #111827;
  --text-sub: #6b7280;
  --border-base: #d1d5db;
  --bg-soft: #f9fafb;

  /* 共通ピルボタン（緑） */
  --btn: #22c55e;        /* green-500 */
  --btn-dark: #15803d;   /* green-700 */
  --btn-soft: #dcfce7;   /* green-100 */
  --btn-border: #86efac; /* green-300 */
}

/* 幹事（薄い赤） */
body.is-admin {
  --accent: #f87171;         /* red-400 */
  --accent-dark: #dc2626;    /* red-600 */
  --accent-soft: #fef2f2;    /* red-50 */
  --accent-border: #fecaca;  /* red-200 */
}

/* =========================================================
   Reset / Base Elements
   ========================================================= */

body{
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Hiragino Sans",
    "Yu Gothic UI",
    "Microsoft YaHei",
    "PingFang SC",
    "Noto Sans CJK JP",
    sans-serif;
  margin: 0;                 /* ←最重要：上の余白を消す */
  padding: 0;
  color: var(--text-main);
  background: #fff;
}

a {
  text-decoration: none;
  color: var(--accent);
}
a:hover {
  color: var(--accent-dark);
}

hr {
  border: none;
  border-top: 1px solid var(--border-base);
  margin: 16px 0;
}

label {
  display: inline-block;
  min-width: 80px;
}

/* =========================================================
   Layout
   ========================================================= */

.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;              /* ←ページ左右の余白はここで持つ */
}

/* 固定バー分だけ下げる（今のままでOK） */
.container.has-fixed-topbar{
  padding-top: calc(56px + 16px);
}

.field {
  margin-bottom: 8px;
}

/* =========================================================
   Tables (base)
   ========================================================= */

table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 10px;
}

th,
td {
  border: 1px solid var(--border-base);
  padding: 4px 8px;
  font-size: 14px;
  text-align: center;
}

th {
  background: var(--bg-soft);
  font-weight: 600;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  border: none;
  background: none;
  cursor: pointer;
}

/* =========================================================
   Pill Buttons (Reusable)
   - modal の btn-primary を “正” として共通化
   ========================================================= */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 1px solid var(--btn-border);
  padding: 6px 18px;

  /* 互換性重視で固定色（元の「正」） */
  background: linear-gradient(180deg, #33d47b, #29b864);
  color: #ffffff;

  cursor: pointer;
  font-size: 1.05rem;
  /* font-weight: 600; */

  box-shadow: 0 3px 0 #1f8e4a;

  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.btn-pill:hover {
  background: linear-gradient(180deg, #2fc972, #25a95a);
  box-shadow: 0 4px 0 #1a783f;
  transform: translateY(-1px);
  color: #ffffff;  /* admin の a:hover 赤(--accent-dark)に上書きさせない */
}

.btn-pill:active {
  box-shadow: 0 1px 0 #1a783f;
  transform: translateY(1px);
}

/* ピルの視認性を少し上げたい場合（任意） */
/*
.btn-pill:focus-visible {
  outline: 3px solid rgba(34,197,94,0.25);
  outline-offset: 2px;
}
*/

/* =========================================================
   Utility
   ========================================================= */

/* 長いURLを折り返して表示 */
.wrap-url {
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* テーマ追従ボックス（URL表示など） */
.theme-box {
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  border-radius: 6px;
}

/* =========================================================
   Header Topbar (Reusable / Content-width)
   base.html の .topbar を想定
   ========================================================= */

.topbar{
  /* 背景は画面いっぱい（左右いっぱいに伸ばす） */
  width: 100%;
  margin: 0;

  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);

  border-radius: 0;
}

/* 固定：全幅で固定 */
.topbar--fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
}

/* 中身はページ本文(.container)と同じ幅で中央寄せ・パディングは維持 */
.topbar-inner{
  position: relative;        /* ハンバーガー時のドロップダウン配置基準 */
  max-width: 980px;
  margin: 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 0 16px;
}

.topbar-title{
  display: flex;
  align-items: center;
  min-width: 0;
}
.topbar-logo-link{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.topbar-wordmark{
  height: 24px;
  width: auto;
  display: block;
}

.topbar-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ハンバーガーボタン：通常時は非表示、狭幅でだけ表示 */
.topbar-hamburger{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;

  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.topbar-hamburger-bar{
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
/* 開いてる時の見た目（×に変形） */
.topbar-hamburger.is-open .topbar-hamburger-bar:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
.topbar-hamburger.is-open .topbar-hamburger-bar:nth-child(2){
  opacity: 0;
}
.topbar-hamburger.is-open .topbar-hamburger-bar:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

/* =========================================================
   狭幅時：トップバーアクションをドロップダウン化
   ========================================================= */
@media (max-width: 720px) {
  .topbar-hamburger{
    display: inline-flex;
  }
  .topbar-actions{
    /* 通常は隠す：ハンバーガーで開閉 */
    display: none;

    position: absolute;
    top: 100%;
    right: 8px;

    flex-direction: column;
    align-items: stretch;
    gap: 0;

    min-width: 160px;
    padding: 6px 0;

    background: var(--accent);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);

    z-index: 920;
  }
  .topbar-actions.is-open{
    display: flex;
  }
  .topbar-actions .topbar-link{
    padding: 10px 16px;
    border-radius: 0;
    text-align: left;
  }
  .topbar-actions .topbar-link:hover{
    background: rgba(255,255,255,0.12);
    text-decoration: none;
  }
  /* 縦並びリンク間の薄い区切り */
  .topbar-actions .topbar-link + .topbar-link{
    border-top: 1px solid rgba(255,255,255,0.18);
  }
}

/* =========================================================
   Page Topbar (Reusable / Content-width)
   ========================================================= */

.page-topbar{
  margin: 0 0 16px; /* 下のコンテンツとの間隔 */
}

/* 中央寄せ・コンテンツ幅制御 */
.page-topbar-inner{
  width: min(980px, calc(100% - 32px)); /* ← 既存コンテンツ幅に合わせる */
  margin: 0 auto;

  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* テーマカラーでベタ塗り */
  background: var(--accent);
  color: #fff;

  padding: 0 16px;

  /* ページ用なので角丸なし */
  border-radius: 0;

  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

/* タイトル */
.page-topbar-title{
  font-weight: 900;
  font-size: 18px;
  line-height: 1;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右側操作エリア */
.page-topbar-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 汎用ボタン（必要なページだけ使う） */
.page-topbar-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 36px;
  padding: 0 12px;

  color: #fff;
  text-decoration: none;
  font-weight: 800;

  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
}

.page-topbar-btn:hover{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.30);
}

/* =========================================================
   Section Head (title + right action)
   ========================================================= */

.section-head{
  display: flex;
  align-items: center;
  justify-content: space-between; /* ← 左にタイトル、右にボタン */
  gap: 12px;
  margin: 22px 0 12px;
}

/* ===== 共通の見出し（ヘルプ・戦績ページと統一） ===== */
/* ページ見出し（h1/h2 相当） */
.page-title{
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.3;
}
/* セクション見出し：左にティールの縦バー */
.section-title{
  font-size: 1.15rem;
  font-weight: 700;
  border-left: 4px solid #1f7a8c;
  padding-left: 10px;
  margin: 22px 0 12px;
  line-height: 1.35;
}
/* section-head 内ではバーは出すが、余白は section-head 側に任せる */
.section-head > .section-title{
  margin: 0;
}
/* サブ見出し（h3/h4 相当） */
.subsection-title{
  font-size: 1.02rem;
  font-weight: 700;
  color: #334155;
  margin: 16px 0 6px;
}

.section-head > .btn{
  flex: 0 0 auto; /* ボタンが潰れないように */
}

/* ===== URL box ===== */
.url-box { padding: 12px; }

.url-item { margin-bottom: 10px; }
.url-item:last-of-type { margin-bottom: 0; }

.url-label{
  font-weight: 700;
  margin-bottom: 4px;
}

/* 赤い四角ボタン（ピル禁止） */
.url-copy-btn.red-rect{
  float: right;                 /* ←回り込みの要 */
  margin-left: 10px;
  margin-top: 0px;

  border: 0;
  border-radius: 6px;           /* 四角寄り（角丸少し） */
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;

  color: #fff;
  background: #e74c3c;          /* テーマ赤 */
  box-shadow: 0 2px 6px rgba(231, 76, 60, 0.25);
}

.url-copy-btn.red-rect:hover{ filter: brightness(1.05); }
.url-copy-btn.red-rect:active{ transform: translateY(1px); }

/* URL本文：テキストボックス“風” だが枠線は出さない（今のビジュアル維持） */
.url-textbox{
  display: block;

  /* ★ 折り返し禁止 */
  white-space: nowrap;

  /* ★ はみ出したら横スクロールではなく、そのまま下に回り込ませる */
  overflow: hidden;
  text-overflow: clip;

  padding: 6px 8px;
  background: rgba(255,255,255,0.45);
  border-radius: 6px;

  font-size: 0.85rem;
  color: #444;
}

/* float解除（次のブロックに影響させない） */
.url-item::after{
  content: "";
  display: block;
  clear: both;
}

.url-note{
  margin-top: 8px;
  color: #666;
  font-size: 0.8rem;
}

/* =========================================
   Topbar links (force white text)
   ========================================= */
.topbar .topbar-link {
  color: #ffffff;
}

.topbar .topbar-link:hover {
  color: #ffffff;
  text-decoration: underline; /* ホバー時に分かりやすく */
}

/* =========================================
   Topbar admin badge → link と同じ見た目に
   ========================================= */
.topbar-title .topbar-admin-badge {
  font-weight: normal;          /* 太字をやめる */
  font-size: inherit;           /* 親（クラブ名）に合わせる */
  color: #ffffff;               /* リンクと同じ白 */
  margin-left: 6px;             /* 「-」の後に少し余白 */
}

/* もし既存CSSで bold が強制されている場合の保険 */
.topbar-admin-badge {
  font-weight: normal !important;
}

/* =========================================
   自動削除予告バナー（幹事モード時に表示）
   ========================================= */
.cleanup-warning-banner {
  background: #fdecec;          /* 薄い赤 */
  border: 1px solid #f5b7b7;
  border-left: 4px solid #c0392b;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 10px 0 14px;
  color: #6e1414;
  font-size: 0.92rem;
  line-height: 1.55;
}
.cleanup-warning-line + .cleanup-warning-line {
  margin-top: 2px;
}


/* サイトフッター（DeuceNet ワードマーク＋タグライン・アイコン無し） */
.site-footer {
  text-align: center;
  padding: 24px 16px 32px;
  margin-top: 32px;
  border-top: 1px solid #eee;
}
.site-footer-logo {
  height: 22px;
  width: auto;
  max-width: 88%;
  display: block;
  margin: 0 auto;
}
.site-footer-copyright {
  margin: 10px 0 0;
  color: #9aa6b2;
  font-size: 0.78rem;
  letter-spacing: 0.3px;
}