@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700;900&family=Noto+Sans+TC:wght@300;400;500;700&display=swap');

/* ===== Jinni 的教育現場：全站樣式（設計稿 v3） ===== */
:root{
  --jn-paper:#F5EFE2;--jn-paper-2:#EEE5D2;--jn-ink:#1E3A2B;--jn-ink-soft:#3C5A47;
  --jn-text:#2C2A22;--jn-muted:#6E6857;--jn-brass:#A9803A;--jn-line:rgba(30,58,43,.16);
  --jn-serif:"Noto Serif TC",serif;--jn-sans:"Noto Sans TC",system-ui,sans-serif;
}
body{background:var(--jn-paper)!important;color:var(--jn-text);font-family:var(--jn-sans)!important;}
main, main.menu, section, .wrapper{background:transparent;}

/* ---------- 頁首 ---------- */
nav.navbar{background:rgba(245,239,226,.96)!important;border-bottom:1px solid var(--jn-line)!important;box-shadow:none!important;}
nav.navbar .web-title a{font-family:var(--jn-serif)!important;font-weight:700!important;color:var(--jn-ink)!important;letter-spacing:.04em;}
nav.navbar .naviMain ul li > a, nav.navbar .naviMain ul li > a span{color:var(--jn-ink-soft)!important;font-family:var(--jn-sans)!important;}
nav.navbar .naviMain ul li > a:hover span{color:var(--jn-brass)!important;}
@media (min-width:993px){
  nav.navbar{display:flex!important;align-items:center;justify-content:space-between;max-width:1128px;margin:0 auto;padding:0 24px!important;height:72px;position:relative;}
  nav.navbar::before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:100vw;top:0;bottom:0;background:rgba(245,239,226,.96);border-bottom:1px solid var(--jn-line);z-index:-1;}
  nav.navbar{flex-wrap:nowrap!important;}
  nav.navbar .navi-item{order:0;padding:0!important;margin:0!important;border:0!important;width:auto!important;flex:0 0 auto!important;}
  nav.navbar .navi-item:empty, nav.navbar .navi-item:first-child:not(:has(*)){display:none!important;}
  nav.navbar .navi-item > .container{padding:0!important;max-width:none!important;width:auto!important;display:flex;align-items:center;}
  nav.navbar .navbar-brand:not(:has(img)){display:none!important;}
  nav.navbar .web-title{margin:0!important;padding:0!important;text-align:left!important;}
  nav.navbar .web-title a{font-size:22px!important;line-height:1.2!important;margin:0!important;padding:0!important;display:inline-block!important;height:auto!important;}
  nav.navbar .web-title{line-height:1.2!important;height:auto!important;}
  nav.navbar .navi-item{align-self:center!important;height:auto!important;}
  nav.navbar .naviMain, nav.navbar .naviMain > .container, nav.navbar .naviMain ul{height:auto!important;min-height:0!important;}
  nav.navbar .naviMain ul{display:flex;align-items:center;gap:22px;margin:0!important;padding:0!important;}
  nav.navbar .naviMain ul li{margin:0!important;padding:0!important;}
  nav.navbar .naviMain ul li > a{padding:6px 0!important;font-size:15px!important;}
  nav.navbar .naviMain ul li:nth-last-child(2) > a{border:1px solid var(--jn-ink);background:var(--jn-ink);padding:8px 18px!important;border-radius:2px;}
  nav.navbar .naviMain ul li:nth-last-child(2) > a span{color:var(--jn-paper)!important;}
  nav.navbar .naviMain ul li:nth-last-child(2) > a:hover{background:var(--jn-brass);border-color:var(--jn-brass);}
}
/* 手機選單 */
.mobile-menu, .mobile-menu .navbar{background:var(--jn-paper)!important;}
.mobile-menu a, .mobile-menu .logo-text{color:var(--jn-ink)!important;}
.mobile-menu .logo-text{font-family:var(--jn-serif)!important;font-weight:700!important;}

