/* ============================================================
   shared.css — 全站共用樣式與設計 tokens
   雪莉與朵栗 團購行事曆

   使用方式：在各頁 <head> 的 <style> 之前加入
     <link rel="stylesheet" href="shared.css">
   頁面專屬樣式仍留在該頁的 <style>，會覆蓋這裡的設定。

   ⚠ 改配色 / 圓角 / 陰影請改下面的 :root 變數，不要在各頁硬寫色碼。
   ============================================================ */

/* 字型改自託（fonts.css + fonts/），不再跨網域連 Google Fonts。
   原因：html2canvas 截圖（A4清單圖／姓名貼）在等外部字型下載時沒有 timeout，
   遇到手機網路不穩或字型快取沒命中就會整個卡死，改成同源檔案後不再受外部網路影響。 */
@import url('fonts.css');

:root {
  /* ---------- 字體 ----------
     Huninn（jf open 粉圓）＝圓體，用在標題與按鈕；說明小字維持 Noto Sans TC。
     英數排在中文前面，所以英文數字仍由 Baloo 2 負責，中文才落到粉圓。
     注意：Huninn 在 Google Fonts 只有 400 一個字重，700/800 是瀏覽器合成的。 */
  --font-body:    'Noto Sans TC', sans-serif;
  --font-display: 'Baloo 2', 'Huninn', 'Noto Sans TC', sans-serif;
  --font-round:   'Baloo 2', 'Huninn', 'Noto Sans TC', sans-serif;

  /* ---------- 文字色 ---------- */
  --c-text:        #5a4a3f;  /* 主要文字（棕） */
  --c-text-soft:   #8a7462;  /* 次要文字 */
  --c-muted:       #a89888;  /* 淡化文字、日期數字 */
  --c-muted-light: #b39a8b;  /* 最淡：狀態列 */
  --c-brown:       #b5755a;  /* 按鈕文字、圖示 */

  /* ---------- 底色 / 面板 ---------- */
  --c-bg-top:    #FFF7EE;  /* body 漸層上緣 */
  --c-bg-bottom: #FFF1E6;  /* body 漸層下緣，也是 hover 底色 */
  --c-surface:   #FFFBF5;  /* 卡片 / 面板底 */
  --c-surface-2: #FFFDFA;  /* 日期格底 */

  /* ---------- 邊框 / 分隔線 ---------- */
  --c-border:       #FFD3B6;  /* 主要邊框（按鈕、輸入框） */
  --c-border-light: #FFE3CC;  /* 外框（.wrap、modal） */
  --c-line:         #F3E2D3;  /* 表格線、虛線分隔 */

  /* ---------- 品牌 / 強調色 ---------- */
  --c-primary:       #FF8FA3;  /* 主粉 */
  --c-primary-dark:  #FF7391;  /* 主粉 hover */
  --c-danger:        #e0654f;  /* 錯誤訊息 */

  /* ---------- 分類色盤（星期、標籤共用）---------- */
  --c-cat-0: #FF8FA3;  /* 粉 */
  --c-cat-1: #FFB37A;  /* 橘 */
  --c-cat-2: #9ACB85;  /* 綠 */
  --c-cat-3: #6FC8C2;  /* 青 */
  --c-cat-4: #7AAEEB;  /* 藍 */
  --c-cat-5: #B79AE8;  /* 紫 */
  --c-cat-6: #F0C36D;  /* 黃 */

  /* ---------- 跨頁共用色（色碼變數化重構新增） ---------- */
  --c-coral-text:   #FF6F55;  /* 珊瑚卡標題 */
  --c-coral-bg:     #FFE3DC;  /* 珊瑚淡底 */
  --c-coral-border: #FFB6A6;  /* 珊瑚邊框 */

  --c-mint-text:    #5C9147;  /* 綠系標題文字 */
  --c-mint-bg:      #E4F5DF;  /* 綠淡底 */
  --c-mint-border:  #B9E3AC;  /* 綠邊框 */

  --c-pink-deep:    #FF6F91;  /* 粉紅重點文字 */
  --c-pink-text:    #FFB4C2;  /* 粉文字 */
  --c-pink-bg:      #FFF0F3;  /* 粉淡底 */
  --c-pink-bg-2:    #FFE7ED;  /* 粉淡底2 */

  --c-purple-text:   #8E6BB5;  /* 紫卡標題 */
  --c-purple-bg:     #EFE4FB;  /* 紫卡淡底 */
  --c-purple-border: #D5BCF0;  /* 紫邊框 */

  --c-blue-text:   #5F87C9;  /* 藍卡標題 */
  --c-blue-bg:     #E2EBFD;  /* 藍淡底 */
  --c-blue-border: #B9CDF5;  /* 藍邊框 */

  --c-gold-text:      #C99A3A;  /* 黃金文字 */
  --c-gold-badge-bg:  #FFF6DD;  /* 黃淡底徽章 */
  --c-gold-border:    #F0DBA0;  /* 黃邊框 */
  --c-gold-gradient:  #FFF0D9;  /* 漸層黃 */

  --c-orange-bg:       #FFF6EC;  /* 淡橘卡片底 */
  --c-orange-bg-2:     #FFE9CE;  /* 橘淡底2 */
  --c-orange-badge-bg: #FFECD9;  /* 橘淡底徽章 */
  --c-orange-dash:     #FFD3AC;  /* 虛線邊框橘 */
  --c-orange-dash-2:   #FFC79A;  /* 虛線邊框橘2 */
  --c-orange-text:     #B5601C;  /* 橘文字 */

  --c-line-2:      #F0DFCB;  /* 表格虛線分隔 */
  --c-surface-3:   #FFFCF7;  /* 卡片底白偏黃 */
  --c-placeholder: #CBB8A8;  /* placeholder 灰棕 */
  --c-tag-bg:      #C9A66B;  /* 標籤底按鈕 */
  --c-tan-border:  #E0C9B0;  /* 淺棕邊框（checkbox／狀態框，跨 admin.html／school-list.html） */

  /* ---------- 圓角 ---------- */
  --r-sm:    10px;
  --r-md:    12px;
  --r-lg:    16px;
  --r-modal: 18px;
  --r-xl:    22px;
  --r-pill:  999px;

  /* ---------- 陰影 ---------- */
  --sh-card:   0 10px 30px rgba(230, 160, 120, 0.15);
  --sh-float:  0 3px 10px rgba(230, 160, 120, 0.25);
  --sh-soft:   0 3px 8px rgba(0, 0, 0, 0.15);
  --sh-modal:  0 10px 30px rgba(0, 0, 0, 0.2);

  /* ---------- 頁面標題 ---------- */
  --c-title-rule: #FFC2CE;  /* 標題下方虛線 */
  --c-badge-bg:   #FFE9EF;  /* 標題上方小徽章底色 */
  --title-size:   28px;     /* 各頁可覆寫：star-card 26px、school-labels 24px */
  --title-rule-w: 120px;    /* 各頁可覆寫：star-card 110px、school-labels 60% */

  /* ---------- 版面 ---------- */
  --wrap-max: 1080px;  /* 各頁可覆寫：star-card 640px、school-labels 560px */
}

