/* ===== 紙本講義 1:1 鏡像排版與本機常駐評語樣式 ===== */
.handout-doc-header {
border-bottom: 2.5px double var(--ink);
padding-bottom: 10px;
margin-bottom: 14px;
}
.handout-doc-title-row {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
}
.handout-doc-main-title {
font-size: 26px;
font-weight: 900;
color: var(--ink);
letter-spacing: 0.06em;
}
.handout-doc-student-fields {
font-size: 15.5px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.03em;
}
.handout-section-heading {
font-size: 22px;
font-weight: 900;
color: var(--ink);
margin: 6px 0 8px;
letter-spacing: 0.04em;
}
.handout-unit-heading {
font-size: 20px;
font-weight: 900;
color: var(--ink);
margin: 4px 0 10px;
line-height: 1.5;
}
/* 講義原文段落：保留 docx 的手動換行（\n），避免全部擠成一段 */
.handout-lead-text {
white-space: pre-line;
}
.handout-lead-text p {
font-size: 18.5px;
font-weight: 700;
color: var(--ink);
margin: 8px 0;
line-height: 1.75;
white-space: pre-line;
}
.handout-qa-list {
margin: 16px 0;
}
.handout-qa-item {
margin: 14px 0 18px;
padding: 4px 0 10px;
border-bottom: 1px dashed var(--line-strong);
}
.handout-qa-stem {
font-size: 19.5px;
font-weight: 800;
color: var(--ink);
line-height: 1.8;
}
.handout-ref-table {
width: 100%;
border-collapse: collapse;
border: 2px solid var(--ink);
margin-top: 16px;
background: #FFFFFF;
}
.handout-ref-table td {
border: 1.5px solid var(--ink);
padding: 12px 16px;
font-size: 17.5px;
line-height: 1.8;
color: var(--ink);
/* 注意：不可在此整格套用 pre-line，否則樣板字串（如單選題）本身的換行也會變成空行。
只對資料文字用的 .handout-ref-body 保留換行。 */
}
.handout-ref-body {
white-space: pre-line;
}
.item-feedback-box {
margin-top: 8px;
padding: 10px 14px;
background: #F2F8F5;
border: 1.5px solid var(--teal);
border-left: 5px solid var(--teal);
border-radius: 8px;
color: var(--ink);
font-size: 15.5px;
line-height: 1.65;
}
.item-feedback-box .fb-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-weight: 900;
color: var(--teal-dark);
margin-bottom: 3px;
font-size: 15px;
}
.item-feedback-box .fb-body {
font-weight: 700;
color: var(--ink);
}
/* ===== 各小題得分右側「硃批（紅色）」常駐評語樣式 ===== */
.zhupi-feedback {
display: inline-flex;
align-items: center;
gap: 6px;
color: #B82918;
background: #FDF3F1;
border: 1.5px solid rgba(184, 41, 24, 0.38);
border-left: 4px solid #B82918;
padding: 4px 12px;
border-radius: 7px;
font-size: 15px;
font-weight: 800;
line-height: 1.55;
}
/* ===== 心智圖放射狀互動導圖：點節點展開下一層（原生 SVG，不依賴 Mermaid） ===== */
.mm-shell {
text-align: left;
padding: 0;
}
.mm-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.mm-toolbar:empty { display: none; }
.mm-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.mm-head-slot { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.mm-head-slot .mm-actions { margin-left: 0; }
.mm-btn {
border: 1px solid #CFC7B7;
background: #FFF;
color: #214842;
font-family: inherit;
font-size: 12.5px;
font-weight: 800;
border-radius: 8px;
padding: 4px 10px;
cursor: pointer;
white-space: nowrap;
}
.mm-btn:hover { background: #E2F0EA; border-color: #2B6B4F; }
.mm-canvas { overflow-x: auto; padding: 2px 0 0; }
.mm-svg {
display: block;
width: auto;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.mm-svg text { font-family: inherit; letter-spacing: 0.02em; }
.mm-clickable { cursor: pointer; }
.mm-clickable rect { transition: filter 0.15s ease; }
.mm-clickable:hover rect { filter: brightness(1.1); }
.mm-caret { pointer-events: none; }
.projection-content .mm-svg { max-width: none; }
.projection-content .mm-btn { font-size: 14px; }
.mm-btn { white-space: nowrap; }
.mm-toolbar .mm-actions { flex-wrap: wrap; }
/* ===== 修改模式：正解可直接編輯 ===== */
.ans-editable {
cursor: text;
outline: 1.5px dashed var(--teal);
outline-offset: 2px;
border-radius: 6px;
}
.ans-editable:hover { background: var(--teal-soft); }
.ans-editable:focus {
outline: 2px solid var(--teal);
background: #FFFDF8;
color: var(--ink);
}
.qa-ans.ans-editable span { cursor: text; display: inline-block; min-width: 40px; }
/* ===== 古風便條（無動畫）：硃砂印開合、宣紙橫線箋 ===== */
/* 便條圖層壓在彈窗（z-index:100）之下：開排行榜或任何彈窗時，記印章不會浮上來 */
.note-layer { position: absolute; inset: 0; pointer-events: none; z-index: 99; }
.note-layer > * { pointer-events: auto; }
.note-seal {
position: absolute;
transform: translate(-50%, -50%);
width: 46px;
height: 46px;
padding: 0;
border-radius: 6px;
border: 2px solid #B82918;
background: #FDF6E9;
color: #B82918;
font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
font-size: 22px;
font-weight: 900;
line-height: 1;
cursor: grab;
box-shadow: 0 3px 10px rgba(120, 30, 20, 0.18);
user-select: none;
touch-action: none;
}
.note-seal:active { cursor: grabbing; }
.note-seal:hover { border-color: #9A2113; color: #9A2113; }
.note-card {
position: absolute;
resize: none;
overflow: hidden;
width: 300px;
min-width: 220px;
min-height: 130px;
max-width: min(92%, calc(100vw - 32px));
max-height: min(76%, calc(100vh - 140px));
display: flex;
flex-direction: column;
margin-left: 34px;
margin-top: -18px;
background: repeating-linear-gradient(#FBF7EC, #FBF7EC 27px, #E7DFCB 28px);
border: 1.5px solid #C9BFA6;
border-top: 4px solid #B82918;
border-radius: 8px;
box-shadow: 0 10px 26px rgba(60, 40, 20, 0.18);
padding: 8px 10px 10px;
z-index: 640;
}
.note-card.note-flip-x { transform: translateX(-100%); margin-left: -34px; }
.note-card.note-flip-y { transform: translateY(-100%); margin-top: 18px; }
.note-card.note-flip-x.note-flip-y { transform: translate(-100%, -100%); }
.note-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 4px; }
.note-card-title { font-size: 13px; font-weight: 900; color: #8A5A12; letter-spacing: 0.12em; }
.note-card-tools { display: flex; gap: 4px; }
.note-tool {
border: 1px solid #C9BFA6;
background: #FFFDF7;
color: #214842;
font-family: inherit;
font-size: 12px;
font-weight: 800;
border-radius: 6px;
padding: 1px 7px;
cursor: pointer;
}
.note-tool:hover { background: #F2ECE0; }
.note-text {
flex: 1 1 auto;
min-height: 96px;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
border: none;
background: transparent;
color: #1F2421;
font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 28px;
padding: 0;
outline: none;
}
.note-link { color: #1A5B8A; text-decoration: underline; word-break: break-all; cursor: pointer; }
.note-text:empty::before { content: "貼上補充資料或網址…"; color: #A99F8C; font-weight: 700; }
/* 便條一律現代黑體：紙面層的芫荽手寫體不得進便條（含印章「記」與便條按鈕） */
.note-card, .note-card * {
font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* 印章是 button，會被 .paper-stage :is(button…) 的介面字型蓋掉，這裡提權重蓋回明體（與全站 .sk 方章同字體） */
.note-layer .note-seal, .note-layer .note-seal * {
font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
}
/* 便條自訂的拖曳大小把手（不用原生 resize：貼在頁面上時角落很難抓，還會被「點外收回」誤關） */
.note-resize {
position: absolute;
right: 0;
bottom: 0;
width: 20px;
height: 20px;
cursor: nwse-resize;
touch-action: none;
background: linear-gradient(135deg, transparent 0 52%, #B82918 52% 60%, transparent 60% 72%, #B82918 72% 80%, transparent 80%);
border-bottom-right-radius: 7px;
opacity: 0.45;
}
.note-resize:hover { opacity: 1; }
.note-card.note-flip-x .note-resize {
right: auto;
left: 0;
cursor: nesw-resize;
transform: scaleX(-1);
border-bottom-right-radius: 0;
border-bottom-left-radius: 7px;
}