/*

1. 首先應該要有 body → 整個頁面背景、字型、整體樣式
2. 然後是 .月份控制區 → .calendar-header，負責排整列（左右按鈕 + 月份文字）
3. .月份控制區的按鈕 → button，單獨設定大小、顏色、間距
4. .一週七天 → .weekdays，固定顯示「日一二三四五六」
5. .日期列，分成一格格 → .date-row，用 grid 排成七欄
6. .日期列裡的一格格留空 → .date-row div，每格用 padding 或 border 控制大小，開始先留空，等 JS 動態填入日期

*/

body {
  font-family: 'Lato', sans-serif; /* ⭐ 全站文字使用 Lato */
  /* ⭐sans-serif 是備用字型，瀏覽器找不到 Poppins 就用無襯線字型 */
  background: #f9f9f9;
  color: #444444;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px;
}

.calendar-header {
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.calendar-header button {
  font-size: 15px;
  cursor: pointer;
  background-color: #F3D3C2;  /* 按鈕顏色 */
  border: none;               /* 去掉原本邊框 */
  border-radius: 10px;         /* 圓角，可調整數值 */
  padding: 8px 12px;          /* 增加按鈕內距，看起來舒服 */
  cursor: pointer;            /* 滑鼠經過圖片時變成手指 → 告訴使用者這張圖可以點 */
}

/* 滑鼠移上去時 */
.calendar-header button:hover {
  background-color: #dda690;  /* hover 顏色，可以比原本深一點或換其他顏色 */
}

.arrow-icon { color: #ffffff;  /* 箭頭顏色 */ }

.calendar-grid {
  max-width: 640px;
  margin: 0 auto;
}

/* 共用 grid 設定 */
.weekdays,
.date-row,
.check-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 40px;
  text-align: center;
  box-sizing: border-box;
}

/* weekdays 自己的樣式 */
.weekdays {
  border-top: 1px solid #ccc;
  font-weight: bold;
  background-color: #eeeae7;
}

.weekdays span {
  letter-spacing: 0.12em;
}

.check-row div {
  position: relative; /* ✅ 這很重要 */
  cursor: pointer;
}

.check-row div:hover {
  background-color: #eeeae7;  /* hover 顏色，可以比原本深一點或換其他顏色 */
}

/* .date-row 裡面的 div */
/* 每個格子只加右 + 下邊框 */
.weekdays div {
  padding: 10px 0;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size: clamp(12px, 2.5vw, 16px);
}

.date-row div,
.check-row div {
  padding: 10px 0;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

/* 為了方便 js 抓取日期，好做筆記功能。新增筆記前，需要先鎖定日期格子 */
.date {
  cursor: pointer;
  user-select: none; /* 文字不可被選取（點日期數字也不會被選到）*/
  position: relative; /* relative 自己就是參考點 */
  /* 位置: 相對的; */
}

.date::after { /* 在 .date 元素內容後面加上一個東西  */
  content: ""; /* 生成這個偽元素，即使它沒文字也行 */
  position: absolute; /* rabsolute 的位置會參考最近的 relative（或其他定位）的父元素 */
  bottom: 5px;        /* 距離底部小間距 */
  left: 50%; /* 把這個元素放在 .date 的中間偏左，但這樣不是完全置中，所以搭配👇 */
  transform: translateX(-50%) scaleX(0); /* 初始隱藏，就像一條線被「壓扁」到沒有寬度，點一下才慢慢拉開 */
  /* 比喻：先把線的左邊放到中間，再往左拉半條線，線就正好在中間了✨ */
  width: 30%;        /* 指示條寬度 */
  height: 5px;       /* 指示條高度 */
  background-color: #e5c1b1; /* 指示條顏色 */
  border-radius: 2px; /* 圓角線條 */
  transition: transform 0.2s ease; /* 動畫效果 */
}

/* 日期被選中後呈現此效果 */
.date.selected::after {
  transform: translateX(-50%) scaleX(1);
}

.weekdays div:last-child,
.date-row div:last-child,
.check-row div:last-child {
  border-right: none;
}

/* 最後一行的格子不加下邊框 */
.check-row:last-child div {
  border-bottom: none;
} 

/* 可選：整個月曆外框 */
.calendar {
  border: 1px solid #ccc;   /* ⭐ 外框補齊 */
  border-radius: 7px;
  max-width: 640px;        /* 月曆最大寬度 */
  margin: 0 auto;          /* 置中 */
  padding: 0;              /* 不要多餘空白 */
  box-sizing: border-box;  /* 包含邊框在內計算寬度 */
  overflow: hidden; /* ⭐ 魔法 */
  /* border-bottom: none; 不加下邊框 */
}

/* 🌟 今日整天標記 */
.today {
  /* border: 2px solid #F3D3C2;  /* 框線顏色，你可以改喜歡的 */
  /* border-radius: 6px;          /* 圓角，看起來柔和 */
  /*background-color: #F9E9E4; */
}

/* 🌟 Today 文字 */
.today-label {
  position: absolute;  /* 絕對定位 */
  top: 2px;            /* 距離上邊 2px */
  left: 4px;           /* 距離左邊 2px */
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #666666;
}

/* 勾勾疊在 Today 上面 */
.check-mark {
  position: absolute;  /* ✅ 絕對定位 */
  top: 50%;            /* 垂直置中 */
  left: 50%;           /* 水平置中 */
  transform: translate(-50%, -50%); /* 精準置中 */
  font-size: 20px;
  pointer-events: none; /* 點擊不會擋住格子事件 */
  color: #dda690;
}

/* 記得修改上面這串程式
去查看看其他人 UI 都怎麼做的
“Today Highlight” → 最常見，意思就是「今天被凸顯／標記」
“Current Day Highlight” → 比較完整的寫法，指「目前這一天」
“Today Indicator” → 偏向小標記或小圓點的設計，像日曆 App 上小圓點或背景顏色提示
“Today Marker” → 偏技術／程式用語，也能找到設計範例
https://chatgpt.com/c/69caacad-1338-8320-81d9-207a7f537dfc
*/

/* 🌟🌟下面是筆記區哦🌟🌟 */
.note {
  max-width: 640px;        /* 最大寬度 */
  margin: 0 auto;          /* 置中 */
  padding: 0;              /* 不要多餘空白 */
  box-sizing: border-box;  /* 包含邊框在內計算寬度 */
}

.notes-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0;
}

.notes-controls {
  display: flex;
}

/* 新增筆記按鈕 */
#addNoteBtn {
  margin-left: auto;
  padding: 8px 16px;
  border: none;          /* 去掉黑框線 */
  border-radius: 6px;    /* 圓角，看起來更柔和 */
  cursor: pointer;       /* 滑鼠變成手型 */
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #dda690;
  background-color: #f9f9f9;
  border: 1px #dda690 solid;
}

#addNoteBtn:hover {
  background: #dda690;  /* 按鈕底色 */
  color: #ffffff;        /* 文字顏色 */
  font-size: 14px;
}

.notes-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#notesList {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 筆記跟筆記之間太擠了，所以加了這個 */
}

/* 筆記彈窗 */
.modal {
  display: none; /* 初始隱藏，要顯示的時候，再用 JS 改成 display: block */
  position: fixed; /* 固定在畫面上，不會跟頁面滾動 */
  top: 0; left: 0; /* 把元素的左上角放到畫面的左上角 */
  width: 100%; height: 100%; /* 撐滿整個畫面，形成整個遮罩層 ✨ */
  background: rgba(0,0,0,0.5);
  z-index: 999; /* 這有點像設定圖層順序，z-index: 999 就是保證它永遠在頁面最前方，別人擋不住它*/
}

.modal-content {
  position: relative; /* 內容區塊相對定位，方便裡面的絕對定位元素（如右上叉叉）參考 */
  display: flex;       /* 使用 flex 排版 */
  flex-direction: column; /* 上下排列 */
  gap: 10px;           /* 元素間距 */
  margin: 10% auto;
  padding: 40px 30px 15px 30px; /* 內容內距，讓文字/按鈕不貼邊 */
  background: white;
  width: 90%;        /* rwd 的關鍵，不要固定寬 */
  max-width: 480px;  /* 保留電腦最大寬度 */
  border-radius: 7px; /* 圓角 8px，讓 Modal 外框圓滑 */
}

/* 筆記功能輸入文字的部分 */
#modalTextarea {
  width: 100%;       /* 寬度撐滿 Modal 內容區塊 */
  height: 200px;     /* 高度 */
  font-size: 16px;   /* 文字大小 */
  font-weight: 360; /* 數字越小越細，常用值：100~900 */
  padding: 10px;     /* 內距，文字不要貼邊 */
  color: #555555;      /* 文字中灰色，看起來輕鬆又清楚 */
  letter-spacing: 0.07em; /* 字與字的間距，讓文字呼吸感更舒服 */
  line-height: 1.5;     /* 行距，讓文字呼吸感更舒服 */
  box-sizing: border-box; /* 包含 padding 進寬高計算，避免超出 Modal */
  border-radius: 7px; /* 圓角 */
  border: 2px solid #f3d3c2; /* 框線顏色改色，粗細 2px */
  outline: none;             /* 避免點擊時出現藍色外框 */
  resize: none;  /* 禁止調整大小 */
}

/* 輸入提示文字 */
#modalTextarea::placeholder {
  color: #a5a5a5; /* 你想要的淡灰色 */
  opacity: 1;     /* Firefox 需要這行才能顯示完全顏色 */
}

/* textarea 錯誤狀態 */
.error {
  border: 1px solid #dd6a57;
  outline: none;
  box-shadow: 0 0 0 5px rgba(255, 77, 79, 0.15);
}

/* 錯誤提示文字（沒有內容就按保存會報錯） */
.error-text {
  margin-top: 4px;
  color: #dd6a57;
  font-size: 14px;
  letter-spacing: 0.07em;
}

/* 關閉按鈕 叉叉 */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 36px;    /* 文字放大，叉叉變大 */
  line-height: 24px;  /* 保持高度一致，讓點擊範圍大 */
  color: #828282;
}

/* 儲存按鈕 */
#saveModalBtn {
  border: 1px solid transparent; /* 預留空間，不然 hover 加了 border ，滑鼠移過去按鈕會變大 */
  align-self: flex-end; /* 靠右 */
  padding: 8px 16px;
  background: #dda690;  /* 按鈕底色 */
  color: #ffffff;        /* 文字顏色 */
  border-radius: 6px;    /* 圓角，看起來更柔和 */
  padding: 8px 16px;     /* 內距 */
  cursor: pointer;       /* 滑鼠變成手型 */
  font-size: 16px;
  letter-spacing: 0.12em;
}

#saveModalBtn:hover {
  border: 1px #dda690 solid; 
  background-color: #ffffff;
  color: #dda690;
}

.card-body {
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 12px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  width: 100%;
  box-sizing: border-box;
}

.note-text {
  white-space: pre-wrap;
  word-break: break-word;
  color: #555555;
}

.note-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* 編輯 和 刪除 按鈕 */
.icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: #777777;
  align-self: flex-end;  /* ⭐ 右邊 */
  margin-top: auto;      /* ⭐ 推到底 */
}

.icon-btn:hover {
  transform: scale(1.1);
}

/* ⭐⭐RWD Media Queries⭐⭐ */
@media (max-width: 600px) {
  .modal-content {
    width: 90%; /* 我想要佔父層的 90% ，如果父層 500px ，90% 就是 450px */
    max-width: 90vw; /* 但不能超過螢幕 90% ，如果螢幕是 400px ，90% 就是 360px */
    height: 70vh;  /* 直接取螢幕高度的 70% */
    max-height: 80vh; /* 但不能超過螢幕 80% */

    margin: 10% auto;
    padding: 40px 16px 16px 16px; /* ⭐上方加大空間給叉叉 */

    box-sizing: border-box; /* ⭐如果沒有它，尺寸會受 padding + border 影響直接爆掉 */
    display: flex;
    flex-direction: column;
    gap: 12px; /* 控制子元件間距 */
    position: relative; /* ⭐定位基準，就是它讓叉叉定位正常 */
  }

  /* ⭐叉叉修正 */
  .close-btn {
    position: absolute; /* ⭐☒這整個按鈕放哪裡 */
    top: 12px;   /* ⭐top、right、bottom、left 只對有定位的元素生效 */
    right: 12px; /* ⭐有定位的元素就是 position: relative/absolute/fixed/sticky */
    z-index: 999;
    width: 24px;   /* 設定寬高，讓它可點擊範圍大一點*/
    height: 24px;
    display: flex; /* ⭐叉叉在按鈕裡怎麼放 */
    align-items: center; 
    justify-content: center;
  }

  #modalTextarea {
    width: 100%;   
    flex: 1;              /* ⭐吃掉剩餘空間，就像分蛋糕，下方備註有說明 */
    min-height: 120px;    /* 防止太小 */
    font-size: 15px;
    resize: none;         /*禁止使用者拖拉改變 textarea 大小*/
    box-sizing: border-box;
  }

  #saveModalBtn {
    flex-shrink: 0; /* 不管空間多小，按鈕都要維持原大小 */
  }

  #errorText {
    flex-shrink: 0;
    font-size: 12px;
  }
}

/* 父層 .modal-content 是一整塊蛋糕 
display: flex;
flex-direction: column;
👉 垂直分蛋糕

下面這些固定高度的小蛋糕先被分走
close-btn → absolute（直接飄起來，不參與分蛋糕）
🍰errorText → 固定高度
🍰saveBtn → 固定高度

最後剩下
🍰#modalTextarea {
  flex: 1;
}
剩下的小蛋糕都是 #modalTextarea 的

如果三個子元素都有 flex: 1
A { flex: 1; }
B { flex: 1; }
C { flex: 1; }
那就是把剩下的蛋糕分成三等份