/* ============================================================
   基礎 reset
   ============================================================ */

* { box-sizing: border-box; min-width: 0; }
html, body { width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: linear-gradient(180deg, var(--c-bg-top) 0%, var(--c-bg-bottom) 100%);
  color: var(--c-text);
  padding: 16px 8px 50px;
}

/* ============================================================
   版面容器
   ============================================================ */

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  background: var(--c-surface);
  border-radius: var(--r-xl);
  border: 3px solid var(--c-border-light);
  padding: 18px 14px 26px;
  box-shadow: var(--sh-card);
}

/* ============================================================
   右上角回首頁按鈕
   ============================================================ */

.site-home-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-border);
  color: var(--c-brown);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: var(--sh-float);
  z-index: 30;
  cursor: pointer;
}
.site-home-btn:hover { background: var(--c-bg-bottom); }

/* ============================================================
   膠囊型控制項（下拉選單、按鈕）
   ============================================================ */

.controls select,
.controls button {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--r-pill);
  border: 2px solid var(--c-border);
  background: #fff;
  color: var(--c-brown);
  padding: 7px 14px;
  cursor: pointer;
}
.controls button:hover { background: var(--c-bg-bottom); }

/* ============================================================
   返回按鈕
   ============================================================ */

.back-btn {
  display: inline-block;
  background: none;
  border: none;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--c-brown);
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 14px;
}
.back-btn:hover { color: var(--c-primary); }

/* ============================================================
   頁面標題（徽章＋大標＋虛線）
   字級與虛線寬度用 --title-size / --title-rule-w 覆寫
   ============================================================ */

