/* カレンダー1枚。長さはすべて --mm の倍数で書き、画面では枠の幅に合わせて縮小する。 */
.sheet-wrap {
  container-type: inline-size;
  width: 100%;
}

.sheet {
  --mm: calc(100cqw / 297);
  --ink: #3d3029;
  --red: #d33b32;
  --blue: #2469ad;
  --line: #d8cec1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: calc(var(--mm) * 297);
  height: calc(var(--mm) * 210);
  padding: calc(var(--mm) * 8);
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.sheet[hidden] {
  display: none;
}

/* 見出し */
.s-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--mm) * 7);
  height: calc(var(--mm) * 40);
  padding: 0 calc(var(--mm) * 6);
  border-radius: calc(var(--mm) * 6);
  background: var(--tint);
}

.s-month {
  display: flex;
  flex: none;
  align-items: baseline;
  color: var(--accent);
}

.s-num {
  font-size: calc(var(--mm) * 35);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.s-gatsu {
  margin-left: calc(var(--mm) * 1.5);
  font-size: calc(var(--mm) * 13);
  font-weight: 900;
}

.s-meta {
  flex: 1;
  min-width: 0;
}

.s-year {
  font-size: calc(var(--mm) * 5.5);
}

.s-phrase {
  margin-top: calc(var(--mm) * 1);
  font-size: calc(var(--mm) * 7.4);
  font-weight: 900;
}

.s-label {
  margin-top: calc(var(--mm) * 1);
  color: var(--accent);
  font-size: calc(var(--mm) * 5.8);
  font-weight: 900;
  line-height: 1.1;
}

.s-label:empty {
  display: none;
}

.s-motifs {
  display: flex;
  flex: none;
  gap: calc(var(--mm) * 2);
}

.s-motifs .m {
  display: block;
  width: calc(var(--mm) * 31);
  height: calc(var(--mm) * 31);
}

/* 曜日 */
.s-dows {
  display: grid;
  flex: none;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(var(--mm) * 1.4);
  margin: calc(var(--mm) * 2.5) 0 calc(var(--mm) * 1.4);
  font-size: calc(var(--mm) * 6);
  font-weight: 900;
  text-align: center;
}

.s-dows .sun {
  color: var(--red);
}

.s-dows .sat {
  color: var(--blue);
}

/* 日付 */
.s-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: calc(var(--mm) * 1.4);
  min-height: 0;
}

.c {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: calc(var(--mm) * 1.2) calc(var(--mm) * 1) 0;
  overflow: hidden;
  border: calc(var(--mm) * 0.5) solid var(--line);
  border-radius: calc(var(--mm) * 3);
  text-align: center;
}

.c b {
  font-size: var(--num);
  font-weight: 900;
  line-height: 1;
}

.c span {
  display: block;
  margin-top: calc(var(--mm) * 0.6);
  font-size: var(--tag);
  line-height: 1.05;
  text-wrap: balance;
}

.c.sun b,
.c .hol {
  color: var(--red);
}

.c.sat b {
  color: var(--blue);
}

.c .evt {
  color: var(--accent);
}

.c.blank {
  border-color: transparent;
  background: #faf7f1;
}

.r4 { --num: calc(var(--mm) * 20); --tag: calc(var(--mm) * 5); }
.r5 { --num: calc(var(--mm) * 15.5); --tag: calc(var(--mm) * 4.3); }
.r6 { --num: calc(var(--mm) * 12.5); --tag: calc(var(--mm) * 3.8); }

/* 6週ある月は見出しを低くして、日付のマスを確保する */
.r6 .s-head {
  height: calc(var(--mm) * 34);
}

.r6 .s-num {
  font-size: calc(var(--mm) * 30);
}

.r6 .s-phrase {
  font-size: calc(var(--mm) * 6.4);
}

.r6 .s-motifs .m {
  width: calc(var(--mm) * 24);
  height: calc(var(--mm) * 24);
}

/* ぬりえ版: イラストと数字を白抜きにする（月の色はstyle属性で来るので!importantで消す） */
.sheet.d-nurie {
  --accent: #3d3029 !important;
  --tint: #fff !important;
  --red: #3d3029;
  --blue: #3d3029;
}

.d-nurie .s-head {
  border: calc(var(--mm) * 0.5) solid var(--line);
}

.d-nurie .m [fill]:not([fill="none"]):not(.ink) {
  fill: #fff;
}

.d-nurie .s-num,
.d-nurie .s-gatsu,
.d-nurie .c b {
  color: #fff;
  -webkit-text-stroke: calc(var(--mm) * 0.45) #3d3029;
}

