/* ===== 兒少標竿人生 新版視覺層 =====
   疊在 tailwind.css / legacy.css 之上；以較高選擇器權重覆寫，不改動 HTML 與資料。 */
:root{
  --ink:#14213D; --ink-2:#22345C; --paper:#F3F2EE; --surface:#FFFFFF;
  --line:#E2DED4; --muted:#5E6472; --gold:#A8650A; --gold-soft:#FBEFD5;
  --q1:#1F7A57; --q2:#2757A4; --q3:#5640A0; --q4:#B0304F; --qc:#8A8578;
  --radius:16px; --tap:44px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
html.modal-open,html.modal-open body{overflow:hidden}
html body{
  font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei","Noto Sans CJK TC",system-ui,sans-serif;
  background:var(--paper); color:#1B2130; -webkit-tap-highlight-color:transparent;
  padding-left:var(--sal); padding-right:var(--sar);
}
button,[onclick],input,a{touch-action:manipulation}
:focus-visible{outline:3px solid #E7A93B;outline-offset:2px;border-radius:8px}

/* ---------- 主區與說明橫幅：變薄 ---------- */
html body main{padding-top:14px; padding-bottom:calc(24px + var(--sab))}
html body main > div.no-print:first-child{
  background:var(--surface); border:1px solid var(--line); border-left:6px solid var(--gold);
  border-radius:var(--radius); box-shadow:none; padding:12px 14px; margin-bottom:14px;
}
html body main > div.no-print:first-child .text-3xl{display:none}
html body main > div.no-print:first-child h2{font-size:1rem; line-height:1.4; color:var(--ink)}
html body main > div.no-print:first-child p{font-size:.85rem; line-height:1.55}
html body main > div.no-print:first-child button{
  background:var(--ink); border-radius:12px; min-height:var(--tap); font-size:.9rem;
}
html body main > div.no-print:first-child button:hover{background:var(--ink-2)}

/* ---------- 搜尋 + 季度切換 ---------- */
html body #searchSection{margin-bottom:14px; gap:10px}
html body #searchSection > div{margin:0}
html body #searchInput{
  min-height:52px; border:1.5px solid #CFCABD; border-radius:14px; font-size:1rem; background:#fff;
}
html body #searchInput:focus{border-color:var(--ink); box-shadow:0 0 0 3px rgba(20,33,61,.15); outline:none}
html body #searchSection .text-2xl{font-size:1.2rem}
html body #clearSearchBtn{min-width:var(--tap)}
html body #navButtons{
  display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 2px 6px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
html body #navButtons::-webkit-scrollbar{display:none}
html body #navButtons .quarter-tab{
  flex:1 0 auto; min-width:148px; min-height:56px; scroll-snap-align:start; grid-column:auto;
  background:#fff; border:1.5px solid var(--line); border-radius:14px; box-shadow:none; color:var(--ink);
}
html body #navButtons .quarter-tab:hover{border-color:var(--ink)}
html body #navButtons .quarter-tab.active{background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:0 4px 12px rgba(20,33,61,.28)}
html body #navButtons .quarter-tab.active span{color:#fff !important}
html body #navButtons .quarter-tab:not(.active) .text-xs{color:var(--muted)}
@media (min-width:640px){ html body #navButtons .quarter-tab{min-width:0} }

/* ---------- 列表標題 ---------- */
html body main > div.no-print.flex.items-center.justify-between{gap:10px;flex-wrap:wrap}
html body #currentViewTitle{font-size:1.1rem; color:var(--ink); font-weight:800}

/* ---------- 課程卡片：季別色帶 ---------- */
html body #allCardsList{gap:12px}
html body #allCardsList > div{
  --qc:#8A8578; background:#fff; border:1px solid var(--line); border-left:7px solid var(--qc);
  border-radius:var(--radius); box-shadow:0 1px 2px rgba(20,33,61,.05); padding:16px 16px 12px;
  transition:box-shadow .15s,border-color .15s,transform .15s; min-height:var(--tap);
}
html body #allCardsList > div:has(.bg-emerald-100){--qc:var(--q1)}
html body #allCardsList > div:has(.bg-blue-100){--qc:var(--q2)}
html body #allCardsList > div:has(.bg-indigo-100),
html body #allCardsList > div:has(.bg-purple-100){--qc:var(--q3)}
html body #allCardsList > div:has(.bg-rose-100){--qc:var(--q4)}
html body #allCardsList > div:has(.bg-amber-100){--qc:var(--gold)}
html body #allCardsList > div.ring-4{box-shadow:0 0 0 3px #F0C36A; background:#FFFBF1}
@media (hover:hover){ html body #allCardsList > div:hover{border-color:var(--qc); border-left-color:var(--qc); transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,33,61,.12)} }
html body #allCardsList > div:active{transform:scale(.99)}
html body #allCardsList .bg-navy-900{background:var(--qc); border-radius:8px}
html body #allCardsList h4{color:var(--ink); font-weight:800; line-height:1.35}
html body #allCardsList .text-amber-800{color:#7A4A06}
html body #allCardsList .text-stone-600{color:#4A5060}
html body #allCardsList .border-t{border-color:#EFECE4}
html body #allCardsList .text-amber-600{color:var(--gold)}

/* ---------- 教案視窗：手機全螢幕、單一捲動 ---------- */
html body #lessonModal,html body #guideModal{overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
html body #lessonModal .modal-box{border:0; box-shadow:0 24px 60px rgba(10,16,32,.45)}
html body #lessonModal .modal-box > .no-print.bg-stone-900{
  position:sticky; top:0; z-index:5; background:var(--ink); padding:calc(10px + var(--sat)) 14px 10px;
}
html body #lessonModal .modal-box > .no-print.bg-stone-900 button{min-height:var(--tap); border-radius:12px}
html body #lessonModal .modal-box > .no-print.bg-stone-900 button:last-child{width:var(--tap);height:var(--tap)}
html body #lessonModal #modalTitle{color:var(--ink); line-height:1.25}
@media (max-width:640px){
  html body #lessonModal{padding:0; align-items:flex-start}
  html body #lessonModal .modal-box{margin:0; border-radius:0; min-height:100dvh; max-width:none}
  html body #lessonModal .modal-box > div.overflow-y-auto{max-height:none; overflow:visible; padding:16px 14px calc(24px + var(--sab))}
  html body #lessonModal .modal-box > .no-print.bg-stone-900 > div:last-child{width:100%; flex-wrap:wrap; gap:8px}
  html body #lessonModal .modal-box > .no-print.bg-stone-900 > div:last-child button:not(:last-child){flex:1 1 30%; justify-content:center; font-size:.78rem; padding:0 8px}
}
@media (min-width:641px){
  html body #lessonModal .modal-box > div.overflow-y-auto{max-height:calc(100dvh - 190px)}
}
/* 底部關閉列 */
html body #lessonModal .modal-box > div:last-child{padding-bottom:calc(14px + var(--sab)); gap:10px}
html body #lessonModal .modal-box > div:last-child button{white-space:nowrap; min-height:var(--tap)}
html body #guideModal > div{border-radius:var(--radius)}
html body #guideModal button{min-height:var(--tap)}

