/* =========================================================
   base.css — reset、body 底色底纹、区块通用骨架、工具类
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}

html { background: var(--bg-abyss); }

body {
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg-abyss);
  overflow-x: hidden;
  /* 平滑锚点滚动交给 JS 的 scrollIntoView；此处保证键盘/hash 跳转也平滑 */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* 全站底纹：极低透明度，叠在内容之下 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--pattern);
  background-size: 80px 80px;
  opacity: .04;
  pointer-events: none;
  z-index: 0;
}

/* 密码门存在期间锁滚动 */
body.locked { overflow: hidden; height: 100vh; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; border: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
a { color: var(--gold-bright); text-decoration: none; }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* ---------------- 页面容器 ---------------- */

#app {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-4));
}

/* ---------------- 区块骨架 ---------------- */

.screen {
  position: relative;
  padding: var(--sp-6) var(--gutter);
  /* 底部导航吸附后锚点滚动的落点补偿 */
  scroll-margin-top: 0;
}

.screen--velvet { background: var(--bg-velvet); }

/* 区块之间的金色细分隔线（§2.3 双线装裱感） */
.screen + .screen::before {
  content: "";
  position: absolute;
  top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ---------------- 区块标题（金色日文引题 + 宋体中文主题 + 菱形分隔） ---------------- */

.sec-head { text-align: center; margin-bottom: var(--sp-5); }

.sec-head__ja {
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--gold);
  opacity: .85;
  margin-bottom: var(--sp-1);
}

.sec-head__zh {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: .12em;
  color: var(--ink);
}

.sec-head__rule {
  margin-top: var(--sp-2);
  font-size: 10px;
  letter-spacing: .5em;
  color: var(--gold);
  opacity: .55;
}

.sec-head__note {
  margin-top: var(--sp-1);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-dim);
}

/* ---------------- 通用工具类 ---------------- */

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.gold-text {
  color: var(--gold-bright);
  text-shadow: 0 0 8px rgba(240, 214, 117, .28);
}

/* 双线金框（日式装裱）：外 1px 金线 + 内 1px 深线 */
.frame {
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75),
              inset 0 0 0 2px var(--line-soft);
  background: var(--bg-card);
}

.pill {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink);
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 320px 小屏回归：收紧留白与标题字号 */
@media (max-width: 340px) {
  :root { --gutter: 12px; --sp-6: 48px; }
  .sec-head__zh { font-size: 22px; }
  body { font-size: 13px; }
}