/* ============================================================
   師盟教育志業｜班務規範查詢網站
   識別配色：深藍 (#0E2A47) ＋ 金 (#B8912F)
   若要調整配色，只改下方 :root 的變數即可
   ============================================================ */

:root{
  /* 品牌色：取自師盟 LOGO */
  --navy:        #113D87;   /* 師盟深藍（LOGO 原色） */
  --navy-deep:   #0B2A60;   /* 深一階：頁首、頁尾底色 */
  --navy-2:      #1B4EA8;
  --navy-3:      #2A5FBF;
  --gold:        #BE9430;
  --gold-2:      #DCB554;
  --gold-soft:   #F5ECD6;

  --bg:          #F3F2EE;
  --surface:     #FFFFFF;
  --surface-2:   #FAF9F5;
  --text:        #16202E;
  --text-2:      #3E4F66;
  --muted:       #67788C;
  --border:      #E2DFD7;
  --border-2:    #EEEBE4;
  --shadow:      0 1px 2px rgba(11,42,96,.06), 0 8px 24px -12px rgba(11,42,96,.20);
  --radius:      14px;
  --maxw:        1180px;
}

/* 深色模式（系統設定） */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:      #0D2E63;
    --navy-deep: #071C3F;
    --navy-2:    #16407F;
    --navy-3:    #6E9BE8;
    --gold:      #DCB554;
    --gold-2:    #EBCE86;
    --gold-soft: #2C2614;

    --bg:        #06111F;
    --surface:   #0C1F35;
    --surface-2: #102741;
    --text:      #E6EDF5;
    --text-2:    #B7C7DB;
    --muted:     #89A0B9;
    --border:    #1B3A5E;
    --border-2:  #163150;
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}

/* 深色模式（手動切換） */
:root[data-theme="dark"]{
  --navy:      #0D2E63;
  --navy-deep: #071C3F;
  --navy-2:    #16407F;
  --navy-3:    #6E9BE8;
  --gold:      #DCB554;
  --gold-2:    #EBCE86;
  --gold-soft: #2C2614;

  --bg:        #06111F;
  --surface:   #0C1F35;
  --surface-2: #102741;
  --text:      #E6EDF5;
  --text-2:    #B7C7DB;
  --muted:     #89A0B9;
  --border:    #1B3A5E;
  --border-2:  #163150;
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.7);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei","Hiragino Sans TC",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.85;
  letter-spacing:.01em;
}

a{ color:var(--navy-3); text-underline-offset:3px; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) a{ color:var(--gold-2); } }
:root[data-theme="dark"] a{ color:var(--gold-2); }

svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* ---------------- Header ---------------- */
.hdr{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)*0);
  padding-left:max(14px, env(safe-area-inset-left));
  padding-right:max(14px, env(safe-area-inset-right));
  background:var(--navy-deep);
  border-bottom:2px solid var(--gold);
  color:#fff;
}

.brand{
  display:flex; align-items:center; gap:11px;
  color:#fff; text-decoration:none; min-width:0; flex:1;
}
.mark{
  flex:none;
  width:40px; height:40px;
  display:block;
  border-radius:7px;
  border:1px solid rgba(222,181,84,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.22);
}
.brandtext{ min-width:0; display:block; }
.brandtext b{ display:block; font-size:16.5px; font-weight:700; letter-spacing:.04em; line-height:1.3; }
.brandtext small{ display:block; font-size:12px; color:rgba(255,255,255,.72); letter-spacing:.06em; line-height:1.3; }

.iconbtn{
  flex:none;
  width:40px; height:40px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  color:#fff; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.iconbtn:hover{ background:rgba(255,255,255,.16); }
.iconbtn:active{ transform:scale(.96); }

.themebtn .ic-moon{ display:none; }
:root[data-theme="dark"] .themebtn .ic-moon{ display:block; }
:root[data-theme="dark"] .themebtn .ic-sun{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themebtn .ic-moon{ display:block; }
  :root:not([data-theme="light"]) .themebtn .ic-sun{ display:none; }
}

/* ---------------- Search ---------------- */
.searchwrap{
  position:sticky; top:61px; z-index:35;
  background:var(--navy-deep);
  padding:0 14px 12px;
}
.searchbox{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:9px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:11px;
  padding:0 12px;
  box-shadow:0 4px 14px -8px rgba(0,0,0,.4);
}
.ic-search{ flex:none; color:var(--muted); width:19px; height:19px; }
#q{
  flex:1; min-width:0;
  border:0; outline:0; background:transparent;
  font:inherit; font-size:15.5px;
  color:var(--text);
  padding:11px 0;
}
#q::placeholder{ color:var(--muted); opacity:.85; }
#q::-webkit-search-cancel-button,
#q::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; }
.clearbtn{
  flex:none; border:0; background:transparent; cursor:pointer;
  color:var(--muted); font-size:15px; padding:4px 2px; line-height:1;
}

