/* ==========================================================================
   1 年 10 班 班級網站 — 共用樣式
   希臘古典．簡潔：象牙白底、赤陶紅主色、橄欖綠輔色、古金線條
   規則：不用漸層、不用發光、不用陰影、不用圓角膠囊、不用 emoji
   ========================================================================== */

:root {
  --ivory: #F5F0E6;
  --paper: #FFFCF4;
  --ink: #2A2724;
  --terracotta: #9E4A2F;
  --olive: #6B7A3A;
  --gold: #B08D4F;
  --grey: #D9D2C5;

  /* 回紋（Greek key）細邊條，SVG 線稿，非漸層 */
  --meander: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 18 H40 M6 18 V6 H34 V14 H14 V10 H26' fill='none' stroke='%23B08D4F' stroke-width='2'/%3E%3C/svg%3E");
  /* 小號回紋：標題底下那一小段（120×8） */
  --meander-sm: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Cpath d='M0 7 H20 M3 7 V2 H16 V5.2 H8.5' fill='none' stroke='%23B08D4F' stroke-width='1.2'/%3E%3C/svg%3E");
}

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

/* 任何圖都不得超出容器（手機橫向不溢出） */
img, svg, table { max-width: 100%; }

/* 基準字級：桌機內文 22px；投影模式 30px（SPEC 要求 ≥30px） */
html { font-size: 22px; }
html.projection { font-size: 30px; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: "Noto Serif TC", Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 .5em;
  letter-spacing: .02em;
}
h1 { font-size: 2rem; }          /* 44px */
h2 { font-size: 1.5rem; color: var(--terracotta); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 .9em; }

/* 每個 h2 底下一小段回紋，取代單純的空白間距 */
h2::after {
  content: "";
  display: block;
  width: 120px;
  max-width: 100%;
  height: 8px;
  margin-top: .28em;
  background-image: var(--meander-sm);
  background-repeat: repeat-x;
  background-position: left bottom;
}

a { color: var(--terracotta); text-decoration: underline; text-underline-offset: .18em; }
a:hover { background: var(--grey); }

:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }

/* ---------- 版面容器 ---------- */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

.section { margin: 0 0 2.2rem; }

main.wrap, main.print-sheet { padding-top: 1.4rem; }
.page-sub { font-size: 1rem; color: var(--olive); margin-top: -.5rem; }

/* ---------- 回紋細邊 ---------- */
.meander {
  height: 20px;
  background-image: var(--meander);
  background-repeat: repeat-x;
  background-position: left center;
}

/* ---------- 頁首 ---------- */
.site-head { border-bottom: 1px solid var(--grey); background: var(--paper); }
.head-inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: .9rem 1rem .6rem;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.temple { width: 200px; height: auto; color: var(--gold); flex: none; }
.head-text { flex: 1 1 260px; min-width: 220px; }
.head-title {
  font-family: "Noto Serif TC", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  display: block;
  line-height: 1.25;
}
.head-sub { font-size: .8rem; color: var(--olive); display: block; }

/* ---------- 導覽列 ---------- */
.site-nav { border-top: 1px solid var(--grey); background: var(--paper); }
.nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 1rem;
  display: flex; flex-wrap: wrap;
}
.site-nav a {
  display: block;
  padding: .55rem 1.1rem;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 4px solid transparent;
}
.site-nav a:hover { background: var(--grey); }
.site-nav a[aria-current="page"] {
  color: var(--terracotta);
  font-weight: 700;
  border-bottom-color: var(--terracotta);
  background: transparent;
}

