/* =====================================================================
   style.css — 月間カレンダー作成 ツール固有スタイル。
   共通スタイルは /_shared/shirugear.css に任せる。
   ===================================================================== */

/* 共有CSSに無いユーティリティの補完 */
.sg-mt-3 { margin-top: var(--sg-space-3, 12px); }

/* モード切替・オプション（nato-phonetic 準拠） */
.sg-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: var(--sg-space-1, 4px);
}
.sg-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}
.mcm-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--sg-space-1, 4px);
}

/* 年・月の並び */
.mcm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
}
.mcm-field-year { flex: 0 0 8em; }
.mcm-field-month { flex: 0 0 8em; }
.mcm-field-year .sg-input,
.mcm-field-month .sg-input { width: 100%; }

/* 月移動ボタン列 */
.mcm-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}
.sg-btn-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--sg-fg, #222);
  background: var(--sg-surface, #fff);
  border: 1px solid var(--sg-border, #e5e7eb);
  border-radius: var(--sg-radius, 8px);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sg-btn-sub:hover { background: var(--sg-accent, #f1f3f9); }
.sg-btn-sub:focus-visible { outline: 2px solid var(--sg-primary, #3b5bdb); outline-offset: 2px; }

/* ---------- カレンダー本体 ---------- */
.mcm-cal-title {
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
}
.mcm-table-wrap { overflow-x: auto; }

.mcm-cal {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.mcm-cal th,
.mcm-cal td {
  border: 1px solid var(--sg-border, #d7dbe4);
}
.mcm-th {
  padding: 6px 2px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  background: var(--sg-accent, #f1f3f9);
  color: var(--sg-fg, #333);
}
.mcm-th.is-sun { color: #c62828; }
.mcm-th.is-sat { color: #1565c0; }

.mcm-td {
  vertical-align: top;
  height: 74px;
  padding: 4px 5px;
  position: relative;
}
.mcm-daynum {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
}
.mcm-td.is-sun .mcm-daynum,
.mcm-td.is-holiday .mcm-daynum { color: #c62828; }
.mcm-td.is-sat .mcm-daynum { color: #1565c0; }

/* 祝日名 */
.mcm-holiday {
  margin-top: 2px;
  font-size: 0.68rem;
  line-height: 1.25;
  color: #c62828;
  word-break: break-word;
}
/* 六曜 */
.mcm-rokuyo {
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--sg-muted, #777);
}
/* メモ欄（印刷して手書き用） */
.mcm-memo {
  margin-top: 4px;
  min-height: 26px;
}

/* 前後月の日をうっすら */
.mcm-td.is-other { background: var(--sg-surface-2, #fafbfd); }
.mcm-td.is-other .mcm-daynum { color: var(--sg-muted, #aaa); opacity: 0.7; }
.mcm-td.is-other .mcm-holiday,
.mcm-td.is-other .mcm-rokuyo { opacity: 0.55; }
/* 前後月を非表示にするオプション */
.mcm-hide-adjacent .mcm-td.is-other .mcm-daynum,
.mcm-hide-adjacent .mcm-td.is-other .mcm-holiday,
.mcm-hide-adjacent .mcm-td.is-other .mcm-rokuyo { visibility: hidden; }

/* 今日を強調 */
.mcm-td.is-today {
  background: var(--sg-primary-soft, #eaeeff);
  outline: 2px solid var(--sg-primary, #3b5bdb);
  outline-offset: -2px;
}

/* メモ表示時はセルを高く */
.mcm-has-memo .mcm-td { height: 96px; }

/* ---------- 印刷 ---------- */
@media print {
  /* カレンダーだけを残す */
  body * { visibility: hidden; }
  .mcm-print-area, .mcm-print-area * { visibility: visible; }
  .mcm-print-area {
    position: absolute;
    left: 0; top: 0; right: 0;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: #fff;
  }
  .mcm-cal-title { font-size: 18pt; margin-bottom: 8pt; }
  .mcm-cal { height: auto; }
  .mcm-td { height: auto; min-height: 74px; }
  .mcm-has-memo .mcm-td { min-height: 96px; }
  .mcm-th, .mcm-td { border-color: #999; }
  .mcm-td.is-today { outline: none; background: #fff; }
  .sg-help { display: none; }
  /* 色を確実に印刷 */
  .mcm-th, .mcm-td, .mcm-daynum, .mcm-holiday {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}