@charset "utf-8";
/* ============================================================
   営業カレンダー
   ------------------------------------------------------------
   ★このファイルはプラグインが自動で読み込みます（貼り付け不要）。
   ★色を変えたいときは、追加CSSで下の変数を上書きしてください。

       .ckd-cal { --cal-short-bg: #eaf3e3; }

   ★PCとスマホで作りを変えています。
     PC   … 7列の面グリッド（ひと月をひと目で）
     スマホ … 面グリッドは色だけにして、下の「いつもと違う日」で読ませる
             （7列を小さくしただけでは、指でも目でもつらいため）
   ============================================================ */

/* ★既定の幅。カレンダーは広すぎるとマスが伸びて読みにくくなります。
   　 置いた場所に合わせたいときは [ckd_calendar width="783"]、
   　 枠いっぱいにしたいときは width="full" を使ってください。 */
/* ★クラスを2回書いて、詳細度を1段上げています。
   　 追加CSS（wp-custom-css）は、プラグインのCSSより「後」に出ます。
   　 同じ詳細度だと、後に書いたほうが勝つので、中央寄せが外れます。
   　 !important は使いません。効かせたい理由が読めなくなるためです。 */
.ckd-cal.ckd-cal {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.ckd-cal.is-full { max-width: none; }

/* ------------------------------------------------------------
   色 ★v1.13.1

   色を「どこの上に載る字か」で2つに分けました。

     A. マスの中の字 … いつも明るいマスの上。★背景が変わっても変えない
     B. 地の上の字   … 月名・年・曜日・凡例。★置いた場所の背景の上

   ★もとは --cal-ink 1つが両方を兼ねていました
     （.ckd-cal-table にも .ckd-cal-legend にも同じ色を渡していた）。
     ★だから濃い背景に置くと詰みます。
     　 凡例を明るくすればマスの日付が消え、日付を残せば凡例が読めない。
     　 **1つの変数が2つの仕事をしていました。**
     　 背景が違う字は、同じ色を共有できません。

   ★数字は目で選んでいません。白／紺それぞれの上で 4.5:1 以上になるまで
     明度だけを動かして求めました（色相と彩度は元のまま＝印象を変えない）。
     tools/check-calendar-look.js が毎回、実際に描いて測り直します。
   ------------------------------------------------------------ */
.ckd-cal {
  /* A. マスの中（明るいマスの上。★tone では変えません） */
  --cal-ink:       #3F3F3D;   /* ふつうの日の数字 */
  --cal-holi:      #D33929;   /* 祝日の数字（★旧 #DD5F52 は 3.44 で不足） */
  --cal-closed-fg: #5B5B57;   /* 休みの数字 */
  --cal-short-fg:  #546E43;   /* 時短の字 */

  /* ★タブとフォーカス。どちらも**自前の白い面の上**なので tone では変えません。
     　 ここを暗い側で入れ替えると、白いタブの上に薄い字が乗って読めなくなります。 */
  --cal-accent:    #6F7766;   /* タブ（★旧 #79826F は 4.01 で不足） */
  --cal-today:     #47513C;

  /* ★★v1.13.3：3つのマスの色を、できるだけ離しました。
     　 旧：通常↔休み 1.12 ／ 通常↔時短 1.09 ／ 休み↔時短 **1.03**
     　 新：　　　　　1.48 ／ 　　　　　1.22 ／ 　　　　　1.21
     ★白いページでは周りの白が基準になって見分けられていましたが、
     　 濃い地の上では3つとも「明るい札」にしか見えませんでした。
     ★★ただし、これでも足りません。
     　 明るい面を3つ並べて互いに 3:1 にするのは**数学的に不可能**です
     　 （明るさを保つ範囲での最大は 1.5 倍ほど。計算で確かめました）。
     　 → **色は補助**です。状態は下の「休／時短」の文字が持ちます。 */
  --cal-open-bg:   #FFFFFF;   /* ふつうの営業日 */
  --cal-closed-bg: #D5D5CD;   /* お休み */
  --cal-short-bg:  #DEEDD4;   /* 時短 */

  /* B. 地の上（★tone で入れ替わります。既定は明るい背景の上） */
  --cal-on-bg:     #3F3F3D;   /* 凡例 */
  --cal-mono:      #687782;   /* 年・September（★旧 #9BA7AF は 2.46 で不足） */
  --cal-head:      #72726D;   /* 曜日（★旧 #A2A29E は 2.45 で不足） */
  --cal-sat:       #3176B0;   /* 土（★旧 #8FBBE0 は 1.94 で不足） */
  --cal-sun:       #B45613;   /* 日（★旧 #EE9A5E は 2.13 で不足） */
  --cal-rule:      #E6E6E2;   /* 飾りの罫線 */
  /* ★前月・翌月のマスは背景が transparent です。＝**地の上**の字。
     　 ここを A に入れかけました。使われている背景で分けること。 */
  --cal-faint:     #6E7880;   /* 前月・翌月（★旧 #BFC4C8 は 1.76 で不足） */
}

/* ★暗い背景の上に置くとき：[ckd_calendar tone="dark"]
   　 入れ替えるのは B だけです。マスは明るいままなので A は動かしません。
   ★付け忘れても「読みにくい」で済み、**消えることはありません**
   　（マスの中の字は、どちらの tone でも明るいマスの上にいます）。 */
.ckd-cal.is-dark {
  --cal-on-bg:     #C7CDD4;
  --cal-mono:      #9BA7AF;
  --cal-head:      #A2A29E;
  --cal-sat:       #8FBBE0;
  --cal-sun:       #EE9A5E;
  --cal-rule:      rgba(255,255,255,.16);
  --cal-faint:     #8894A0;
}

/* --- 今月／来月 --- */
.ckd-cal-tabs { display: flex; gap: .6em; margin: 0 0 1.3em; }
.ckd-cal-tab {
  flex: 0 1 auto;
  padding: .5em 1.5em;
  min-height: 44px;
  border: 1px solid var(--cal-accent);
  border-radius: 999px;
  background: #FFF;
  color: var(--cal-accent);
  font-size: .88rem; font-weight: 600; line-height: 1.4;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ckd-cal-tab.is-active { background: var(--cal-accent); color: #FFF; }
.ckd-cal-tab:focus-visible { outline: 3px solid var(--cal-today); outline-offset: 2px; }

.ckd-cal-panel[hidden] { display: none; }

/* ------------------------------------------------------------
   シート
   ------------------------------------------------------------ */
/* ★v1.13.1：自分の幅を測れるようにします（下の cqw のため）。 */
.ckd-cal { container-type: inline-size; }

.ckd-cal-sheet {
  display: grid;
  grid-template-columns: minmax(128px, 0.85fr) 3.65fr;
  gap: 0 clamp(12px, 3vw, 40px);
  align-items: start;
}

.ckd-cal-side {
  display: grid;
  /* ★1fr のままにしてあります。grid の 1fr は既定で「中身より小さくならない」
     　 ので、September の幅は確保されます。ここは触る必要がありませんでした。
     ★途中で auto auto や minmax(0,1fr) に変えましたが、
     　 較正で「戻しても鳴らない」＝**効いていない**と分かったので戻しました。 */
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: .55rem;
  align-items: start;
}
.ckd-cal-mnum {
  grid-row: 1;
  /* ★★もとは 8.5vw。**窓の幅**で大きくなっていました。
     　 でも入る枠の幅は、カレンダー自身の幅（最大880px）で決まります。
     　 窓が広いほど数字だけが太り、September を枠の外へ押し出していました。
     　 ★実測：窓1200pxで +14px はみ出し。窓900pxでは、はみ出さない。
     　 → cqw（自分の幅の%）に変えて、器と中身を同じ物差しで測ります。 */
  font-size: clamp(4rem, 10.5cqw, 6.6rem);
  font-weight: 200; line-height: .8;
  color: var(--cal-mono); letter-spacing: -.03em;
}
.ckd-cal-mtext { grid-row: 1; display: flex; flex-direction: column; padding-top: .5em; }
.ckd-cal-year { font-size: clamp(1rem, 2.6cqw, 1.45rem); font-weight: 700; line-height: 1.1; color: var(--cal-mono); }
/* ★字間（.2em）は元のままです。
   　 途中で .12em に下げ、負のマージンで打ち消すところまでやりましたが、
   　 ★どちらも**要りませんでした。**
   　   数字を器基準（cqw）にした時点で、はみ出しは消えていました。
   　   負のマージンにいたっては、箱だけ縮めて中身は縮まないので、
   　   ★自分で 2px のはみ出しを作っていただけでした。
   　 較正が「字間を .2em に戻す」で鳴らなかったので気づきました。
   ★効いていない変更は残さないこと。デザインを変えた理由も残りません。 */
.ckd-cal-en   {
  font-size: clamp(.8rem, 1.9cqw, 1.05rem);
  font-weight: 300; line-height: 1.2; color: var(--cal-mono);
  letter-spacing: .2em;
}

.ckd-cal-rules {
  grid-column: 1 / -1; grid-row: 2; align-self: end;
  width: 68%;                 /* ★罫線を短くして、そのぶんカレンダーを広く */
  margin-top: 5.6em;          /* ★もう少し下に */
  height: 7em;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent calc(1.4em - 1px),
    var(--cal-rule) calc(1.4em - 1px), var(--cal-rule) 1.4em);
}

/* ------------------------------------------------------------
   表（面で見せる）
   ------------------------------------------------------------ */
.ckd-cal-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  color: var(--cal-ink);
}

.ckd-cal-head {
  padding: .2em 0 .7em;
  font-size: .68rem; font-weight: 500;
  color: var(--cal-head); letter-spacing: .2em; text-transform: lowercase;
}
.ckd-cal-head.is-sat { color: var(--cal-sat); }
.ckd-cal-head.is-sun { color: var(--cal-sun); }

.ckd-cal-cell {
  position: relative;
  height: 3.6em;
  padding: .5em .2em;
  border-radius: 9px;
  background: var(--cal-open-bg);
  /* ★v1.13.4：マスに輪郭を付けました。
     　 白いページに置くと、通常営業のマス（白）は地と**同じ色**になります（1.00）。
     　 　 マスの格子が消えて、日付が宙に浮きます。
     　 ★輪郭は**マスの色の上に**描かれるので、置いた場所の背景に左右されません。
     　 　 半透明の灰にしてあるので、白いマスでも緑のマスでも同じ濃さに見えます。
     ★.is-today は inset の影を使っています。border と重ならないよう、
     　 影のままにしてあります（両方 border にすると片方が消えます）。 */
  border: 1px solid rgba(58, 58, 52, .22);
  text-align: center;
  vertical-align: top;
}
.ckd-cal-day { display: block; font-size: 1.02rem; font-weight: 400; line-height: 1.1; }

/* 前月・翌月 */
.ckd-cal-cell.is-other { background: transparent; border-color: transparent; }
.ckd-cal-cell.is-other .ckd-cal-day { color: var(--cal-faint); font-size: .82rem; }
.ckd-cal-cell.is-other .ckd-cal-mark { opacity: .5; }

/* お休み・時短 */
.ckd-cal-cell.is-closed { background: var(--cal-closed-bg); }
.ckd-cal-cell.is-closed .ckd-cal-day { color: var(--cal-closed-fg); }
.ckd-cal-cell.is-short  { background: var(--cal-short-bg); }
.ckd-cal-cell.is-short .ckd-cal-day { color: var(--cal-short-fg); }
.ckd-cal-cell.is-other.is-closed,
.ckd-cal-cell.is-other.is-short { background: transparent; }

/* 祝日 */
.ckd-cal-cell.is-holiday .ckd-cal-day { color: var(--cal-holi); }
.ckd-cal-cell.is-holiday.is-other .ckd-cal-day { color: var(--cal-faint); }

/* 今日 */
.ckd-cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--cal-today); }

