/* ─────────────────────────────────────────────
   KoeLove v1.0.0

   ⚠️ v0.11 は「整いすぎて誰が作っても同じもの」になっていた。
      1pxの細い罫線・全部4pxの角丸・粘着ヘッダー・均等な余白は、
      生成されたUIの語彙そのもの。v0.7.0 の書き方に戻す：

      ・角丸を使わない（丸いのは再生ボタンだけ）
      ・枠は 2px の実線。細いヘアラインにしない
      ・パネルは水色で塗る
      ・見出しに【】を使う
      ・ヘッダーは粘着させない

      ただし v0.7.0 で壊れていたところ（スマホの幅、ナビの組み方、
      ブラウザ既定の audio）は直したまま。

   ⚠️ 青は #006EE4。白文字が普通に乗る（4.83:1）。
      ほかに持っている青とは十分に離してある。値を選んだ経緯は README.md に。
      暗い端末では波形と文字の青だけ #4D9FF5 に持ち上げる。
      **ボタンの地は両方の端末で #006EE4 のまま、文字は白。**
      （黒地でも 4.00:1 あり、部品としての基準 3:1 を超える）
   ───────────────────────────────────────────── */

:root{
  --blue:      #006EE4;   /* 文字・波形・枠・ロゴ。白地に 4.83:1 */
  --blue-fill: #006EE4;   /* ボタンの地。白文字が乗る */
  --blue-deep: #0055B0;   /* 押したとき */
  --blue-pale: #e9effa;   /* パネルの塗り */
  --blue-mid:  #b9cbe8;   /* 2px の枠 */
  --line:      #d8dae0;
  --ink:       #14131a;
  --ink-dim:   #55555f;
  --ink-faint: #7d7d88;
  --wave:      #c6c9d1;
  --ground:    #ffffff;
  --danger:    #c0271c;

  --wrap: 780px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  /* v0.7.0 と同じ Arial 始まり。日本語は字ごとに落ちる。
     Webフォントを読まないので速いし、昔のサイトの見え方に近い。 */
  font-family:Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size:16px;
  line-height:1.85;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 18px; }

