/* AKARI Video — 共有ベース（トークン・リセット・タイポ・ナビ・ボタン・フッター・共通演出）
 *
 * 各ページの <head>:
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap">
 *   <link rel="stylesheet" href="/lab/site/css/base.css">
 *   <script>document.documentElement.classList.add('js')</script>
 * </body> 直前:
 *   <script src="/lab/site/js/base.js" defer></script>
 *
 * ── 共通ナビ（正本。各ページにコピー。aria-current でいまのページを示す）──
 * <header class="nav" data-nav>
 *   <a class="nav__brand" href="index.html" aria-label="AKARI Video ホーム">
 *     <img src="/lab/site/img/icon.png" alt="" width="28" height="28"><span>AKARI <b>Video</b></span>
 *   </a>
 *   <nav class="nav__links" aria-label="メイン">
 *     <a href="index.html#works">作例</a>
 *     <a href="index.html#how">使い方</a>
 *     <a href="lab.html">素材 Lab</a>
 *     <a href="start.html">はじめかた</a>
 *   </nav>
 *   <div class="nav__actions">
 *     <a class="nav__icon" href="https://discord.gg/akari-video" data-todo="discord-invite" aria-label="Discord">(svg)</a>
 *     <a class="nav__gh" href="https://github.com/AkariLabs/akari-video" data-gh-stars>(github svg)<span class="nav__gh-count" data-gh-count>—</span></a>
 *     <a class="btn btn--primary btn--sm" data-download href="start.html#download">ダウンロード</a>
 *   </div>
 *   <button class="nav__menu" aria-label="メニュー" aria-expanded="false" data-nav-toggle><span></span><span></span></button>
 * </header>
 *
 * ── 共通フッター（正本）──  .footer > .footer__inner > .footer__brand + .footer__cols(> div > h3 + a...) + .footer__legal
 *
 * base.js が提供するもの:
 *   [data-download]        OS を判定して Windows/mac のダウンロード先と文言を差し替え（data-download-label="short" で短い文言）
 *   [data-gh-count]        GitHub スター数（API 失敗時は非表示）
 *   [data-reveal]          画面に入ったら .is-in を付ける（data-reveal="up|left|right|scale|clip" の既定アニメーションあり、
 *                          style="--d:120ms" で遅延）
 *   [data-count-to="185"]  画面に入ったらカウントアップ
 *   html.reduced           prefers-reduced-motion のとき
 *   .nav.is-scrolled       スクロールしたらナビに背景
 */

:root {
  /* 色 */
  --ink: #0b0908;
  --ink-2: #14110f;
  --ink-3: #1c1815;
  --line: rgba(255, 236, 214, 0.09);
  --line-2: rgba(255, 236, 214, 0.16);
  --text: #f4ede4;
  --text-2: #c9bfb3;
  --muted: #8f857b;
  --orange: #ff8a00;
  --orange-2: #ffa53d;
  --ember: #ff5a1f;
  --orange-glow: rgba(255, 138, 0, 0.35);
  --orange-soft: rgba(255, 138, 0, 0.12);
  --ok: #7bd88f;

  /* タイポ */
  --font-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --font-en: "Inter Tight", "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-display: clamp(2.6rem, 7.2vw, 6.2rem);
  --fs-h2: clamp(1.9rem, 4.4vw, 3.6rem);
  --fs-h3: clamp(1.15rem, 1.8vw, 1.45rem);
  --fs-lead: clamp(1.02rem, 1.35vw, 1.22rem);

  /* 形・動き */
  --radius: 14px;
  --radius-lg: 22px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); overflow-x: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { line-height: 1.18; letter-spacing: 0.01em; font-weight: 900; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
code, kbd, .mono { font-family: var(--font-mono); letter-spacing: 0; }

/* スクロールバー */
html { scrollbar-color: #3a322c var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #3a322c; border-radius: 10px; border: 2px solid var(--ink); }

/* グレイン（全ページに薄く）
 * 性能: 以前は画面の 4 倍の面積の層を常時アニメーションさせていて、高解像度の画面では GPU を食い続けていた。
 * いまは画面と同じ大きさで静止（見た目の差はほぼ無い）。ノイズの SVG は一度ラスタライズされるだけ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .9  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* レイアウト */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(88px, 12vw, 160px); }

/* セクション見出しの型:  <p class="eyebrow"><span>02</span>使い方</p> <h2 class="h2">…<em>強調</em>…</h2> <p class="lead">…</p> */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-2);
}
.eyebrow span { color: var(--muted); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.7; }
.h2 { font-size: var(--fs-h2); margin-top: 18px; }
.h2 em, .display em { font-style: normal; color: var(--orange); }
.lead { font-size: var(--fs-lead); color: var(--text-2); margin-top: 18px; max-width: 38em; line-height: 1.85; }
.display { font-size: var(--fs-display); line-height: 1.06; letter-spacing: -0.01em; }