/* ---------- 共用元件 ---------- */
.jn{font-family:var(--jn-sans);color:var(--jn-text);line-height:1.7;font-size:16px!important;text-align:left;}
.html-info:has(> .jn){font-size:16px!important;}
.html-info > .jn p{font-size:inherit;}
.jn *{box-sizing:border-box;}
.jn p{margin:0 0 12px;}
.jn a{text-decoration:none;}
.jn-wrap{width:100%;max-width:1128px;margin:0 auto;padding:0 24px;}
.jn-narrow{max-width:808px;}
.index-editor:has(.jn){padding:0!important;margin:0!important;background-color:transparent!important;}
.index-editor .html-info:has(> .jn){padding:0!important;margin:0!important;max-width:none!important;}
.jn-section{padding:64px 0;}
.jn-alt{background:var(--jn-paper-2);}
.jn-sec-head{max-width:60ch;margin-bottom:34px;}
.jn-sec-head h2, .jn-h2{font-family:var(--jn-serif)!important;font-weight:700;color:var(--jn-ink)!important;font-size:clamp(24px,3.4vw,32px)!important;margin:0 0 12px!important;line-height:1.35;}
.jn-h2-sm{font-size:26px!important;margin:10px 0 20px!important;}
.jn-sec-head p{color:var(--jn-muted);margin:0;font-size:16px!important;}
.jn-link{color:var(--jn-brass)!important;}
.jn-btn{display:inline-block;padding:12px 26px;font-size:15px!important;border:1px solid var(--jn-ink);background:var(--jn-ink);color:var(--jn-paper)!important;border-radius:2px;transition:.2s;cursor:pointer;}
.jn-btn:hover{background:var(--jn-brass);border-color:var(--jn-brass);}
.jn-btn.jn-ghost{background:transparent;color:var(--jn-ink)!important;}
.jn-btn.jn-ghost:hover{background:var(--jn-ink);color:var(--jn-paper)!important;}

/* 主視覺 */
.jn-hero{padding:88px 0 76px;}
.jn-kicker{font-size:15px!important;color:var(--jn-ink-soft);margin:0 0 22px!important;}
.jn-kicker i{font-style:normal;border-bottom:2px solid var(--jn-brass);padding-bottom:2px;}
.jn-big{font-family:var(--jn-serif)!important;font-weight:900!important;color:var(--jn-ink)!important;font-size:clamp(34px,5.2vw,58px)!important;line-height:1.24!important;margin:0 0 24px!important;}
.jn-lead{font-size:17px!important;max-width:24em;margin:0 0 30px!important;}
.jn-cta-row{display:flex;gap:14px;flex-wrap:wrap;}

