/* =========================
   Apple-ish minimal theme
   ========================= */
:root{
  --bg: #070A12;
  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --dim: rgba(255,255,255,.48);

  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --shadow2: 0 12px 36px rgba(0,0,0,.35);

  --r12: 12px;
  --r16: 16px;
  --r20: 20px;

  --pad: 18px;

  --primary1: #7C3AED;
  --primary2: #22D3EE;

  --success: #2DD4BF;
  --danger: #FB7185;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "SF Pro Display","SF Pro Text", "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  letter-spacing: .2px;
}

/* ===== Background ===== */
.bg{ position: fixed; inset:0; z-index:-1; overflow:hidden; }
.bg-grid{
  position:absolute; inset:-20%;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity:.35;
  transform: rotate(-6deg);
}
.bg-blur{
  position:absolute;
  width: 520px;
  height: 520px;
  filter: blur(70px);
  opacity:.55;
  border-radius: 999px;
}
.b1{ left: -120px; top: -140px; background: radial-gradient(circle, rgba(124,58,237,.95), transparent 60%); }
.b2{ right:-160px; bottom:-180px; background: radial-gradient(circle, rgba(34,211,238,.9), transparent 60%); }

/* ===== Layout ===== */
.wrap{
  max-width: 1060px;
  margin: 0 auto;
  padding: 18px;
  padding-bottom: 64px;
}

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--r20);
}

/* ===== Header ===== */
.header{
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 16px;
  align-items: start;
}

.brand{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 6px 4px;
}
.logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(34,211,238,.95));
  box-shadow: 0 14px 30px rgba(124,58,237,.25);
}
.brand-title{
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
}
.brand-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.auth{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items:end;
}

.field{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
label{
  font-size: 12px;
  color: var(--muted);
}
input{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.20);
  color: var(--text);
  padding: 12px 12px;
  border-radius: 14px;
  outline: none;
  transition: border-color .2s, transform .12s, background .2s;
}
input::placeholder{ color: rgba(255,255,255,.35); }
input:focus{
  border-color: rgba(34,211,238,.55);
  background: rgba(0,0,0,.26);
}

.btnrow{
  grid-column: 1 / -1;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.btn{
  border-radius: 14px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s, background .2s, border-color .2s, opacity .2s;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); }
.btn:active{ transform: translateY(0px) scale(.99); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.btn.primary{
  border: none;
  background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(34,211,238,.95));
  box-shadow: 0 14px 30px rgba(34,211,238,.10), 0 18px 40px rgba(124,58,237,.16);
}
.btn.primary:hover{ background: linear-gradient(135deg, rgba(124,58,237,1), rgba(34,211,238,1)); }

.btn.secondary{
  background: rgba(255,255,255,.08);
}

.btn.ghost{
  background: rgba(0,0,0,.18);
}

.btn.big{
  padding: 14px 16px;
  border-radius: 16px;
  font-weight: 700;
}

.note{
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--muted);
  min-height: 18px;
}
.note.ok{ color: rgba(45,212,191,.95); }
.note.ng{ color: rgba(251,113,133,.95); }

/* ===== Main / Calendar ===== */
.main{
  margin-top: 16px;
}
.calendarCard{
  padding: 18px;
}

.calTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.calTitle .title{
  font-weight: 800;
  font-size: 16px;
}
.calTitle .subtitle{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
}

.nav{
  display:flex;
  align-items:center;
  gap: 10px;
}
.month{
  min-width: 140px;
  text-align:center;
  font-weight: 800;
  font-family: var(--mono);
  letter-spacing: .6px;
  color: rgba(255,255,255,.92);
}

.iconBtn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s, background .2s;
}
.iconBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); }
.iconBtn:active{ transform: translateY(0px) scale(.99); }

.calendar{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}

.grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
}

.dow{
  padding: 10px 8px;
  text-align:center;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.cell{
  min-height: 102px;
  padding: 10px;
  position: relative;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition: background .2s, transform .12s;
}
.cell:nth-child(7n){ border-right:none; }
.cell:hover{ background: rgba(255,255,255,.04); transform: translateY(-1px); }
.cell:active{ transform: translateY(0px) scale(.995); }

.cell.mute{
  cursor: default;
  color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.02);
}
.dateNum{
  font-weight: 800;
  font-size: 14px;
  color: rgba(255,255,255,.92);
}

.badge{
  position:absolute;
  right: 10px;
  top: 10px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  color: rgba(255,255,255,.95);
  background: rgba(124,58,237,.22);
  border: 1px solid rgba(124,58,237,.35);
}