/* ボタン */
.btn {
  --bg: var(--ink-3); --fg: var(--text); --bd: var(--line-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  font-weight: 700; font-size: 15px; letter-spacing: 0.04em; white-space: nowrap;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), background 0.3s, border-color 0.3s;
  isolation: isolate; overflow: hidden;
}
.btn:hover { border-color: var(--orange); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary {
  --bg: var(--orange); --fg: #140a00; --bd: transparent;
  box-shadow: 0 0 0 1px rgba(255, 170, 80, 0.4) inset, 0 10px 40px -10px var(--orange-glow);
}
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform 0.9s var(--ease-out);
}
.btn--primary:hover::before { transform: translateX(120%); }
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(255, 190, 110, 0.6) inset, 0 16px 60px -8px var(--orange-glow); }
.btn--ghost { --bg: transparent; }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 13px; }
.btn__sub { display: block; font-size: 11px; font-weight: 500; opacity: 0.7; letter-spacing: 0.02em; }

/* ナビ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center; gap: 24px; padding-inline: var(--gutter);
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(11, 9, 8, 0.94); border-color: var(--line);
}
.nav__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-en); font-weight: 700; letter-spacing: 0.06em; font-size: 15px; }
.nav__brand img { border-radius: 7px; }
.nav__brand b { font-weight: 500; color: var(--text-2); }
.nav__links { display: flex; gap: 28px; margin-left: 20px; font-size: 14px; color: var(--text-2); }
.nav__links a { position: relative; padding-block: 6px; transition: color 0.3s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-out);
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--text); }
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav__icon, .nav__gh {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-2); font-family: var(--font-en); font-size: 13px; font-weight: 600;
  transition: border-color 0.3s, color 0.3s;
}
.nav__icon { width: 38px; padding: 0; justify-content: center; }
.nav__icon svg, .nav__gh svg { width: 17px; height: 17px; }
.nav__icon:hover, .nav__gh:hover { border-color: var(--line-2); color: var(--text); }
.nav__gh-count:empty, .nav__gh-count[hidden] { display: none; }
.nav__menu { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); position: relative; }
.nav__menu span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--text); transition: transform 0.4s var(--ease-out); }
.nav__menu span:first-child { top: 16px; } .nav__menu span:last-child { top: 23px; }
.nav.is-open .nav__menu span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav.is-open .nav__menu span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav { gap: 12px; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto; margin: 0; flex-direction: column; gap: 0;
    padding: 12px var(--gutter) 28px; background: rgba(11, 9, 8, 0.96); border-bottom: 1px solid var(--line);
    font-size: 20px; font-weight: 700; color: var(--text);
    clip-path: inset(0 0 100% 0); transition: clip-path 0.6s var(--ease-out); pointer-events: none;
  }
  .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav.is-open .nav__links { clip-path: inset(0 0 0 0); pointer-events: auto; }
  .nav.is-open { background: rgba(11, 9, 8, 0.96); }
  .nav__menu { display: inline-block; }
  .nav__icon, .nav__gh { display: none; }
}

/* フッター */
.footer { border-top: 1px solid var(--line); padding-block: 64px 40px; color: var(--text-2); font-size: 14px; }
.footer__inner { display: grid; grid-template-columns: 1.3fr 2fr; gap: 48px; }
.footer__brand p { margin-top: 14px; color: var(--muted); max-width: 22em; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer__cols h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; margin-bottom: 14px; }
.footer__cols a { display: block; padding-block: 5px; transition: color 0.3s; }
.footer__cols a:hover { color: var(--orange-2); }
.footer__legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; font-family: var(--font-en); }
@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}

