/* 備援色票：共用檔 ../shared/site.css 沒載入時（例如只上傳了單一資料夾）仍能正常顯示 */
:root{--ink:#4A2E1A;--ink-2:#6B4630;--gold:#B5442A;--muted:#7A5C45;--line:#F0DDBF;--rust:#B5442A;--sun:#F2B33D;--cream:#FFF3D1;--peach:#FDE1D3;--qc:#C9962E;--q1:#6BA368;--q2:#4F86C6;--q3:#8A6BC0;--q4:#E0674C;--tap:44px}
/* ===== 暖陽版：白頂列＋左側導覽＋暖黃 Hero＋粉彩季度鈕（疊在 theme.css 之上） ===== */
html body{background:linear-gradient(160deg,#FFF1D2 0,#FFF8EA 260px,#FFF9F0 100%) fixed;color:var(--ink);display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto 1fr auto;min-height:100vh}
html body>header,html body>footer{grid-column:1/-1}
html body>main{grid-column:2;max-width:none;width:100%;padding:22px 24px 40px}
.wm-side{grid-column:1;grid-row:2;border-right:1px solid var(--line);background:rgba(255,255,255,.35);padding:22px 12px;position:sticky;top:72px;align-self:start;height:calc(100vh - 72px);overflow:auto}
.wm-side-title{font-size:.8rem;font-weight:800;letter-spacing:.12em;color:var(--ink);padding:0 10px 10px}
.wm-side nav{display:flex;flex-direction:column;gap:6px}
.wm-nav{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border-radius:12px;font-weight:700;font-size:.92rem;color:var(--ink);text-decoration:none;border-left:3px solid transparent}
.wm-nav:hover,.wm-nav:focus-visible{background:var(--cream);border-left-color:var(--sun)}
.wm-nav.n1{background:#FFE9B0;border-left-color:var(--sun)}
.wm-side-note{margin:22px 8px 0;padding-top:16px;border-top:1px dashed #E8CFA3;font-size:.8rem;line-height:1.8;color:var(--muted)}
.wm-side-note b{display:block;color:var(--rust);margin-bottom:6px}
/* Hero（沿用原說明橫幅的文字） */
html body main>div.no-print:first-child{position:relative;overflow:hidden;min-height:190px;padding:28px 30px;border:1px solid #F4D58A;border-left:1px solid #F4D58A;border-radius:24px;background:linear-gradient(120deg,#FFE19A 0,#FFEFC4 55%,#FFF6DD 100%);display:flex;align-items:center}
html body main>div.no-print:first-child::before{content:"✦ 聖谷兒童主日學　教案資料庫";position:absolute;top:16px;left:30px;font-size:.72rem;font-weight:800;letter-spacing:.18em;color:var(--rust)}
html body main>div.no-print:first-child::after{content:"";position:absolute;right:-30px;top:-40px;width:340px;height:340px;background:radial-gradient(circle at 50% 50%,#FFD25E 0,#FFD25E 26%,rgba(255,210,94,.0) 27%),conic-gradient(from 0deg,rgba(255,183,61,.55) 0 6%,transparent 6% 12.5%,rgba(255,183,61,.55) 12.5% 18.5%,transparent 18.5% 25%,rgba(255,183,61,.55) 25% 31%,transparent 31% 37.5%,rgba(255,183,61,.55) 37.5% 43.5%,transparent 43.5% 50%,rgba(255,183,61,.55) 50% 56%,transparent 56% 62.5%,rgba(255,183,61,.55) 62.5% 68.5%,transparent 68.5% 75%,rgba(255,183,61,.55) 75% 81%,transparent 81% 87.5%,rgba(255,183,61,.55) 87.5% 93.5%,transparent 93.5%);border-radius:50%;opacity:.75;pointer-events:none;-webkit-mask:radial-gradient(circle,#000 30%,transparent 68%);mask:radial-gradient(circle,#000 30%,transparent 68%)}
html body main>div.no-print:first-child>div{position:relative;z-index:1;max-width:620px;margin-top:14px}
html body main>div.no-print:first-child h2{font-size:1.75rem;line-height:1.35;font-weight:900;color:var(--ink)}
html body main>div.no-print:first-child p{font-size:.95rem;color:var(--ink-2)}
html body main>div.no-print:first-child button{background:var(--rust);color:#fff;border-radius:12px}
html body main>div.no-print:first-child button:hover{background:#9C381F}
/* 搜尋與季度鈕（粉彩） */
html body #searchInput{border:1px solid var(--line);background:#fff;border-radius:14px}
html body #searchInput:focus{border-color:var(--rust);box-shadow:0 0 0 3px rgba(181,68,42,.15)}
html body #navButtons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;overflow:visible;padding:2px 0 4px;margin:0}
html body #navButtons .quarter-tab{background:#FFF0C2;border:1px solid #F4D58A;border-radius:14px;color:var(--ink);min-width:0;min-height:60px}
html body #navButtons .quarter-tab:nth-child(3){background:#FDE1D3;border-color:#F6C7AD}
html body #navButtons .quarter-tab:nth-child(4){background:#FFF6DA}
html body #navButtons .quarter-tab:nth-child(5){background:#FCE3DC;border-color:#F3C2B6}
html body #navButtons .quarter-tab span{color:var(--ink)!important}
html body #navButtons .quarter-tab .text-xs{color:var(--muted)!important}
html body #navButtons .quarter-tab.active{background:var(--rust);border-color:var(--rust);box-shadow:0 6px 14px rgba(181,68,42,.3)}
html body #navButtons .quarter-tab.active span{color:#fff!important}
html body #currentViewTitle{color:var(--ink);font-size:1.35rem;font-weight:900}
/* 課程卡：頂端色條 */
html body #allCardsList>div{border:1px solid var(--line);border-top:4px solid var(--qc);border-left:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 2px 6px rgba(120,80,30,.06)}
html body #allCardsList>div.ring-4{box-shadow:0 0 0 3px #F6D78C;background:#FFFCF3}
@media (hover:hover){html body #allCardsList>div:hover{border-color:var(--line);border-top-color:var(--qc);box-shadow:0 10px 24px rgba(120,80,30,.14)}}
html body #allCardsList .bg-navy-900{background:none;color:var(--qc);padding:0;font-size:.75rem;letter-spacing:.14em;border-radius:0}
html body #allCardsList h4{color:var(--ink)}
html body #allCardsList .text-amber-800{color:var(--rust)}
html body #allCardsList .text-amber-600{color:var(--rust)}
/* 視窗改暖色 */
html body #lessonModal .modal-box>.no-print.bg-stone-900{background:var(--ink)}
html body #lessonModal #modalTitle{color:var(--ink)}
html body #lessonModal .modal-box{background:#FFFCF6}
html body footer{background:transparent;border-top:1px solid var(--line);color:var(--muted)}
/* 平板與手機：左側導覽改為頂部橫列 */
@media (max-width:900px){
  html body{grid-template-columns:minmax(0,1fr)}
  html body>main{grid-column:1;padding:16px 14px 32px}
  .wm-side{grid-column:1;grid-row:auto;position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px 12px;overflow:visible}
  .wm-side-title,.wm-side-note{display:none}
  .wm-side nav{flex-direction:row;overflow-x:auto;gap:8px;scrollbar-width:none}
  .wm-nav{white-space:nowrap;border:1px solid var(--line);background:#fff;min-height:var(--tap)}
  .wm-nav.n1{background:#FFE9B0}
  html body #navButtons{display:flex;overflow-x:auto}
  html body #navButtons .quarter-tab{min-width:140px}
  html body main>div.no-print:first-child h2{font-size:1.25rem}
  html body main>div.no-print:first-child::after{opacity:.5;right:-90px}
}

/* 修正：桌機版主區與頁尾明確指定網格列；導覽列限制寬度避免手機橫向溢位 */
.wm-side,.wm-side nav{min-width:0}
@media (min-width:901px){
  html body>main{grid-row:2}
  html body>footer{grid-row:3}
}

/* 修正根因：body 帶有 Tailwind 的 flex/flex-col，需提高優先權才能改成網格 */
html body.flex{display:grid;flex-direction:initial}
@media (max-width:900px){html body.flex{display:block}}

@media (max-width:560px){
}