/* セルの中の小さい字
   ★★ここが「状態を持っている」ところです。色ではありません。
   　 色だけに頼ると、色で見分けにくい方には何も伝わりません。
   　 濃い地の上では、目の良い方にも伝わっていませんでした。
   　 → 読める大きさ・太さにして、**どの幅でも消しません**（スマホ含む）。 */
.ckd-cal-mark { display: block; margin-top: .28rem; font-size: .68rem; font-weight: 700; line-height: 1; }
.ckd-cal-cell.is-open  .ckd-cal-mark { visibility: hidden; }
.ckd-cal-cell.is-short .ckd-cal-mark { color: var(--cal-short-fg); }
.ckd-cal-cell.is-short .ckd-cal-mark::after { content: "時短"; }
.ckd-cal-cell.is-closed .ckd-cal-mark { color: var(--cal-closed-fg); }
.ckd-cal-cell.is-closed .ckd-cal-mark::after { content: "休"; }

.ckd-cal-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------
   凡例
   ------------------------------------------------------------ */
.ckd-cal-legend {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: .5em 1.5em;
  margin: 1.2em 0 0; padding: 0;
  list-style: none;
  font-size: .86rem; color: var(--cal-on-bg);
}
.ckd-cal-legend-item { display: flex; align-items: center; gap: .5em; }
/* ★色そのものを見せます。中に文字は入れません（セルと同じ色であることが要点） */
.ckd-cal-legend-mark {
  flex: 0 0 auto;
  width: 1.9rem; height: 1.2rem;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.07);
  background: var(--cal-open-bg);
}
.ckd-cal-legend-item.ckd-cal-is-closed .ckd-cal-legend-mark { background: var(--cal-closed-bg); }
.ckd-cal-legend-item.ckd-cal-is-short  .ckd-cal-legend-mark { background: var(--cal-short-bg); }