/* ---------- 範例資料提示 ---------- */
.sample-notice {
  background: #EDE6D4;
  border-bottom: 1px solid var(--gold);
  color: #6A5B3E;
  font-size: .85rem;
  padding: .5rem 1rem;
  text-align: center;
}

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  padding: .5rem 1.3rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn:hover { background: var(--grey); }
.btn-main { border-color: var(--terracotta); color: var(--terracotta); }
.btn-main:hover { background: var(--terracotta); color: var(--paper); }
.btn[disabled] { color: #9A948A; border-color: var(--grey); cursor: default; }
.btn[disabled]:hover { background: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* ---------- 卡片：雙線框（外 1px、內 1px，間距 3px，古典銅版感） ---------- */
.card {
  position: relative;
  border: 1px solid var(--gold);
  background: var(--paper);
  padding: 1.2rem 1.4rem;
}
.card + .card { margin-top: 1rem; }

/* 內框：所有雙線框元件共用 */
.card::before,
.subject-block::before,
.stat-card::before,
.passrate::before,
.card-link::before,
.subject-tab::before {
  content: "";
  position: absolute;
  top: 3px; right: 3px; bottom: 3px; left: 3px;
  border: 1px solid var(--gold);
  pointer-events: none;
}

/* 首頁三張大按鈕卡 */
.card-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card-link {
  position: relative;
  display: block;
  border: 2px solid var(--terracotta);
  background: var(--paper);
  padding: 1.5rem 1.3rem;
  text-decoration: none;
  color: var(--ink);
}
.card-link::before { border-color: var(--terracotta); }
.card-link:hover { background: var(--terracotta); color: var(--paper); }
.card-link:hover::before { border-color: var(--paper); }
.card-link:hover .card-link-desc { color: var(--paper); }
.card-link-title {
  font-family: "Noto Serif TC", Georgia, serif;
  font-size: 1.5rem; font-weight: 700; display: block; line-height: 1.3;
}
.card-link-desc { display: block; font-size: .85rem; color: var(--olive); margin-top: .3rem; }

/* ---------- 標題兩側的月桂枝（首頁大標題） ---------- */
.title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 .6rem;
}
.title-row h1 { margin: 0; }
.title-laurel { width: 54px; height: 93px; flex: none; }
.title-laurel-right { transform: scaleX(-1); }

/* ---------- 三位先賢（銀幣風徽章 + 名言） ---------- */
.sages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.sage { margin: 0; text-align: center; display: flex; flex-direction: column; }
.sage-coin { display: block; width: 172px; height: 172px; margin: 0 auto .8rem; }
.sage-quote {
  font-family: "Noto Serif TC", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.7;
  margin: 0 0 .45rem;
  text-wrap: balance;
}
.sage-name {
  margin-top: auto;
  font-size: .95rem;
  font-weight: 700;
  color: var(--olive);
  letter-spacing: .06em;
}

/* 導師的話標題旁的小徽章（太小刻不出名字，靠 --coin-name 收起） */
.badge-mini {
  width: 3rem;
  height: 3rem;
  vertical-align: -.78em;
  margin-right: .55rem;
  --coin-name: hidden;
}

/* ---------- 雅典娜的貓頭鷹 ---------- */
.notice-owl { display: flex; align-items: flex-start; gap: 1.1rem; }
.notice-owl p { margin: 0; }
.owl-icon { width: 54px; height: 66px; flex: none; }
.passrate-owl { display: block; width: 23px; height: 28px; margin: 0 auto .1rem; }

/* ---------- 定義列（日期／地點…） ---------- */
.info-rows { margin: 0; }
.info-row { display: flex; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--grey); }
.info-row:last-child { border-bottom: 0; }
.info-key { flex: none; width: 6.5rem; color: var(--olive); font-weight: 700; }
.info-val { flex: 1 1 auto; }

ol.agenda { margin: .4rem 0 0; padding-left: 1.6rem; }
ol.agenda li { margin-bottom: .3rem; }

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: .5rem 0; border-bottom: 1px solid var(--grey); }
ul.plain li:last-child { border-bottom: 0; }

.ann-date { color: var(--olive); font-weight: 700; margin-right: .8rem; }

