/* ==========================================================
   依頼者ごとの装飾
   style.css の後に読み込まれ、同じセレクタなら、こちらが勝つ。
   テンプレート側も setup-site も、このファイルは触らない。依頼者ごとの見た目の作り込みは、すべてここに書く
   (Claude Code に「こうしたい」と頼めば、ここに書く。setup-site は brief.md だけを入力にするので、ここは触らない)
   (style.css を直接変えると、テンプレートの修正を取り込むときに衝突するため)。
   配色・フォント・角丸は、ここではなく brief.md の「デザイン方針」で変える(文字の読みやすさの検査を通すため)。

   モチーフ: ゆめかわなパソコンのデスクトップ画面(キービジュアルの背景から)。
   壁紙は方眼、節は1つずつ「窓」、見出しは窓のタイトルバー、プロフィールのカードはフォルダ、メニューはタスクバー。
   ========================================================== */

:root {
  /* Web フォント(index.html で読み込む)。読み込めないときは、brief の丸ゴシック系に落ちる。
     ここで上書きするので、brief.md の「フォント」は効かない */
  --font-jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  --font-dot: "DotGothic16", var(--font-jp);

  /* キービジュアルから拾った装飾の色。文字に使う組み合わせは palette.mjs で確かめてある(下の「色の検査」) */
  --deep: #4a2a78;        /* ドット欠けの濃い紫。窓の枠と影 */
  --sky: #a9daf5;         /* エラー画面のタイトルバーの水色 */
  --lav: #cfc6f2;         /* 再生プレーヤーの薄紫 */
  --pink: #f8b6d2;        /* 雲とカーディガンのピンク */
  --mint: #eafaf4;        /* エラー画面の地 */
  --folder: #e4f1ff;      /* フォルダの本体 */
  --folder-tab: #bcdcf8;  /* フォルダのつまみ */
  --error-blue: #2a5fb0;  /* 「Error」の文字の青 */
  --grid: rgba(110, 140, 220, .16);
  --win-r: calc(var(--radius) * .6);
  --win-shadow: 6px 6px 0 rgba(74, 42, 120, .22);

  --paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23f08fb6'%3E%3Cellipse cx='12' cy='16.5' rx='5.6' ry='4.6'/%3E%3Ccircle cx='4.8' cy='10.6' r='2.5'/%3E%3Ccircle cx='9.6' cy='6' r='2.5'/%3E%3Ccircle cx='15' cy='6' r='2.5'/%3E%3Ccircle cx='19.6' cy='10.6' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --paw-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='12' cy='16.5' rx='5.6' ry='4.6'/%3E%3Ccircle cx='4.8' cy='10.6' r='2.5'/%3E%3Ccircle cx='9.6' cy='6' r='2.5'/%3E%3Ccircle cx='15' cy='6' r='2.5'/%3E%3Ccircle cx='19.6' cy='10.6' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  /* エラー画面の印(青い肉球に白い ×) */
  --paw-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%233b8fe0'%3E%3Cellipse cx='12' cy='16.5' rx='6.4' ry='5.4'/%3E%3Ccircle cx='4.6' cy='10.4' r='2.7'/%3E%3Ccircle cx='9.5' cy='5.6' r='2.7'/%3E%3Ccircle cx='15' cy='5.6' r='2.7'/%3E%3Ccircle cx='19.8' cy='10.4' r='2.7'/%3E%3C/g%3E%3Cpath d='m9.6 14.2 4.8 4.6m0-4.6-4.8 4.6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  /* キービジュアルの、黒い4つ角のきらめき(中心がピンク) */
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234a2a78' d='M12 0c.8 7.6 3.6 10.4 12 12-8.4 1.6-11.2 4.400-12 12-.8-7.600-3.6-10.4-12-12C8.4 10.4 11.2 7.6 12 0z'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23f08fb6'/%3E%3C/svg%3E");
  /* 壁紙の角の、階段状のドット欠け(左上用と右下用で、形を変える) */
  --chip-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath fill='%234a2a78' d='M0 0h10v1H7v1H6v1H4v2H3v1H2v2H1v2H0z'/%3E%3C/svg%3E");
  --chip-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath fill='%234a2a78' d='M10 10H2V9h2V8h1V6h2V5h1V3h1V0h1z'/%3E%3C/svg%3E");
}

