/* ================================================================== *
 * kmenta 文档 · 共享样式
 * 侧边栏 / 汉堡菜单 / 移动端抽屉 / 评论区容器
 * ================================================================== */
@font-face{font-family:'Noto Serif SC';src:url('/assets/NotoSerifSC-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Noto Serif SC';src:url('/assets/NotoSerifSC-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --paper:#f7f5ef;--paper-deep:#f0ede2;--plate:#fffdf8;--ink:#201c15;--ink-soft:#57503f;
  --muted:#8d8778;--faint:#b3ac9b;--hairline:#e0dbcb;--hairline-dark:#cdc6b1;
  --seal:#c2402a;--seal-deep:#a33422;--seal-weak:rgba(194,64,42,.07);
  --serif:'Noto Serif SC','Songti SC','STSong','SimSun',serif;
  --sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --max-w:1080px;
  --sb-w:240px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.8;overflow-x:hidden}
::selection{background:var(--seal);color:#fff}
a{color:var(--seal-deep);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max-w);margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ---------------- 报头 ---------------- */
.masthead{position:sticky;top:0;z-index:1000;background:var(--paper);border-bottom:1px solid var(--ink)}
.masthead .container{display:flex;align-items:center;gap:18px;height:62px}
.brand{display:flex;align-items:center;gap:11px;color:inherit}
.brand .seal-mark{width:30px;height:30px;flex-shrink:0;background:var(--seal);color:var(--paper);font-family:var(--serif);font-weight:900;font-size:19px;display:flex;align-items:center;justify-content:center;border-radius:5px}
.brand .name{font-family:var(--serif);font-weight:900;font-size:19px;letter-spacing:.01em}
.brand .tag{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.16em;padding-left:16px;border-left:1px solid var(--hairline-dark)}
.nav-links{margin-left:auto;display:flex;gap:22px;font-size:13px}
.nav-links a{color:var(--ink-soft);transition:color .15s}
.nav-links a:hover{color:var(--seal);text-decoration:none}
.nav-links a.on{color:var(--seal)}
.gh-link{font-family:var(--mono);font-size:12px;border:1px solid var(--ink);padding:5px 13px;transition:background .15s,color .15s;white-space:nowrap;color:var(--ink)}
.gh-link:hover{background:var(--ink);color:var(--paper);text-decoration:none}

/* 汉堡按钮：仅移动端显示 */
.burger{display:none;margin-left:auto;width:42px;height:42px;flex-shrink:0;background:none;border:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------------- 布局 ---------------- */
.doc-wrap{display:grid;grid-template-columns:minmax(0,var(--sb-w)) minmax(0,1fr);gap:clamp(28px,4vw,64px);
  padding:clamp(40px,6vh,72px) 0 clamp(64px,9vh,96px);align-items:start}

/* ---------------- 侧边栏（桌面） ---------------- */
.docs-sidebar{position:sticky;top:92px;border-top:1px solid var(--ink);padding-top:14px;min-width:0}
.docs-sidebar .sb-head{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.2em;margin-bottom:6px}
.docs-sidebar .sb-group{margin-bottom:18px}
.docs-sidebar .sb-group-title{font-size:11.5px;color:var(--faint);letter-spacing:.14em;margin:14px 0 4px;font-family:var(--mono)}
.docs-sidebar .sb-item{display:block;font-size:13px;color:var(--ink-soft);padding:4px 0;border-bottom:1px solid transparent;line-height:1.5}
.docs-sidebar .sb-item:hover{color:var(--seal);text-decoration:none}
.docs-sidebar .sb-item.on{color:var(--seal);border-bottom-color:var(--seal)}

/* ---------------- 移动端抽屉 ---------------- */
.drawer-mask{position:fixed;inset:0;background:rgba(20,17,12,.42);z-index:1100;opacity:0;pointer-events:none;transition:opacity .25s}
.drawer-mask.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(78vw,320px);background:var(--plate);z-index:1200;
  transform:translateX(102%);transition:transform .28s ease;display:flex;flex-direction:column;
  border-left:1px solid var(--hairline-dark);box-shadow:-12px 0 40px rgba(0,0,0,.14)}
.drawer.show{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--ink)}
.drawer-head .dh-title{font-family:var(--serif);font-weight:900;font-size:17px;letter-spacing:.01em}
.drawer-close{width:34px;height:34px;background:none;border:1px solid var(--hairline-dark);border-radius:6px;cursor:pointer;
  font-size:16px;color:var(--ink-soft);line-height:1;display:flex;align-items:center;justify-content:center}
.drawer-close:hover{color:var(--seal);border-color:var(--seal)}
.drawer-body{flex:1;overflow-y:auto;padding:16px 20px 28px}
.drawer-body .sb-group{margin-bottom:20px}
.drawer-body .sb-group-title{font-size:11px;color:var(--faint);letter-spacing:.16em;margin:18px 0 6px;font-family:var(--mono)}
.drawer-body .sb-item{display:block;font-size:15px;color:var(--ink-soft);padding:9px 0;border-bottom:1px solid var(--hairline)}
.drawer-body .sb-item:hover{color:var(--seal);text-decoration:none}
.drawer-body .sb-item.on{color:var(--seal);border-bottom-color:var(--seal)}

/* ---------------- 文章 ---------------- */
.article{min-width:0}
.article .doc-head{border-bottom:1px solid var(--ink);padding-bottom:22px;margin-bottom:34px}
.article .doc-head .crumb{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.18em;margin-bottom:14px}
.article h1{font-family:var(--serif);font-weight:900;font-size:clamp(30px,4vw,46px);line-height:1.25;letter-spacing:.01em}
.article h2{font-family:var(--serif);font-weight:900;font-size:clamp(20px,2.6vw,27px);margin:44px 0 14px;padding-top:26px;border-top:1px solid var(--hairline-dark);letter-spacing:.01em}
.article h3{font-family:var(--serif);font-weight:700;font-size:17px;margin:30px 0 10px}
.article p{margin:0 0 14px;color:var(--ink-soft)}
.article p b,.article li b{color:var(--ink);font-weight:600}
.article ul,.article ol{margin:0 0 16px;padding-left:22px;color:var(--ink-soft)}
.article li{margin:5px 0}
.article code{font-family:var(--mono);font-size:12.5px;background:var(--paper-deep);padding:1px 6px;border-radius:3px;color:var(--ink)}
.article pre{font-family:var(--mono);font-size:12.5px;line-height:1.9;background:var(--plate);border:1px solid var(--hairline-dark);border-left:3px solid var(--seal);border-radius:8px;padding:16px 18px;overflow-x:auto;color:var(--ink-soft);margin:0 0 16px}
.article pre code{background:none;padding:0;color:inherit}
.article pre .c{color:var(--faint)}
.article pre .t{color:var(--seal-deep)}
.article pre .s{color:#4a6741}
.article .note{background:var(--seal-weak);border:1px solid rgba(194,64,42,.18);border-radius:8px;padding:12px 16px;font-size:13px;color:var(--ink-soft);margin:0 0 16px}
.article .note b{color:var(--seal-deep);font-weight:600}
.article table{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 18px;background:var(--plate);border:1px solid var(--hairline-dark);border-radius:8px;overflow:hidden}
.article th{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.1em;text-align:left;padding:10px 14px;border-bottom:1px solid var(--ink);background:var(--paper-deep)}
.article td{padding:10px 14px;border-bottom:1px solid var(--hairline);vertical-align:top;color:var(--ink-soft)}
.article tr:last-child td{border-bottom:none}
.article .pill{display:inline-block;font-size:11px;border:1px solid currentColor;border-radius:4px;padding:0 7px;vertical-align:middle}

/* ---------------- 评论区容器 ---------------- */
.doc-comments{max-width:calc(var(--max-w) - var(--sb-w) - clamp(28px,4vw,64px));margin:0 auto;padding:0 clamp(20px,4vw,48px) 0 0}
.doc-comments .cc-head{border-top:1px solid var(--ink);padding-top:18px;margin-bottom:18px}
.doc-comments .cc-head .cc-title{font-family:var(--serif);font-weight:900;font-size:19px;letter-spacing:.01em}
.doc-comments #kcomment{margin-bottom:64px}

/* ---------------- 文档首页 hub ---------------- */
.hub{padding:clamp(40px,6vh,72px) 0 clamp(64px,9vh,96px)}
.hub .hub-head{border-bottom:1px solid var(--ink);padding-bottom:22px;margin-bottom:34px}
.hub .hub-head .crumb{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.18em;margin-bottom:14px}
.hub h1{font-family:var(--serif);font-weight:900;font-size:clamp(30px,4vw,46px);line-height:1.25;letter-spacing:.01em}
.hub .hub-sub{color:var(--ink-soft);margin-top:12px;max-width:640px}
.hub-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.hub-group{background:var(--plate);border:1px solid var(--hairline-dark);border-radius:10px;padding:18px 20px;transition:border-color .15s,transform .15s}
.hub-group:hover{border-color:var(--seal);transform:translateY(-2px)}
.hub-group .hg-title{font-family:var(--serif);font-weight:900;font-size:16px;letter-spacing:.02em;margin-bottom:10px;color:var(--ink)}
.hub-group .hg-desc{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.hub-group .hg-link{display:block;font-size:13.5px;color:var(--ink-soft);padding:4px 0;border-bottom:1px solid var(--hairline)}
.hub-group .hg-link:hover{color:var(--seal);text-decoration:none}
.hub-group .hg-link .hl-n{font-family:var(--mono);font-size:11px;color:var(--faint);margin-right:8px}

/* ---------------- 页脚 ---------------- */
.footer{border-top:1px solid var(--hairline-dark);padding:40px 0 48px;font-size:13px}
.footer .container{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted)}
.footer a{color:var(--ink-soft)}

/* ---------------- 响应式 ---------------- */
@media(max-width:860px){
  .doc-wrap{grid-template-columns:1fr;padding-top:32px}
  .docs-sidebar{display:none}
  .doc-comments{max-width:100%;padding:0 clamp(20px,4vw,48px)}
  .burger{display:flex}
  .nav-links{display:none}
  .brand .tag{display:none}
}
@media(min-width:861px){
  .drawer,.drawer-mask{display:none!important}
}