/* ---------------- Layout ---------------- */
.layout{
  max-width:var(--maxw);
  margin:0 auto;
  display:block;
  padding:0 0 40px;
}

.nav{
  position:fixed; inset:0 auto 0 0;
  width:min(84vw, 320px);
  z-index:45;
  background:var(--surface);
  border-right:1px solid var(--border);
  transform:translateX(-102%);
  transition:transform .22s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 0 40px;
}
.nav.open{ transform:none; box-shadow:0 0 40px rgba(0,0,0,.3); }
.scrim{
  position:fixed; inset:0; z-index:44;
  background:rgba(6,18,30,.5);
  backdrop-filter:blur(1.5px);
}

.main{
  padding:18px 16px 0;
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  min-width:0;
}

@media (min-width: 900px){
  .layout{ display:grid; grid-template-columns:294px minmax(0,1fr); gap:30px; padding:24px 20px 60px; align-items:start; }
  .nav{
    position:sticky; top:132px; inset:auto;
    width:auto; transform:none; z-index:1;
    border:1px solid var(--border); border-radius:var(--radius);
    max-height:calc(100vh - 156px);
    box-shadow:var(--shadow);
    padding:10px 0 14px;
  }
  .main{ padding:0; }
  .menubtn{ display:none; }
  .scrim{ display:none !important; }
}

/* ---------------- Nav content ---------------- */
.navsec{ padding:6px 0 2px; }
.navsec + .navsec{ border-top:1px solid var(--border-2); margin-top:8px; padding-top:12px; }
.navsec > h2{
  margin:0 16px 2px;
  font-size:13px; font-weight:800; letter-spacing:.1em;
  color:var(--navy-3);
  display:flex; align-items:baseline; gap:8px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .navsec > h2{ color:var(--gold-2); } }
:root[data-theme="dark"] .navsec > h2{ color:var(--gold-2); }
.navsec > h2 em{ font-style:normal; font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.06em; }

.navgrp{ margin:9px 0 4px; }
.navgrp > h3{
  margin:0 16px 3px;
  font-size:11.5px; font-weight:700; letter-spacing:.09em;
  color:var(--muted);
}
.nav a.link{
  display:block;
  padding:8px 16px 8px 15px;
  border-left:3px solid transparent;
  color:var(--text-2);
  text-decoration:none;
  font-size:14.5px;
  line-height:1.5;
}
.nav a.link:hover{ background:var(--surface-2); color:var(--text); }
.nav a.link.active{
  border-left-color:var(--gold);
  background:var(--gold-soft);
  color:var(--navy);
  font-weight:700;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav a.link.active{ color:var(--gold-2); } }
:root[data-theme="dark"] .nav a.link.active{ color:var(--gold-2); }

.navhome{
  margin:2px 12px 10px;
  padding:9px 12px;
  border-radius:9px;
  background:var(--surface-2);
  border:1px solid var(--border-2);
  color:var(--text); text-decoration:none;
  font-size:14px; font-weight:700;
  display:flex; align-items:center; gap:8px;
}

/* ---------------- Article ---------------- */
.doc{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 20px 30px;
  overflow:hidden;
}
@media (min-width:700px){ .doc{ padding:34px 40px 40px; } }

.crumb{
  font-size:12.5px; color:var(--muted); letter-spacing:.06em;
  margin:0 0 8px;
}
.doc > h1{
  margin:0 0 6px;
  font-size:24px; line-height:1.4; font-weight:800;
  color:var(--navy);
  letter-spacing:.01em;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .doc > h1{ color:var(--gold-2); } }
:root[data-theme="dark"] .doc > h1{ color:var(--gold-2); }
@media (min-width:700px){ .doc > h1{ font-size:28px; } }

.rule{ height:3px; width:52px; background:var(--gold); border-radius:2px; margin:0 0 20px; }

.body h2{
  margin:34px 0 10px;
  font-size:18.5px; font-weight:800; line-height:1.5;
  color:var(--navy);
  padding-left:12px;
  border-left:4px solid var(--gold);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .body h2{ color:var(--text); } }
:root[data-theme="dark"] .body h2{ color:var(--text); }
.body h3{ margin:24px 0 8px; font-size:16px; font-weight:800; color:var(--text); }
.body h4{ margin:20px 0 6px; font-size:15px; font-weight:700; color:var(--text-2); }
.body p{ margin:0 0 15px; color:var(--text-2); }
.body strong{ color:var(--text); font-weight:800; }
.body ul,.body ol{ margin:0 0 16px; padding-left:1.45em; color:var(--text-2); }
.body li{ margin:0 0 7px; }
.body li::marker{ color:var(--gold); font-weight:700; }
.body hr{ border:0; border-top:1px solid var(--border); margin:26px 0; }

