/* 基本設定 */
:root {
  /* JSのapplySettingsから操作される変数群 */
  --font-family: "Helvetica Neue", Arial, sans-serif;
  --date-size: 24px;
  --week-size: 14px;
  --holiday-size: 11px;
  --sun-red: #d32f2f;
  --sat-blue: #1976d2;
  --bg-holiday: #fff5f5;

  /* 固定のデザイン用定数 */
  --orange-main: #e48100;
  --gray-text: #666;
  --gray-light: #999;
  --border-solid: #e0e0e0;
  --border-dotted: #ccc;
}
html, body {
  margin: 0;
  padding: 0;
  /* 縦方向の余計な隙間を排除 */
  height: 100%;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

body {
  background-color: #f0f0f0;
}

/* 操作パネル */
#controls {
  padding: 20px;
  background: white;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

#controls input {
  font-size: 1.2rem;
  padding: 5px;
  width: 80px;
}

#controls button {
  font-size: 1.1rem;
  padding: 6px 20px;
  cursor: pointer;
}

/* 印刷設定 */
@page {
  size: A4 landscape;
  margin: 0;
}

@media print {
  #controls {
    display: none;
  }
  body {
    background-color: white;
  }
  .page {
    /* 1ページに収めるための強制設定 */
    margin: 0 !important;
    box-shadow: none !important;
    page-break-after: always;
  }
  /* 最後の白紙ページを防止 */
  .page:last-child {
    page-break-after: avoid;
  }
}

/* ページ・レイアウト */
.page {
  width: 297mm;
  height: 210mm;
  display: flex;
  background: white;
  box-sizing: border-box;
  overflow: hidden; /* はみ出しによる改ページを防止 */
}

/* 画面表示時のみマージンと影をつける */
@media screen {
  .page {
    margin: 10px auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
}

/* 1ヶ月分のコンテナ */
.calendar-container {
  width: 148.5mm;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 4mm;
  position: relative;
  font-family: var(--font-family) !important;
}

/* 中央の裁断線 */
.page > .calendar-container:first-child {
  border-right: 1px dashed #eee;
}

/* ヘッダー */
.header {
  display: flex;
  justify-content: center;
  align-items: baseline;
  border-bottom: 1px solid var(--border-solid);
  padding-bottom: 1px;
  margin-bottom: 1px;
  position: relative;
}

.month-large {
  font-size: 38pt;
  font-weight: bold;
  color: var(--orange-main);
  line-height: 1;
}

.year-small {
  font-size: 14pt;
  color: var(--orange-main);
  position: absolute;
  right: 0;
  bottom: 2px;
}

/* カレンダー本体 */
.calendar-body {
  flex-grow: 1;
  display: flex;
  border-bottom: 1px solid var(--border-solid);
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.column-left {
  border-right: 1px dotted var(--border-dotted);
}

.day-row {
  flex: 1;
  display: flex;
  align-items: center;
  border-bottom: 1px dotted var(--border-dotted);
  padding: 0;
  box-sizing: border-box;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.day-row:last-child {
  border-bottom: none;
}

.day-num {
  color: var(--orange-main);
  font-weight: 600;
  width: 1.6em;
  text-align: right;
  margin-right: 6px;
 font-size: var(--date-size) !important;
 line-height: 1;
}

.day-week {
  color: var(--gray-text);
  width: 1em;
  text-align: center;
  padding-top: 0.5em;
font-size: var(--week-size) !important;
}

.holiday-name {
  position: absolute;
  right: 4px;
  bottom: 2px;
  line-height: 1;
  max-width: 70%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0.8;
  
  font-size: var(--holiday-size) !important;
  color: var(--sun-red);
}

/* 背景色の適用 */
.bg-holiday {
  background-color: var(--bg-holiday) !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  box-shadow: inset 0 0 0 1000px var(--bg-holiday);
}

/* 土日の文字色の適用 */
.text-sat { 
  color: var(--sat-blue) !important; 
}
.text-sun { 
  color: var(--sun-red) !important; 
}

.text-sat { color: var(--sat-blue) !important; }
.text-sun { color: var(--sun-red) !important; }

.footer {
  margin-top: 2px;
  padding-top: 1px;
  font-size: 8pt;
  color: var(--gray-light);
  text-align: center;
}

/* 読み込み中オーバーレイ */
#loading-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: var(--orange-main);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--orange-main);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }