/* =========================================================
   Jill's Blog — 樣式表
   設計方向:Notion 風格的文書工具感 —— 純白底、細線分隔、
   溫暖胡桃棕為唯一強調色,卡片用莫蘭迪色橫幅。
   版面:首頁(寫作紀錄牆 + 文章卡片格)→ 閱讀模式 → 編輯模式。
   可讀性底線(給使用者,請勿隨意調小):
     - 內文 18px、行高 1.8
     - 按鈕文字至少 16px
     - 主要按鈕點擊面積至少 48px 高
   ========================================================= */

/* ---------- 色彩與字體變數(要改風格從這裡改) ---------- */
:root {
  --bg: #FFFFFF;             /* 全站背景:純白 */
  --bg-soft: #F7F7F5;        /* 淺灰白:動作列、紀錄牆底 */
  --ink: #37352F;            /* 內文文字:近黑 */
  --ink-soft: #9B9A97;       /* 次要文字:淺灰(日期、placeholder) */
  --line: #E9E9E7;           /* 邊框與分隔線:1px 細線 */
  --hover: #EFEFED;          /* hover 淺灰背景 */
  --accent: #7A5C42;         /* 唯一強調色:溫暖胡桃棕(主要按鈕) */
  --accent-dark: #63482F;    /* 主要按鈕 hover 用的深一階 */
  --danger: #D44C47;         /* 刪除文字用的低調紅 */
  --callout-bg: #F1F1EF;     /* 灰色框背景 */
  --callout-bar: #787774;    /* 灰色框左側邊條 */
  --trash-ink: #FFFFFF;      /* 回收桶模式:深色按鈕與提示條的文字 */
  --trash-bg: #37352F;       /* 回收桶模式:深色背景(明顯的狀態切換) */

  /* 全站使用黑體(文書工具感);系統內建字型,離線可用 */
  --font-sans: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
}

/* ---------- 基本重置 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* 重要:確保帶有 hidden 屬性的元素一定不顯示。
   (沒有這行的話,其他 display 設定會蓋過瀏覽器對 hidden 的預設值) */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 18px;               /* 全站基準字級 */
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ---------- 進入畫面(PIN 門簾) ---------- */
.pin-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 1000;            /* 蓋在整個 App 上面 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 340px;
  padding: 24px;
}

.pin-title {
  font-size: 26px;
  font-weight: 700;
}

/* 大數字輸入框:置中、大字、寬字距,圓點看得清楚 */
.pin-input {
  font-family: var(--font-sans);
  font-size: 32px;
  letter-spacing: 10px;
  text-align: center;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--bg);
}
.pin-input:focus {
  outline: none;
  border-color: var(--accent);
}

.pin-error {
  font-size: 17px;
  color: var(--danger);
}

.pin-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--ink-soft);
  cursor: pointer;
}
.pin-remember input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

.pin-enter { width: 100%; }

/* 忘記密碼:低調小字連結 */
.pin-forgot {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
  padding: 6px;
}

/* ---------- 頂欄 ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

/* App 名稱做成可點的按鈕:在任何畫面點它都會回到文章牆 */
.app-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink);
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.app-title:hover { background: var(--hover); }

/* 右上角「已自動儲存 HH:MM」 */
.save-status {
  font-size: 16px;
  color: var(--ink-soft);
}

/* ---------- 動作列 ---------- */
.actionbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.actionbar-spacer { flex: 1; }

/* ---------- 按鈕(共通) ---------- */
.btn {
  font-family: var(--font-sans);
  font-size: 17px;
  min-height: 48px;              /* 點擊面積夠大,好按 */
  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid var(--line);
  cursor: pointer;
  color: var(--ink);
  background: var(--bg);
}
.btn:hover { background: var(--hover); }

/* 鍵盤操作或視力不佳者需要明顯的焦點框 */
.btn:focus-visible,
.btn-tool:focus-visible,
.swatch:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* 實心主要按鈕(新文章、備份上傳、編輯、完成)—— 強調色 */
.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-dark); }

/* 回收桶模式中的「返回文章列表」:整顆變深色,一看就知道現在在回收桶 */
.btn-trash-active {
  background: var(--trash-bg);
  color: var(--trash-ink);
  border-color: var(--trash-bg);
  font-weight: 600;
}
.btn-trash-active:hover { background: #504D45; }

/* 刪除按鈕:白底紅字,低調但清楚 */
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: #FBEEED; }

/* ---------- 主要內容區 ---------- */
.view-area {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 28px 32px 60px;
}

/* 首頁與文章頁共用的置中容器 */
#view-home { max-width: 980px; margin: 0 auto; }
.page { max-width: 720px; margin: 0 auto; }

.section-heading {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------- 回收桶模式的提示條 ---------- */
.trash-notice {
  background: var(--trash-bg);
  color: var(--trash-ink);
  font-size: 17px;
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* ---------- 寫作年曆 ---------- */
.wall-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  padding: 18px 20px;
  margin-bottom: 28px;
}

.wall-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

/* 年份切換:◀ 2026 年 ▶(展開後顯示在月曆上方) */
.year-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 12px;
}

/* 展開的年曆本體與標題列之間留點距離 */
#wall-body { margin-top: 14px; }

.year-label {
  font-size: 19px;
  font-weight: 600;
  min-width: 88px;
  text-align: center;
}

/* 累積感的一句話:「2026 年已寫下 N 篇」 */
.wall-summary {
  font-size: 16px;
  color: var(--ink-soft);
}

/* 12 個月份區塊,自動排欄 */
.year-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px 22px;
}

.month-box { min-width: 0; }

.month-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* 每月的小月曆:週日~週六 7 欄 */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

/* 星期列(日一二三四五六) */
.day-head {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  padding-bottom: 2px;
}

/* 日期格:平常淡灰數字;那天有文章 → 棕底白字(直接的「有幾篇」感) */
.day-cell {
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 24px;
  height: 24px;
  border-radius: 5px;
}
.day-cell.has {
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 600;
  cursor: pointer;          /* 有文章的日子可以點,篩出那天的文章 */
}
.day-cell.has:hover { background: var(--accent-dark); }
/* 目前被點選(篩選中)的那一天:墨色底,跟棕色「有文章」明顯區隔 */
.day-cell.selected {
  background: var(--trash-bg);
  color: var(--trash-ink);
}
.day-cell.selected:hover { background: #504D45; }
/* 今天:棕色外框,在整片年曆中找得到「現在」 */
.day-cell.today { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* 點了年曆某天後的篩選提示條 */
.day-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 17px;
  color: var(--accent-dark);
  background: #F2EBE3;          /* 淡棕底,與日記徽章同色系 */
  border-radius: 8px;
  padding: 10px 16px;
  margin-top: 12px;
}

/* ---------- 文章區控制列:分類籤 + 搜尋 + 檢視切換 ---------- */
.home-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.filter-tabs { display: flex; gap: 6px; }

/* 分類籤:選中的那顆變深色,狀態一目瞭然 */
.btn-tab { min-height: 44px; }
.btn-tab.active {
  background: var(--trash-bg);
  color: var(--trash-ink);
  border-color: var(--trash-bg);
  font-weight: 600;
}

/* 搜尋框 */
.search-input {
  font-family: var(--font-sans);
  font-size: 17px;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  flex: 1;
  min-width: 160px;
  max-width: 320px;
  color: var(--ink);
  background: var(--bg);
}
.search-input:focus {
  outline: none;
  border-color: var(--accent);
}
.search-input::placeholder { color: var(--ink-soft); }

/* 卡片/列表切換:選中的圖示鈕變深色 */
.view-toggle { display: flex; gap: 2px; margin-left: auto; }
.view-toggle .btn-tool.active {
  background: var(--trash-bg);
  color: var(--trash-ink);
}

/* ---------- 文章卡片格(Notion / Trello 風) ---------- */
.card-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;           /* 讓橫幅色塊跟著圓角 */
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s, transform 0.15s;
}
.card:hover {
  box-shadow: 0 3px 10px rgba(55, 53, 47, 0.12);
  transform: translateY(-2px);
}

/* 卡片橫幅:莫蘭迪色塊(未來可換成上傳的圖片) */
.card-banner { height: 72px; }

.card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.card-date {
  font-size: 15px;
  color: var(--ink-soft);
}

/* 日記徽章:日記型文章在卡片與列表上的小標記 */
.diary-badge {
  align-self: flex-start;
  font-size: 14px;
  color: var(--accent-dark);
  background: #F2EBE3;          /* 淡棕色底,跟強調色同家族 */
  border-radius: 10px;
  padding: 2px 10px;
}

/* ---------- 列表模式(與卡片同資料、另一種排法) ---------- */
#card-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;   /* 與上方搜尋列保持距離(卡片模式由 grid 自帶間距) */
}

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: var(--bg);
}
.list-row:hover { background: var(--hover); }

/* 左側色點:沿用卡片的橫幅顏色 */
.row-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.row-title {
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  overflow-wrap: anywhere;
}

.row-date {
  font-size: 15px;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* 回收桶的按鈕組(還原 + 永久刪除) */
.trash-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.trash-actions .btn-restore { margin-top: 0; }

/* 清空回收桶按鈕 */
.empty-trash-btn { margin-top: 20px; }

/* 回收桶裡的列表項目 */
.list-row.trashed { cursor: default; }
.list-row.trashed .row-title { color: var(--ink-soft); }
.list-row.trashed .row-dot { filter: grayscale(0.7); opacity: 0.6; }

/* 回收桶裡的卡片:半透明 + 灰階,跟一般文章有明顯區隔 */
.card.trashed { cursor: default; }
.card.trashed .card-banner { filter: grayscale(0.7); opacity: 0.6; }
.card.trashed .card-title { color: var(--ink-soft); }

/* 卡片裡的「還原這篇」按鈕 */
.card .btn-restore {
  margin-top: 8px;
  align-self: flex-start;
  min-height: 44px;
  font-size: 16px;
}

/* 沒有任何文章時的提示 */
.grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  font-size: 19px;
  padding: 40px 0;
}

/* ---------- 閱讀模式 ---------- */
.page-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.page-actions-right { display: flex; gap: 8px; }

/* 停用中的一般按鈕(例如「分享連結」尚未開放) */
.btn:disabled {
  color: var(--ink-soft);
  background: var(--bg-soft);
  cursor: not-allowed;
}

/* 分享面板 */
.share-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
  padding: 16px 18px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.share-hint {
  font-size: 17px;
  line-height: 1.6;
}

.share-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 分享網址:等寬顯示、可換行,長輩看得清楚 */
.share-url {
  font-size: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 200px;
}

.share-panel .btn-small { align-self: flex-start; }

/* 閱讀頁上的日記日期標記 */
.read-diary-chip {
  display: inline-block;
  font-size: 16px;
  color: var(--accent-dark);
  background: #F2EBE3;
  border-radius: 12px;
  padding: 4px 14px;
  margin-bottom: 10px;
}

/* 文章橫幅色塊:跟卡片同色,像 Notion 的封面 */
.page-banner {
  height: 110px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.read-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.read-date {
  font-size: 16px;
  color: var(--ink-soft);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

/* ---------- 內文(閱讀與編輯共用的排版) ---------- */
.content-body {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.8;
}

.content-body h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 16px 0 6px;
}

/* 小標題(工具列「小標」按鈕產生的) */
.content-body h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 14px 0 4px;
}

.content-body p { margin: 0 0 12px; }

.content-body ul {
  margin: 0 0 12px;
  padding-left: 28px;
}

/* 文章裡的圖片:不超出版面、圓角(編輯與閱讀共用) */
.content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 10px 0;
}

/* 灰色框(callout):淺灰背景 + 左側 3px 深灰邊條 */
.content-body .callout {
  background: var(--callout-bg);
  border-left: 3px solid var(--callout-bar);
  border-radius: 4px;
  padding: 12px 16px;
  margin: 8px 0;
}
.content-body .callout > :last-child { margin-bottom: 0; }

/* ---------- 編輯模式 ---------- */

/* 日記日期列 */
.diary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.diary-label {
  font-size: 16px;
  color: var(--ink-soft);
}

.diary-input {
  font-family: var(--font-sans);
  font-size: 17px;
  min-height: 44px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--bg);
}
.diary-input:focus {
  outline: none;
  border-color: var(--accent);
}

.diary-hint {
  font-size: 15px;
  color: var(--ink-soft);
}

/* 小顆的次要按鈕(清除日期) */
.btn-small {
  min-height: 40px;
  font-size: 15px;
  padding: 4px 12px;
}

/* 工具列上的文字型按鈕(大標/小標) */
.btn-tool-text {
  font-size: 16px;
  padding: 0 10px;
}

/* 表情符號面板 */
.emoji-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
  padding: 8px;
  margin-top: 8px;
}

.emoji-btn {
  font-size: 24px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.emoji-btn:hover { background: var(--hover); }

/* 卡片顏色挑選列 */
.banner-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.banner-picker-label {
  font-size: 16px;
  color: var(--ink-soft);
}

.banner-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 莫蘭迪色圓形色塊(顏色由 app.js 指定) */
.swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
/* 目前選中的顏色:棕色外圈,一眼看得出來 */
.swatch.selected {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px #FFFFFF;
}

/* 標題輸入框:仿 Notion 頁面標題 —— 無邊框、無底線、32px 粗體 */
.title-input {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 4px 0;
  width: 100%;
}
.title-input:focus { outline: none; }
.title-input::placeholder { color: var(--ink-soft); }

/* 工具列:一排小型圖示按鈕 */
.toolbar {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin-top: 6px;
}

/* 小型圖示按鈕:無邊框、透明底,hover 才顯示淺灰背景 */
.btn-tool {
  font-family: var(--font-sans);
  font-size: 18px;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.btn-tool:hover:not(:disabled) { background: var(--hover); }

/* B / I / U 三顆用字型樣式本身當圖示 */
.tool-bold { font-weight: 700; }
.tool-italic { font-style: italic; font-family: Georgia, serif; }
.tool-underline { text-decoration: underline; }

/* 停用中的工具按鈕(插入圖片):淺灰、游標顯示禁止 */
.btn-tool:disabled {
  color: var(--ink-soft);
  cursor: not-allowed;
}

/* 編輯中的內文區 */
.content-editor {
  min-height: 380px;
  padding: 8px 0;
  outline: none;   /* 白紙感:編輯中不加外框 */
}

/* 編輯時圖片可以點選(點了會出現大小調整列) */
.content-editor img { cursor: pointer; }
.content-editor img.img-selected {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* 點選圖片後出現的調整列 */
.image-size-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
  padding: 8px 12px;
  margin-top: 8px;
}

.image-size-label {
  font-size: 16px;
  color: var(--ink-soft);
}

.editor-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

/* ---------- 窄螢幕(平板直放以下) ---------- */
@media (max-width: 760px) {
  .view-area { padding: 18px 14px 50px; }
  .actionbar { padding: 8px 12px; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .page-actions { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
}