/* ==========================================================================
   WalkLife AI Lab — 學習筆記／名詞卡 內文元件（notes/*.html、terms/*.html 共用）
   延續漫畫頁 comic-page-template.md 的元件語彙（.panel/.compare/.memory/.note/.keyword），
   新增 .callout-key/.callout-warn/.source-quote/.quiz/.answer 供參考型內容使用。
   ========================================================================== */

.wl-content-body{background:#fff7df; color:#222; font-family:var(--wl-font); line-height:1.75;}
.wl-content-wrap{max-width:880px; margin:0 auto; padding:30px 18px 70px;}

/* hero-lite：名詞卡／筆記頁標題區（比漫畫 hero 簡化，無漫畫感插圖） */
.wl-doc-hero{
  background:var(--wl-yellow); border:5px solid var(--wl-ink); border-radius:25px;
  padding:26px 28px; margin-bottom:28px; box-shadow:var(--wl-shadow-lg);
}
.wl-doc-hero .wl-doc-kicker{
  display:inline-block; background:var(--wl-red); color:#fff; font-weight:900; font-size:.78rem;
  border:3px solid var(--wl-ink); border-radius:999px; padding:3px 14px; margin-bottom:10px;
}
.wl-doc-hero h1{font-size:clamp(26px,4.6vw,42px); margin:6px 0 0; line-height:1.25;}
.wl-doc-hero .wl-doc-en{font-size:.95rem; font-weight:800; color:#4a3d00; margin-top:6px;}

/* panel：每個 ## 小節一個區塊 */
.panel{margin:22px 0; background:#fff; border:4px solid var(--wl-ink); border-radius:22px; padding:22px; box-shadow:var(--wl-shadow-md);}
.panel h2{font-size:1.4rem; margin:0 0 14px;}
.panel h3{font-size:1.1rem; margin:20px 0 8px;}
.panel p{margin:0 0 12px;}
.panel ul{margin:0 0 12px; padding-left:22px;}
.panel li{margin-bottom:6px;}
.panel:first-of-type{margin-top:0;}

.wl-summary{background:#fffef2; border-style:dashed;}
.wl-summary h2{color:#5b4d00;}

/* 表格 */
.compare{width:100%; border-collapse:collapse; font-size:.92rem; margin:0 0 14px;}
.compare th, .compare td{border:3px solid var(--wl-ink); padding:9px 12px; vertical-align:top; text-align:left;}
.compare th{background:var(--wl-yellow); font-weight:900;}
.compare-wrap{overflow-x:auto; margin:0 0 14px;}

/* callouts */
.note, .callout-key, .callout-warn{border-radius:16px; padding:16px 18px; margin:16px 0; font-weight:700;}
.note{background:#fff4c4; border:3px solid var(--wl-ink);}
.callout-key{background:#fff; border:3px solid var(--wl-red); box-shadow:5px 5px 0 var(--wl-red);}
.callout-warn{background:#fff0ee; border:3px dashed var(--wl-red);}
.note .callout-label, .callout-key .callout-label, .callout-warn .callout-label{
  display:block; font-weight:900; margin-bottom:6px; font-size:.85rem;
}
.callout-key .callout-label{color:var(--wl-red);}

.callout-label-standalone{font-size:1rem; font-weight:900; color:var(--wl-red); margin:18px 0 10px;}

/* 記憶技巧：黑底口訣區塊 */
.memory{background:var(--wl-ink); color:#fff; border:4px solid var(--wl-ink); border-radius:20px; padding:22px; margin:22px 0; box-shadow:var(--wl-shadow-md) var(--wl-yellow);}
.memory h2, .memory .callout-label{color:var(--wl-yellow); margin:0 0 10px;}
.memory p, .memory ul{margin:0;}
.memory ul{padding-left:20px;}

/* 課文原文引用 */
.source-quote{
  background:var(--wl-blue-light); border-left:6px solid var(--wl-blue); border-radius:0 14px 14px 0;
  padding:14px 18px; margin:16px 0; font-style:italic; color:#2a3b55;
}
.source-quote .callout-label{display:block; font-style:normal; font-weight:900; color:var(--wl-blue); margin-bottom:6px; font-size:.8rem;}

/* 兩欄比較卡 */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 14px;}
.card{border:4px solid var(--wl-ink); border-radius:18px; padding:16px; background:#fff;}
.card h3{margin:0 0 8px; font-size:1rem;}

/* 關鍵字 chip / 相關名詞卡連結列 */
.keyword{
  display:inline-block; border:3px solid var(--wl-ink); border-radius:12px; background:var(--wl-green);
  padding:3px 12px; margin:3px 6px 3px 0; font-weight:900; font-size:.85rem; text-decoration:none; color:var(--wl-ink);
}
.keyword:hover{background:var(--wl-yellow);}
.wl-chiplist{margin:14px 0;}

/* highlight */
.wl-mark{background:var(--wl-yellow); padding:0 3px; border-radius:3px;}

/* 章末自測 */
.quiz{background:var(--wl-blue-light); border:4px dashed var(--wl-ink); border-radius:20px; padding:18px 20px; margin:16px 0;}
.quiz .q-title{margin:0 0 8px; font-weight:900;}
.quiz .q-opts{margin:0 0 12px; color:#333;}
.quiz details.answer{background:#fff; border:3px solid var(--wl-ink); border-radius:14px; padding:12px 14px; margin-top:6px;}
.quiz details.answer summary{cursor:pointer; font-weight:900; color:var(--wl-blue); list-style:none;}
.quiz details.answer summary::-webkit-details-marker{display:none;}
.quiz details.answer summary::before{content:"▸ "; }
.quiz details.answer[open] summary::before{content:"▾ "; }
.quiz details.answer p{margin:10px 0 0;}

/* 公式 */
.formula-wrap{background:#fff; border:3px solid var(--wl-ink); border-radius:14px; padding:16px; text-align:center; margin:14px 0; overflow-x:auto;}

/* 頁尾出處／相關名詞卡連結區（頁內，非 footer） */
.wl-source-links{margin:26px 0 0; font-size:.9rem;}
.wl-source-links .callout-label{display:block; font-weight:900; margin-bottom:8px;}

@media (max-width:640px){
  .grid2{grid-template-columns:1fr;}
  .compare{font-size:.82rem;}
}