.page-title-wrap {
  text-align: center;
  margin: 4px 0 18px;
}

.page-title-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: var(--c-primary);
  background: var(--c-badge-bg);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  margin-bottom: 6px;
}

.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--title-size);
  color: var(--c-text);
  position: relative;
  padding-bottom: 10px;
}
.page-title::after {
  content: '';
  display: block;
  width: var(--title-rule-w);
  height: 0;
  border-bottom: 2px dashed var(--c-title-rule);
  margin: 8px auto 0;
}

/* ============================================================
   主要動作按鈕
   共用的是外觀（膠囊、粉底、白字）；尺寸與排版方式各頁不同，
   由各頁覆寫 flex / width / font-size / padding
   ============================================================ */

.action-btn {
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  border: none;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  cursor: pointer;
}
.action-btn:hover { background: var(--c-primary-dark); }

.action-btn-alt { background: var(--c-cat-4); }
.action-btn-alt:hover { background: #5F97DB; }

/* ============================================================
   狀態訊息列
   ============================================================ */

.status {
  font-size: 11px;
  color: var(--c-muted-light);
  margin-bottom: 10px;
}
.status.error { color: var(--c-danger); }

/* ============================================================
   頁尾
   ============================================================ */

.footer {
  text-align: center;
  margin-top: 18px;
  color: var(--c-primary);
  font-weight: 700;
  font-size: 14px;
}
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ============================================================
   彈窗 Modal
   ============================================================ */

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(90, 74, 63, 0.45);
  z-index: 50;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.show { display: flex; }

.modal-box {
  position: relative;
  background: var(--c-surface);
  border-radius: var(--r-modal);
  border: 3px solid var(--c-border-light);
  padding: 24px 22px;
  max-width: 90%;
  width: 360px;
  box-shadow: var(--sh-modal);
}
.modal-box h3 {
  margin: 0 0 12px;
  color: var(--c-primary);
  font-size: 17px;
}
.modal-box ul {
  margin: 0;
  padding-left: 18px;
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.7;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 16px;
  color: var(--c-brown);
  cursor: pointer;
}

/* ============================================================
   圓體（全站）
   標題與按鈕用圓體，說明小字（*-subtitle、*-label）維持 Noto Sans TC。
   .page-title / .modal-box h3 等已經走 --font-display，不必列在這裡。
   刻意逐一列出 class 而不用 [class*="title"]：因為 subtitle 也含 "title"，
   萬用字元會把說明小字一起改掉。新增頁面時記得把新的標題／按鈕 class 加進來。
   ============================================================ */

/* ---- 標題 ---- */
.ev-title,
.gs-card-name,
.gs-section-title,
.view-title,
.cal-edit-day-row-name,
.il-card-name,
.mtree-folder-name,
.mtree-note-title,
.perm-row-name,
.pgp-title,
.pri-card-title,
.rc-title,
.rc-section-title,
.rc-tip-title,
.task-name-line,
.task-section-title,
.todo-item-name,
.my-taskname-tag,
.brand-intro-name,
.home-card-title,
.home-explore-title,
.home-explore-item-title,
.ing-category-title,
.ing-select-title,
.ing-tile-name,
.recipe-reco-title,
.card-title,
.modal-title,
.section-title,
.a4-category-title,
.a4-item-name,
.ogb-title,
.ogb-name,
.school-card-name,
.school-category-title,
.sticker-modal-title,
.sticker-name,
/* ---- 按鈕 ---- */
.action-btn,
.action-btn-alt,
.action-btn-ghost,
.back-btn,
.site-home-btn,
.home-btn,
.home-calendar-btn,
.oil-toggle-btn,
.rc-close-btn,
.main-tab,
.danger-btn,
.mode-btn,
.school-generate-btn,
.school-remove-btn,
.school-restore-btn,
.sticker-size-btn,
.calc-btn,
.ev-icon-btn,
.icon-btn,
.menu-btn,
.mtree-back-btn,
.mtree-icon-btn,
.pnote-btn,
.pnote-btn-copy,
.pnote-btn-delete,
.pnote-btn-save,
.pr-go-btn,
.pr-save-btn,
.save-btn,
.stage-quick-btn,
.task-mini-btn,
.task-submit-btn,
.urgent-toggle-btn {
  font-family: var(--font-round);
}