/* ---------- 下地 ---------- */

html { -webkit-text-size-adjust: 100%; }
body { font-size: 16px; font-weight: 400; overflow-x: hidden; }
/* タスクバー(下に固定)の分だけ、ページの下を空ける */
body:has(.topbar) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
a { color: var(--accent); }
main { max-width: var(--maxw); margin: 0 auto; padding: 20px 16px 0; }
figure { margin: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 枠(overflow: hidden)いっぱいに広がるボタンは、輪を外側に描くと切り取られて見えない。内側に描く */
.art button:focus-visible, .credit-zoom:focus-visible, .kv-track:focus-visible { outline-offset: -3px; }
/* Tab で移った先が、下に固定したタスクバーの裏に入らないようにする */
html:has(.topbar) { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* ---------- 壁紙: 方眼 + 角のドット欠け + 雲 + 肉球ときらめき ---------- */
/* 画面に固定する。文字は必ず窓(不透明な面)の上に置き、壁紙の上に直接書かない */
.wallpaper {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bg);
  background-image:
    var(--chip-a), var(--chip-b),
    var(--sparkle), var(--sparkle), var(--sparkle),
    var(--paw), var(--paw), var(--paw),
    radial-gradient(closest-side, rgba(248, 182, 210, .55), rgba(248, 182, 210, 0)),
    radial-gradient(closest-side, rgba(248, 182, 210, .45), rgba(248, 182, 210, 0)),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(180deg, #e3f0ff 0%, var(--bg) 46%, #fde9f3 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
  /* 間隔と大きさは、わざと不揃いにする(等間隔だと、区切り線の飾りに見える) */
  background-position:
    left top, right 0 bottom 56px,
    right 7% top 96px, left 4% top 58%, right 22% bottom 120px,
    left 11% top 31%, right 5% top 44%, left 38% bottom 90px,
    left -80px top 18%, right -120px top 62%,
    0 0, 0 0, 0 0;
  background-size:
    120px 120px, 110px 110px,
    30px 30px, 18px 18px, 42px 42px,
    34px 34px, 24px 24px, 46px 46px,
    420px 220px, 520px 260px,
    28px 28px, 28px 28px, 100% 100%;
}
@media (min-width: 861px) {
  .wallpaper { background-size: 220px 220px, 200px 200px, 44px 44px, 24px 24px, 64px 64px, 44px 44px, 30px 30px, 60px 60px, 640px 320px, 760px 360px, 28px 28px, 28px 28px, 100% 100%; }
}

/* ---------- 窓(節の入れ物) ---------- */

.win {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--deep);
  border-radius: var(--win-r);
  box-shadow: var(--win-shadow);
}
/* 見出し = 窓のタイトルバー。左に肉球、和文の題、右に「＿ □ ×」 */
.win-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0; padding: 8px 10px 8px 14px;
  background: var(--sky);
  border-bottom: 2px solid var(--deep);
  border-radius: calc(var(--win-r) - 2px) calc(var(--win-r) - 2px) 0 0;
  font-family: var(--font-dot); font-weight: 400; line-height: 1.25; letter-spacing: .04em;
  color: var(--ink);
}
p.win-bar { font-size: 14px; }
h1.win-bar, h2.win-bar { font-size: clamp(24px, 6.4vw, 34px); }
.win-title { display: inline-flex; align-items: center; gap: .35em; min-width: 0; }
.win-title::before {
  content: ""; flex: none; width: 1em; height: 1em;
  background: var(--paw-white) center / contain no-repeat;
  filter: drop-shadow(1px 1px 0 var(--deep)) drop-shadow(-1px -1px 0 var(--deep)) drop-shadow(1px -1px 0 var(--deep)) drop-shadow(-1px 1px 0 var(--deep));
}
.win-btns { display: flex; gap: 4px; flex: none; }
.win-btns i {
  display: grid; place-items: center; width: 22px; height: 22px;
  background: #fff; border: 2px solid var(--deep);
  font: 400 12px/1 var(--font-dot); font-style: normal; color: var(--deep);
}
.win-btns i:nth-child(1)::before { content: "＿"; translate: 0 -3px; }
.win-btns i:nth-child(2)::before { content: "□"; }
.win-btns i:nth-child(3)::before { content: "×"; }
.win-body { padding: 18px 16px 22px; }

