/* YUMEGROOVE 試聴プロトタイプ v1 — 低視力対応（本文18px以上・高コントラスト・フォーカス可視・大タップ領域） */
:root{
  --bg:#0a0a0c;
  --panel:#16161a;
  --panel-2:#1e1e24;
  --fg:#f5f5f7;        /* 対 --bg コントラスト比 約18:1 */
  --fg-dim:#c8c8d0;    /* 対 --bg 約11:1 */
  --gold:#f0d67b;      /* 対 --bg 約12:1 */
  --line:#3a3a44;
  --focus:#7fd3ff;
  --ok:#5ad18a;
  --ng:#ff6b6b;
  --tap:56px;          /* 最小タップ領域 */
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Noto Sans JP","Segoe UI",system-ui,sans-serif;
  font-size:20px;            /* 本文20px（要件18px以上） */
  line-height:1.7;
  -webkit-text-size-adjust:100%;
}

/* フォーカスは常に太く可視 */
:focus-visible{
  outline:4px solid var(--focus);
  outline-offset:3px;
  border-radius:6px;
}

header{
  padding:20px 24px;
  border-bottom:3px solid var(--gold);
  background:linear-gradient(180deg,#141418,#0a0a0c);
  position:sticky; top:0; z-index:20;
}
.brand{
  font-size:34px; font-weight:900; letter-spacing:.14em;
  color:var(--gold); margin:0;
}
.tagline{font-size:18px; color:var(--fg-dim); margin:6px 0 0}

main{padding:24px; max-width:1100px; margin:0 auto}

h2{font-size:30px; margin:28px 0 16px; color:var(--gold)}

/* パンくず */
.crumbs{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:14px 0; font-size:19px;
}
.crumbs button{
  min-height:48px; padding:8px 16px;
  background:var(--panel-2); color:var(--fg);
  border:2px solid var(--line); border-radius:10px;
  font-size:19px; font-weight:700; cursor:pointer;
}
.crumbs button:hover{border-color:var(--gold); color:var(--gold)}
.crumbs .sep{color:var(--fg-dim); font-size:22px}
.crumbs .here{color:var(--fg-dim); padding:8px 4px}

/* チャンネル一覧 */
.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.ch-card{
  display:flex; align-items:center; gap:18px; width:100%;
  min-height:104px; padding:20px 22px; text-align:left;
  background:var(--panel); color:var(--fg);
  border:3px solid var(--line); border-left-width:12px;
  border-radius:14px; cursor:pointer; font-family:inherit;
}
.ch-card:hover{border-color:var(--gold); background:var(--panel-2)}
.ch-card .num{
  font-size:24px; font-weight:900; letter-spacing:.06em;
  min-width:62px; color:var(--bg); background:var(--accent,#888);
  padding:6px 10px; border-radius:8px; text-align:center;
}
.ch-card .name{font-size:26px; font-weight:800; margin:0}
.ch-card .cnt{font-size:18px; color:var(--fg-dim); margin:2px 0 0}

/* フォルダ/曲リスト */
.list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.row{
  display:flex; align-items:center; gap:16px; width:100%;
  min-height:var(--tap); padding:14px 18px; text-align:left;
  background:var(--panel); color:var(--fg);
  border:2px solid var(--line); border-radius:12px;
  font-size:20px; font-family:inherit; cursor:pointer;
}
.row:hover{border-color:var(--gold); background:var(--panel-2)}
.row .ic{font-size:24px; min-width:30px; color:var(--gold)}
.row .label{flex:1; font-weight:700; word-break:break-word}
.row .meta{font-size:17px; color:var(--fg-dim); white-space:nowrap}
.row.playing{border-color:var(--gold); background:#2a2418}
.row.playing .label{color:var(--gold)}

/* 再生バー */
#player{
  position:sticky; bottom:0; z-index:30;
  background:var(--panel-2); border-top:3px solid var(--gold);
  padding:16px 24px;
}
#player[hidden]{display:none}
.pl-title{font-size:21px; font-weight:800; margin:0 0 4px; color:var(--gold); word-break:break-word}
.pl-sub{font-size:17px; color:var(--fg-dim); margin:0 0 10px}
audio{width:100%; height:52px}
.pl-note{font-size:16px; color:var(--fg-dim); margin:8px 0 0}

/* 状態表示 */
.status{
  font-size:19px; padding:14px 18px; border-radius:10px;
  border:2px solid var(--line); background:var(--panel);
}
.status.err{border-color:var(--ng); color:#ffc9c9}
.status.ok{border-color:var(--ok); color:#c9ffd9}
.hint{font-size:17px; color:var(--fg-dim)}

@media (max-width:640px){
  body{font-size:18px}
  .brand{font-size:26px}
  h2{font-size:24px}
  main{padding:16px}
  .ch-card .name{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}