a{ color:var(--blue); }
a:hover{ color:var(--blue-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, [role="slider"]:focus-visible{
  outline:2px solid var(--blue); outline-offset:1px;
}

/* ── ヘッダー ─────────────────────────── */
/* 粘着させない。昔のサイトのヘッダーは付いてこない。
   ロゴは大きめだが、余白は詰める。左寄せのまま。 */
.site-head{ border-bottom:2px solid var(--blue-mid); background:var(--ground); }
.site-head .wrap{ display:flex; align-items:center; gap:14px; padding-top:14px; padding-bottom:14px; }
.site-head .logo{ display:block; line-height:0; }
.site-head .spacer{ flex:1; }

/* ⚠️ ロゴはPNGをそのまま出さず、形だけ借りてテーマカラーで塗る。
   PNG本来の文字色は使わない（理由は README.md）。
   PNGに透過が入っているのでマスクとして使える。暗い端末でも自動で追従する。 */
.site-head .logo img{ display:none; }
.site-head .logo{
  width:190px; height:64px;
  background-color:var(--blue);
  -webkit-mask-image:url(img/logo.png);
          mask-image:url(img/logo.png);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
  -webkit-mask-size:contain; mask-size:contain;
}
.head-btn{
  flex:none; font:inherit; font-size:14px; font-weight:bold;
  padding:9px 20px; cursor:pointer; text-decoration:none;
  background:var(--blue-fill); color:#fff;
  border:2px solid var(--blue-fill); border-radius:0;
}
.head-btn:hover{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.head-btn[aria-expanded="true"]{ background:var(--ground); color:var(--blue); }

/* ── 検索 ─────────────────────────────── */
.search{ display:flex; gap:0; margin:20px 0 0; }
.search input{
  flex:1; min-width:0; font:inherit; font-size:15px; padding:9px 11px;
  border:2px solid var(--blue-mid); border-right:0; border-radius:0;
  background:var(--ground); color:var(--ink);
}
.search button{
  flex:none; font:inherit; font-size:14px; font-weight:bold; padding:9px 20px; cursor:pointer;
  background:var(--blue-fill); color:#fff; border:2px solid var(--blue-fill); border-radius:0;
}
.search button:hover{ background:var(--blue-deep); border-color:var(--blue-deep); }

/* ── 投稿フォーム ─────────────────────── */
/* 開閉のボタンはヘッダーの1つだけ。
   JavaScript が無い環境では開いたまま見えるよう、既定を「開」にして JS が畳む。 */
.post{
  border:2px solid var(--blue-mid); background:var(--blue-pale);
  margin:20px 0 0; padding:16px 18px 20px;
}
.post.is-closed{ display:none; }
.post h2{ font-size:16px; margin:0 0 14px; color:var(--ink); }

.field{ margin-bottom:14px; }
.field > label{ display:block; font-weight:bold; font-size:14px; margin-bottom:3px; }
.field .hint{ display:block; font-size:12px; color:var(--ink-dim); line-height:1.7; margin-top:2px; }
input[type="text"], input[type="password"], input[type="file"]{
  width:100%; font:inherit; font-size:15px; padding:8px 10px;
  border:2px solid var(--blue-mid); border-radius:0;
  background:var(--ground); color:var(--ink);
}
input[type="file"]{ padding:6px; }

.agree{ display:flex; gap:8px; align-items:flex-start; font-size:14px; margin:16px 0; }
.agree input{ margin-top:6px; flex:none; width:16px; height:16px; }

.submit{
  width:100%; font:inherit; font-size:16px; font-weight:bold; padding:13px; cursor:pointer;
  background:var(--blue-fill); color:#fff; border:2px solid var(--blue-fill); border-radius:0;
}
.submit:hover{ background:var(--blue-deep); border-color:var(--blue-deep); }
.submit:disabled{ background:var(--blue-mid); border-color:var(--blue-mid); color:#5c5c66; cursor:not-allowed; }

.status{ margin:10px 0 0; font-size:14px; min-height:1.85em; }
.status.ok{ color:var(--blue-deep); font-weight:bold; }
.status.ng{ color:var(--danger); font-weight:bold; }

/* ── 一覧の見出しとタブ ───────────────── */
.listhead{
  display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px;
  margin:32px 0 0; padding-bottom:6px; border-bottom:2px solid var(--blue-mid);
}
.listhead h2{ font-size:16px; margin:0; }
.tabs{ display:flex; gap:2px; margin-left:auto; }
.tabs a{
  padding:5px 16px; text-decoration:none; font-size:14px; font-weight:bold;
  color:var(--ink-dim); border:2px solid var(--blue-mid); border-bottom:0;
  background:var(--ground);
}
.tabs a:hover{ color:var(--blue); }
/* 現在のタブは塗る。昔のタブUIと同じ。 */
.tabs a[aria-current="page"]{ background:var(--blue-fill); border-color:var(--blue-fill); color:#fff; }

/* ── 一覧の1件 ────────────────────────── */
main{ padding:0 0 40px; }
.list{ list-style:none; margin:0; padding:0; }

.track{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }

.art{
  width:96px; height:96px; flex:none; position:relative;
  border:2px solid var(--blue-mid); background:var(--blue-pale); overflow:hidden;
}
.art img{ width:100%; height:100%; object-fit:cover; display:block; }
.art .kana{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--blue-mid); font-size:36px; line-height:1;
}

.track-body{ flex:1; min-width:0; }
.track-who{ font-size:13px; color:var(--ink-dim); margin:0; }
.track-title{ font-size:17px; font-weight:bold; margin:0 0 8px; line-height:1.5; }
.track-title a{ color:var(--ink); text-decoration:none; }
.track-title a:hover{ color:var(--blue); text-decoration:underline; }

.track-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px;
  font-size:13px; color:var(--ink-faint); margin-top:8px;
}
.track-foot .plays{ margin-left:auto; }

/* ── 自前の再生バー ───────────────────── */
/* ブラウザ既定の controls は各社で見た目が違うので使わない。 */
.player{ display:flex; align-items:center; gap:11px; }

/* 唯一の丸いもの。再生ボタンだけは丸くていい。 */
.pbtn{
  width:38px; height:38px; flex:none; border-radius:50%; cursor:pointer;
  background:var(--blue-fill); color:#fff; border:0;
  display:grid; place-items:center; padding:0;
}
.pbtn:hover{ background:var(--blue-deep); }
.pbtn svg{ width:14px; height:14px; display:block; }
.pbtn .ic-pause{ display:none; }
.pbtn[aria-pressed="true"] .ic-play{ display:none; }
.pbtn[aria-pressed="true"] .ic-pause{ display:block; }

.pseek{ flex:1; min-width:0; height:42px; position:relative; cursor:pointer; display:flex; align-items:center; }
.pseek canvas{ width:100%; height:42px; display:block; }

/* 波形データが無いときの細いバー */
.pbar{ width:100%; height:6px; background:var(--wave); overflow:hidden; }
.pbar i{ display:block; height:100%; width:0; background:var(--blue); }

.ptime{
  flex:none; font-size:12px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; min-width:5.6em; text-align:right;
}

/* ── さらに表示・空 ───────────────────── */
.more{ margin:24px 0 0; text-align:center; }
.more button{
  font:inherit; font-size:15px; padding:11px 34px; cursor:pointer;
  background:var(--ground); color:var(--blue); border:2px solid var(--blue); border-radius:0;
}
.more button:hover{ background:var(--blue-pale); }
.more button:disabled{ color:var(--ink-faint); border-color:var(--line); cursor:default; background:var(--ground); }

.empty{ padding:52px 0; text-align:center; color:var(--ink-dim); }
.empty .big{ display:block; font-size:44px; color:var(--blue-mid); line-height:1; margin-bottom:10px; }
.empty p{ margin:0 0 4px; }

/* ── 1件のページ ──────────────────────── */
.single{ padding:28px 0 10px; }
.single-head{ display:flex; gap:18px; margin-bottom:18px; }
.single .art{ width:150px; height:150px; }
.single .art .kana{ font-size:56px; }
.single-meta{ flex:1; min-width:0; }
.single h1{ font-size:22px; line-height:1.5; margin:2px 0 6px; }
.single .track-who{ font-size:14px; }
.single .pbtn{ width:50px; height:50px; }
.single .pbtn svg{ width:18px; height:18px; }
.single .pseek, .single .pseek canvas{ height:72px; }
.single .track-foot{ font-size:14px; padding-bottom:20px; border-bottom:2px solid var(--blue-mid); }

/* ── 文章のページ ─────────────────────── */
.doc{ padding:28px 0 0; }
.doc h1{ font-size:22px; line-height:1.5; margin:0 0 6px; }
.doc h2{ font-size:18px; margin:32px 0 8px; }
.doc h3{ font-size:16px; margin:26px 0 4px; padding-top:12px; border-top:2px solid var(--blue-mid); }
.doc p{ margin:0 0 12px; }
.doc ul{ margin:0 0 12px; padding-left:1.4em; }
.doc li{ margin-bottom:4px; }
.doc .date{ font-size:13px; color:var(--ink-dim); margin:0 0 16px; }
.doc hr{ border:0; border-top:2px solid var(--blue-mid); margin:16px 0 22px; }

.note{ border:2px solid var(--blue-mid); background:var(--blue-pale); padding:14px 16px; margin:0 0 20px; }
.note p:last-child{ margin-bottom:0; }

/* ── フッター ─────────────────────────── */
.site-foot{ border-top:2px solid var(--blue-mid); margin-top:44px; background:var(--blue-pale); }
.site-foot .wrap{ padding-top:28px; padding-bottom:34px; }
.foot-lead{ font-size:14px; color:var(--ink-dim); line-height:1.9; margin:0 0 16px; max-width:46em; }
.foot-lead b{ color:var(--ink); }
.foot-nav{ display:flex; flex-wrap:wrap; gap:6px 20px; font-size:14px; margin-bottom:14px; }
.foot-copy{ font-size:13px; color:var(--ink-faint); margin:0; }

/* ── 狭い画面 ─────────────────────────── */
@media (max-width:560px){
  body{ font-size:15px; }
  .site-head .logo{ width:140px; height:46px; }
  .head-btn{ padding:8px 14px; }
  .track{ gap:11px; padding:15px 0; }
  .art{ width:70px; height:70px; }
  .art .kana{ font-size:26px; }
  .track-title{ font-size:16px; }
  .pbtn{ width:34px; height:34px; }
  .pseek, .pseek canvas{ height:36px; }
  .ptime{ display:none; }
  .listhead{ align-items:stretch; }
  .tabs{ margin-left:0; }
  .single-head{ flex-direction:column; gap:14px; }
  .single .art{ width:120px; height:120px; }
  .single .art .kana{ font-size:44px; }
  .single h1, .doc h1{ font-size:20px; }
  .single .ptime{ display:block; }
}

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ─────────────────────────────────────────────
   暗い端末
   ⚠️ ボタンの地は #006EE4 のまま、文字も白のまま。
      黒地でも 3.73:1 あり、部品としての基準 3:1 を超える。
      持ち上げるのは**波形と文字の青だけ**（#4D9FF5、黒地に 7.17:1）。
   ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark){
  :root{
    --blue:      #4D9FF5;
    --blue-fill: #006EE4;
    --blue-deep: #2E8BF0;
    --blue-pale: #141922;
    --blue-mid:  #2c3a4e;
    --line:      #262830;
    --ink:       #f2f2f3;
    --ink-dim:   #9a9aa4;
    --ink-faint: #6e6e78;
    --wave:      #333640;
    --ground:    #0e0e10;
    --danger:    #ff7a70;
  }
  .tabs a[aria-current="page"]{ color:#fff; }
}

/* 端末の設定に関係なく暗くしたいとき用。値は上の @media と同じ。 */
.theme-dark{
  --blue:      #4D9FF5;
  --blue-fill: #006EE4;
  --blue-deep: #2E8BF0;
  --blue-pale: #141922;
  --blue-mid:  #2c3a4e;
  --line:      #262830;
  --ink:       #f2f2f3;
  --ink-dim:   #9a9aa4;
  --ink-faint: #6e6e78;
  --wave:      #333640;
  --ground:    #0e0e10;
  --danger:    #ff7a70;
  background:var(--ground);
  color:var(--ink);
}
.theme-dark .tabs a[aria-current="page"]{ color:#fff; }



/* ── 投稿者のページ ────────────────────── */
.user-head{ display:flex; align-items:center; gap:16px; padding:30px 0 22px; }
.user-ava{
  width:76px; height:76px; flex:none;
  border:2px solid var(--blue-mid); background:var(--blue-pale);
  display:grid; place-items:center;
  font-size:32px; font-weight:bold; color:var(--blue); line-height:1;
}
.user-meta{ min-width:0; }
.user-meta h1{ font-size:22px; margin:0 0 2px; line-height:1.4; word-break:break-word; }
.user-count{ margin:0; font-size:13px; color:var(--ink-dim); }
.track-who a{ color:var(--ink-dim); text-decoration:none; }
.track-who a:hover{ color:var(--blue); text-decoration:underline; }

@media (max-width:560px){
  .user-head{ gap:12px; padding:22px 0 18px; }
  .user-ava{ width:58px; height:58px; font-size:24px; }
  .user-meta h1{ font-size:19px; }
}

/* ── 画面の下に固定される再生バー ────────── */
/* ⚠️ 同じページの中でだけ続く。ページを移ると音は止まる（普通のマルチページ構成のため）。
   移動先では、止まった状態で続きから出るようにしてある（nowbar.js）。 */
.nowbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--ground); border-top:2px solid var(--blue-mid);
  transform:translateY(100%); transition:transform .18s ease-out;
}
.nowbar.is-on{ transform:none; }
@media (prefers-reduced-motion: reduce){ .nowbar{ transition:none; } }

.nowbar-in{
  max-width:var(--wrap); margin:0 auto; padding:10px 18px;
  display:flex; align-items:center; gap:12px;
}
.nowbar-art{
  width:40px; height:40px; flex:none;
  border:2px solid var(--blue-mid); background:var(--blue-pale);
  display:grid; place-items:center; color:var(--blue-mid); font-size:18px; line-height:1;
}
.nowbar-btn{ width:36px; height:36px; }
.nowbar-btn svg{ width:13px; height:13px; }
.nowbar-meta{ flex:none; width:min(34%, 260px); min-width:0; }
.nowbar-title{
  margin:0; font-size:13.5px; font-weight:bold; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nowbar-title:hover{ color:var(--blue); text-decoration:underline; }
.nowbar-who{ margin:0; font-size:12px; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nowbar-seek{
  flex:1; min-width:0; height:6px; cursor:pointer;
  background:var(--wave); overflow:hidden;
}
.nowbar-seek i{ display:block; width:0; height:100%; background:var(--blue); }
.nowbar-time{
  flex:none; font-size:12px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* バーのぶん、本文の下に余白を足す。
   ⚠️ ここの値は JavaScript が動くまでの仮。実際の余白は nowbar.js が実寸で入れ直す。 */
body.has-nowbar{ padding-bottom:66px; }

@media (max-width:560px){
  .nowbar-in{ padding:8px 14px; gap:10px; }
  .nowbar-art{ display:none; }
  .nowbar-meta{ width:min(46%, 180px); }
  .nowbar-time{ display:none; }
}

/* 投稿を止めているときの知らせ（ボタンを押すと出る） */
.closed{
  margin:20px 0 0; padding:13px 16px;
  border:2px solid var(--blue-mid); background:var(--blue-pale);
  font-size:14px; color:var(--ink-dim);
}
.closed b{ color:var(--ink); display:block; }




/* ─────────────────────────────────────────────
   トップ（青一色の1画面）

   ⚠️ **スクロールさせない。全部を画面に収める。**
      長い文章を足さないこと。足したくなったら about.html へ。
      音声の一覧も置かない。まだ置かれていないものを並べない。

   高さは vh ではなく svh を優先する（スマホのアドレスバーぶんはみ出すため）。
   中の余白と字の大きさは、画面の高さに合わせて縮む。
   ───────────────────────────────────────────── */

body.splash{
  background:var(--blue);
  color:#fff;
  height:100vh; height:100svh;
  overflow:hidden;
}
body.splash a{ color:#fff; }

.sp{
  height:100%;
  display:flex; flex-direction:column;
  gap:clamp(14px, 3vh, 34px);
  padding:clamp(20px, 3.5vh, 40px) clamp(20px, 6vw, 56px);
  max-width:calc(var(--wrap) + 112px); margin:0 auto;
}

/* 上の塊。余ったぶんはここが吸う */
.sp-mid{
  flex:1; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(12px, 2.4vh, 26px);
}

/* ロゴはマスクで白に塗る */
.sp-logo{
  flex:none; display:block;
  width:min(540px, 82%);
  height:clamp(44px, 11vh, 116px);
  background-color:#fff;
  -webkit-mask-image:url(img/logo.png);
          mask-image:url(img/logo.png);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
  -webkit-mask-size:contain; mask-size:contain;
}
.sp-lead{
  flex:none; margin:0;
  font-size:clamp(15px, 3vw, 26px); font-weight:bold; line-height:1.6;
}

/* KoeLove の記号。装飾なので読み上げからは外してある */
.sp-wave{
  flex:none; display:block; width:100%;
  height:clamp(44px, 11vh, 116px); color:#fff;
}

/* 3つの特徴 */
.sp-pts{
  flex:none; list-style:none; margin:0; padding:0;
  display:flex; gap:0;
}
.sp-pts li{
  flex:1; min-width:0; padding:0 clamp(10px, 2vw, 20px);
  border-left:2px solid rgba(255,255,255,.35);
  font-size:clamp(11px, 1.4vw, 13px); line-height:1.65; opacity:.9;
}
.sp-pts li:first-child{ border-left:0; padding-left:0; }
.sp-pts b{ display:block; font-size:clamp(13px, 1.8vw, 16px); opacity:1; }

.sp-foot{
  flex:none;
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px;
  padding-top:clamp(10px, 2vh, 18px); border-top:2px solid rgba(255,255,255,.35);
  font-size:clamp(11px, 1.3vw, 13px);
}
.sp-foot a{ text-decoration:none; }
.sp-foot a:hover{ text-decoration:underline; }
.sp-copy{ margin-left:auto; opacity:.7; }

@media (max-width:560px){
  .sp{ padding:20px; gap:16px; }
  .sp-logo{ width:min(540px, 94%); }
  .sp-pts{ flex-direction:column; gap:8px; }
  .sp-pts li{ border-left:0; padding-left:0; }
  .sp-pts b{ display:inline; }
  .sp-pts b::after{ content:"　"; }
  .sp-pts span{ opacity:.85; }
  .sp-copy{ margin-left:0; width:100%; }
}

/* 高さが足りない画面（横向きのスマホなど）では、切り落とすより送れるようにする。
   規約や問い合わせに辿り着けなくなるほうが困るため。 */
@media (max-height:430px){
  body.splash{ overflow:auto; height:auto; min-height:100vh; }
  .sp-wave{ display:none; }
}

/* 押せる案内のリンク（メールの下書きを開くもの）は、文中でも目立たせる */
.note a{ font-weight:bold; }

/* 1件のページと再生バーの投稿者名は、押せることが分かるようにする */
.single .track-who a{ color:var(--ink-dim); text-decoration:underline; text-underline-offset:2px; }
.single .track-who a:hover{ color:var(--blue); }
.nowbar-who:hover{ color:var(--blue); text-decoration:underline; }

/* ─────────────────────────────────────────────
   中身が短いページでフッターが画面の途中に浮かないよう、下に押しつける。
   ⚠️ 消さないこと。フッターには利用規約と削除依頼のリンクがある。
      権利侵害の申告窓口は、その音声が出ているページから辿れる必要がある。
   トップ（.splash）は自前で高さを持っているので対象外。
   ───────────────────────────────────────────── */
body:not(.splash){
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100svh;
}
body:not(.splash) main{ flex:1 0 auto; }
/* 余白は main の下側が持つので、ここでは足さない（足すと画面からはみ出す） */
body:not(.splash) .site-foot{ flex:none; margin-top:0; }