.footerHint{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-size: 12.5px;
}
.pill{
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
}

/* ===== Modal ===== */
.modalBg{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
  background: rgba(0,0,0,.55);
}
.hidden{ display:none; }

.modal{
  width: min(560px, 100%);
  padding: 16px;
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.modalTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.modalLabel{
  font-size: 12px;
  color: var(--muted);
}
.modalDate{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .6px;
  font-family: var(--mono);
}

.sectionTitle{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: rgba(255,255,255,.86);
  font-weight: 800;
}
.countBadge{
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
}

.plist{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.plist li{
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.88);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 880px){
  .header{
    grid-template-columns: 1fr;
  }
  .auth{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px){
  .wrap{ padding: 12px; }
  .auth{ grid-template-columns: 1fr; }
  .btnrow{ gap: 8px; }
  .btn, .iconBtn{ width: 100%; }
  .nav{ width: 100%; justify-content: space-between; }
  .month{ min-width: unset; }

  .cell{ min-height: 70px; padding: 8px; }
  .dow{ padding: 8px 4px; font-size: 11px; }
  .badge{ right: 8px; top: 8px; font-size: 10px; padding: 2px 7px; }

  /* モーダルは下から出る感じに見せる */
  .modalBg{ align-items:flex-end; }
  .modal{
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@media (max-width: 380px){
  .cell{ min-height: 62px; }
}

/* ============================================================
   追記：Event Registration / Event List / Event Detail UI
   ============================================================ */

/* ---- Small helper text inside cells (event count) ---- */
.badge.badgeEvent{
  background: rgba(34,211,238,.18);
  border: 1px solid rgba(34,211,238,.30);
}

/* ---- “+ Event” Floating Action Button ---- */
.fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(34,211,238,.95));
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  color: rgba(255,255,255,.96);
  font-size: 28px;
  line-height: 56px;
  text-align: center;
  cursor:pointer;
  user-select:none;
  transition: transform .12s, filter .2s;
  z-index: 20;
}
.fab:hover{ transform: translateY(-2px); filter: brightness(1.03); }
.fab:active{ transform: translateY(0px) scale(.99); }
.fab:disabled{ opacity:.45; cursor:not-allowed; }

/* ---- Event Register Modal ---- */
.modalWide{
  width: min(720px, 100%);
}

.formGrid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.formGrid .field textarea,
.formGrid .field input{
  width: 100%;
}

textarea{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.20);
  color: var(--text);
  padding: 12px 12px;
  border-radius: 14px;
  outline: none;
  resize: vertical;
  min-height: 92px;
  transition: border-color .2s, background .2s;
}
textarea:focus{
  border-color: rgba(34,211,238,.55);
  background: rgba(0,0,0,.26);
}

/* Full-width field in grid */
.field.full{ grid-column: 1 / -1; }

/* A subtle divider inside modal */
.hr{
  height: 1px;
  margin: 12px 0;
  background: rgba(255,255,255,.10);
  border: none;
}

/* ---- Event list (inside a date modal) ---- */
.eventList{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.eventCard{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  cursor:pointer;
  transition: transform .12s, background .2s, border-color .2s;
}
.eventCard:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
}
.eventCard:active{ transform: translateY(0px) scale(.995); }

.eventTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.eventName{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 15px;
}
.eventMeta{
  margin-top: 6px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-size: 12px;
}

.tag.fee{
  border-color: rgba(34,211,238,.22);
  background: rgba(34,211,238,.10);
}
.tag.place{
  border-color: rgba(124,58,237,.22);
  background: rgba(124,58,237,.10);
}

/* ---- Event detail area inside modal ---- */
.detailBox{
  margin-top: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}

.detailRow{
  display:flex;
  gap: 10px;
  margin-top: 8px;
  color: rgba(255,255,255,.86);
  font-size: 13px;
}
.detailKey{
  width: 84px;
  color: var(--muted);
  font-size: 12px;
}
.detailVal{
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Join button row in event detail ---- */
.actionRow{
  margin-top: 12px;
  display:flex;
  gap: 10px;
}
.actionRow .btn{ flex: 1; }

/* ---- “empty state” ---- */
.empty{
  color: var(--muted);
  font-size: 13px;
  padding: 10px 0;
}

/* ---- Responsive for new UI ---- */
@media (max-width: 640px){
  .fab{
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
    line-height: 54px;
    border-radius: 18px;
  }

  .formGrid{
    grid-template-columns: 1fr;
  }
  .detailKey{ width: 72px; }
  .actionRow{ flex-direction: column; }
}

/* ===== Mobile Event Modal Input Fix ===== */
@media (max-width: 640px) {
  .formGrid input,
  .formGrid textarea {
    height: 44px;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 14px;
  }

  .formGrid textarea {
    height: auto;
    min-height: 72px;
  }

  #eventDate {
    text-align: center;
    font-weight: 700;
    letter-spacing: .4px;
  }
}

/* ===== Close button smaller (X) ===== */
#closeModal.iconBtn,
#closeEventModal.iconBtn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 34px;
}

