/* hidden を必ず隠す（テーマ干渉対策） */
.oc-modal[hidden]{ display:none !important; }

/* ===== レイアウト：ヘッダ・グリッド・隙間ゼロ ===== */
.oc-wrap{ --gap:0; font-size:14px; }
.oc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2.5rem; padding:0 20px;}
.oc-title{font-weight:600; font-size:2.6rem; letter-spacing:3px;}
.oc-month-head{display:none}

.oc-nav{
  position:relative;
  width:36px; height:36px;
  border:0;
  background:none;
  cursor:pointer;
  padding:0;
  font-size:0;
  line-height:0;
  display:grid; place-items:center;
  transition:background .15s ease, border-color .15s ease, transform .05s ease;
  color:#111; 
}

.oc-nav::before{
  content:"";
  display:block;
  width:20px; height:20px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
}

.oc-next::before{ transform: rotate(45deg); }
.oc-prev::before{ transform: rotate(-135deg); }



/* 無効時 */
.oc-nav[disabled]{
  opacity:.45; cursor:not-allowed;
  background:#fafafa;
}

/* 小さめにしたい時（任意でクラス追加して使う） */
.oc-nav.oc-sm{ width:30px; height:30px; border-radius:8px; }
.oc-nav.oc-sm::before{ width:8px; height:8px; border-width:2px; }