/* ---------- 計時器、流程按鈕觸控尺寸 ---------- */
html body #btnFlowStandard,html body #btnFlowDance{min-height:var(--tap); padding-left:14px; padding-right:14px}
html body #audioToggleBtn,html body #youtubeAudioBtnContainer{min-height:var(--tap)}
html body #timerDisplay{font-variant-numeric:tabular-nums}
html body footer{padding-bottom:calc(24px + var(--sab))}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------- 修飾：卡片頂列、季度列、手機視窗工具列 ---------- */
html body #allCardsList > div > div:first-child > div:first-child{flex-wrap:wrap; gap:8px}
html body #allCardsList > div > div:first-child > div:first-child > div{flex-wrap:wrap; gap:6px 8px; min-width:0}
html body #allCardsList .bg-navy-900,html body #allCardsList .rounded-full{white-space:nowrap; flex-shrink:0}
html body #navButtons{padding:2px 2px 12px; margin-bottom:-6px}
@media (max-width:640px){
  html body #lessonModal .modal-box{transform:none}
  html body #lessonModal .modal-box > .no-print.bg-stone-900{position:static; padding-right:64px}
  html body #lessonModal .modal-box > .no-print.bg-stone-900 > div:last-child button:last-child{
    position:fixed; z-index:60; top:calc(8px + var(--sat)); right:calc(10px + var(--sar));
    width:var(--tap); height:var(--tap); background:var(--ink-2); border:1px solid rgba(255,255,255,.35); box-shadow:0 2px 8px rgba(0,0,0,.35);
  }
}

/* ---------- 迷你計時膠囊：原計時區離開畫面時浮出 ---------- */
#miniTimer{
  position:fixed; right:calc(14px + var(--sar)); bottom:calc(76px + var(--sab)); z-index:60;
  display:none; align-items:center; gap:10px; padding:6px 8px 6px 14px; min-height:var(--tap);
  background:var(--ink); color:#fff; border-radius:999px; box-shadow:0 8px 22px rgba(10,16,32,.4);
  border:1px solid rgba(255,255,255,.25); font-weight:800;
}
#miniTimer.show{display:inline-flex}
#miniTimer .t{font-variant-numeric:tabular-nums; font-size:1.15rem; letter-spacing:.02em}
#miniTimer button{width:40px; height:40px; border-radius:50%; background:var(--gold); color:#fff; font-size:1rem; line-height:1; border:0}
@media print{ #miniTimer{display:none !important} }