/* スマホでも押しやすさは確保しつつ少し小さめ */
@media (max-width: 640px){
  #closeModal.iconBtn,
  #closeEventModal.iconBtn{
    width: 38px;
    height: 38px;
    border-radius: 14px;
    font-size: 18px;
    line-height: 38px;
  }
}

/* ============================================================
   追記：SPA Views (Login / Management / MyPage) + Menu + Payment
   ============================================================ */

/* view wrappers */
.view { margin-top: 16px; }
.viewPad { padding: 18px; }

.viewTitle{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
}
.viewSub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.viewTopRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

/* Menu */
.menuBar{
  margin-top: 14px;
  padding: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
}

.menuBtn{
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s, background .2s, border-color .2s, opacity .2s;
}

.menuBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); }
.menuBtn:active{ transform: translateY(0px) scale(.99); }
.menuBtn.ghost{ background: rgba(0,0,0,.18); }

.menuSep{
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 0 2px;
}

@media (max-width: 640px){
  .menuBar{ flex-wrap: wrap; }
  .menuBtn{ flex: 1; }
  .menuSep{
    flex-basis: 100%;
    height: 0;
    background: transparent;
    margin: 0;
  }
}

/* Login tips */
.tips{ margin-top: 12px; }
.tipCard{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}
.tipTitle{ font-weight: 800; }
.tipList{
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}
.tipList li{ margin: 4px 0; }

/* MyPage card */
.mpCard{
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}
.mpCardTitle{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;
}

.mpRow{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

.mpKey{
  width: 84px;
  color: var(--muted);
  font-size: 12px;
}

.mpVal{
  flex: 1;
  font-size: 13px;
  color: rgba(255,255,255,.90);
  word-break: break-word;
}

.mpGrid2{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mpMini{
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.mpMiniKey{
  font-size: 11.5px;
  color: var(--muted);
}

.mpMiniVal{
  margin-top: 4px;
  font-weight: 900;
  letter-spacing: .2px;
}

/* Payment modal bits */
.payInfo{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}
.payLine{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 0;
  color: rgba(255,255,255,.86);
}
.payLine span{
  color: var(--muted);
  font-size: 12px;
}

.payBtns{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

/* MyPage: mpNext hidden helper
   （.hidden は既存で display:none だが、念のため） */
.mpNext.hidden{ display:none; }

/* Make sure pay modal appears above everything */
#payModalBg{ z-index: 50; }

/* close button style also applies to pay modal */
#closePayModal.iconBtn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 34px;
}
@media (max-width: 640px){
  #closePayModal.iconBtn{
    width: 38px;
    height: 38px;
    border-radius: 14px;
    font-size: 18px;
    line-height: 38px;
  }
}
.payDest{
  margin-top: 10px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.payDestLeft{ flex: 1; }
.payDestRight{ width: 220px; }
.qrImg{
  width: 220px;
  height: 220px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  object-fit: cover;
}
@media (max-width: 640px){
  .payDest{ flex-direction: column; }
  .payDestRight{ width: 100%; }
  .qrImg{ width: 100%; height: auto; aspect-ratio: 1/1; }
}

/* Calendar cell event titles */
.eventTitles{
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.eventTitleLine{
  font-size: 11px;
  line-height: 1.2;
  padding: 4px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  max-width: 100%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   FIX: Mobile calendar shows event titles
   - ensure enough height for titles
   - show only 1 title on mobile (2件は潰れやすい)
   ============================================================ */
@media (max-width: 640px){

  /* セルの高さを確保（イベント名が見えるように） */
  .cell{
    min-height: 92px;   /* 70px → 92px に増やす */
    padding: 8px;
  }

  /* イベント名の見た目を小さくして収める */
  .eventTitles{
    margin-top: 6px;
    gap: 4px;
  }
  .eventTitleLine{
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 9px;
  }

  /* スマホは最大1件だけ表示（2件目以降は隠す） */
  .eventTitles .eventTitleLine:nth-child(n+2){
    display:none;
  }
}