@charset "UTF-8";
/* カレンダーの基本 */
.sckc{--gap:6px;position:relative;margin-bottom: 30px;}
.sckc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap)}
.sckc .day{border:1px solid #e5e7eb;border-radius:.5rem;min-height:90px;padding:.4rem;position:relative;background:#fff}
.sckc .num{font-weight:700}
.sckc .badges{margin-top:.25rem}
.sckc .badge{display:inline-block;padding:.15em .45em;margin:.1rem .1rem 0 0;border-radius:.5rem;font-size:12px;color:#fff}
.sckc-legend{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0}
.sckc-caption{font-weight:700}
.sckc-nav{display:flex;align-items:center;justify-content:space-between;margin:.25rem 0 .25rem}
.sckc-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;border-radius:.5rem;padding:.25rem .5rem;cursor:pointer;background:#fff}
.sckc--loading::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.6);backdrop-filter:saturate(140%) blur(2px)}
.sckc-selectors{display:flex;gap:.5rem;align-items:center;margin:.25rem 0 .5rem}
.sckc-selectors select{padding:.25rem .5rem;border:1px solid #e5e7eb;border-radius:.5rem;background:#fff}


/* 曜日ヘッダー＆土日色 */
.sckc .head{font-weight:600;text-align:center;padding:.25rem 0;color:#374151}
.sckc .head.dow-0{color:#EF4444}
.sckc .head.dow-6{color:#2563EB}
.sckc .day.dow-0 .num{color:#EF4444}
.sckc .day.dow-6 .num{color:#2563EB}


/* 凡例ボタン（ON/OFFトグル） */
.sckc-legend .legend-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border-radius:.5rem;font-size:12px;border:1px solid rgba(0,0,0,.06);cursor:pointer;user-select:none;opacity:.9;transition:opacity .15s ease,transform .06s ease,background-color .15s ease,color .15s ease,border-color .15s ease;color:#fff;background:var(--sckc-color,#6b7280);border-color:transparent}
/* hover: 色をわずかに薄く（color-mix対応ブラウザ） */
@supports (background: color-mix(in srgb, red, white)){
.sckc-legend .legend-btn[aria-pressed="true"]:hover{background:color-mix(in srgb, var(--sckc-color) 85%, white)}
.sckc-legend .legend-btn[aria-pressed="false"]:hover{color:color-mix(in srgb, var(--sckc-color) 85%, black);border-color:color-mix(in srgb, var(--sckc-color) 85%, white)}
}
/* hover: フォールバック（color-mix未対応） */
@supports not (background: color-mix(in srgb, red, white)){
.sckc-legend .legend-btn[aria-pressed="true"]:hover{opacity:.85}
.sckc-legend .legend-btn[aria-pressed="false"]:hover{opacity:.85}
}
/* hover: 影とわずかな持ち上がり */
.sckc-legend .legend-btn:hover{box-shadow:0 6px 20px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08);transform:translateY(-1px)}
/* キーボード操作のフォーカス時にも軽い影 */
.sckc-legend .legend-btn:focus-visible{box-shadow:0 6px 20px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.1)}
.sckc-legend .legend-btn[aria-pressed="true"]{opacity:1}
.sckc-legend .legend-btn[aria-pressed="false"]{background:#fff;color:var(--sckc-color,#6b7280);border-color:var(--sckc-color,#6b7280)}
.sckc-legend .legend-btn:focus{outline:2px solid rgba(0,0,0,.15);outline-offset:2px}
.sckc-legend .legend-btn:active{transform:translateY(1px);box-shadow:0 2px 4px rgba(0,0,0,.12)}

/* ===== 今日の強調 ===== */
.sckc .day.is-today {
  position: relative;
  border: 1px solid #111827;          /* 枠線を太く濃く */
  box-shadow: inset 0 0 0 1px #111827;/* 内側線でさらに強調 */
  border-radius: 6px;
}

/* キーボード操作でも分かるように（任意） */
.sckc .day.is-today:focus-within {
  outline: 2px solid #111827;
  outline-offset: 2px;
}