/* ==================================================================
   SOMTON 藏家市集 — doc.css
   协议 / 条款类文档页
   复用 common.css 的设计令牌（--teal / --ink / --bg-soft / --radius）
   结构与首页一致：固定头部 + 内容区 + 同一套页脚
   ================================================================== */

.doc-page{padding-top:var(--header-h);}

/* .p20 / .bg 原定义在 style.css（首页专用，文档页未引入），此处按同一数值补齐，
   并限定在 .doc-page 作用域内，供页面骨架与页脚复用 */
.doc-page .p20{
  padding-left:clamp(20px,5vw,60px);
  padding-right:clamp(20px,5vw,60px);
}
.doc-page .bg{background:var(--bg-soft);}

/* ---------- 文档头部（标题区） ---------- */
.doc-hero{
  background:
    radial-gradient(900px 420px at 86% 0%, rgba(16,174,194,.07), transparent 62%),
    radial-gradient(680px 380px at 2% 100%, rgba(16,174,194,.045), transparent 60%),
    #fff;
  border-bottom:1px solid var(--line-2);
  padding-top:clamp(40px,6.4vh,76px);
  padding-bottom:clamp(30px,4.2vh,48px);
}
.doc-hero .inner{max-width:var(--maxw);margin:0 auto;}

.doc-crumb{
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--ink-3);
  line-height:1.8;
}
.doc-crumb a{color:var(--ink-3);transition:color .25s var(--ease);}
.doc-crumb a:hover{color:var(--teal);}
.doc-crumb i{font-style:normal;margin:0 .55em;color:#c4ccd1;}

.doc-hero h1{
  margin-top:16px;
  font-size:clamp(1.62rem,3.4vw,2.5rem);
  line-height:1.42;
  letter-spacing:.06em;
  color:var(--ink);
}
.doc-hero .sub{
  margin-top:14px;
  max-width:720px;
  font-size:clamp(.9rem,1.2vw,1rem);
  line-height:1.95;
  color:var(--ink-3);
  letter-spacing:.02em;
}
.doc-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line-2);
  font-size:.82rem;
  color:var(--ink-3);
  letter-spacing:.04em;
}
.doc-meta b{font-weight:400;color:var(--ink-2);}

/* ---------- 正文区：左目录 + 右文章 ---------- */
.doc-body{
  max-width:var(--maxw);
  margin:0 auto;
  padding-top:clamp(34px,5vh,56px);
  padding-bottom:clamp(56px,8vh,96px);
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:clamp(32px,4.6vw,64px);
  align-items:start;
}

/* 条款目录
   外层 .doc-toc-box 只负责撑满整行（与正文列等高），内层 .doc-toc 才做 sticky。
   这样目录的“粘性范围”止于正文末尾，滚动到底时不会压到下方的“全部协议”卡片。 */
