/* Shared N2 article shell: content type may vary, but every article follows the
   same reading order: site header, title, metadata, learning content, footer. */
.notebook-article-body{min-height:100vh}
.notebook-article-body main>header{position:relative}
.notebook-article-body main>header::before{content:"日文學習筆記";display:block;margin-bottom:13px;color:var(--article-accent);font:600 10px/1 Arial,"Noto Sans TC",sans-serif;letter-spacing:.16em}
.notebook-article-body main>article,.notebook-article-body main>section{overflow:hidden}
.notebook-article-body main>article>h2,.notebook-article-body main>section>h2{letter-spacing:.01em}
.notebook-article-body .notebook-meta{font-variant-numeric:tabular-nums}
.notebook-article-body .notebook-category-nav{padding-bottom:2px}
.notebook-article-body button{touch-action:manipulation}
/* The original article controls remain useful, but the old secondary bars
   made each article look like a separate site. Keep only the 木生 header. */
body.notebook-article-body>nav:not(.notebook-site-nav){display:none!important}
body.notebook-article-body main>nav[aria-label="Breadcrumb"]{display:none!important}
body.notebook-article-body main .bg-yellow-50,
body.notebook-article-body main .bg-yellow-50\/30,
body.notebook-article-body main .bg-blue-50,
body.notebook-article-body main .bg-blue-50\/60,
body.notebook-article-body main .bg-indigo-50,
body.notebook-article-body main .bg-amber-50,
body.notebook-article-body main .bg-purple-50,
body.notebook-article-body main .bg-red-50{background:var(--article-soft)!important;border-color:var(--article-soft)!important}
body.notebook-article-body main .border-blue-500,
body.notebook-article-body main .border-indigo-500,
body.notebook-article-body main .border-purple-500,
body.notebook-article-body main .border-yellow-500{border-color:var(--article-accent)!important}
body.notebook-article-body main .text-blue-700,
body.notebook-article-body main .text-indigo-700,
body.notebook-article-body main .text-purple-700{color:var(--article-accent)!important}
/* All N2 article titles use the same quiet scale. Feature grammar pages have
   their own larger treatment in n2-notebook.css. */
body.notebook-article-body:not(.notebook-grammar-feature) main>header h1{font-size:clamp(32px,6vw,64px)!important;line-height:1.22!important;letter-spacing:-.035em!important;overflow-wrap:anywhere}
body.notebook-grammar:not(.notebook-grammar-feature) main>header h1{font-size:clamp(32px,5.6vw,56px)!important;line-height:1.22!important;letter-spacing:-.035em!important}
body.notebook-grammar:not(.notebook-grammar-feature) main>header p{font-size:clamp(15px,2vw,20px)!important}
@media (max-width:700px){
  .notebook-article-body main>header::before{margin-bottom:10px}
  .notebook-article-body main>header h1{overflow-wrap:anywhere}
  .notebook-article-body main>article,.notebook-article-body main>section{margin-left:0!important;margin-right:0!important}
}