/* ------------------------------------------------------------
   いつもと違う日
   ★スマホでいちばん読まれる場所です。
   ------------------------------------------------------------ */
/* ★★自分で背景を敷く箱は、自分で文字色も決めること。
   　 決めないと、置いた場所の文字色をそのまま受け継ぎます。
   　 濃いカードに置くと **明るい字が明るいパネルに載って消えます。**
   　 ★v1.13.1 で、まさにここが消えていました。
   　 　 私の検査は「手で並べた一覧」を測っていたので、
   　 　 一覧に入れ忘れた .ckd-cal-note-text を見落としました。
   　 　 ★手で並べた一覧は、書いた人が見落としたものを見落とします。
   　 　 いまは DOM から全部の文字を拾って測ります。 */
.ckd-cal-notes {
  margin: 1.4em 0 0;
  padding: 1em 1.2em;
  border-radius: 10px;
  background: #FAFAF8;
  color: var(--cal-ink);
}
.ckd-cal-notes-title {
  margin: 0 0 .6em;
  font-size: .85rem; font-weight: 700;
  color: var(--cal-today); letter-spacing: .04em;
}
.ckd-cal-notes-list { margin: 0; padding: 0; list-style: none; }
.ckd-cal-note {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .2em .8em;
  padding: .45em 0;
  border-top: 1px solid #ECECE8;
  font-size: .93rem; line-height: 1.6;
}
.ckd-cal-note:first-child { border-top: 0; padding-top: 0; }
.ckd-cal-note-date { flex: 0 0 auto; font-weight: 700; min-width: 5.2em; }
.ckd-cal-note.is-closed .ckd-cal-note-date { color: var(--cal-closed-fg); }
.ckd-cal-note.is-short  .ckd-cal-note-date { color: var(--cal-short-fg); }