/* ---------- 表紙: キービジュアルの窓に、名前のダイアログを重ねる ---------- */

.hero { display: grid; padding-top: 4px; }
.win-kv { z-index: 1; overflow: hidden; }
.win-kv .win-bar { background: var(--lav); }
.win-kv .win-title::before { background-image: var(--paw); filter: none; }
.hero-visual { margin: 0; }
.kv { background: #eef4ff; }

/* 2枚目以降を足したときの操作(再生プレーヤーの形)。1枚だけのときは、操作が入らないので出さない */
.kv-player {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--lav); border-top: 2px solid var(--deep);
}
.kv-player:not(:has(button)) { display: none; }
.kv-seek { position: relative; flex: 1; display: flex; justify-content: center; }
.kv-seek::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; translate: 0 -50%; background: var(--deep); }
.kv-dots { position: relative; display: flex; align-items: center; gap: 14px; --kv-hit-x: 7px; }
.kv-dot { width: 14px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.seek-knob { display: block; width: 10px; height: 10px; margin: auto; background: #fff; border: 2px solid var(--deep); }
.kv-dot[aria-current="true"] .seek-knob { width: 12px; height: 22px; background: var(--accent); }
.kv-nav {
  display: grid; place-items: center; width: 44px; height: 32px; padding: 0; cursor: pointer;
  background: #fff; border: 2px solid var(--deep); border-radius: 6px; box-shadow: 2px 2px 0 var(--deep);
}
.kv-nav svg { width: 20px; height: 20px; fill: var(--deep); }
.kv-nav:active { translate: 2px 2px; box-shadow: none; }

/* 名前のダイアログ。スマホでは、キービジュアルの窓の下端に 44px 重ねる(絵の下端はぼかした窓で、隠れても差し支えない) */
.win-name { z-index: 2; margin: -44px -6px 0 14px; }
/* 2枚目以降を足して操作の列が出たときは、重ねない(重ねると、前後のボタンとシークバーが隠れて押せない) */
.hero:has(.kv-player button) .win-name { margin-top: 14px; }
.win-name .win-bar { background: var(--pink); letter-spacing: .12em; }
.win-name .win-body { padding: 16px 18px 22px; }
.hero-name {
  margin: 0; font-family: var(--font-dot); font-weight: 400;
  font-size: clamp(44px, 12.5vw, 84px); line-height: 1.15; letter-spacing: .02em; white-space: nowrap;
  color: var(--deep); text-shadow: 3px 3px 0 var(--pink);
}
.hero-reading { margin: 2px 0 0; font-size: 14px; font-weight: 500; letter-spacing: .3em; color: var(--muted); }
/* 折り返すのは、index.html に <wbr> を入れた言葉の切れ目だけ(keep-all)。行の長さはそろえる(balance)。
   Why not auto-phrase: Safari と Firefox が対応しておらず、「天使 / ちゃん」のように言葉の途中で折れる。
   overflow-wrap は、切れ目の間が枠より長いとき(極端に狭い画面)に、はみ出させないための保険 */
.hero-copy { margin: 14px 0 0; font-size: 16px; font-weight: 700; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; text-wrap-style: balance; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ダイアログのボタン。押すと、影の分だけ沈む */
.dlg-btn, .back-top, .back-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 20px;
  background: #fff; color: var(--ink);
  border: 2px solid var(--deep); border-radius: 10px; box-shadow: 3px 3px 0 var(--deep);
  font-weight: 700; text-decoration: none; line-height: 1.3;
}
.dlg-btn-main { background: var(--accent); color: var(--on-accent); }
.dlg-btn:active, .back-top:active, .back-link:active { translate: 3px 3px; box-shadow: none; }
@media (hover: hover) {
  .dlg-btn:hover, .back-top:hover, .back-link:hover { background: var(--accent-soft); }
  .dlg-btn-main:hover { background: var(--accent-hover); }
}

@media (min-width: 861px) {
  main { padding-top: 36px; }
  /* 広い画面: 絵の窓を右、名前のダイアログを左下に置き、絵の窓へ 40px 重ねる(重ねすぎると、絵の左端が隠れる) */
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: end; }
  .win-kv { grid-column: 2; grid-row: 1; }
  .win-name { grid-column: 1; grid-row: 1; margin: 0 -40px 56px 0; }
  .hero:has(.kv-player button) .win-name { margin-top: 0; margin-bottom: 96px; }
  .win-name .win-body { padding: 22px 26px 28px; }
  .hero-name { font-size: clamp(56px, 7.4vw, 84px); }
  .hero-copy { font-size: 18px; }
}

/* ---------- 節の並べ方(窓を左右にずらし、間隔は2種類) ---------- */

.sec { margin-top: 56px; scroll-margin-top: 16px; }
#links { margin-top: 24px; }                 /* プロフィールの直後に詰める */
#rules, #gallery { margin-top: 84px; }       /* 話題が変わるところは、大きく空ける */
#links .win-bar { background: var(--pink); }
.win-gallery .win-bar { background: var(--lav); }
@media (min-width: 861px) {
  .win-body { padding: 26px 28px 30px; }
  #profile { margin-right: 5%; }
  #profile .win-body { padding-bottom: 46px; }
  /* リンクの窓は、プロフィールの窓の右下に重ねる */
  #links { margin: -22px 0 0 38%; z-index: 2; }
  #rules { margin-right: 32%; margin-top: 96px; }
  #gallery { margin-top: 110px; }
}

/* ---------- プロフィール: 立ち絵と、フォルダのカード ---------- */

.tachie-zoom {
  aspect-ratio: 4 / 7;
  background: linear-gradient(180deg, #eaf3ff, #fdeaf3);
  border: 2px solid var(--deep); border-radius: var(--win-r); overflow: hidden;
}
.tachie-credit { font-size: 13px; color: var(--muted); }
.tachie-tab {
  padding: 6px 14px; font: 700 13px/1.3 var(--font-jp); color: var(--ink);
  background: #fff; border: 2px solid var(--deep); border-radius: var(--radius);
}
.tachie-tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }

.facts { gap: 14px 12px; }
/* フォルダ: つまみ(dt)に項目名、本体(dd)に値。同じ行のカードは、本体の高さがそろう */
.folder { display: grid; grid-template-rows: auto 1fr; }
.folder dt {
  justify-self: start; position: relative; z-index: 1; margin-bottom: -2px;
  padding: 3px 14px 2px; max-width: 100%;
  background: var(--folder-tab);
  border: 2px solid var(--deep); border-bottom-color: var(--folder-tab);
  border-radius: 10px 14px 0 0;
  font-size: 13px; font-weight: 700; line-height: 1.5;
}
.folder dd {
  padding: 12px 14px 14px;
  background: var(--folder);
  border: 2px solid var(--deep); border-radius: 0 var(--win-r) var(--win-r) var(--win-r);
  box-shadow: 3px 3px 0 rgba(74, 42, 120, .22);
}
/* スマホ幅の2列では、7文字の名前(制作者名)が1行に収まる大きさにする */
.folder-value { font-size: 16px; font-weight: 700; line-height: 1.5; }
@media (min-width: 480px) { .folder-value { font-size: 18px; } }
@media (max-width: 399px) {
  .folder dd { padding: 12px 10px 14px; }
  .folder-value { font-size: 15px; }
}
.folder-value small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }
.folder-value a { color: var(--accent); }
.fact-note { margin: 6px 0 0; font-size: 13px; font-weight: 400; }
.copy-text-large { font-size: 30px; line-height: 1.2; }
.copy-list { gap: 10px; }
.copy-text { overflow-wrap: anywhere; }
.tag-link { color: var(--accent); font-weight: 700; }
/* 「コピーする」→「コピーしました」で幅が変わらないよう、見えない「コピーしました」を重ねて幅を取る */
.copy-btn {
  display: inline-grid; justify-items: center; white-space: nowrap;
  padding: 6px 12px; font: 700 13px/1.4 var(--font-jp); color: var(--ink);
  background: #fff; border: 2px solid var(--deep); border-radius: 8px; box-shadow: 2px 2px 0 var(--deep);
}
.copy-label, .copy-btn::after { grid-area: 1 / 1; }
.copy-btn::after { content: "コピーしました"; visibility: hidden; }
.copy-btn:active { translate: 2px 2px; box-shadow: none; }
@media (hover: hover) { .copy-btn:hover { background: var(--accent-soft); } }

