/* ss-manhua.cn — 岛国文化吧
   视觉母题：暖色图纸 + 等深线。配色与版式自成一套，不复用任何既有骨架。 */

:root{
  --ink:#16303c; --ink-2:#44606b; --ink-3:#6d8691;
  --paper:#f7f2e8; --paper-2:#efe6d5; --paper-3:#e8dcc6;
  --line:#d8cdb8; --line-2:#c3b495;
  --sea:#1d4f63; --sea-2:#3d8ba0; --coral:#c25a3e; --moss:#6b7f52; --sand:#e6d8bc;
  --ff-display:Cochin,"Libian SC","Baoli SC","Songti SC",serif;
  --ff-body:Seravek,"PingFang HK","Apple LiGothic","Microsoft YaHei",sans-serif;
  --ff-mono:"Courier New",Courier,monospace;
  --wrap:1120px; --gut:clamp(16px,4vw,32px); --fs:17px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.fs-s{--fs:15.5px} html.fs-l{--fs:19.5px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff-body); font-size:var(--fs); line-height:1.85;
  overflow-wrap:break-word;
}
img,svg{max-width:100%}
a{color:var(--sea); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--coral)}
h1,h2,h3,h4{font-family:var(--ff-display); font-weight:600; line-height:1.35; margin:0}
h1{font-size:clamp(23px,5.4vw,40px); letter-spacing:0; text-wrap:balance}
h2{font-size:clamp(21px,3.4vw,27px); margin:2.2em 0 .6em}
h3{font-size:clamp(18px,2.4vw,20px); margin:1.8em 0 .4em; color:var(--sea)}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em; padding-left:1.35em}
li{margin:.3em 0}
small{font-size:.84em}
.nb{white-space:nowrap; overflow-wrap:normal; word-break:keep-all}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
.skip{position:absolute; left:-9999px; top:0}
.skip:focus{left:8px; top:8px; z-index:20; background:var(--sea); color:#fff; padding:8px 14px}
:focus-visible{outline:2px solid var(--coral); outline-offset:2px}

/* ---------- 顶栏 ---------- */
.top{background:var(--paper-2); border-bottom:1px solid var(--line)}
.top__in{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; padding-top:13px; padding-bottom:9px}
.brand{font-family:var(--ff-display); font-size:22px; color:var(--ink); text-decoration:none; letter-spacing:.06em}
.brand:hover{color:var(--sea)}
.brand__sub{font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase}
/* 导航在窄屏自然折行，不做容器内横滑：浮层滚动条静止时不绘制，
   右缘又会把栏目名切在字中间，看起来像渲染坏了，而且容器内滚动
   不改变 documentElement.scrollWidth，自动检查报不出来。 */
.navwrap{border-top:1px solid var(--line); background:var(--paper-2)}
.nav{display:flex; flex-wrap:wrap; gap:0; max-width:var(--wrap); margin:0 auto; padding:0 calc(var(--gut) - 10px) 2px}
.nav a{
  flex:0 0 auto; padding:9px 10px 10px; font-size:15px; color:var(--ink-2);
  text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap;
}
@media (min-width:600px){.nav{padding:0 calc(var(--gut) - 14px) 2px} .nav a{padding:9px 14px 10px}}
.nav a:hover{color:var(--sea); background:var(--paper-3)}
.nav a[aria-current="page"]{color:var(--sea); border-bottom-color:var(--coral); font-weight:600}
.rule{display:block; width:100%; height:9px; color:var(--line-2)}

/* ---------- 面包屑 / 页头 ---------- */
.crumbs{font-size:13.5px; color:var(--ink-3); padding:14px 0 0}
.crumbs ol{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0}
.crumbs li::after{content:"›"; margin-left:6px; color:var(--line-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-2)}
.phead{padding:12px 0 6px}
.coord{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; color:var(--ink-3);
  margin:12px 0 0; padding:7px 0 0; border-top:1px dashed var(--line-2);
}
.lead{font-size:clamp(16px,1.06em,20px); color:var(--ink-2); margin:.9em 0 0; max-width:62ch}

/* ---------- 正文栅格 ---------- */
.sheet{display:grid; grid-template-columns:minmax(0,1fr); gap:0 44px; padding:6px 0 48px}
.sheet>*{min-width:0}
.body{max-width:68ch}
.aside{display:none}
@media (min-width:901px){
  .sheet{grid-template-columns:minmax(0,1fr) 248px}
  .aside{display:block; position:sticky; top:18px; align-self:start; font-size:14.5px}
  .fold{display:none}
}
.aside h2{font-size:14px; font-family:var(--ff-mono); letter-spacing:.12em; color:var(--ink-3); margin:0 0 .5em; text-transform:uppercase}
.aside ul{list-style:none; margin:0 0 26px; padding:0; border-left:2px solid var(--line)}
.aside li{margin:0}
.aside li a{display:block; padding:5px 0 5px 13px; color:var(--ink-2); text-decoration:none; border-left:2px solid transparent; margin-left:-2px}
.aside li a:hover{color:var(--sea); border-left-color:var(--coral); background:var(--paper-2)}

/* ---------- 折叠（手机端目录） ---------- */
.fold{border:1px solid var(--line); background:var(--paper-2); margin:18px 0 4px}
.fold>summary{
  cursor:pointer; padding:10px 14px; font-family:var(--ff-mono); font-size:12px;
  letter-spacing:.1em; color:var(--ink-2); list-style:none;
}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+"; float:right; font-size:15px; line-height:1}
.fold[open]>summary::after{content:"\2212"}
/* 折叠时 Chrome 仍给子节点非零矩形，会被 QA 判成被遮挡的控件 */
.fold:not([open]) .fold__body{display:none}
.fold__body{padding:2px 14px 12px; border-top:1px solid var(--line)}
.fold__body ol{margin:0; padding-left:1.25em; font-size:15px}

/* ---------- 组件 ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; margin:22px 0}
.cards--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
.cards>*{min-width:0}
.card{
  display:block; background:var(--paper-2); border:1px solid var(--line);
  border-left:4px solid var(--sea); padding:15px 17px 17px; text-decoration:none; color:inherit;
}
.card:hover{background:#fff; border-left-color:var(--coral)}
.card h3{margin:0 0 .35em; font-size:19px; color:var(--ink)}
.card p{margin:0; font-size:15px; color:var(--ink-2); line-height:1.7}
.card__tag{display:block; font-family:var(--ff-mono); font-size:11px; letter-spacing:.11em; color:var(--ink-3); margin-bottom:6px}
.card--c1{border-left-color:#2f6d86} .card--c2{border-left-color:#7c8f4e}
.card--c3{border-left-color:#c25a3e} .card--c4{border-left-color:#3d8ba0}
.card--c5{border-left-color:#8a6b4a} .card--c6{border-left-color:#5a7d7c}

.fig{margin:26px 0; border:1px solid var(--line); background:var(--paper-2); padding:14px 14px 10px}
.fig svg{display:block; width:100%; height:auto}
.fig figcaption{font-size:13.5px; color:var(--ink-3); margin-top:9px; padding-top:8px; border-top:1px dashed var(--line-2); line-height:1.65}

.pts{background:var(--sand); border:1px solid var(--line-2); padding:16px 18px; margin:28px 0}
.pts h3{margin:0 0 .5em; font-size:16px; font-family:var(--ff-mono); letter-spacing:.1em; color:var(--ink-2); text-transform:uppercase}
.pts ul{margin:0; padding-left:1.2em}
.pts li{margin:.45em 0}

.caveat{border-top:2px solid var(--line-2); margin:34px 0 0; padding:12px 0 0; font-size:14px; color:var(--ink-3); line-height:1.75}
.caveat strong{color:var(--ink-2); font-weight:600}

.note{border-left:3px solid var(--moss); background:var(--paper-2); padding:12px 15px; margin:22px 0; font-size:15.5px; color:var(--ink-2)}
.note--fic{border-left-color:var(--coral)}
.fic-tag{display:inline-block; font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; color:#fff; background:var(--coral); padding:2px 7px; margin-right:8px; vertical-align:2px}

.scrollx{overflow-x:auto; margin:22px 0; border:1px solid var(--line)}
table{border-collapse:collapse; min-width:520px; width:100%; font-size:15px; background:var(--paper-2)}
th,td{text-align:left; padding:9px 13px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--paper-3); font-weight:600; font-size:14px; white-space:nowrap}
tr:last-child td{border-bottom:0}

.rel{margin:30px 0 0; padding:16px 0 0; border-top:1px solid var(--line)}
.rel h2{font-size:15px; font-family:var(--ff-mono); letter-spacing:.1em; margin:0 0 .6em; color:var(--ink-3); text-transform:uppercase}
.rel ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:8px 20px}
.rel li{min-width:0}

/* ---------- 控件 ---------- */
.btn{
  display:inline-block; font:inherit; font-size:15px; line-height:1.4; cursor:pointer;
  background:var(--sea); color:#fff; border:1px solid var(--sea); padding:8px 16px; text-decoration:none;
}
.btn:hover{background:var(--sea-2); border-color:var(--sea-2); color:#fff}
.btn--ghost{background:transparent; color:var(--sea)}
.btn--ghost:hover{background:var(--paper-3); color:var(--sea)}
.btn[aria-pressed="true"]{background:var(--coral); border-color:var(--coral); color:#fff}
.bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:24px 0 0; padding:14px 0 0; border-top:1px dashed var(--line-2)}
.bar__hint{font-size:13px; color:var(--ink-3); flex:1 1 220px; min-width:0}
input[type=text],input[type=search],input[type=number],select{
  font:inherit; font-size:16px; color:var(--ink); background:#fff;
  border:1px solid var(--line-2); padding:8px 11px; max-width:100%;
}
input:focus,select:focus{border-color:var(--sea); outline:2px solid rgba(61,139,160,.3); outline-offset:0}
.msg{margin:14px 0 0; padding:10px 13px; font-size:14.5px; border-left:3px solid var(--sea-2); background:var(--paper-2)}
.msg--err{border-left-color:var(--coral); color:#8c3a24; background:#f7e8e2}
.msg[hidden]{display:none}

/* ---------- 页脚 ---------- */
.foot{background:var(--paper-2); border-top:1px solid var(--line); margin-top:10px; padding:26px 0 34px; font-size:14.5px; color:var(--ink-2)}
.foot__cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:18px 28px}
.foot__cols>*{min-width:0}
.foot h2{font-size:12px; font-family:var(--ff-mono); letter-spacing:.12em; color:var(--ink-3); margin:0 0 .6em; text-transform:uppercase}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin:.25em 0}
.foot a{color:var(--ink-2)}
.foot__end{margin:22px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3)}
.fsctl{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:0 0 10px}
.fsctl span{font-size:13px; color:var(--ink-3)}
.fsctl button{font:inherit; font-size:14px; cursor:pointer; background:transparent; color:var(--ink-2); border:1px solid var(--line-2); padding:3px 11px}
.fsctl button[aria-pressed="true"]{background:var(--sea); border-color:var(--sea); color:#fff}

/* ---------- 检索 / 词典 ---------- */
.srch{margin:22px 0 0}
.srch__row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.srch__row input[type=search]{flex:1 1 260px; min-width:0}
.count{font-family:var(--ff-mono); font-size:13px; color:var(--ink-3); margin:12px 0 0}
.hits{list-style:none; margin:14px 0 0; padding:0}
.hits li{border-top:1px solid var(--line); padding:13px 0}
.hits a{font-family:var(--ff-display); font-size:19px; text-decoration:none}
.hits p{margin:.3em 0 0; font-size:14.5px; color:var(--ink-2)}
.hits .where{font-family:var(--ff-mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.07em}
.hits .empty,.terms .empty{border-top:1px solid var(--line); padding:14px 0; color:var(--ink-3); font-size:15px}
.hits li .btn{margin-top:8px}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 0}
.chips button{font:inherit; font-size:13.5px; cursor:pointer; background:var(--paper-2); color:var(--ink-2); border:1px solid var(--line-2); padding:5px 12px}
.chips button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.terms{margin:20px 0 0}
.term{border-top:1px solid var(--line); padding:14px 0}
.term[hidden]{display:none}
.term h3{margin:0 0 .25em; font-size:18px; color:var(--ink)}
.term__meta{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.08em; color:var(--ink-3)}
.term p{margin:.4em 0 0; font-size:15.5px}
.term__from{font-size:14px}
.term__from a{color:var(--ink-2)}
.sr-label{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ---------- 估算器 ---------- */
.calc{border:1px solid var(--line-2); background:var(--paper-2); padding:18px; margin:24px 0}
.calc__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:14px}
.calc__grid>*{min-width:0}
.calc label{display:block; font-size:14px; color:var(--ink-2); margin-bottom:5px}
.calc input{width:100%}
.out{margin:18px 0 0; border-top:1px dashed var(--line-2); padding-top:14px}
.out dl{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 14px; margin:0; font-size:15px}
.out dt{color:var(--ink-2); min-width:0}
.out dd{margin:0; font-family:var(--ff-mono); font-weight:600; color:var(--sea); text-align:right; white-space:nowrap}
.fml{font-family:var(--ff-mono); font-size:14px; background:var(--paper-3); padding:3px 7px; display:inline-block}

@media (max-width:420px){
  .top__in{padding-top:11px}
  .brand{font-size:19px}
  .out dl{grid-template-columns:minmax(0,1fr)}
  .out dd{text-align:left}
}