/* ---------- 頁尾 ---------- */
.site-foot {
  border-top: 1px solid var(--grey);
  margin-top: 2.5rem;
  padding: 1.2rem 1rem 2rem;
  font-size: .8rem;
  color: #5C564D;
  text-align: center;
}
.qr-box { margin: .8rem auto 0; }
.qr-box img { width: 180px; height: 180px; border: 1px solid var(--grey); display: block; margin: 0 auto .4rem; }
.foot-link { margin: .9rem 0 .6rem; }
.foot-link a { font-size: 1rem; }

.fine-print { font-size: .75rem; line-height: 1.6; color: #5C564D; }

/* ==========================================================================
   exam.html
   ========================================================================== */
/* 科目分頁：刻在石板上的標籤（矩形、雙線框，選中為赤陶底象牙字） */
.subject-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.subject-tab {
  position: relative;
  font-family: "Noto Serif TC", Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .5rem 1.25rem;
  border: 2px solid var(--gold);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.subject-tab:hover { background: var(--grey); }
.subject-tab[aria-selected="true"] {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--ivory);
}
.subject-tab[aria-selected="true"]::before { border-color: var(--ivory); }

.q-head {
  font-family: "Noto Serif TC", Georgia, serif;
  font-size: 1.15rem;
  color: var(--terracotta);
  border-bottom: 2px solid var(--gold);
  padding-bottom: .4rem;
  margin-bottom: 1rem;
  /* 桌機：眉標在左，全國答對率方框在同一列靠右；手機自動換行 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
}
.q-head-text { flex: 1 1 16rem; min-width: 0; }

/* 全國答對率：永遠顯示，1px 線框、無陰影、無圓角 */
.passrate {
  position: relative;
  flex: none;
  border: 1px solid var(--gold);
  background: var(--paper);
  padding: .45rem 1rem .55rem;
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
}
.passrate:empty { display: none; }
.passrate-label {
  display: block;
  font-family: "Noto Sans TC", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: var(--olive);
  letter-spacing: .04em;
}
.passrate-value {
  display: block;
  font-family: "Noto Serif TC", Georgia, serif;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--terracotta);
  line-height: 1.15;
}
.passrate-base {
  display: block;
  font-family: "Noto Sans TC", sans-serif;
  font-size: .68rem;
  font-weight: 400;
  color: #5C564D;
}

.q-stem {
  font-size: 1.15rem;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin-bottom: 1.2rem;
}
.q-figure { margin: 0 0 1.2rem; }
.q-figure img { max-width: 100%; height: auto; border: 1px solid var(--grey); display: block; }
.q-figure figcaption { font-size: .8rem; color: var(--olive); margin-top: .3rem; }

/* 附圖大小：narrow＝單純示意圖（限高置中）；wide＝整題圖，滿內容寬 */
.q-figure.fig-narrow { text-align: center; }
.q-figure.fig-narrow img {
  max-width: 520px;
  max-width: min(520px, 100%);   /* 手機不得超出內容寬 */
  max-height: 40vh;
  width: auto;
  margin: 0 auto;
}
.q-figure.fig-wide img { width: 100%; max-width: 100%; height: auto; }
html.projection .q-figure.fig-narrow img { max-height: 45vh; }

ul.q-options { list-style: none; margin: 0 0 1.4rem; padding: 0; }
ul.q-options li {
  font-size: 1.1rem;
  line-height: 1.8;
  padding: .45rem .8rem;
  border-left: 4px solid var(--grey);
  margin-bottom: .5rem;
}

.answer-box { border: 2px solid var(--olive); padding: 1rem 1.3rem; margin-top: 1.3rem; }
.answer-line {
  font-family: "Noto Serif TC", Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--olive);
  line-height: 1.3;
  margin: .1rem 0 .2rem;
}
.answer-block { margin-bottom: 1rem; }
.answer-block:last-child { margin-bottom: 0; }
.answer-label {
  display: block;
  font-family: "Noto Serif TC", Georgia, serif;
  font-weight: 700;
  color: var(--terracotta);
  font-size: 1.15rem;
  border-bottom: 1px solid var(--grey);
  margin-bottom: .3rem;
}
.answer-block p { margin: 0; white-space: pre-wrap; }