/* 共通リビール（html.js のときだけ初期状態を隠す） */
html.js [data-reveal] { opacity: 0; transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), clip-path 1.2s var(--ease-out), filter 1s var(--ease-out); transition-delay: var(--d, 0ms); }
html.js [data-reveal="up"], html.js [data-reveal=""] { transform: translate3d(0, 36px, 0); }
html.js [data-reveal="left"] { transform: translate3d(-64px, 0, 0); }
html.js [data-reveal="right"] { transform: translate3d(64px, 0, 0); }
html.js [data-reveal="scale"] { transform: scale(0.92); filter: blur(6px); }
html.js [data-reveal="clip"] { opacity: 1; clip-path: inset(0 0 100% 0); }
html.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
/* clip-path は clip 型だけ。他の型に inset(0) を残すと、はみ出す子要素（輪・小窓）を切ってしまう */
html.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
/* 横から入る型は、入る前の translate がレイアウト幅を広げないようにモバイルでは縦に振る */
@media (max-width: 760px) {
  html.js [data-reveal="left"], html.js [data-reveal="right"] { transform: translate3d(0, 36px, 0); }
}

/* 小物 */
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 236, 214, 0.03);
  font-size: 12.5px; color: var(--text-2); white-space: nowrap;
}
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.kbd { font-family: var(--font-mono); font-size: 0.85em; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--ink-3); }
.hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

html.reduced *, html.reduced *::before, html.reduced *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* ══════════ 部品: 3D アプリアイコン（.icon3d） ══════════
 * icon.png を厚みのあるスクワークルのタイルとして CSS 3D で立体化する。ゆっくり浮遊し、JS があればマウスでわずかに傾く。
 * 共通部品（base.css）。index / start / lab で使う。
 * HTML:
 *   <div class="icon3d" data-icon3d aria-hidden="true">          ← 幅は親で決める（正方形になる）。向き違いは .icon3d--r
 *     <div class="icon3d__float"><div class="icon3d__body">
 *       <i style="--i:12"></i> … <i style="--i:1"></i>            ← 厚みの層（12 → 1 の順で 12 枚）
 *       <span class="icon3d__face"><img src="/lab/site/img/icon.png" alt=""><span class="icon3d__gloss"></span></span>
 *     </div></div>
 *     <span class="icon3d__shadow"></span>
 *   </div>
 * JS（任意）: [data-icon3d] に --rx / --ry（deg）と --gx（光沢の位置 %）を書くと傾く。無くても静かに浮遊する
 */
.icon3d { --rx: 0deg; --ry: 0deg; --t: 2.6px; --tilt-x: 15deg; --tilt-y: -27deg; position: relative; width: 100%; aspect-ratio: 1; perspective: 1000px; }
.icon3d--r { --tilt-x: 12deg; --tilt-y: 18deg; }
.icon3d::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 44%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 138, 0, 0.2), transparent); filter: blur(8px);
}
.icon3d__float { position: absolute; inset: 0; transform-style: preserve-3d; animation: icon3dFloat 6.5s ease-in-out infinite; }
@keyframes icon3dFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0deg); } 50% { transform: translate3d(0, -5%, 0) rotateZ(-1.4deg); } }
.icon3d__body {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(calc(var(--tilt-x) + var(--rx))) rotateY(calc(var(--tilt-y) + var(--ry)));
  transition: transform 1.1s var(--ease-out);
}
.icon3d.is-live .icon3d__body { transition: none; }
.icon3d__body > i {
  position: absolute; inset: 0; border-radius: 23%;
  transform: translateZ(calc(var(--i) * var(--t) * -1));
  background: linear-gradient(155deg, #5a4232 0%, #2a1f18 38%, #120d0a 100%);
}
.icon3d__body > i:first-child { box-shadow: 0 50px 70px -24px rgba(0, 0, 0, 0.85); }
.icon3d__face {
  position: absolute; inset: 0; border-radius: 23%; overflow: hidden; background: #000; transform: translateZ(0.5px);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 214, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 0 70px -16px rgba(255, 138, 0, 0.5);
}
.icon3d__face img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); }
.icon3d__gloss {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.05) 24%, transparent 42%),
    radial-gradient(90% 60% at var(--gx, 30%) 0%, rgba(255, 255, 255, 0.12), transparent 62%);
}
.icon3d__shadow {
  position: absolute; left: 16%; right: 16%; bottom: -17%; height: 11%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), transparent); filter: blur(4px);
  animation: icon3dShadow 6.5s ease-in-out infinite;
}
@keyframes icon3dShadow { 50% { transform: scale(0.84); opacity: 0.65; } }
@media (prefers-reduced-motion: reduce) { .icon3d__float, .icon3d__shadow { animation: none; } }