.body blockquote{
  margin:0 0 22px;
  padding:14px 18px;
  background:var(--surface-2);
  border:1px solid var(--border-2);
  border-left:4px solid var(--gold);
  border-radius:0 10px 10px 0;
}
.body blockquote p{ margin:0; color:var(--text); font-weight:600; }
.body blockquote p + p{ margin-top:6px; }

.body code{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.92em;
  background:var(--surface-2);
  border:1px solid var(--border-2);
  border-radius:5px; padding:1px 5px;
}
.body pre{
  margin:0 0 18px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-left:4px solid var(--navy-3);
  border-radius:10px;
  padding:14px 16px;
  overflow-x:auto;
}
.body pre code{ background:none; border:0; padding:0; font-size:13.5px; line-height:1.9; }

.tw{ overflow-x:auto; margin:0 0 20px; border:1px solid var(--border); border-radius:10px; }
.body table{ border-collapse:collapse; width:100%; font-size:14.5px; }
.body th,.body td{ padding:10px 13px; text-align:left; border-bottom:1px solid var(--border-2); vertical-align:top; }
.body thead th{ background:var(--navy); color:#fff; font-weight:700; white-space:nowrap; border-bottom:0; }
.body tbody tr:last-child td{ border-bottom:0; }
.body tbody tr:nth-child(even) td{ background:var(--surface-2); }

/* ---------------- Home cards ---------------- */
.cards{ display:grid; gap:12px; margin:22px 0 6px; }
@media (min-width:640px){ .cards{ grid-template-columns:1fr 1fr; } }
.card{
  display:block; text-decoration:none;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-left:4px solid var(--gold);
  border-radius:11px;
  padding:14px 16px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.card b{ display:block; color:var(--text); font-size:15.5px; font-weight:800; margin-bottom:3px; line-height:1.5; }
.card span{ display:block; color:var(--muted); font-size:13.5px; line-height:1.65; }

.sectitle{
  margin:34px 0 4px;
  font-size:13px; letter-spacing:.12em; font-weight:800;
  color:var(--gold);
}

/* ---------------- Search results ---------------- */
.reshead{ margin:0 0 14px; font-size:14px; color:var(--muted); }
.reshead b{ color:var(--text); }
.hit{
  display:block; text-decoration:none;
  padding:14px 16px; margin:0 0 10px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:11px;
}
.hit:hover{ border-color:var(--gold); }
.hit b{ display:block; color:var(--text); font-size:15.5px; font-weight:800; margin-bottom:2px; }
.hit .path{ display:block; font-size:12px; color:var(--muted); letter-spacing:.05em; margin-bottom:5px; }
.hit .snip{ display:block; font-size:13.8px; color:var(--text-2); line-height:1.7; }
mark{ background:var(--gold-soft); color:inherit; padding:0 2px; border-radius:3px; font-weight:700; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) mark{ background:#4A3C12; color:var(--gold-2); } }
:root[data-theme="dark"] mark{ background:#4A3C12; color:var(--gold-2); }

.empty{ padding:30px 4px; color:var(--muted); text-align:center; }
.loading{ padding:40px 18px; color:var(--muted); text-align:center; font-size:14px; }

/* ---------------- Prev / Next ---------------- */
.pager{ display:grid; gap:10px; margin:30px 0 0; }
@media (min-width:640px){ .pager{ grid-template-columns:1fr 1fr; } }
.pager a{
  display:block; text-decoration:none;
  border:1px solid var(--border); border-radius:11px;
  padding:12px 15px; background:var(--surface-2);
}
.pager a small{ display:block; font-size:11.5px; color:var(--muted); letter-spacing:.1em; margin-bottom:2px; }
.pager a b{ display:block; font-size:14.5px; color:var(--text); font-weight:700; line-height:1.5; }
.pager a.next{ text-align:right; }

/* ---------------- Footer ---------------- */
.ftr{
  border-top:2px solid var(--gold);
  background:var(--navy-deep);
  color:rgba(255,255,255,.78);
  padding:30px 16px calc(32px + env(safe-area-inset-bottom,0px));
  margin-top:10px;
}
.ftrinner{ max-width:var(--maxw); margin:0 auto; font-size:13.5px; line-height:1.9; }
.ftrlogo{
  display:block;
  width:min(320px, 78vw); height:auto;
  margin:0 0 16px -6px;
}
.ftrinner a{ color:var(--gold-2); }
.ftrmeta{ display:flex; flex-wrap:wrap; gap:6px 22px; }
.ftrinner .note{
  margin-top:14px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px; color:rgba(255,255,255,.5);
}

/* ---------------- Print ---------------- */
@media print{
  .hdr,.searchwrap,.nav,.ftr,.pager,.scrim{ display:none !important; }
  body{ background:#fff; color:#000; }
  .doc{ border:0; box-shadow:none; padding:0; }
  .layout{ display:block; padding:0; }
  a{ color:#000; text-decoration:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}