/* ---------- リンク: デスクトップのショートカット ---------- */

.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.link-card {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center;
  min-height: 80px; padding: 12px 16px;
  background: #fff; color: var(--ink); text-decoration: none;
  border: 2px solid var(--deep); border-radius: var(--win-r); box-shadow: 4px 4px 0 var(--deep);
}
/* ファイルのアイコン(右上の角を折った紙に、肉球) */
.link-card::before {
  content: ""; grid-row: 1 / span 2; width: 48px; height: 56px;
  background: var(--paw) center 62% / 28px no-repeat, linear-gradient(225deg, var(--deep) 0 9px, var(--folder) 9px);
  border: 2px solid var(--deep); border-radius: 4px;
}
.link-kind { grid-column: 2; align-self: end; font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.4; }
.link-name { grid-column: 2; align-self: start; font-family: var(--font-dot); font-size: 24px; line-height: 1.3; overflow-wrap: anywhere; }
.link-main { background: var(--accent); color: var(--on-accent); }
.link-main .link-kind { color: var(--on-accent); }
.link-card:active { translate: 4px 4px; box-shadow: none; }
@media (hover: hover) {
  .link-card:hover { background: var(--accent-soft); }
  .link-main:hover { background: var(--accent-hover); }
}
.link-schedule {
  display: inline-block; margin: 20px 0 0; padding: 8px 14px;
  background: var(--mint); border: 2px dashed var(--deep); border-radius: 10px;
  font-weight: 700;
}