/* 內容區入口 */
.jn-entries{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.jn-entry{display:block;background:var(--jn-paper);border:1px solid var(--jn-line);border-radius:3px;padding:30px 26px;transition:background .2s;color:var(--jn-text)!important;}
.jn-entry:hover{background:#F3EAD6;}
.jn-entry .jn-lbl{font-family:var(--jn-serif);font-weight:700;font-size:20px!important;color:var(--jn-ink);margin:0 0 4px!important;display:flex;align-items:center;gap:10px;}
.jn-entry .jn-lbl::before{content:"";width:9px;height:9px;background:var(--jn-brass);display:inline-block;transform:rotate(45deg);flex:none;}
.jn-entry .jn-en{font-size:12px!important;color:var(--jn-muted);letter-spacing:.08em;margin:0 0 14px!important;}
.jn-entry p{font-size:15px!important;line-height:1.75;}
.jn-entry .jn-go{margin:14px 0 0!important;font-size:14px!important;color:var(--jn-brass);}

/* 關於 */
.jn-two{display:grid;grid-template-columns:1.35fr .9fr;gap:56px;align-items:center;}
.jn-about-text{font-size:16px!important;max-width:26em;}
.jn-cred{list-style:none;padding:0;margin:0;}
.jn-cred li{padding:9px 0;border-bottom:1px solid var(--jn-line);}

/* 深色 CTA */
.jn-final{background:var(--jn-ink);color:var(--jn-paper);text-align:center;padding:64px 0;}
.jn-final h2{font-family:var(--jn-serif)!important;color:var(--jn-paper)!important;font-size:clamp(24px,4vw,36px)!important;margin:0 0 14px!important;font-weight:700;}
.jn-final p{color:#D9CFB8;margin:0 0 26px!important;font-size:16px!important;}
.jn-final .jn-btn.jn-brass{background:var(--jn-brass);border-color:var(--jn-brass);color:#231a09!important;}
.jn-final .jn-btn.jn-brass:hover{background:transparent;color:var(--jn-paper)!important;border-color:var(--jn-paper);}
.jn-final .jn-contact{margin:18px 0 0!important;font-size:14px!important;}
.jn-final .jn-contact a{color:#D9CFB8!important;border-bottom:1px solid rgba(217,207,184,.5);}

/* 內頁 */
.jn-page{padding:40px 0 50px;}
.jn-page-head{padding:12px 0 26px;}
.jn-page-head h1{font-family:var(--jn-serif)!important;font-weight:900!important;color:var(--jn-ink)!important;font-size:clamp(28px,4.4vw,42px)!important;margin:0 0 14px!important;line-height:1.3;}
.jn-page-head p{max-width:38em;font-size:16px!important;}
.jn-arch{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px;}
.jn-box{border:1px solid var(--jn-line);border-radius:3px;padding:22px 20px;background:var(--jn-paper-2);}
.jn-box h4{font-family:var(--jn-serif)!important;color:var(--jn-ink)!important;font-size:17px!important;margin:0 0 8px!important;}
.jn-box p{margin:0!important;font-size:14px!important;color:var(--jn-muted);}
.jn-res{border-top:1px solid var(--jn-line);}
.jn-res .jn-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--jn-line);}
.jn-res .jn-ti{font-family:var(--jn-serif);font-size:17px!important;color:var(--jn-ink);}
.jn-res .jn-sub{font-size:13px!important;color:var(--jn-muted);margin-top:3px;}
.jn-res .jn-dl{font-size:14px!important;color:var(--jn-muted);border:1px dashed var(--jn-line);border-radius:2px;padding:6px 14px;white-space:nowrap;cursor:default;}
.jn-block{margin-bottom:32px;}
.jn-block h2{font-family:var(--jn-serif)!important;font-weight:700!important;color:var(--jn-ink)!important;font-size:22px!important;margin:0 0 14px!important;padding-left:12px;border-left:3px solid var(--jn-brass);line-height:1.4;}
.jn-block p{font-size:16px!important;}
ol.jn-flow{margin:0;padding:0;counter-reset:f;list-style:none;}
ol.jn-flow li{position:relative;padding:0 0 16px 44px;counter-increment:f;font-size:16px!important;list-style:none;}
ol.jn-flow li::before{content:counter(f);position:absolute;left:0;top:-2px;width:28px;height:28px;border:1px solid var(--jn-ink);border-radius:50%;font-family:var(--jn-serif);color:var(--jn-ink);display:flex;align-items:center;justify-content:center;font-size:14px!important;}
ol.jn-flow li b{color:var(--jn-ink);}
.jn-related{border-top:1px solid var(--jn-line);padding:34px 0 10px;margin-top:20px;}
.jn-related h2{font-family:var(--jn-serif)!important;font-weight:700;color:var(--jn-ink)!important;font-size:20px!important;margin:0 0 20px!important;}
.jn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.jn-card{display:block;border:1px solid var(--jn-line);border-radius:3px;background:var(--jn-paper);transition:transform .2s;}
.jn-card:hover{transform:translateY(-3px);}
.jn-cbody{padding:16px 18px 18px;}
.jn-card .jn-tag{font-size:12px!important;color:var(--jn-brass);margin:0 0 8px!important;}
.jn-card h3{font-family:var(--jn-serif)!important;font-weight:700;font-size:17px!important;color:var(--jn-ink)!important;margin:0!important;line-height:1.45;}

/* 文章內文 */
.jn-article .jn-meta{display:flex;flex-wrap:wrap;gap:26px;padding:18px 0;border-top:1px solid var(--jn-line);border-bottom:1px solid var(--jn-line);margin-bottom:30px;}
.jn-article .jn-k{color:var(--jn-muted);font-size:12px!important;margin-bottom:3px;}
.jn-article .jn-v{color:var(--jn-ink);font-size:14px!important;}
.jn-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.jn-imgs div{aspect-ratio:1;background:var(--jn-paper-2);border:1px solid var(--jn-line);border-radius:3px;display:flex;align-items:center;justify-content:center;color:var(--jn-muted);font-size:12px!important;}
.jn-prose p{font-size:16.5px!important;line-height:1.85;margin:0 0 18px!important;}

/* ---------- 系統區塊：最新文章卡片 ---------- */
#index-blog{padding:64px 0!important;background:transparent!important;}
#index-blog > .container{max-width:1128px!important;padding:0 24px!important;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
#index-blog .page-title{grid-column:1/-1;text-align:left!important;margin:0 0 10px!important;padding:0!important;}
#index-blog .page-title::before, #index-blog .page-title::after, #index-blog .page-title h2.title::before, #index-blog .page-title h2.title::after{display:none!important;}
#index-blog .page-title h2.title span:last-child{font-family:var(--jn-serif)!important;font-size:clamp(24px,3.4vw,32px)!important;color:var(--jn-ink)!important;font-weight:700!important;letter-spacing:0!important;}
#index-blog .page-title h2.title{font-family:var(--jn-serif)!important;color:var(--jn-ink)!important;font-size:clamp(24px,3.4vw,32px)!important;font-weight:700;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:2px;}
#index-blog .page-title h2.title span:first-child{font-family:var(--jn-sans);font-size:12px;letter-spacing:.1em;color:var(--jn-muted);font-weight:400;text-transform:uppercase;}
#index-blog .blog-row{margin:0!important;border:1px solid var(--jn-line);border-radius:3px;background:var(--jn-paper);display:flex;flex-direction:column;padding:0!important;transition:transform .2s;}
#index-blog .blog-row:hover{transform:translateY(-3px);}
#index-blog .blog-row .img-box, #index-blog .blog-row .text-box{width:100%!important;max-width:100%!important;flex:none!important;padding:0!important;margin:0!important;}
#index-blog .blog-row .img-box:has(img[src*="default_images"]){display:none!important;}
#index-blog .blog-row .text-box{padding:18px 18px 20px!important;display:flex;flex-direction:column;}
#index-blog .middle-title{font-family:var(--jn-serif)!important;font-weight:700!important;font-size:17px!important;color:var(--jn-ink)!important;line-height:1.45!important;margin:0 0 8px!important;}
#index-blog .info-group p{font-size:14px!important;color:var(--jn-muted)!important;margin:0 0 12px!important;}
#index-blog .article-info, #index-blog .article-info li{font-size:13px!important;color:var(--jn-muted);padding:0;margin:auto 0 6px;list-style:none;}
#index-blog .article-classify, #index-blog .article-classify a{font-size:12px!important;color:var(--jn-brass)!important;margin:0!important;order:-1;}
#index-blog .text-box .article-classify{order:-1;margin-bottom:8px!important;}
#index-blog .btn, #index-blog .read-more, #index-blog > .container > a, #index-blog > .container > div:last-child:not(.blog-row){grid-column:1/-1;}
#index-blog .btn-sideline{grid-column:1/-1;}
#index-blog .text-center:has(.btn-sideline){grid-column:1/-1;margin-top:10px;}
#index-blog .btn-sideline::before, #index-blog .btn-sideline::after{background:var(--jn-line)!important;border-color:var(--jn-line)!important;}
#index-blog .btn-sideline span{font-family:var(--jn-sans)!important;font-size:14px!important;color:var(--jn-brass)!important;background:var(--jn-paper)!important;letter-spacing:.1em;}
/* 學生自主專案頁：標題已寫在上方區塊 */
section.index-editor:has(.jn-projects-head) + #index-blog{padding-top:10px!important;}
section.index-editor:has(.jn-projects-head) + #index-blog .page-title, section.index-editor:has(.jn-projects-head) + #index-blog .text-center:has(.btn-sideline){display:none!important;}

/* ---------- 部落格列表／分類頁 ---------- */
main.menu .pagging-header:empty{display:none;}
.pagging-title{font-family:var(--jn-serif)!important;color:var(--jn-ink)!important;}
img[src*="/static/default_images/blog-list-img"], img[src*="/static/default_images/blog-detail-img"]{display:none!important;}
.blog-row .row > div:has(> a > picture img[src*="default_images"]){display:none!important;}
.blog-row .row:has(img[src*="default_images"]) > div + div{flex:0 0 100%!important;max-width:100%!important;}
.blog-row{border-bottom:1px solid var(--jn-line);padding-bottom:24px!important;margin-bottom:24px!important;}
.middle-title{font-family:var(--jn-serif)!important;color:var(--jn-ink)!important;}
.article-classify, .article-classify a{color:var(--jn-brass)!important;}

/* ---------- 文章內頁 ---------- */
.article-img:has(img[src*="default_images"]){display:none!important;}
h1.title{font-family:var(--jn-serif)!important;color:var(--jn-ink)!important;font-weight:900!important;}

/* ---------- 頁尾 ---------- */
footer, footer .footer, .footer{background:var(--jn-ink)!important;color:#D9CFB8!important;}
footer a, footer .small-title, footer h4, footer li, footer p, footer span{color:#E9E0CB!important;}
footer .small-title, footer h4{font-family:var(--jn-serif)!important;}

/* ---------- 響應式 ---------- */
@media (max-width:992px){
  .jn-hero{padding:56px 0 48px;}
  .jn-entries, .jn-two, .jn-arch, .jn-cards{grid-template-columns:1fr;}
  .jn-two{gap:28px;}
  #index-blog > .container{grid-template-columns:1fr;}
}
@media (max-width:640px){ .jn-imgs{grid-template-columns:1fr 1fr;} .jn-section,.jn-final{padding:48px 0;} }

/* 空白頁外框：最後一塊是深色 CTA 時，別在頁尾前留米白間隙 */
section:has(> div.html-info .jn-final){padding-bottom:0!important;}
div.html-info:has(section.index-editor .jn-final){margin-bottom:0!important;}