.doc-toc-box{
  align-self:stretch;
  position:relative;
  min-height:0;
}
.doc-toc{
  position:sticky;
  top:calc(var(--header-h) + 28px);
  /* 视口更矮时目录在自身区域内滚动，避免底部条款被切掉 */
  max-height:calc(100vh - var(--header-h) - 56px);
  max-height:calc(100dvh - var(--header-h) - 56px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:6px;
  font-size:.86rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(20,40,50,.16) transparent;
}
.doc-toc::-webkit-scrollbar{width:4px;}
.doc-toc::-webkit-scrollbar-thumb{background:rgba(20,40,50,.16);border-radius:2px;}
.doc-toc::-webkit-scrollbar-track{background:transparent;}
.doc-toc .toc-t{
  font-size:.74rem;
  letter-spacing:.2em;
  color:var(--ink-3);
  margin-bottom:12px;
}
.doc-toc ol{list-style:none;}
.doc-toc ol > li > a{
  display:block;
  padding:7px 0 7px 14px;
  margin-left:-1px;
  border-left:2px solid transparent;
  color:var(--ink-2);
  line-height:1.62;
  transition:color .22s var(--ease), border-color .22s var(--ease);
}
.doc-toc ol > li > a:hover{color:var(--teal);border-left-color:rgba(16,174,194,.45);}
.doc-toc ol > li > a.act{color:var(--teal-600);border-left-color:var(--teal);}

/* 文章 */
.doc-article{max-width:824px;min-width:0;}
.doc-article .lead{
  font-size:.95rem;
  line-height:2.05;
  color:var(--ink-2);
  padding-bottom:4px;
}
.doc-article h2{
  margin:2.35em 0 .85em;
  padding-left:14px;
  border-left:3px solid var(--teal);
  font-size:clamp(1.04rem,1.5vw,1.18rem);
  line-height:1.55;
  letter-spacing:.03em;
  color:var(--ink);
}
.doc-article h2:first-of-type{margin-top:1.9em;}
.doc-article h3{
  margin:1.6em 0 .6em;
  font-size:.98rem;
  line-height:1.7;
  color:var(--ink);
  letter-spacing:.02em;
}
.doc-article p{
  margin:.8em 0;
  font-size:.94rem;
  line-height:2.02;
  color:var(--ink-2);
  letter-spacing:.01em;
}
.doc-article ol,
.doc-article ul{
  margin:.7em 0 .9em 1.3em;
}
.doc-article li{
  margin:.46em 0;
  font-size:.94rem;
  line-height:1.98;
  color:var(--ink-2);
}
.doc-article strong{color:var(--ink);}
.doc-article a{
  color:var(--teal-600);
  border-bottom:1px solid rgba(16,174,194,.32);
  transition:border-color .22s var(--ease);
}
.doc-article a:hover{border-bottom-color:var(--teal);}

/* 提示块 */
.doc-note{
  margin:1.5em 0;
  padding:16px 20px;
  background:var(--teal-050);
  border:1px solid rgba(16,174,194,.16);
  border-left:3px solid var(--teal);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.88rem;
  line-height:1.95;
  color:#0d5f6b;
}
.doc-note p{margin:0;font-size:.88rem;line-height:1.95;color:#0d5f6b;}
.doc-note p + p{margin-top:.6em;}

/* 表格 */
.doc-table{
  width:100%;
  border-collapse:collapse;
  margin:1.3em 0;
  font-size:.86rem;
  line-height:1.8;
}
.doc-table th,
.doc-table td{
  border:1px solid var(--line);
  padding:11px 14px;
  text-align:left;
  vertical-align:top;
  color:var(--ink-2);
}
.doc-table th{
  background:var(--bg-soft);
  color:var(--ink);
  font-weight:400;
  letter-spacing:.04em;
}
/* SDK 提供方：另起一行的小字，避免表格多占一列 */
.sdk-f{
  display:block;
  margin-top:3px;
  font-size:.8em;
  font-weight:400;
  line-height:1.55;
  color:var(--ink-3);
  letter-spacing:0;
}

/* ---------- 相关协议 ---------- */
.doc-rel{
  grid-column:1 / -1;
  margin-top:clamp(44px,6.4vh,72px);
  padding-top:clamp(26px,3.6vh,36px);
  border-top:1px solid var(--line);
}
.doc-rel .t{
  font-size:.74rem;
  letter-spacing:.2em;
  color:var(--ink-3);
  margin-bottom:16px;
}
.doc-rel ul{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;
}
@media screen and (min-width:1024px){
  /* 5 条协议：桌面端固定 3 列，排布为 3 + 2，避免出现 4 + 1 的孤立项 */
  .doc-rel ul{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.doc-rel li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:.9rem;
  color:var(--ink-2);
  letter-spacing:.02em;
  transition:border-color .26s var(--ease), color .26s var(--ease),
             box-shadow .26s var(--ease), transform .26s var(--ease);
}
.doc-rel li a::after{
  content:"→";
  color:#b9c3c9;
  transition:color .26s var(--ease), transform .26s var(--ease);
}
.doc-rel li a:hover{
  border-color:rgba(16,174,194,.45);
  color:var(--teal-600);
  box-shadow:var(--shadow-sm);
  transform:translateY(-2px);
}
.doc-rel li a:hover::after{color:var(--teal);transform:translateX(3px);}
.doc-rel li a[aria-current="page"]{
  background:var(--teal-050);
  border-color:rgba(16,174,194,.3);
  color:var(--teal-600);
}
.doc-rel li a[aria-current="page"]::after{content:"当前";font-size:.76rem;color:var(--teal-600);}

/* ---------- 回到顶部 ---------- */
.doc-top{
  position:fixed;
  right:26px;
  bottom:30px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:50%;
  box-shadow:var(--shadow-md);
  color:var(--ink-3);
  z-index:60;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             visibility .3s var(--ease), color .25s var(--ease);
}
.doc-top.on{opacity:1;visibility:visible;transform:translateY(0);}
.doc-top:hover{color:var(--teal);}
.doc-top svg{width:16px;height:16px;}

/* ==================================================================
   平板 / 移动端
   ================================================================== */
@media screen and (max-width:1023px){
  .doc-body{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
  }
  /* 目录改为横向胶囊条 */
  .doc-toc-box{position:static;align-self:auto;}
  .doc-toc{
    position:static;
    top:auto;
    max-height:none;
    overflow:visible;
    padding:14px 16px;
    background:var(--bg-soft);
    border:1px solid var(--line-2);
    border-radius:var(--radius-sm);
  }
  .doc-toc .toc-t{margin-bottom:10px;}
  .doc-toc ol{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .doc-toc ol::-webkit-scrollbar{display:none;}
  .doc-toc ol > li{flex:0 0 auto;}
  .doc-toc ol > li > a{
    margin-left:0;
    padding:7px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    white-space:nowrap;
    font-size:.8rem;
    line-height:1.5;
  }
  .doc-toc ol > li > a.act{
    border-color:var(--teal);
    background:var(--teal-050);
    color:var(--teal-600);
  }
  .doc-article{max-width:none;}
}

@media screen and (max-width:768px){
  .doc-hero{
    padding-top:30px;
    padding-bottom:26px;
  }
  .doc-hero h1{
    margin-top:12px;
    font-size:1.42rem;
    line-height:1.5;
  }
  .doc-hero .sub{font-size:.86rem;line-height:1.9;}
  .doc-meta{
    gap:6px 16px;
    margin-top:16px;
    padding-top:14px;
    font-size:.76rem;
  }
  .doc-body{
    padding-top:24px;
    padding-bottom:56px;
  }
  .doc-article p,
  .doc-article li,
  .doc-article .lead{font-size:.9rem;line-height:1.98;}
  .doc-article h2{
    margin:2em 0 .7em;
    padding-left:11px;
    border-left-width:2.5px;
    font-size:1rem;
  }
  .doc-article ol,
  .doc-article ul{margin-left:1.15em;}
  .doc-note{padding:14px 16px;}
  .doc-note p{font-size:.84rem;}
  .doc-table{font-size:.8rem;}
  .doc-table th,
  .doc-table td{padding:9px 10px;}
  /* 窄屏按内容分配列宽，避免首列被挤成竖排单字（仅限隐私协议里带列宽定义的表格） */
  .doc-table--kv,
  .doc-table--login,
  .doc-table--perm,
  .doc-table--sdk{table-layout:fixed;}
  .doc-table--kv th:first-child,
  .doc-table--kv td:first-child{width:22%;}
  .doc-table--login th:nth-child(1),
  .doc-table--login td:nth-child(1){width:25%;}
  .doc-table--login th:nth-child(3),
  .doc-table--login td:nth-child(3){width:33%;}
  .doc-table--perm th:nth-child(1),
  .doc-table--perm td:nth-child(1){width:26%;}
  .doc-table--perm th:nth-child(3),
  .doc-table--perm td:nth-child(3){width:34%;}
  .doc-table--sdk th:nth-child(1),
  .doc-table--sdk td:nth-child(1){width:31%;}
  .doc-table--sdk th:nth-child(3),
  .doc-table--sdk td:nth-child(3){width:39%;}
  .doc-table td{overflow-wrap:anywhere;}
  .doc-rel ul{grid-template-columns:minmax(0,1fr);}
  .doc-rel li a{padding:13px 16px;font-size:.86rem;}
  .doc-top{right:16px;bottom:18px;width:40px;height:40px;}
}

/* ---------- 打印 ---------- */
@media print{
  .header,.zhezhao,.zz,.doc-toc,.doc-top,.doc-rel,.h{display:none !important;}
  .doc-page{padding-top:0;}
  .doc-body{display:block;padding:0;max-width:none;}
  .doc-article{max-width:none;}
  .doc-hero{background:#fff;border:0;padding:0 0 12px;}
  .doc-article h2{page-break-after:avoid;}
}