/* ---------- 注意事項: 重なったエラー画面 ---------- */

/* 窓の後ろに、同じ窓が2枚ずれて重なって見える影(キービジュアルの「Error Message」の重なり) */
.win-error {
  box-shadow:
    8px 8px 0 -2px var(--mint), 8px 8px 0 0 var(--deep),
    16px 16px 0 -2px var(--mint), 16px 16px 0 0 var(--deep);
}
.win-error .win-body { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px 14px; align-items: center; background: var(--mint); border-radius: 0 0 calc(var(--win-r) - 2px) calc(var(--win-r) - 2px); }
.win-error .win-body::before { content: ""; width: 48px; height: 48px; background: var(--paw-error) center / contain no-repeat; }
.rules-lead { margin: 0; font-family: var(--font-dot); font-size: 24px; line-height: 1.3; color: var(--error-blue); }
.rules { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; counter-reset: rule; display: grid; gap: 0; }
.rules li {
  counter-increment: rule; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: baseline;
  padding: 9px 0; border-top: 2px dotted rgba(74, 42, 120, .35);
}
.rules li::before { content: counter(rule, decimal-leading-zero); font-family: var(--font-dot); font-size: 16px; color: var(--accent); }
.rules p { margin: 0; font-weight: 500; line-height: 1.6; }
@media (min-width: 861px) {
  .win-error .win-body { grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; }
  .win-error .win-body::before { width: 72px; height: 72px; }
  .rules { grid-column: 2; }
  .win-error .win-body::before { grid-row: 1 / span 2; align-self: start; }
}