.exam-toolbar { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--grey); }
.keyhint { font-size: .75rem; color: #5C564D; margin-top: .8rem; }

/* 投影模式 */
html.projection body { background: var(--ivory); }
html.projection .site-nav,
html.projection .site-foot,
html.projection .no-project { display: none; }
html.projection .head-inner { padding: .4rem 1rem; }
html.projection .temple { width: 128px; height: auto; }

/* ==========================================================================
   scores.html
   ========================================================================== */
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
.stat-card {
  position: relative;
  border: 1px solid var(--gold);
  background: var(--paper);
  padding: 1rem 1.1rem;
  text-align: center;
}
.stat-label { display: block; font-size: .8rem; color: var(--olive); font-weight: 700; }
.stat-value {
  display: block;
  font-family: "Noto Serif TC", Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--terracotta);
  line-height: 1.2;
}
.stat-unit { font-size: .8rem; color: var(--ink); }

.chart {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  border-bottom: 2px solid var(--gold);
  padding: 0 .2rem;
  margin-top: 1rem;
}
.bar-col { flex: 1 1 0; min-width: 0; }
.bar-track {
  height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bar-count {
  flex: none;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  font-family: "Noto Serif TC", Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.bar {
  flex: none;
  width: 100%;
  background: var(--terracotta);
  border: 1px solid #7C3722;
  min-height: 4px;
}
.bar.zero { background: transparent; border: 0; border-top: 3px solid var(--grey); height: 3px; }
.axis { display: flex; gap: .5rem; padding: .35rem .2rem 0; }
.axis-label {
  flex: 1 1 0;
  text-align: center;
  font-size: max(18px, .82rem);   /* 區間標籤不小於 18px */
  line-height: 1.3;
  color: var(--ink);
  min-width: 0;
  word-break: keep-all;
}
.chart-scroll { overflow-x: auto; }
.chart-inner { min-width: 660px; }
.chart-caption { font-size: .8rem; color: var(--olive); margin: .6rem 0 0; }
.chart-hint { display: none; font-size: .8rem; color: var(--olive); margin: .5rem 0 0; }

.rank-list { margin: 1.1rem 0 0; }
.rank-line { font-size: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--grey); }
.rank-line:last-child { border-bottom: 0; }
.rank-num { font-family: "Noto Serif TC", Georgia, serif; font-size: 1.35rem; font-weight: 700; color: var(--olive); }

.exam-picker { margin-bottom: 1.4rem; }
.exam-picker select {
  font-family: inherit;
  font-size: 1rem;
  padding: .35rem .6rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}
.notice {
  border-left: 6px solid var(--olive);
  background: var(--paper);
  padding: .8rem 1.1rem;
  margin-bottom: 1.6rem;
  font-size: .9rem;
}

.subject-block {
  position: relative;
  border: 1px solid var(--gold);
  padding: 1.3rem 1.4rem;
  margin-bottom: 1.8rem;
  background: var(--paper);
}

/* ==========================================================================
   print.html
   ========================================================================== */
.print-sheet { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.print-page { border-bottom: 1px solid var(--grey); padding-bottom: 2rem; margin-bottom: 2rem; }
.work-area {
  border: 1px solid var(--ink);
  min-height: 11cm;
  margin-top: 1rem;
  padding: .4rem .6rem;
}
.work-area-label { font-size: .78rem; color: #5C564D; }

/* ---------- 響應式：手機單欄 ---------- */
@media (max-width: 820px) {
  html { font-size: 20px; }
  .card-links, .stat-cards, .sages { grid-template-columns: 1fr; }
  .temple { width: 150px; }
  .title-row { gap: .6rem; }
  .title-laurel { width: 38px; height: 66px; }
  .sage-coin { width: 140px; height: 140px; }
  .notice-owl { gap: .8rem; }
  .owl-icon { width: 42px; height: 51px; }
  .bar-track { height: 180px; }
  .info-row { flex-direction: column; gap: 0; }
  .info-key { width: auto; }
  .btn { width: 100%; }
  /* 按鈕列在手機上換行；每顆按鈕可縮到比內容窄，才不會把版面撐寬 */
  .btn-row .btn { width: auto; flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .chart-hint { display: block; }
  /* 眉標換行後，答對率方框自成一列靠左 */
  .q-head-text { flex: 1 1 100%; }
  .passrate { align-self: flex-start; }
  .q-figure.fig-narrow img { max-height: 34vh; }
}

/* ---------- 列印 ---------- */
@page { size: A4 portrait; margin: 15mm; }

@media print {
  html { font-size: 14pt; }
  body { background: #FFFFFF; color: #000000; font-size: 14pt; line-height: 1.65; }
  .site-head, .site-nav, .site-foot, .meander, .sample-notice, .no-print, .btn { display: none !important; }
  /* 列印黑白省墨：所有希臘裝飾一律不印 */
  h2::after,
  .card::before, .subject-block::before, .stat-card::before,
  .passrate::before, .card-link::before, .subject-tab::before,
  #svg-icon-sprite, #sages, .title-laurel, .owl-icon, .passrate-owl,
  .badge-mini { display: none !important; }
  .card, .subject-block, .stat-card { border-color: #000; }
  h1, h2, h3 { color: #000; }
  .q-head { color: #000; border-bottom: 1px solid #000; font-size: 14pt; }
  .q-stem { font-size: 14pt; }
  ul.q-options li { font-size: 14pt; border-left: 2px solid #000; }
  .q-figure img { max-height: 8cm; width: auto; border: 1px solid #000; }
  /* 列印時不放全國答對率方框（題目卷是空白卷） */
  .passrate { display: none !important; }
  /* 示意圖列印最寬 9 公分，整題圖照舊滿版 */
  .q-figure.fig-narrow img { max-width: 90mm; max-height: 5cm; }
  /* 整題圖列印時限高 6 公分，題目＋作答空白才排得進同一頁 */
  .q-figure.fig-wide img { max-width: 100%; max-height: 6cm; width: auto; }

  /* 每科剛好一頁：A4 297mm 減上下各 15mm 邊界＝267mm，留 3mm 安全值免得多擠出一頁 */
  .print-page {
    height: 266mm;
    display: flex;
    flex-direction: column;
    page-break-after: always;
    break-after: page;
    page-break-inside: avoid;
    border-bottom: 0;
    margin: 0;
    padding: 0;
    /* 內容萬一超過一頁，寧可裁掉也不要溢到下一頁蓋住下一科的眉標 */
    overflow: hidden;
  }
  .print-page:last-child { page-break-after: auto; break-after: auto; }

  /* 作答／計算空白：撐滿題目以外的剩餘版面（最少 7 公分，題幹長的科目才不會擠到第二頁） */
  .work-area { border: 1px solid #000; flex: 1 1 auto; min-height: 4cm; }
  .fine-print { font-size: 10pt; color: #000; flex: none; }
  .q-figure figcaption { color: #000; font-size: 10pt; }
  main.print-sheet { max-width: none; padding: 0; }   /* 蓋掉 main.wrap/main.print-sheet 的 padding-top，否則每頁被往下推 7mm */
  a { color: #000; text-decoration: none; }
}

/* 小彩蛋：頁首神殿可點回片頭；徽章滑鼠停留有說明 */
.temple-link { display: inline-block; line-height: 0; color: inherit; border: 0; }
.temple-link:hover .temple { color: var(--terracotta); }
.sage-coin, .badge-mini { cursor: help; }