/* ============================================================
   SPiCa — retro ver.
   2000 年代日系同人站。和现代版的根本差别：
     字距收紧、行高压低、固定宽度、细边框撑结构、无圆角无阴影。
   那个年代的好站不是丑，是「密而不乱」。
   ============================================================ */

:root {
  --ink:       #333333;
  --ink-mid:   #555555;
  --ink-light: #888888;

  --bg:        #EFF3F3;   /* 页面外底色，那时候正文区外面总是有色的 */
  --paper:     #FFFFFF;

  --accent:    #39C5BB;
  --link:      #2E8B9E;   /* 链接是水色系的深色，不是默认蓝 */
  --link-hover:#E0879B;

  --line:      #D8DEDE;
  --line-dot:  #C8D2D2;

  --mincho: "MS PMincho", "Hiragino Mincho ProN", "Noto Serif SC",
            "Songti SC", "SimSun", serif;
  --gothic: "MS PGothic", "Hiragino Kaku Gothic ProN", "Noto Sans SC",
            "Microsoft YaHei", "SimSun", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 18px 10px 40px;
  background: var(--bg);
  /* 极淡的斜纹平铺，那个年代必备的 background tile */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.55) 0px,
    rgba(255,255,255,0.55) 2px,
    transparent 2px,
    transparent 4px
  );
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 12px;          /* ← 那个年代的标准正文字号 */
  line-height: 1.75;        /* ← 比现代版紧得多 */
  letter-spacing: 0.02em;   /* ← 几乎不加字距，和现代版正相反 */
}

a { color: var(--link); text-decoration: underline; }
a:hover { color: var(--link-hover); }

.page {
  width: 960px;             /* 1024x768 时代的满宽(2026-07-27 从 780 放大,嫌留白多) */
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
}


/* ---------- バナー ---------- */

.banner {
  height: 150px;
  background-image: url("assets/hero-b.webp");
  background-size: cover;
  background-position: center 62%;
  border-bottom: 1px solid var(--line);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.58);
}
.banner-inner { position: relative; z-index: 1; text-align: center; }

.banner h1 {
  margin: 0 0 6px;
  font-family: var(--mincho);
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 0.12em;
  color: #2A3541;
}
.banner-sub {
  margin: 0;
  font-size: 11px;
  color: var(--ink-mid);
}


/* ---------- 顶部横条 ---------- */

.topbar {
  padding: 6px 0;
  text-align: center;
  font-size: 11px;
  background: #F7FAFA;
  border-bottom: 1px solid var(--line);
}
.topbar a { text-decoration: none; padding: 0 4px; }
.topbar a:hover { text-decoration: underline; }
.topbar span { color: var(--line-dot); margin: 0 2px; }
.topbar .alt { color: var(--ink-light); }


/* ---------- 主体两栏 ---------- */

.main { display: flex; align-items: flex-start; }

.side {
  width: 190px;
  flex-shrink: 0;
  padding: 16px 12px 22px 16px;
  border-right: 1px dotted var(--line-dot);
}

.content { flex: 1; padding: 20px 26px 28px; min-width: 0; }


/* ---------- 侧栏方框 ---------- */

.box { margin-bottom: 20px; }

.box-title {
  font-size: 11px;
  color: var(--ink-mid);
  padding-bottom: 3px;
  margin-bottom: 7px;
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.06em;
}

.menu { list-style: none; margin: 0; padding: 0; font-size: 11px; }
.menu li {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 0;
  border-bottom: 1px dotted var(--line-dot);
}
.menu li:last-child { border-bottom: none; }
.menu a { text-decoration: none; }
.menu a:hover { text-decoration: underline; }
.menu-cn { font-size: 10px; color: var(--ink-light); }

.log {
  margin: 0;
  font-size: 11px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 2px 6px;
}
.log dt { color: var(--ink-light); }
.log dd { margin: 0; color: var(--ink-mid); }

.counter {
  margin: 0;
  text-align: center;
  font-size: 10px;
  color: var(--ink-light);
  line-height: 1.8;
}

/* 侧栏小段落(看板娘框等) */
.side-note { margin: 0; font-size: 11px; color: var(--ink-mid); }
.counter-num {
  display: inline-block;
  margin: 3px 0;
  padding: 2px 6px;
  background: #2A3541;
  color: #A8E6E2;
  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 0.16em;
}