/* ---------- ギャラリー ---------- */

.gallery-tag { margin: 0 0 18px; font-size: 14px; font-weight: 700; }
.tag-chip { display: inline-block; margin-left: 6px; padding: 3px 14px; background: var(--accent-soft); border: 2px solid var(--deep); border-radius: var(--radius); }
/* 列の幅と間隔だけを変える(display と grid-auto-rows は、高さ詰めの計算と対なので変えない) */
.gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); column-gap: 12px; }
@media (min-width: 600px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 20px; } }
.art { background: #fff; border: 2px solid var(--deep); border-radius: 10px; overflow: hidden; box-shadow: 3px 3px 0 rgba(74, 42, 120, .22); }
.art img { display: block; }
/* ロゴ(透過)を載せたとき、黒い文字も淡い文字も溶けないよう、白い板を敷く */
.art-logo button { background: #fff; }
.art figcaption { padding: 5px 10px 6px; font-size: 13px; line-height: 1.5; border-top: 2px solid var(--deep); background: var(--folder); overflow-wrap: anywhere; }
.art figcaption a { color: var(--accent); font-weight: 700; }
#gallery-empty { margin: 0; color: var(--muted); }

/* ---------- 拡大表示 ---------- */

.lightbox figcaption { font-size: 14px; text-align: center; }
.lightbox figcaption a { color: #ffd3e6; }
.lb-close, .lb-nav { font-family: var(--font-jp); }
/* 押したときの色の変化は、押している間だけ(スマホで、離しても色が残らないように) */
.lb-nav:active, .lb-close:active { background: var(--accent-hover); }
@media (hover: hover) { .lb-nav:hover, .lb-close:hover { background: var(--accent-hover); } }

/* ---------- タスクバー(ページ内メニュー。画面の下に固定) ---------- */

.topbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 7px max(10px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: rgba(207, 198, 242, .94); border-top: 2px solid var(--deep);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.topbar .brand, .topbar nav a, .nav-toggle {
  min-height: 44px; padding: 6px 14px;
  background: #fff; color: var(--ink); text-decoration: none;
  border: 2px solid var(--deep); border-radius: 8px; box-shadow: 2px 2px 0 var(--deep);
  font: 700 14px/1.3 var(--font-jp);
}
.topbar .brand, .topbar nav a { display: inline-flex; align-items: center; }
/* 名前のボタン(スタートボタンの見立て)。先頭に肉球 */
.topbar .brand { gap: 6px; background: var(--accent); color: var(--on-accent); font-family: var(--font-dot); font-weight: 400; font-size: 16px; }
.topbar .brand::before { content: ""; width: 18px; height: 18px; background: var(--paw-white) center / contain no-repeat; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 8px; }
.topbar .brand:active, .topbar nav a:active, .nav-toggle:active { translate: 2px 2px; box-shadow: none; }
@media (hover: hover) {
  .topbar nav a:hover, .nav-toggle:hover { background: var(--accent-soft); }
  .topbar .brand:hover { background: var(--accent-hover); }
}
.nav-toggle-bar { width: 18px; height: 18px; background: var(--paw) center / contain no-repeat; }
/* JS が動かないと、スマホではメニューを畳めず、固定したバーが何段にもなって本文を覆う。固定を外して、ページの先頭に置く */
html:not(.js) .topbar { position: static; }
html:not(.js) body:has(.topbar) { padding-bottom: 0; }
@media (max-width: 720px) {
  /* スマホ: 「メニュー」のボタンから、上へ開く */
  .js .nav-toggle { display: inline-flex; align-items: center; gap: 6px; }
  .js .topbar nav {
    top: auto; bottom: 100%; left: 8px; right: auto; width: min(260px, calc(100vw - 16px));
    flex-direction: column; flex-wrap: nowrap; gap: 8px; margin-bottom: 8px; padding: 12px;
    background: var(--surface); border: 2px solid var(--deep); border-radius: var(--win-r); box-shadow: var(--win-shadow);
  }
  .js .topbar nav a { justify-content: flex-start; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
  /* 開閉の仕掛け(opacity と visibility)は style.css のまま。下から少し上がってくる */
  .js .topbar nav { transform: translateY(8px); transition: opacity .2s, visibility .2s, transform .25s ease; }
  .js .topbar.is-open nav { transform: none; }
}

/* ---------- フッター ---------- */

.footer {
  max-width: var(--maxw); margin: 72px auto 24px; padding: 18px 16px;
  text-align: center; font-size: 14px; color: var(--muted);
}
/* 壁紙の上に直接文字を置かないよう、フッターにも面を敷く */
.footer > * { margin: 0 auto; max-width: 640px; padding: 4px 14px; background: var(--surface); }
.footer > :first-child { padding-top: 14px; border: 2px solid var(--deep); border-bottom: 0; border-radius: var(--win-r) var(--win-r) 0 0; }
.footer > :not(:first-child):not(:last-child) { border-left: 2px solid var(--deep); border-right: 2px solid var(--deep); }
.footer > :last-child { padding-bottom: 14px; border: 2px solid var(--deep); border-top: 0; border-radius: 0 0 var(--win-r) var(--win-r); }
.footer a { color: var(--accent); font-weight: 700; }
.footer-links a { display: inline-block; padding: 8px 6px; }
.copy { font-family: var(--font-dot); font-size: 14px; letter-spacing: .06em; color: var(--ink); }

/* ---------- クレジットページ(credits/index.html) ---------- */

.sub-head { max-width: var(--maxw); margin: 0 auto; padding: 16px 16px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sub-head .brand {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px;
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  border: 2px solid var(--deep); border-radius: 8px; box-shadow: 2px 2px 0 var(--deep);
  font-family: var(--font-dot); font-size: 18px;
}
.sub-head .brand::before { content: ""; width: 20px; height: 20px; background: var(--paw-white) center / contain no-repeat; }
.back-link { min-height: 44px; padding: 6px 14px; font-size: 14px; }
.page-sub .sec { margin-top: 28px; }
.credits-lead { margin: 0 0 20px; }
.credit + .credit { margin-top: 36px; }
.credit-heading { margin: 0; font-family: var(--font-dot); font-weight: 400; font-size: 24px; line-height: 1.3; color: var(--deep); }
.credit-creator { margin: 6px 0 0; font-weight: 700; }
.credit-links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.credit-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 18px;
  background: #fff; color: var(--ink); text-decoration: none; font-weight: 700;
  border: 2px solid var(--deep); border-radius: 8px; box-shadow: 2px 2px 0 var(--deep);
}
.credit-works { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin-top: 18px; }
.credit-work { background: #fff; border: 2px solid var(--deep); border-radius: 10px; overflow: hidden; box-shadow: 3px 3px 0 rgba(74, 42, 120, .22); }
.credit-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.credit-zoom img { display: block; width: 100%; height: auto; }
/* 作品名のクラスは、依頼品の figcaption と、素材のリンク(a)の両方に付く。枠の指定は依頼品だけにする */
.credit-work .credit-title { padding: 6px 12px 8px; font-size: 14px; font-weight: 700; border-top: 2px solid var(--deep); background: var(--folder); }
.credit-material .credit-title { display: inline-block; padding: 8px 0; font-weight: 700; }
.credit-materials { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 20px; }
.credit-material[data-embed="pending"] .credit-embed { min-height: 240px; }
/* トップページへの戻り道は、右下に固定する */
.back-top { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; }
.page-sub .footer { margin-bottom: 84px; }

/* 色の検査(node .claude/skills/setup-site/scripts/palette.mjs "<文字色>" --bg "<背景色>")で確かめた組み合わせ:
   --ink / --sky・--lav・--pink・--folder・--folder-tab・--mint、--muted / --folder・#fff、
   --accent / --folder・--mint・#fff、--error-blue / --mint、--deep / #fff */