/* ============================================================
   スマホ（≤640px）
   ★7列を小さくするのではなく、役割を分けます。
     グリッド … 色だけの「ひと目」
     一覧　　 … 実際に読む場所
   ============================================================ */
@media (max-width: 640px) {

  .ckd-cal-tabs { gap: .5em; }
  .ckd-cal-tab { flex: 1 1 0; padding: .5em .6em; }

  .ckd-cal-sheet { grid-template-columns: 1fr; gap: 0; }

  .ckd-cal-side {
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto;
    align-items: baseline;
    column-gap: .55rem;
    padding: 0 0 .6em;
  }
  .ckd-cal-mnum { font-size: 2.5rem; line-height: 1; }
  .ckd-cal-mtext { flex-direction: row; align-items: baseline; gap: .5rem; padding-top: 0; }
  .ckd-cal-year { font-size: 1.05rem; }
  .ckd-cal-en   { font-size: .82rem; letter-spacing: .12em; }
  .ckd-cal-rules { display: none; }

  .ckd-cal-table { border-spacing: 3px; }
  .ckd-cal-head  { font-size: .58rem; letter-spacing: .06em; padding: 0 0 .4em; }

  /* ★★v1.13.3：小さい字を消すのをやめました。
     　 消すと、スマホでは**色だけ**が状態を持つことになります。
     　 色で見分けにくい方には、何も伝わりません。
     　 潰れないよう、マスを少し高くして、日付を少し小さくして入れています。 */
  .ckd-cal-cell { height: 2.9em; padding: .3em .1em; border-radius: 7px; }
  .ckd-cal-day  { font-size: .82rem; font-weight: 500; }
  .ckd-cal-cell.is-other .ckd-cal-day { font-size: .7rem; }
  .ckd-cal-mark { display: block; margin-top: .18rem; font-size: .58rem; font-weight: 700; }

  .ckd-cal-legend { justify-content: flex-start; gap: .4em .9em; font-size: .78rem; margin-top: .9em; }
  .ckd-cal-legend-mark { width: 1.5rem; height: 1rem; }

  /* 一覧を主役にします */
  .ckd-cal-notes { margin-top: 1.1em; padding: .9em 1em; }
  .ckd-cal-notes-title { font-size: .9rem; }
  .ckd-cal-note { font-size: .95rem; padding: .55em 0; }
  .ckd-cal-note-date { min-width: 5.4em; }
}