/* キリ番彩蛋:踩中整数才出现 */
.kiriban {
  margin: 6px 0 0;
  font-size: 10px;
  color: var(--accent);
  text-align: center;
  line-height: 1.7;
}

/* web拍手 */
.clap-row { margin: 8px 0 0; text-align: center; }
.clap-btn {
  font-family: var(--gothic);
  font-size: 11px;
  padding: 3px 10px;
  background: #F7FAFA;
  border: 1px solid var(--line);
  color: var(--ink-mid);
  cursor: pointer;
}
.clap-btn:hover { border-color: var(--accent); color: var(--link); }
.clap-btn:disabled { color: var(--ink-light); cursor: default; }
.clap-msg {
  margin: 6px 0 0;
  font-size: 10px;
  color: var(--ink-light);
  text-align: center;
  min-height: 1em;
}


/* ---------- 内容区 ---------- */

.sec { margin-bottom: 34px; }
.sec:last-child { margin-bottom: 8px; }

.sec-h {
  margin: 0 0 12px;
  padding-bottom: 4px;
  font-family: var(--mincho);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.1em;
  color: #2A3541;
  border-bottom: 2px solid var(--accent);
}
.sec-cn {
  margin-left: 10px;
  font-family: var(--gothic);
  font-size: 10px;
  color: var(--ink-light);
  letter-spacing: 0.14em;
}

.content p { margin: 0 0 12px; }

/* 点线分隔 */
.dot-line {
  height: 0;
  margin: 18px 0;
  border-top: 1px dotted var(--line-dot);
}


/* 资料表 */
.profile { border-collapse: collapse; font-size: 11px; width: 100%; }
.profile th,
.profile td {
  padding: 5px 8px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-weight: normal;
}
.profile th {
  width: 74px;
  background: #F7FAFA;
  color: var(--ink-mid);
  white-space: nowrap;
}


/* ---------- 作品 ---------- */

.work {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #FCFDFD;
}

.work-title {
  font-family: var(--mincho);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #2A3541;
  padding-bottom: 5px;
  margin-bottom: 7px;
  border-bottom: 1px dotted var(--line-dot);
}
.star { color: var(--accent); margin-right: 5px; }
.work-date {
  float: right;
  font-family: var(--gothic);
  font-size: 10px;
  color: var(--ink-light);
  letter-spacing: 0.08em;
}

.work-body { margin: 0 0 7px !important; color: var(--ink-mid); }
.work-link { margin: 0 !important; font-size: 11px; color: var(--ink-light); }


/* 文章列表(posts 章,build.py 注入) */
.posts-dl {
  margin: 0;
  font-size: 11px;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 3px 8px;
}
.posts-dl dt { color: var(--ink-light); }
.posts-dl dd { margin: 0; }


/* ---------- 链接表 ---------- */

.links { border-collapse: collapse; font-size: 11px; width: 100%; }
.links th,
.links td {
  padding: 6px 8px;
  border-bottom: 1px dotted var(--line-dot);
  text-align: left;
  font-weight: normal;
}
.links th { width: 86px; color: var(--ink-light); white-space: nowrap; }

.note {
  margin: 14px 0 0 !important;
  font-size: 10px;
  color: var(--ink-light);
}


/* ---------- 页脚 ---------- */

.foot {
  padding: 16px 0 18px;
  text-align: center;
  background: #F7FAFA;
  border-top: 1px solid var(--line);
}
.foot-mark {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.foot-note {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--ink-mid);
}
.foot-env {
  margin: 0 0 8px;
  font-size: 10px;
  color: var(--ink-light);
  letter-spacing: 0.04em;
}
.foot-copy {
  margin: 0;
  font-size: 10px;
  color: var(--ink-light);
  letter-spacing: 0.06em;
}


/* ---------- 窄屏 ----------
   那个年代没有响应式。但真让它在手机上横向滚动就没人看了，
   所以这里只做最低限度的降级：两栏拆成一栏，宽度放开。 */

@media (max-width: 980px) {
  body { padding: 0 0 24px; }
  .page { width: 100%; border-left: none; border-right: none; }
  .main { display: block; }
  .side {
    width: auto;
    border-right: none;
    border-bottom: 1px dotted var(--line-dot);
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
  }
  .box { flex: 1; min-width: 140px; margin-bottom: 10px; }
  .content { padding: 16px; }
  .work-date { float: none; margin-left: 8px; }
}