.pv-hero { padding-top: var(--k-sp-6); padding-bottom: var(--k-sp-3); gap: var(--k-sp-2); }
.pv-chips { display: flex; flex-wrap: wrap; gap: var(--k-sp-1); }
.pv-chip {
  padding: 2px var(--k-sp-2);
  font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-xs); letter-spacing: .22em;
  color: var(--k-accent-ink); background: var(--k-accent); border-radius: var(--k-rs);
}
.pv-chip.is-dim { color: var(--k-ink-mid); background: transparent; box-shadow: inset 0 0 0 1px var(--k-line-strong); }
.pv-title {
  font-family: var(--k-font-head); font-weight: var(--k-head-w);
  font-size: var(--k-fs-hero); line-height: 1.25; letter-spacing: var(--k-head-ls);
  color: var(--k-accent);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6));
}
.pv-meta {
  display: flex; flex-wrap: wrap; gap: var(--k-sp-1) var(--k-sp-3);
  padding-top: var(--k-sp-2); border-top: 1px dashed var(--k-line-strong);
  font-family: "Chakra Petch", "Zen Kaku Gothic New", var(--k-gothic); font-weight: 500;
  font-size: var(--k-fs-xs); letter-spacing: .14em; color: var(--k-ink-sub);
}
.pv-meta b { font-weight: 500; color: var(--k-ink); }

.pv-body { padding-top: var(--k-sp-3); gap: var(--k-sp-4); align-items: start; }
@media (min-width: 960px) {
  .pv-body { grid-template-columns: 280px minmax(0, 1fr); }
  .pv-toc { position: sticky; top: 84px; grid-row: 1 / span 2; }
  .pv-doc, .pv-nav { grid-column: 2; max-width: 46em; }
}

.pv-toc { padding-block: var(--k-sp-3); }
.pv-toc ol { counter-reset: toc; margin-top: var(--k-sp-1); display: grid; }
.pv-toc li { counter-increment: toc; }
.pv-toc a {
  display: flex; gap: var(--k-sp-2); align-items: baseline;
  min-height: 44px; padding-block: 10px;
  font-size: var(--k-fs-sm); font-weight: 700; line-height: 1.5; color: var(--k-ink-mid); text-decoration: none;
  border-top: 1px solid var(--k-line);
}
.pv-toc li:first-child a { border-top: 0; }
.pv-toc-t { min-width: 0; }
.pv-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-xs); letter-spacing: .16em; color: var(--k-accent);
}
@media (hover: hover) and (pointer: fine) {
  .pv-toc a { transition: color .16s ease; }
  .pv-toc a:hover { color: var(--k-accent); }
}

.pv-doc { counter-reset: art; padding-top: calc(var(--k-sp-4) + 8px); padding-bottom: var(--k-sp-4); }
.pv-doc::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: var(--hazard); border-radius: var(--k-rs) var(--k-rs) 0 0;
}
@media (max-width: 599px) { .pv-doc, .pv-toc { padding-inline: var(--k-sp-3); } }

.pv-art + .pv-art {
  margin-top: var(--k-sp-4);
  padding-top: var(--k-sp-4);
  border-top: 1px dashed var(--k-line-strong);
}
.pv-art > h2 {
  font-family: var(--k-font-head); font-weight: var(--k-head-w);
  font-size: var(--k-fs-h3); line-height: 1.45; letter-spacing: var(--k-head-ls);
  color: var(--k-ink);
}
.pv-art > h2::before {
  counter-increment: art;
  content: counter(art, decimal-leading-zero);
  display: block; margin-bottom: 2px;
  font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-sm); letter-spacing: .22em; color: var(--k-accent);
}
.pv-art p { margin-top: var(--k-sp-2); font-size: var(--k-fs-body); color: var(--k-ink-mid); }

.pv-list { margin-top: var(--k-sp-2); display: grid; gap: var(--k-sp-1); color: var(--k-ink-mid); }
.pv-list li { position: relative; padding-left: var(--k-sp-3); }
.pv-list li::before {
  content: ""; position: absolute; left: 0; top: .82em; width: 10px; height: 3px; background: var(--k-accent);
}

.pv-links { margin-top: var(--k-sp-2); display: grid; gap: 2px; }
.pv-ext {
  display: inline-flex; align-items: center; gap: var(--k-sp-1);
  min-height: 44px;
  font-size: var(--k-fs-sm); font-weight: 700; color: var(--k-ink);
  text-decoration: underline; text-decoration-color: var(--k-accent);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.pv-ext::before { content: "↗"; color: var(--k-accent); }
.pv-ext > span { min-width: 0; }
.pv-ext .nb { display: inline; }
@media (hover: hover) and (pointer: fine) {
  .pv-ext { transition: color .16s ease; }
  .pv-ext:hover { color: var(--k-accent); }
}

.pv-sign {
  margin-top: var(--k-sp-5); padding-top: var(--k-sp-3); border-top: 1px solid var(--k-line-strong);
  font-family: "Chakra Petch", "Zen Kaku Gothic New", var(--k-gothic); font-weight: 500;
  font-size: var(--k-fs-xs); letter-spacing: .14em; color: var(--k-ink-sub);
}

.pv-nav { display: grid; gap: var(--k-sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.pv-nav a {
  display: grid; gap: 2px; min-height: 44px; padding: var(--k-sp-2) var(--k-sp-3);
  text-decoration: none; border: 1px solid var(--k-line-strong); border-radius: var(--k-rs);
  background: rgba(22, 23, 26, .72);
}
.pv-next { text-align: right; }
.pv-dir { font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-xs); letter-spacing: .2em; color: var(--k-accent); }
.pv-name { font-weight: 700; font-size: var(--k-fs-sm); }
@media (hover: hover) and (pointer: fine) {
  .pv-nav a { transition: border-color .16s ease, color .16s ease; }
  .pv-nav a:hover { border-color: var(--k-accent); color: var(--k-accent); }
}

.pv::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("img/noise.svg") 0 0 / 200px 200px,
    radial-gradient(ellipse 80% 70% at 50% 30%, transparent 35%, rgba(10, 10, 12, .65));
}

@media (prefers-reduced-motion: reduce) {
  .pv-toc a, .pv-ext, .pv-nav a { transition: none; }
}