.oc-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:0; }
.oc-dow{font-size:2.6rem;font-weight:600;text-align:center;padding:.35rem 0;color:#444;border:1px solid #DED9D5;background:#fafafa}
.oc-dow.oc-sat{ background: var(--sat-bg); color: var(--sat-dow); }
.oc-dow.oc-sun{ background: var(--sun-bg); color: var(--sun-dow); }
/* セル：隙間ゼロで罫線 */
.oc-cell{
  min-height:110px;
  border:1px solid #DED9D5;
  border-radius:0;
  padding:.45rem 0 1.45rem 0;
  background:#fff;
  position:relative;
}

/* 月外セルは空ボックス（枠のみ） */
.oc-out{ background:#fff !important; color:transparent; }
.oc-out *{ display:none !important; }

/* 今日強調（枠線） */
.oc-today{ outline:2px solid #5aa7ff; outline-offset:-2px; }

/* 曜日色（セル背景 & 日付色） */
:root{
  --sat-bg:#f6fbff;
  --sun-bg:#fdf3f2;
  --sat-date:#1b8bbe;
  --sun-date:#FF0000;
  --sat-dow:#1d4ed8;  --sun-dow:#FF0000; 

  /* 帯の色（浴場固定色） */
  --bathA-bg:#1b8bbe;  --bathA-fg:#ffffff;
  --bathB-bg:#1c6558;  --bathB-fg:#ffffff;
}
.oc-cell.oc-sat{ background:var(--sat-bg); }
.oc-cell.oc-sun{ background:var(--sun-bg); }
.oc-cell.oc-sat .oc-date{ color:var(--sat-date); }
.oc-cell.oc-sun .oc-date{ color:var(--sun-date); }

.oc-date{font-weight:500;font-size:2.4rem;margin-bottom:.3rem;color:#222; padding:0 0 0 10px;}


:root{
  --event-bg: #FFFFBF;
  --event-bd: #DED9D5;
}

.oc-cell.oc-has-event{
  background: var(--event-bg) !important;
}

.oc-cell.oc-has-event{
  border-color: var(--event-bd);
}

.oc-cell.oc-has-event.oc-today{
  outline: 2px solid #5aa7ff;
  outline-offset: -2px;
}

/* ===== 帯：A/B 固定、丸だけ男/女 ===== */
.oc-baths{
  display:grid;
  grid-template-rows:38px 38px;
  gap:0;
  margin-top:.2rem;
}

.oc-bathA, .oc-bathB{
  display:flex;
  align-items:center;
  gap:.5rem;
  height:38px;
  padding:0 .6rem;
  font-size:1.6rem;
  font-weight:700;
  border:0;
  letter-spacing:2px;
  color:#fff;
}
.oc-bathA{ background:var(--bathA-bg); color:var(--bathA-fg); }
.oc-bathB{ background:var(--bathB-bg); color:var(--bathB-fg); }

.oc-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  font-size:.78rem; line-height:1;
  border:1px solid rgba(0,0,0,.1); background:#fff; color:#111;
}

:root{
  --man-bg:   #2B2D87;
  --man-fg:   #ffffff;
  --man-bord: #2B2D87;

  --woman-bg: #F171AA;
  --woman-fg: #ffffff;
  --woman-bord:#F171AA;
}
.oc-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  font-size:1.3rem; line-height:1;
  border:1px solid rgba(0,0,0,.1);
  background:#fff; color:#111;
}
.oc-mark.oc-man{
  background: var(--man-bg);
  color: var(--man-fg);
  border-color: var(--man-bord);
}
.oc-mark.oc-woman{
  background: var(--woman-bg);
  color: var(--woman-fg);
  border-color: var(--woman-bord);
}
.oc-label{ white-space:nowrap; display:flex; width:80px; }

/* 定休日は帯を薄く */
.oc-badge{display:inline-block;font-size:2.0rem; font-weight:600;padding:.1rem .4rem;border-radius:.4rem;border:1px solid #F6F6F6;margin-top:.25rem}
.oc-badge-closed{color:#000;}
.oc-closed .oc-baths{ opacity:.45; }
.oc-closed{ background:#F6F6F6; }
/* イベントリスト（既存） */
.oc-events{margin:.4rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.25rem}
.oc-event{display:block;width:100%;text-align:left;background:none;border:0;padding:.25rem .6rem;font-size:1.6rem;cursor:pointer; color:#F22E00; font-weight:bold;}
.oc-event:hover{background:#FF0000; color:#FFFFFF;}

/* モーダル */
.oc-modal{position:fixed;inset:0;display:grid;place-items:center;z-index:9999}
.oc-modal__bg{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.oc-modal__card{position:relative;background:#fff;width:min(92vw,560px);max-height:80vh;overflow:auto;border-radius:.8rem;padding:2rem;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.oc-modal__close{position:absolute;top:.5rem;right:.6rem;border:none;background:transparent;font-size:3.6rem;cursor:pointer}
.oc-modal__date{color:#666;font-size:1.3rem}
.oc-modal__body{margin-top:.4rem}
.oc-modal__body p{margin:.6rem 0}
.oc-modal__link a{display:inline-block;margin-top:.4rem;text-decoration:underline}





@media (max-width: 1024px){
  .oc-months{ overflow:scroll; }
}

/* ====== Responsive ======。
==================================== */

.oc-months{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.oc-month{ min-width: 800px; }

@media (min-width: 800px){
  .oc-title{ font-size: 2.4em; letter-spacing: 3px; }
  .oc-dow{   font-size: 2.4rem; }
  .oc-date{  font-size: 2.2rem; }

  .oc-nav{ width: 36px; height: 36px; }
  .oc-nav::before{ width: 20px; height: 20px; border-top-width: 2px; border-right-width: 2px; }

  .oc-cell{ min-height: 110px; padding-top: .45rem; padding-bottom: 1.45rem; }

  .oc-baths{ grid-template-rows: 38px 38px; }
  .oc-bathA, .oc-bathB{ height: 38px; font-size: 1.2rem; letter-spacing: 2px; padding: 0 .6rem; }

  .oc-mark{ width: 28px; height: 28px; font-size: 1.1rem; border-width: 1px; }

  .oc-event{ font-size: 1.2rem; padding: .25rem .6rem; }
}

/* =========================
   <800px のとき
   ========================= */

@media (max-width: 799.98px){
  :root{ --oc-down: clamp(0.9, calc(100vw / 800), 1); }

  .oc-title{ font-size: calc(2.6rem * var(--oc-down)); letter-spacing: calc(3px * var(--oc-down)); }
  .oc-dow{   font-size: calc(2.6rem * var(--oc-down)); }
  .oc-date{  font-size: calc(2.4rem * var(--oc-down)); }

  .oc-nav{ width: calc(36px * var(--oc-down)); height: calc(36px * var(--oc-down)); }
  .oc-nav::before{
    width: calc(20px * var(--oc-down)); height: calc(20px * var(--oc-down));
    border-top-width: calc(2px * var(--oc-down)); border-right-width: calc(2px * var(--oc-down));
  }

  .oc-cell{ min-height: calc(110px * var(--oc-down)); padding-top: calc(.45rem * var(--oc-down)); padding-bottom: calc(1.45rem * var(--oc-down)); }

  .oc-baths{ grid-template-rows: calc(38px * var(--oc-down)) calc(38px * var(--oc-down)); }
  .oc-bathA, .oc-bathB{
    height: calc(38px * var(--oc-down));
    font-size: calc(1.2rem * var(--oc-down));
    letter-spacing: calc(2px * var(--oc-down));
    padding: 0 calc(.6rem * var(--oc-down));
  }

  .oc-mark{
    width: calc(28px * var(--oc-down));
    height: calc(28px * var(--oc-down));
    font-size: calc(1.2rem * var(--oc-down));
    border-width: calc(1px * var(--oc-down));
  }

  .oc-event{ font-size: calc(1.2rem * var(--oc-down)); padding: .25rem calc(.6rem * var(--oc-down)); }

  .oc-event{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .oc-label{ width:auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}