.d-nurie .c.blank {
  background: none;
}

/* 予定かきこみ版: 数字を左上に寄せ、書く場所を広げる */
.d-memo .c {
  align-items: flex-start;
  padding: calc(var(--mm) * 1.2) calc(var(--mm) * 1.8) 0;
  text-align: left;
}

.d-memo .s-head {
  height: calc(var(--mm) * 30);
}

.d-memo .s-num {
  font-size: calc(var(--mm) * 26);
}

.d-memo .s-gatsu {
  font-size: calc(var(--mm) * 10);
}

.d-memo .s-motifs .m {
  width: calc(var(--mm) * 24);
  height: calc(var(--mm) * 24);
}

.d-memo .s-phrase {
  font-size: calc(var(--mm) * 6.4);
}

.d-memo .s-label {
  margin-top: calc(var(--mm) * 1);
  font-size: calc(var(--mm) * 5.6);
}

.d-memo.r4 { --num: calc(var(--mm) * 10); --tag: calc(var(--mm) * 4.4); }
.d-memo.r5 { --num: calc(var(--mm) * 9); --tag: calc(var(--mm) * 4.2); }
.d-memo.r6 { --num: calc(var(--mm) * 8); --tag: calc(var(--mm) * 3.8); }

/* 縦向き: 幅210mm×高さ297mm。見出しは2段にして、マスを縦に広げる */
.sheet.portrait {
  --mm: calc(100cqw / 210);
  width: calc(var(--mm) * 210);
  height: calc(var(--mm) * 297);
}

.sheet.portrait .s-head {
  display: grid;
  grid-template-areas:
    "month motifs"
    "meta meta";
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: calc(var(--mm) * 1.5) calc(var(--mm) * 4);
  height: calc(var(--mm) * 62);
}

.sheet.portrait .s-month {
  grid-area: month;
}

.sheet.portrait .s-motifs {
  grid-area: motifs;
  justify-content: flex-end;
}

.sheet.portrait .s-motifs .m {
  width: calc(var(--mm) * 32);
  height: calc(var(--mm) * 32);
}

.sheet.portrait .s-num {
  font-size: calc(var(--mm) * 35);
}

.sheet.portrait .s-gatsu {
  font-size: calc(var(--mm) * 13);
}

.sheet.portrait .s-meta {
  display: flex;
  flex-wrap: wrap;
  grid-area: meta;
  align-items: baseline;
  column-gap: calc(var(--mm) * 4);
}

.sheet.portrait .s-phrase,
.sheet.portrait .s-label {
  margin-top: 0;
}

.sheet.portrait.r4 { --num: calc(var(--mm) * 20); --tag: calc(var(--mm) * 3.5); }
.sheet.portrait.r5 { --num: calc(var(--mm) * 19); --tag: calc(var(--mm) * 3.5); }
.sheet.portrait.r6 { --num: calc(var(--mm) * 17); --tag: calc(var(--mm) * 3.5); }

.sheet.portrait.d-memo .s-head {
  height: calc(var(--mm) * 48);
}

.sheet.portrait.d-memo .s-num {
  font-size: calc(var(--mm) * 26);
}

.sheet.portrait.d-memo .s-gatsu {
  font-size: calc(var(--mm) * 10);
}

.sheet.portrait.d-memo .s-motifs .m {
  width: calc(var(--mm) * 25);
  height: calc(var(--mm) * 25);
}

.sheet.portrait.d-memo.r4,
.sheet.portrait.d-memo.r5,
.sheet.portrait.d-memo.r6 {
  --num: calc(var(--mm) * 9);
  --tag: calc(var(--mm) * 3.5);
}

/* 縦向きは画面に収まる大きさで見せる */
@media screen {
  body[data-orient="portrait"] .stage .sheet-wrap {
    max-width: 560px;
    margin-inline: auto;
  }
}

/* 印刷: カレンダーだけをA4の1枚に出す。縦向きのときはapp.jsが用紙の向きを上書きする */
@page {
  size: A4 landscape;
  margin: 0;
}

@media print {
  html,
  body {
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .np {
    display: none !important;
  }

  main,
  .studio,
  .stage {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .stage .sheet-wrap {
    container-type: normal;
    width: 297mm;
    height: 209mm;
    overflow: hidden;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body[data-orient="portrait"] .stage .sheet-wrap {
    width: 210mm;
    height: 296mm;
  }

  .sheet,
  .sheet.portrait {
    --mm: 1mm;
    break-inside: avoid;
  }

  .sheet {
    height: 209mm;
  }

  .sheet.portrait {
    height: 296mm;
  }
}