/* ナビの「ログイン」（Lab の購入者がどのページからでもアカウントへ行けるように。メイン追記 2026-09-27）
 * 正本: .nav__actions のダウンロードボタンの直前に <a class="nav__login" href="lab-account.html" data-nav-login>ログイン</a>
 *       .nav__links の最後に <a class="nav__links-login" href="lab-account.html">ログイン</a>（スマホのメニュー用） */
.nav__login {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--text); font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  transition: border-color 0.3s, background 0.3s;
}
.nav__login:hover { border-color: var(--orange); background: var(--orange-soft); }
.nav__links-login { display: none; }
.nav-account { position: relative; }
.nav-account__trigger { gap: 8px; cursor: pointer; }
.nav-account__avatar { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #140a00; font: 800 13px var(--font-en); }
.nav-account__menu { position: absolute; right: 0; top: calc(100% + 12px); width: min(320px, 90vw); padding: 10px; border: 1px solid var(--line-2); border-radius: 16px; background: #191411; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4); }
.nav-account__menu[hidden] { display: none; }
.nav-account__identity { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; }
.nav-account__identity-text { display: grid; gap: 3px; min-width: 0; }
.nav-account__email, .nav-account__pass { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-account__email { color: var(--text); font-size: 13px; font-weight: 700; }
.nav-account__pass { color: var(--muted); font-size: 12px; }
.nav-account__menu > a, .nav-account__menu > button { display: block; width: 100%; padding: 10px; border-radius: 8px; text-align: left; font-size: 13px; color: var(--text); }
.nav-account__menu > a:hover, .nav-account__menu > button:hover { background: var(--orange-soft); }
.nav-account__menu :focus-visible, .nav-account__mobile :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.nav-account__mobile { display: none; }
@media (max-width: 900px) {
  .nav__login { display: none; }
  .nav__links .nav__links-login { display: block; color: var(--orange-2); }
  .nav-account__mobile { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .nav-account__mobile .nav-account__identity { padding-inline: 0; }
  .nav-account__mobile .nav-account__email { font-size: 14px; }
  .nav-account__mobile a, .nav-account__mobile button { padding: 9px 0; text-align: left; color: var(--text); font-size: 15px; }
  .nav-account__mobile a::after { display: none; }
}

/* フッターの規約リンク（全ページ共通・メイン追記 2026-09-27）
 * 正本: .footer__legal の中に <nav class="footer__legal-links" aria-label="規約とポリシー"><a href="legal-terms.html">素材利用規約</a><a href="legal-tokushoho.html">特定商取引法に基づく表記</a><a href="legal-privacy.html">プライバシーポリシー</a><a href="mailto:ryoma@akari-lab.co.jp">お問い合わせ</a></nav> */
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__legal-links a { color: var(--muted); transition: color 0.3s; }
.footer__legal-links a:hover { color: var(--orange-2); }

/* スマホの上端（Dynamic Island / ノッチの安全領域）までナビの背景を伸ばす。viewport-fit=cover だと上端は画面の外ではなくページの一部になるため */
.nav { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }
@media (max-width: 900px) { .nav__links { top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); } }
html { scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 16px); }

/* safe-area-mask: iPhone のノッチ / Dynamic Island の高さ分を常に不透明な墨で覆う。
   ナビは半透明なので、そこだけだとスクロールしたページが上端に透けて見える（iOS の Safari は上端の固定要素の色でステータスバーを描く） */
html, body { background-color: var(--ink); }
body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; z-index: 1000; pointer-events: none;
  height: env(safe-area-inset-top, 0px); background: var(--ink);
}