/*
 * 2026年デザインリニューアル用スタイル（アプリ画面・フォーム）
 * coding2026/menu.css をそのまま取り込み（画像パスのみテーマ内に変更）
 */
/* ===================== 大会運営者メニュー (app screen) ===================== */
:root {
  --navy: var(--blue-700);
  --menu-bg: #fbfbfb;
  --card-radius: 14px;
  --cal-green: #2fa96b;
  --cal-red: #e2574c;
  /* ボタンカラー: 次へ進む=ロゴカラー / 取り消せない操作=赤 / それ以外=黄色 */
  --btn-next: var(--blue-700);
  --btn-danger: #D32F2F;
  --btn-other: linear-gradient(90deg, #ffe17a 0%, var(--yellow) 100%);
}

body.menu-page {
  background: var(--menu-bg);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 0;
}

.app-frame {
  width: 100%;
  min-height: 100vh;
  background: var(--menu-bg);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(11, 32, 79, .18);
}

@media (min-width: 540px) {
  body.menu-page { padding: 24px 0; background: var(--menu-bg); }
  .app-frame { max-width: 430px; box-shadow: none; }
}

@media (min-width: 1024px) {
  .app-frame { max-width: 1100px; }
}

/* ---------- header ---------- */
.app-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--navy);
}
.app-logo { height: 22px; width: auto; filter: brightness(0) invert(1); }
.app-header-title { font-size: 13.5px; font-weight: 700; color: #fff; text-align: center; white-space: nowrap; }
.header-actions { grid-column: 3; display: flex; align-items: center; gap: 14px; justify-self: end; }
.icon-btn {
  background: none;
  border: none;
  padding: 0;
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-btn img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.header-user { display: flex; align-items: center; gap: 6px; }
.header-avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden; background: #fff; }
.header-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.header-username { font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.back-btn {
  grid-column: 1;
  background: none;
  border: none;
  padding: 0;
  width: 28px; height: 28px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.back-btn svg { width: 22px; height: 22px; }

/* ---------- top tabs ---------- */
.menu-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: #fff;
}
.menu-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px;
  border-radius: 10px;
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  transition: background .15s ease, color .15s ease;
}
.menu-tab-icon {
  width: 26px; height: 26px;
  background-color: var(--blue-700);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color .15s ease;
}
.menu-tab-icon--member { -webkit-mask-image: url("../img/2026/35.png"); mask-image: url("../img/2026/35.png"); }
.menu-tab-icon--organizer { -webkit-mask-image: url("../img/2026/36.png"); mask-image: url("../img/2026/36.png"); }
.menu-tab-svg { width: 22px; height: 22px; }
.menu-tab:hover,
.menu-tab.is-active {
  background: var(--navy);
  color: #fff;
}
.menu-tab:hover .menu-tab-icon,
.menu-tab.is-active .menu-tab-icon {
  background-color: #fff;
}

/* ---------- main ---------- */
.menu-main {
  flex: 1;
  padding: 16px 14px 90px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.welcome-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blue-100);
  color: var(--blue-700);
  border-radius: var(--card-radius);
  padding: 16px;
}
.welcome-icon { width: 50px; height: 50px; flex: none; }
.welcome-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.welcome-text h2 { font-size: 14px; font-weight: 800; margin-bottom: 4px; color: #000; }
.welcome-text p { font-size: 11.5px; line-height: 1.6; color: #000; }

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.menu-card {
  background: #fff;
  border-radius: var(--card-radius);
  padding: 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
}
.menu-card-icon { width: 42px; height: 42px; flex: none; }
.menu-card-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.menu-card-label { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.menu-card-label small { display: block; font-size: 10.5px; font-weight: 500; color: #6b7b93; margin-top: 2px; }
.menu-card-arrow {
  flex: none;
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-top: 2px solid #9aa9c2;
  border-right: 2px solid #9aa9c2;
  transform: rotate(45deg);
}

.menu-card--wide { width: 100%; }

.info-box {
  background: var(--blue-100);
  border-radius: var(--card-radius);
  padding: 16px;
}
.info-box-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.info-box-icon { width: 20px; height: 20px; flex: none; }
.info-box-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.info-box-head h3 { font-size: 13px; font-weight: 800; color: var(--ink); }
.info-box-icon--logo { color: var(--blue-700); }
h3.appl-info-title { color: var(--blue-700); }
.info-box-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; margin-left: 28px; }
.info-box-list li {
  font-size: 11.5px;
  line-height: 1.6;
  color: #3b4a63;
  padding-left: 1em;
  position: relative;
}
.info-box-list li::before {
  content: "・";
  position: absolute;
  left: -0.15em;
}

.flow-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 28px;
  margin-right: 28px;
  background: var(--btn-next);
  color: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 700;
}
.flow-btn-main { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.flow-btn-icon { width: 22px; height: 22px; flex: none; }
.flow-btn-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.flow-btn .menu-card-arrow { margin-left: auto; border-color: #fff; }

/* ---------- home (general member) screen ---------- */
.home-welcome { padding: 2px 2px 4px; }
.home-welcome h2 { font-size: 19px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.home-welcome p { font-size: 13px; color: #6b7b93; }

.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-card {
  position: relative;
  background: #fff;
  border-radius: var(--card-radius);
  padding: 16px 14px;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-card-icon {
  width: 64px; height: 64px;
  align-self: center;
  border-radius: 10px;
  color: var(--blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-card-icon svg { width: 28px; height: 28px; }
.home-card-icon img { width: 64px; height: 64px; object-fit: contain; }
.home-card-title { font-size: 16px; font-weight: 800; color: var(--blue-700); text-align: center; }
.home-card-desc { font-size: 11.5px; color: #6b7b93; line-height: 1.5; }

.home-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: var(--card-radius);
  padding: 10px 16px;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
}
.home-notice-icon {
  width: 32px; height: 32px;
  flex: none;
  background: var(--blue-700);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-notice-icon img { width: 18px; height: 18px; object-fit: contain; display: block; filter: brightness(0) invert(1); }
.home-notice-tag { flex: none; font-size: 11px; font-weight: 700; color: var(--blue-700); }
.home-notice-divider { flex: none; width: 1px; height: 14px; background: #e3e7ee; }
.home-notice-text {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-notice-arrow { flex: none; color: #9aa9c2; font-size: 16px; }

.home-organizer-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--blue-100);
  border-radius: var(--card-radius);
  padding: 16px;
}
.home-organizer-promo-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.home-organizer-promo-icon { flex: none; width: 40px; height: 40px; object-fit: contain; }
.home-organizer-promo-title { font-size: 14px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.home-organizer-promo-desc { font-size: 11.5px; color: #5b6683; }
.home-organizer-btn {
  flex: none;
  background: var(--btn-next);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  white-space: nowrap;
}

/* ---------- mypage ---------- */
.profile-card {
  background: #fff;
  border-radius: var(--card-radius);
  padding: 16px;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
}
.profile-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.profile-avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; overflow: hidden; background: var(--blue-100); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-name-wrap { flex: 1; min-width: 120px; }
.profile-name { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.profile-badge {
  display: inline-block;
  background: var(--blue-700);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.profile-id { font-size: 11px; color: #6b7b93; }
.profile-edit {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue-700);
}
.profile-edit svg { width: 14px; height: 14px; flex: none; }
.profile-edit .menu-card-arrow { width: 6px; height: 6px; border-color: var(--blue-700); }
.profile-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #eef1f6;
}
.profile-info-item dt { font-size: 10.5px; color: #6b7b93; margin-bottom: 3px; }
.profile-info-item dd { font-size: 12px; font-weight: 700; color: var(--ink); word-break: break-all; }

.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-card {
  position: relative;
  background: var(--navy);
  color: #fff;
  border-radius: var(--card-radius);
  padding: 16px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.account-card-icon { flex: none; width: 26px; height: 26px; color: #fff; }
.account-card-icon svg { width: 100%; height: 100%; }
.account-card-icon img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.account-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 14px; }
.account-card-title { font-size: 12.5px; font-weight: 800; line-height: 1.4; }
.account-card-desc { font-size: 10.5px; color: #e4eafb; line-height: 1.5; }
.account-card-arrow { position: absolute; top: 14px; right: 14px; color: rgba(255,255,255,.7); font-size: 16px; font-weight: 700; }

.account-list {
  background: #fff;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
}
.account-list li { border-bottom: 1px solid #eef1f6; }
.account-list li:last-child { border-bottom: none; }
.account-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.account-list a svg { width: 18px; height: 18px; flex: none; color: var(--blue-700); }
.account-list a img { width: 18px; height: 18px; flex: none; object-fit: contain; }
.account-list a .menu-card-arrow { margin-left: auto; width: 7px; height: 7px; }
.account-list a.account-list-logout { color: #e2574c; }
.account-list a.account-list-logout svg { color: #e2574c; }
.account-list-logout-icon {
  display: block;
  width: 18px; height: 18px; flex: none;
  background-color: #e2574c;
  -webkit-mask-image: url("../img/2026/mypage16.png");
  mask-image: url("../img/2026/mypage16.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ---------- team settings ---------- */
.team-page-intro { font-size: 13px; color: #46536a; }

.team-current-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  background: #f5f8fd;
  border: 1px solid #e3e9f5;
  border-radius: var(--card-radius);
  padding: 16px;
}
.team-current-avatar {
  width: 56px; height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-current-avatar svg { width: 30px; height: 30px; }
.team-current-info { flex: 1; min-width: 140px; }
.team-current-label { font-size: 11.5px; color: #6b7b93; margin-bottom: 3px; }
.team-current-name { font-size: 17px; font-weight: 800; color: var(--navy); }
.team-current-btn {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--btn-next);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.team-current-btn svg { width: 14px; height: 14px; }
.team-current-btn .menu-card-arrow { width: 6px; height: 6px; border-color: #fff; }

.team-change-title { font-size: 16px; font-weight: 800; color: var(--blue-700); margin-bottom: 6px; }
.team-change-desc { font-size: 12px; color: #46536a; line-height: 1.7; }

.team-form {
  background: #f5f8fd;
  border: 1px solid #e3e9f5;
  border-radius: var(--card-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.team-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.team-optional-tag {
  font-size: 10px;
  font-weight: 700;
  color: #6b7b93;
  background: #e4e9f2;
  padding: 2px 8px;
  border-radius: 999px;
}
.team-select {
  width: 100%;
  padding: 11px 36px 11px 14px;
  border: 1.5px solid #d5dbe5;
  border-radius: 10px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23516080' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center/16px;
  font-size: 13px;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
}

.team-radio-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1.5px solid #e3e9f5;
  border-radius: var(--card-radius);
  padding: 16px;
  cursor: pointer;
}
.team-radio-option input[type="radio"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue-700); flex: none; }
.team-radio-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.team-radio-desc { font-size: 11.5px; color: #6b7b93; }

.form-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.form-btn--next { background: var(--btn-next); color: #fff; }
.form-btn--danger { background: var(--btn-danger); color: #fff; }
.form-btn--other { background: var(--btn-other); color: var(--ink); }
.open-form-btn { border-radius: 10px; }
.form-btn-icon { width: 16px; height: 16px; margin-right: 6px; }

/* ---------- open tournament form (大会を募集する) ---------- */
.open-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
  border-radius: var(--card-radius);
  padding: 16px;
}
.open-field { display: flex; flex-direction: column; gap: 6px; }
.open-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.open-field-row--time { grid-template-columns: 1fr auto 1fr; align-items: end; }
.open-field-sublabel { font-size: 11px; font-weight: 700; color: #6b7b93; margin-bottom: 4px; }
.open-field-separator { padding-bottom: 12px; font-size: 14px; font-weight: 700; color: #6b7b93; }

.open-input-wrap { position: relative; }
.open-input-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #6b7b93;
}
.open-input-wrap .casual-input { padding-right: 36px; }
.form-btn--square { border-radius: 10px; }

/* ---------- calendar (卓球ノート) ---------- */
.cal-page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}
.cal-page-title svg { width: 22px; height: 22px; color: var(--blue-700); }
.cal-page-title img { width: 22px; height: 22px; object-fit: contain; }
.cal-page-title-icon {
  width: 22px; height: 22px;
  flex: none;
  background-color: var(--navy);
  -webkit-mask-image: url("../img/2026/48.png");
  mask-image: url("../img/2026/48.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.cal-page-title h2 { font-size: 19px; font-weight: 800; color: var(--navy); }

.cal-summary { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; }

.cal-stats-card {
  background: #fff;
  border-radius: var(--card-radius);
  padding: 14px;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
}
.cal-stats-title { font-size: 11.5px; color: #6b7b93; margin-bottom: 10px; }
.cal-stats-title strong { font-size: 20px; font-weight: 800; color: var(--navy); margin: 0 2px; }
.cal-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 6px; }
.cal-stat-item { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.cal-stat-icon { width: 20px; height: 20px; }
.cal-stat-icon svg { width: 100%; height: 100%; }
.cal-stat-icon img { width: 100%; height: 100%; object-fit: contain; }
.cal-stat-value { font-size: 15px; font-weight: 800; color: var(--ink); }
.cal-stat-value small { font-size: 10px; font-weight: 600; color: #6b7b93; margin-left: 1px; }
.cal-stat-label { font-size: 10px; color: #6b7b93; }
.cal-stat-item--practice .cal-stat-icon { color: var(--cal-green); }
.cal-stat-item--match .cal-stat-icon { color: var(--blue-700); }
.cal-stat-item--tournament .cal-stat-icon { color: var(--orange-600); }
.cal-stat-item--memo .cal-stat-icon { color: var(--cal-red); }

.cal-add-card {
  background: var(--navy);
  border-radius: var(--card-radius);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.cal-add-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(90deg, #ffe17a 0%, var(--yellow) 100%);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.cal-add-desc { font-size: 9.5px; color: #cfdcf6; line-height: 1.5; }

.cal-card { background: #fff; border-radius: var(--card-radius); padding: 0 15px; box-shadow: 0 2px 8px rgba(20, 40, 90, .06); }
.cal-recent-card { padding: 16px 15px; }
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #fff;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  padding: 10px 0;
  margin-bottom: -14px;
}
.cal-nav-btn {
  width: 28px; height: 28px;
  border: none;
  border-radius: 8px;
  background: #eef1f6;
  color: var(--blue-700);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-nav-title { font-size: 15px; font-weight: 800; color: #000; min-width: 110px; text-align: center; }

.cal-grid {
  background: #fff;
  border: 1px solid #eef1f6;
  margin: 12px 0 14px;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
}
.cal-grid-head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid #eef1f6; }
.cal-grid-head span { text-align: center; font-size: 10.5px; font-weight: 700; color: #6b7b93; padding-bottom: 4px; }
.cal-grid-head span:not(:last-child) { border-right: 1px solid #eef1f6; }
.cal-grid-head .is-sun { color: var(--cal-red); }
.cal-grid-head .is-sat { color: var(--blue-700); }
.cal-grid-body { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 1px; border-radius: 8px; }
.cal-cell:not(:nth-child(7n)) { border-right: 1px solid #eef1f6; border-radius: 0; }
.cal-cell:nth-child(n+8) { border-top: 1px solid #eef1f6; padding-top: 8px; border-radius: 0; }
.cal-date { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.cal-cell.is-sun .cal-date { color: var(--cal-red); }
.cal-cell.is-sat .cal-date { color: var(--blue-700); }
.cal-cell.is-muted { background: #f8f9fb; }
.cal-cell.is-muted .cal-date { color: #c3cbdb; }
.cal-cell-icons { display: flex; gap: 2px; height: 11px; }
.cal-cell-icons svg { width: 11px; height: 11px; }
.cal-cell-icons img { width: 11px; height: 11px; object-fit: contain; }
.cal-cell-icons .icon-practice { color: var(--cal-green); }
.cal-cell-icons .icon-match { color: var(--blue-700); }
.cal-cell-icons .icon-tournament { color: var(--orange-600); }
.cal-cell-icons .icon-memo { color: var(--cal-red); }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  background: #fff;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  padding: 10px 2px;
  margin-top: -14px;
}
.cal-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #46536a; }
.cal-legend-item svg { width: 14px; height: 14px; }
.cal-legend-item img { width: 14px; height: 14px; object-fit: contain; }
.cal-legend-item--practice svg { color: var(--cal-green); }
.cal-legend-item--match svg { color: var(--blue-700); }
.cal-legend-item--tournament svg { color: var(--orange-600); }
.cal-legend-item--memo svg { color: var(--cal-red); }

.cal-section-title { font-size: 14.5px; font-weight: 800; color: #000; margin-bottom: 8px; text-align: center; }
.cal-recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #d5dbe5;
  border-radius: 10px;
}
.cal-recent-date { flex: none; width: 44px; font-size: 15.5px; font-weight: 800; color: var(--blue-700); line-height: 1.25; text-align: center; padding-right: 10px; border-right: 1px solid #eef1f6; }
.cal-recent-weekday { display: block; font-size: 11px; font-weight: 400; color: var(--blue-700); }
.cal-recent-icon { flex: none; width: 20px; height: 20px; }
.cal-recent-icon svg { width: 100%; height: 100%; }
.cal-recent-icon img { width: 100%; height: 100%; object-fit: contain; }
.cal-recent-icon--practice { color: var(--cal-green); }
.cal-recent-icon--match { color: var(--blue-700); }
.cal-recent-icon--tournament { color: var(--orange-600); }
.cal-recent-text { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-recent-time { flex: none; font-size: 11px; color: #6b7b93; }

.cal-view-all { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--blue-700); }
.cal-view-all .menu-card-arrow { margin-left: 0; border-color: var(--blue-700); }

/* ---------- note entry (卓球ノートに記録する) ---------- */
.note-intro { display: flex; gap: 12px; align-items: flex-start; padding: 2px 2px 4px; }
.note-intro-icon {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.note-intro-icon svg { width: 18px; height: 18px; }
.note-intro-icon img { width: 18px; height: 18px; object-fit: contain; filter: brightness(0) invert(1); }
.note-intro-text h2 { font-size: 19px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.note-intro-text p { font-size: 11.5px; color: #6b7b93; line-height: 1.6; }

.note-field {
  background: #fff;
  border: 1px solid #e3e9f5;
  border-radius: var(--card-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.note-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.note-field-label svg { width: 18px; height: 18px; color: var(--blue-700); flex: none; }
.note-field-icon {
  width: 18px; height: 18px;
  flex: none;
  background-color: var(--navy);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.note-field-icon--49 { -webkit-mask-image: url("../img/2026/49.png"); mask-image: url("../img/2026/49.png"); }
.note-field-icon--calendar { -webkit-mask-image: url("../img/2026/calendar17.png"); mask-image: url("../img/2026/calendar17.png"); }
.note-required-tag {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--cal-red);
  padding: 2px 8px;
  border-radius: 999px;
}
.note-field-desc { font-size: 11.5px; color: #6b7b93; line-height: 1.6; margin-top: -4px; }

.note-date-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid #d5dbe5;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}
.note-date-input svg:first-child { width: 18px; height: 18px; color: var(--blue-700); flex: none; }
.note-date-input .note-chevron { margin-left: auto; width: 14px; height: 14px; color: #516080; flex: none; pointer-events: none; }
.note-date-select {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.note-date-select:focus { outline: none; }

.note-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.note-tag {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: 12px;
  font-weight: 700;
}
.note-tag.is-selected { background: var(--navy); color: #fff; }

.practice-menu-table { display: flex; flex-direction: column; }
.practice-menu-row {
  display: grid;
  grid-template-columns: 22px 1fr 72px 36px;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.practice-menu-row--head {
  padding-bottom: 8px;
  border-bottom: 1px solid #e3e9f5;
}
.practice-menu-row--head .practice-menu-col-time,
.practice-menu-row--head .practice-menu-col-check {
  font-size: 10.5px;
  font-weight: 700;
  color: #9aa9c2;
  text-align: center;
}
.practice-menu-row--head .practice-menu-col-name {
  grid-column: 2;
  font-size: 10.5px;
  font-weight: 700;
  color: #9aa9c2;
}
.practice-menu-drag { width: 16px; height: 16px; color: #c2cadb; flex: none; cursor: grab; touch-action: none; }
.practice-menu-drag svg { width: 100%; height: 100%; }
.practice-menu-row.is-dragging { opacity: 0.4; }
.practice-menu-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.practice-menu-time { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--ink); }
.practice-menu-select {
  width: 48px;
  padding: 5px 20px 5px 8px;
  border: 1.5px solid #d5dbe5;
  border-radius: 7px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23516080' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 4px center/13px;
  font-size: 12px;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
}
.practice-menu-check { display: flex; align-items: center; justify-content: center; }
.practice-menu-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid #d5dbe5;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
}
.practice-menu-check input[type="checkbox"]:checked {
  background: var(--navy) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>") no-repeat center/13px;
  border-color: var(--navy);
}
.practice-menu-add-btn {
  display: block;
  width: fit-content;
  margin: 6px auto 0;
  padding: 11px 28px;
  border: none;
  border-radius: 10px;
  background: var(--btn-other);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.note-textarea {
  width: 100%;
  min-height: 78px;
  resize: vertical;
  border: 1.5px solid #d5dbe5;
  border-radius: 10px;
  padding: 12px 14px 26px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
  background: #fff;
}
.note-textarea::placeholder { color: #9aa9c2; }
.note-textarea-wrap { position: relative; }
.note-char-count { position: absolute; right: 14px; bottom: 10px; font-size: 10px; color: #9aa9c2; background: #fff; padding: 0 2px; }

/* ---------- practice / team (チーム・部活動) ---------- */
.practice-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  border-radius: var(--card-radius);
  padding: 16px;
}
.practice-intro-icon {
  width: 44px; height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.practice-intro-icon svg { width: 26px; height: 26px; color: var(--blue-700); }
.practice-intro-icon img { width: 44px; height: 44px; object-fit: contain; }
.practice-intro-icon--brand { background: var(--blue-700); border-radius: 50%; }
.practice-intro-icon--brand img { width: 26px; height: 26px; }
.practice-intro-icon--brand svg { color: #fff; }
.practice-intro-text { flex: 1; }
.practice-intro-text h2 { font-size: 14.5px; font-weight: 800; margin-bottom: 4px; color: var(--navy); }
h2.open-intro-title { color: #000; }
h2.status-intro-title { color: #000; }
h2.casual-intro-title { font-size: 19px; }
.practice-intro-text p { font-size: 11px; line-height: 1.6; color: #6b7b93; }

.practice-select-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
  border-radius: var(--card-radius);
  padding: 16px;
}

.practice-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--navy);
  color: #fff;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.practice-select-card > .practice-ribbon:first-child {
  margin: -16px -16px 0;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.practice-ribbon::before,
.practice-ribbon::after { content: ""; flex: none; width: 60px; height: 1px; background: rgba(255, 255, 255, .35); }

.practice-subtitle { text-align: center; font-size: 13.5px; font-weight: 800; color: var(--blue-700); margin-top: -6px; }

.practice-step-label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.practice-step-num {
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--blue-700);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.practice-team-list { display: flex; flex-direction: column; gap: 8px; }
.practice-team-option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #e3e9f5;
  border-radius: var(--card-radius);
  padding: 13px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.practice-team-option input[type="radio"] { width: 18px; height: 18px; accent-color: var(--blue-700); flex: none; }
.practice-team-option.is-selected { border-color: var(--blue-700); background: var(--blue-100); }
.practice-team-note { font-size: 10.5px; color: #8b96ab; margin-top: 2px; }

.practice-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.practice-menu-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: var(--navy);
  color: #fff;
  border-radius: var(--card-radius);
  padding: 16px 20px;
}
.practice-menu-card-icon { flex: none; width: 32px; height: 32px; }
.practice-menu-card-icon svg { width: 100%; height: 100%; }
.practice-menu-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.practice-menu-card-label { font-size: 11.5px; font-weight: 700; line-height: 1.4; }

.practice-wide-link {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  color: var(--blue-700);
  font-weight: 800;
  font-size: 13px;
}
.practice-wide-link svg { width: 22px; height: 22px; flex: none; }
.practice-wide-link img { width: 22px; height: 22px; flex: none; object-fit: contain; }
.practice-wide-link .menu-card-arrow { margin-left: auto; }

.practice-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px;
  border-radius: var(--card-radius);
  background: var(--btn-other);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

/* ---------- casual match (お手軽申し込み試合) ---------- */
.casual-input {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1.5px solid #d5dbe5;
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
}
.casual-input::placeholder { color: #9aa9c2; }
.note-static-value {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #d5dbe5;
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
  background: #f4f6fa;
}
.note-static-value a { color: var(--blue-700); text-decoration: underline; word-break: break-all; }

.casual-check-list { display: flex; flex-direction: column; gap: 8px; }
.casual-check-item { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: #3b4a63; line-height: 1.6; }
.casual-check-item svg { width: 16px; height: 16px; color: var(--blue-700); flex: none; margin-top: 1px; }

.casual-scorecard-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--btn-next);
  color: #fff;
  padding: 15px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
}
.casual-scorecard-btn-main { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; }
.casual-scorecard-btn-main svg { flex: none; display: block; }
.casual-scorecard-icon { width: 28px; height: 28px; }
.casual-scorecard-btn .menu-card-arrow { margin-left: 0; border-color: #fff; }

.casual-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  background: var(--btn-other);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
}
.casual-back-btn svg { width: 14px; height: 14px; flex: none; }
.casual-back-btn-text { flex: 1; text-align: center; }

.info-box-desc { font-size: 11.5px; line-height: 1.7; color: #3b4a63; margin-left: 16.5px; }
.casual-step-desc { font-size: 12px; color: #46536a; line-height: 1.7; margin-bottom: 12px; }

/* ---------- events (大会を探す・申し込み) ---------- */
.events-search-card {
  background: #fff;
  border-radius: var(--card-radius);
  padding: 16px;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.events-search-head { display: flex; align-items: center; justify-content: space-between; }
.events-search-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--navy); }
.events-search-title svg { width: 18px; height: 18px; color: var(--blue-700); }
.events-menu-btn {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: none;
  border-radius: 8px;
  color: var(--blue-700);
  flex: none;
}
.events-menu-btn svg { width: 18px; height: 18px; }

.events-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.events-filter-item label { display: block; font-size: 11.5px; font-weight: 700; color: #516080; margin: 0 0 6px 5px; }
.events-filter-select-wrap { position: relative; }
.events-filter-select-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--blue-700); pointer-events: none; }
.events-filter-select-wrap img { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; object-fit: contain; pointer-events: none; }
.events-filter-select-wrap .note-field-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; pointer-events: none; }
.events-filter-select-wrap .team-select { padding-left: 34px; }

.events-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--btn-other);
  border: none;
  color: var(--ink);
  padding: 13px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 800;
}
.events-search-btn svg { width: 16px; height: 16px; }

.events-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
.events-sort-group { display: flex; align-items: center; gap: 6px; }
.events-sort-label { font-size: 11.5px; font-weight: 700; color: #516080; }
.events-sort {
  padding: 8px 30px 8px 12px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1.5px solid #d5dbe5;
  border-radius: 8px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23516080' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center/14px;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
}
.events-count { font-size: 12px; color: #6b7b93; font-weight: 700; white-space: nowrap; }
.events-count-num { font-size: 16px; color: var(--blue-700); margin: 0 2px; }

.events-list { display: flex; flex-direction: column; gap: 10px; }
.events-card {
  position: relative;
  background: #fff;
  border-radius: var(--card-radius);
  padding: 14px;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.events-card-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--blue-700);
  border-right: 2px solid var(--blue-700);
  transform: rotate(45deg);
}

.events-card-head { display: flex; gap: 12px; padding-right: 20px; }
.events-date-box { flex: none; width: 54px; display: flex; flex-direction: column; text-align: center; border: 1.5px solid var(--blue-700); border-radius: 8px; overflow: hidden; }
.events-date-year { display: block; background: var(--blue-700); color: #fff; font-size: 9px; font-weight: 700; padding: 3px 0; }
.events-date-year-sub { display: block; font-size: 9px; color: var(--blue-700); padding-top: 3px; }
.events-date-day { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6px 0; font-size: 15.5px; font-weight: 800; color: var(--blue-700); line-height: 1.25; }
.events-date-weekday { display: block; margin-top: -4px; font-size: 11px; color: var(--blue-700); padding-bottom: 4px; }

.events-card-title-wrap { flex: 1; min-width: 0; }
.events-pref-badge { display: inline-block; background: var(--blue-700); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-bottom: 4px; }
.events-card-title { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.4; }

.events-card-meta { display: flex; flex-direction: column; gap: 4px; padding-left: 66px; }
.events-meta-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #516080; }
.events-meta-row svg { width: 13px; height: 13px; color: #8b96ab; flex: none; }
.events-meta-row img { width: 13px; height: 13px; object-fit: contain; flex: none; }
.events-meta-row svg.events-meta-icon--logo { color: var(--blue-700); }
.events-meta-label { flex: none; width: 48px; text-align: center; font-weight: 700; color: #6b7b93; }
.events-meta-value { flex: 1; min-width: 0; }
.events-deadline-date { color: var(--cal-red); font-weight: 700; }
.events-meta-icon--calendar {
  display: inline-block;
  width: 13px; height: 13px;
  flex: none;
  background-color: var(--blue-700);
  -webkit-mask-image: url("../img/2026/calendar17.png");
  mask-image: url("../img/2026/calendar17.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.events-card-foot { display: flex; justify-content: flex-end; padding-left: 66px; }
.entry-card-foot { justify-content: flex-start; }
.events-detail-btn { background: var(--btn-next); color: #fff; font-size: 11.5px; font-weight: 700; padding: 7px 16px; border-radius: 8px; }

.events-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 6px 0 0; }
.events-page-btn {
  min-width: 28px; height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  background: #eef1f6;
  color: #516080;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.events-page-btn.is-active { background: var(--navy); color: #fff; }
.events-page-ellipsis { font-size: 12px; color: #9aa9c2; padding: 0 2px; }
.events-page-nav {
  display: flex;
  align-items: center;
  height: 28px;
  gap: 4px;
  border-radius: 8px;
  background: #eef1f6;
  font-size: 11.5px;
  font-weight: 700;
  color: #516080;
  padding: 0 10px;
}
.events-page-nav svg { width: 12px; height: 12px; }
.events-page-nav.is-disabled { color: #c3cbdb; background: #f4f6fa; cursor: default; }

/* ---------- entry list (申込済大会) ---------- */
.entry-page-title { font-size: 19px; font-weight: 800; color: var(--ink); padding: 2px 2px 4px; }

.entry-tabs {
  display: flex;
  border-bottom: 1px solid #e3e7ee;
}
.entry-tab {
  flex: 1;
  text-align: center;
  padding: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: #9aa9c2;
  border-bottom: 3px solid transparent;
}
.entry-tab.is-active { color: var(--blue-700); border-bottom-color: var(--blue-700); }

.entry-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: var(--btn-other);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

/* ---------- entry status (募集状況を確認する) ---------- */
.status-card {
  position: relative;
  background: #fff;
  border-radius: var(--card-radius);
  padding: 14px;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.status-card-body { display: flex; gap: 12px; flex-wrap: wrap; }
.status-meta { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 4px; padding-right: 20px; }
.status-summary { flex: none; width: 150px; background: var(--blue-100); border-radius: 10px; padding: 10px; text-align: center; }
.status-summary-label { font-size: 10px; color: #516080; margin-bottom: 2px; text-align: left; }
.status-summary-count { font-size: 18px; font-weight: 800; color: var(--blue-700); text-align: left; padding-left: 8px; }
.status-summary-count span { font-size: 11px; font-weight: 700; color: #516080; }
.status-summary-tag {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 9.5px;
  font-weight: 700;
  color: #000;
  padding: 3px 8px 3px 0;
  border-radius: 999px;
}
.status-summary-tag-num { font-size: 13px; color: var(--blue-700); line-height: 1; }
.status-summary-tag-main, .status-summary-tag-sub { align-self: flex-end; line-height: 1; }

.status-progress { margin-top: 8px; }
.status-progress-track { width: 100%; height: 6px; background: #fff; border-radius: 999px; overflow: hidden; }
.appl-detail-row--progress .status-progress-track { width: calc(100% - 86px); margin-left: 86px; background: #e3e7ee; }
.status-progress-fill { height: 100%; background: var(--blue-700); border-radius: 999px; }
.status-progress-percent { font-size: 9.5px; font-weight: 700; color: #516080; margin-top: 4px; }
.status-detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 10px;
  background: var(--btn-next);
  color: #fff;
  padding: 9px 6px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}
.status-detail-btn-main { flex: 1; text-align: center; }
.status-detail-btn .menu-card-arrow { border-color: #fff; flex: none; margin-left: 0; }

/* ---------- event application (大会運営：当日受付) ---------- */
.appl-section-title { font-size: 14px; font-weight: 800; color: var(--blue-700); margin-bottom: 2px; }

.appl-detail-card {
  background: #fff;
  border: 1px solid #e3e9f5;
  border-radius: var(--card-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.appl-detail-row { display: flex; justify-content: flex-start; align-items: center; gap: 10px; font-size: 12.5px; }
.appl-detail-label { display: flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 700; flex: none; width: 76px; }
.appl-detail-icon { width: 13px; height: 13px; color: var(--blue-700); flex: none; }
.appl-detail-icon[src] { object-fit: contain; }
.appl-detail-value { font-weight: 700; color: var(--ink); text-align: left; }
.appl-detail-row--progress { flex-direction: column; align-items: stretch; gap: 6px; }
.appl-detail-row--progress .appl-detail-top { display: flex; justify-content: flex-start; align-items: center; gap: 10px; }

.appl-contact-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); font-weight: 600; }
.appl-contact-row svg { width: 15px; height: 15px; color: var(--blue-700); flex: none; }

.appl-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.appl-list-head--in-card { grid-column: 1 / -1; }
.appl-list-link {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--btn-next);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.appl-list-link .menu-card-arrow { border-color: #fff; margin-left: 0; }

.appl-participant-card {
  background: #fff;
  border: 1px solid #e3e9f5;
  border-radius: var(--card-radius);
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.appl-participant-item--name { display: flex; align-items: center; gap: 8px; }
.appl-participant-icon { width: 22px; height: 22px; flex: none; color: var(--blue-700); }
.appl-participant-item dt { font-size: 10px; color: #6b7b93; margin-bottom: 2px; }
.appl-participant-item dd { font-size: 12.5px; font-weight: 700; color: var(--ink); word-break: break-all; }

.appl-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--btn-next);
  color: #fff;
  padding: 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
}
.appl-btn-primary svg { width: 14px; height: 14px; }
.appl-btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: var(--btn-other);
  color: var(--ink);
  padding: 13px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
}
.appl-notice { font-size: 10.5px; color: var(--cal-red); line-height: 1.7; }
.appl-btn-outline-icon { width: 15px; height: 15px; flex: none; }

/* ---------- entry status list (大会申込状況：参加申込者一覧) ---------- */
.start-summary-bar {
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
  color: var(--ink);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.start-summary-icon { flex: none; width: 40px; height: 40px; }
.start-summary-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.start-summary-body { display: flex; flex-direction: column; gap: 6px; }
.start-summary-title { font-size: 14.5px; font-weight: 800; }
.start-summary-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: #6b7b93; }
.start-summary-meta span { display: flex; align-items: center; gap: 4px; }
.start-summary-meta svg { width: 13px; height: 13px; color: var(--blue-700); }
.start-summary-meta img { width: 13px; height: 13px; object-fit: contain; }

.start-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border-radius: var(--card-radius);
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
}
.start-stats-title { margin-bottom: 0; }
.start-stats-row { display: flex; margin: 0 -8px; }
.start-stat { flex: 1; text-align: center; }
.start-stat + .start-stat { border-left: 1px solid #eef1f6; }
.start-stat-label { font-size: 10.5px; color: #6b7b93; margin-bottom: 4px; }
.start-stat-value { font-size: 16px; font-weight: 800; color: var(--ink); }
.start-stat-value small { font-size: 10.5px; font-weight: 700; color: #6b7b93; }
.start-stat-value--blue { color: var(--blue-700); }
.start-stat-value--green { color: var(--cal-green); }
.start-stat-value--red { color: var(--cal-red); }

.start-table-wrap {
  overflow-x: auto;
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
}
.start-table { width: 100%; border-collapse: collapse; font-size: 11px; white-space: nowrap; }
.start-table th { background: var(--blue-100); color: var(--blue-700); font-weight: 700; padding: 8px 10px; text-align: left; }
.start-table td { padding: 8px 10px; border-top: 1px solid #eef1f6; color: var(--ink); }
.start-table td.is-muted { color: #8b96ab; }
.start-status-badge { display: inline-block; background: var(--cal-green); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

.start-table-note { font-size: 10.5px; color: #8b96ab; line-height: 1.7; }
.start-btn-tight { border-radius: 10px; }
.start-table--center th, .start-table--center td { text-align: center; }
.start-table--center thead th:first-child { background: #fff; }
.start-table td.is-diagonal { background: #f4f6fa; color: #c2cadb; }
.start-table-score { color: var(--blue-700); font-weight: 700; }

/* リーグ戦表: 横スクロール時に 選手名・結果・順位 の3列を左に固定する */
.start-table--sticky { border-collapse: separate; border-spacing: 0; }
.start-table--sticky th:nth-child(-n+3),
.start-table--sticky td:nth-child(-n+3) {
  position: sticky;
  z-index: 1;
  padding-left: 6px;
  padding-right: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.start-table--sticky td:nth-child(-n+3) { background: #fff; }
.start-table--sticky th:nth-child(1), .start-table--sticky td:nth-child(1) { left: 0;    width: 80px; min-width: 80px; max-width: 80px; }
.start-table--sticky th:nth-child(2), .start-table--sticky td:nth-child(2) { left: 80px;  width: 60px; min-width: 60px; max-width: 60px; }
.start-table--sticky th:nth-child(3), .start-table--sticky td:nth-child(3) { left: 140px; width: 44px; min-width: 44px; max-width: 44px; box-shadow: 3px 0 4px -2px rgba(20, 40, 90, .18); }

/* ---------- register (新規アカウント登録) ---------- */
.open-field-row--triple { grid-template-columns: 1fr 1fr 1fr; }
.form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f5f8fd;
  border: 1px solid #e3e9f5;
  border-radius: var(--card-radius);
  padding: 14px 16px;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.6;
  cursor: pointer;
}
.form-checkbox-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex: none;
  border: 1.5px solid #d5dbe5;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
}
.form-checkbox-row input[type="checkbox"]:checked {
  background: var(--navy) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>") no-repeat center/13px;
  border-color: var(--navy);
}
.form-checkbox-row a { color: var(--blue-700); text-decoration: underline; }
.form-checkbox-row.is-readonly { cursor: default; }
.form-checkbox-row input[type="checkbox"]:disabled { opacity: .85; }

/* ---------- register complete (メール認証) ---------- */
.complete-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 36px 16px 12px;
}
.complete-icon { width: 72px; height: 72px; color: var(--cal-green); flex: none; }
.complete-message { font-size: 13.5px; color: var(--ink); line-height: 1.8; }

/* ---------- register rate (レートの初期値を取得する) ---------- */
.rank-list { display: flex; flex-direction: column; gap: 10px; }
.rank-option {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid #e3e9f5;
  border-radius: var(--card-radius);
  padding: 14px;
  cursor: pointer;
}
.rank-option input[type="radio"] { width: 20px; height: 20px; accent-color: var(--blue-700); flex: none; }
.rank-option.is-selected { border-color: var(--blue-700); background: var(--blue-100); }
.rank-badge {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.rank-badge--s { background: var(--navy); }
.rank-badge--a { background: var(--blue-700); }
.rank-badge--b { background: var(--blue-600); }
.rank-badge--c { background: var(--blue-500); }
.rank-badge--d { background: var(--orange-600); }
.rank-badge--e { background: #8b96ab; }
.rank-option-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rank-score { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.rank-desc { font-size: 11px; color: #6b7b93; line-height: 1.5; }

/* ---------- team new/update (チームの新規登録・更新) ---------- */
.team-member-box {
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.team-member-count { font-size: 11px; font-weight: 700; color: #6b7b93; }
.team-member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.team-member-list li + li { border-top: 1px solid rgba(20, 40, 90, .08); }
.team-member-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  padding: 10px 0;
  cursor: pointer;
}
.team-member-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  border: 1.5px solid #d5dbe5;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
}
.team-member-item input[type="checkbox"]:checked {
  background: var(--navy) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>") no-repeat center/13px;
  border-color: var(--navy);
}
.team-member-item:has(input:disabled) { cursor: not-allowed; opacity: .45; }

/* ---------- scorecard (スコアカード) ---------- */
.scorecard-card {
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: 0 2px 8px rgba(20, 40, 90, .06);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scorecard-players { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scorecard-players span { flex: 1; text-align: center; font-size: 13px; font-weight: 800; color: var(--navy); }
.scorecard-game-row { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center; gap: 8px; }
.scorecard-game-num { text-align: center; font-size: 11px; font-weight: 700; color: #8b96ab; }
.scorecard-result-row {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #eef1f6;
}
.scorecard-result-label { text-align: center; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.scorecard-result-input {
  width: 100%;
  padding: 10px;
  border: 1.5px solid #d5dbe5;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  color: var(--ink);
  background: #f4f6fa;
}
.scorecard-style-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 4px; }
.scorecard-style-list { list-style: none; padding: 0; margin: 0; font-size: 11px; color: #6b7b93; line-height: 1.8; text-align: center; }

/* ---------- practice history (試合履歴) ---------- */
.history-list { display: flex; flex-direction: column; gap: 4px; }
.history-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid #e3e9f5;
  border-radius: var(--card-radius);
  padding: 14px;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .04);
}
.history-card-header { display: flex; align-items: center; gap: 12px; font-size: 11px; color: #8b96ab; font-weight: 700; }
.history-card-header svg { width: 13px; height: 13px; }
.history-card-header span { display: flex; align-items: center; gap: 4px; }
.history-card-title { font-size: 13.5px; font-weight: 800; color: var(--navy); }
.history-card-players { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.history-league-link { font-size: 11.5px; color: var(--blue-700); text-decoration: underline; margin: -6px 0 0 4px; }

/* ---------- organizer register (大会運営者の登録申請) ---------- */
.open-form-section-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--blue-700);
  padding-top: 12px;
  border-top: 1px solid #eef1f6;
}
.open-form-section-title:first-child { border-top: none; padding-top: 0; }
.open-form-subtitle { font-size: 13px; font-weight: 800; color: var(--ink); }
.organizer-terms-title { font-size: 14px; font-weight: 800; color: var(--blue-700); text-align: center; margin-bottom: 8px; }
.organizer-terms-list { font-size: 11.5px; color: #46536a; line-height: 1.8; padding-left: 18px; margin: 0; list-style: decimal; }
.organizer-terms-list ol { padding-left: 18px; margin: 4px 0; list-style: lower-roman; }
.organizer-terms-list li { margin-bottom: 6px; }

/* ---------- confirm modal (棄権確認など) ---------- */
.confirm-modal {
  border: none;
  border-radius: var(--card-radius);
  padding: 24px 20px;
  max-width: 320px;
  width: 88%;
  box-shadow: 0 8px 30px rgba(20, 40, 90, .25);
}
.confirm-modal::backdrop { background: rgba(11, 32, 79, .45); }
.confirm-modal-title { font-size: 14px; font-weight: 800; color: var(--ink); text-align: center; margin-bottom: 16px; }
.confirm-modal-actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- button hover ---------- */
.form-btn, .flow-btn, .home-organizer-btn, .team-current-btn, .cal-nav-btn,
.events-page-btn, .events-page-nav, .events-detail-btn, .events-search-btn,
.events-menu-btn, .casual-scorecard-btn, .casual-back-btn, .entry-back-btn,
.practice-back-btn, .practice-menu-add-btn, .status-detail-btn,
.appl-btn-primary, .appl-btn-outline, .appl-list-link, .cal-add-btn {
  cursor: pointer;
  transition: filter .15s ease;
}
.events-page-nav.is-disabled { cursor: default; }
@media (hover: hover) {
  .form-btn:hover, .flow-btn:hover, .home-organizer-btn:hover, .team-current-btn:hover,
  .cal-nav-btn:hover, .events-page-btn:hover, .events-page-nav:not(.is-disabled):hover,
  .events-detail-btn:hover, .events-search-btn:hover, .events-menu-btn:hover,
  .casual-scorecard-btn:hover, .casual-back-btn:hover, .entry-back-btn:hover,
  .practice-back-btn:hover, .practice-menu-add-btn:hover, .status-detail-btn:hover,
  .appl-btn-primary:hover, .appl-btn-outline:hover, .appl-list-link:hover, .cal-add-btn:hover {
    filter: brightness(.9);
  }
}

/* ---------- bottom nav ---------- */
.bottom-nav {
  display: flex;
  background: var(--navy);
  padding: 0 0 env(safe-area-inset-bottom);
  position: sticky;
  bottom: 0;
  z-index: 20;
  box-shadow: 0 -2px 10px rgba(11, 32, 79, .18);
  flex: none;
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #b9c6e6;
  font-size: 9.5px;
  font-weight: 600;
  text-align: center;
  padding: 8px 0;
  border-radius: 10px;
}
.bottom-nav-item img { width: 25px; height: 25px; object-fit: contain; filter: brightness(0) invert(1); opacity: .75; }
.bottom-nav-item.is-active { color: #fff; background: rgba(255, 255, 255, .15); }
.bottom-nav-item.is-active img { opacity: 1; }
.bottom-nav-item:hover { background: rgba(255, 255, 255, .08); }

@media (min-width: 540px) {
  .bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    border-radius: 16px;
  }
}

@media (min-width: 1024px) {
  .bottom-nav { max-width: 1100px; }
}

@media (min-width: 400px) {
  .header-username { font-size: 12.5px; }
  .menu-tab { font-size: 11.5px; }
  .welcome-text h2 { font-size: 15px; }
}