@charset "UTF-8";

/* ============================================================
   南予りゅうか 歌唱曲リスト（非公式ファンサイト）
   デザイン: 妖しのチルレイヴ

   3つのムードに書体を1つずつ割り当て、役割の外では使わない。
     妖        = Zen Antique（古い印刷の明朝）… 名前と見出し
     EDM・機械 = DotGothic16（16ドット）      … 数値・カウンタ・ラベル
     チルかわ  = Zen Maru Gothic（丸ゴシック） … 本文と操作系

   テーブル組み・marquee・アクセスカウンターという古のインターネットの
   骨格は残したまま、拍だけが動く。
   ============================================================ */

:root {
  --bg: #141021;
  --bg-deep: #05040c;
  --panel: #1b1530;
  --line: #3a2f57;
  --line-2: #4b3d72;
  --line-3: #281f42;

  --ink: #ded7ea;
  --ink-2: #c5bcda;
  --ink-3: #9b90b8;
  --ink-4: #9184ba;

  --chill: #a9c6e0;  /* ご本人のアイコン由来。落ち着いた青 */
  --kawa: #f0a8c8;   /* 桜ピンク。強調はここだけ */
  --edm: #c8ff4d;    /* 数値専用のアシッドライム */

  --serif: "Zen Antique", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --dot: "DotGothic16", "MS PGothic", monospace;
  --maru: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "MS PGothic", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  padding: 14px 10px 48px;
  background:
    radial-gradient(circle at 18% 0%, rgba(169, 198, 224, .10), transparent 58%),
    radial-gradient(circle at 88% 8%, rgba(240, 168, 200, .10), transparent 52%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--maru);
  font-size: 13.5px;
  line-height: 1.85;
}

a { color: var(--chill); text-decoration: none; }
a:hover { color: var(--kawa); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--kawa); outline-offset: 2px; }

/* ---------- 外枠 ---------- */
.frame {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--line);
  background: rgba(20, 16, 33, .72);
}

/* ---------- ヘッダー（立ち絵が立つ） ---------- */
.hero {
  display: flex;
  /* 立ち絵の高さで余白が空くので、見出しは中央に合わせて詰める */
  align-items: center;
  gap: 18px;
  padding: 12px 20px 10px;
}

.hero-txt { flex: 1; min-width: 0; }

.eyebrow-d {
  font-family: var(--dot);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--edm);
}

.hero h1 { margin: 4px 0 0; font-weight: 400; }

.h-name {
  display: block;
  font-family: var(--serif);
  font-size: clamp(28px, 6vw, 42px);
  letter-spacing: .16em;
  color: #eae4f2;
  animation: breathe 3.75s ease-in-out infinite alternate;
}

.h-sub {
  display: block;
  font-family: var(--serif);
  font-size: clamp(14px, 2.6vw, 18px);
  letter-spacing: .34em;
  color: var(--chill);
}

.hero .tagline {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
}

@keyframes breathe {
  from { text-shadow: 0 0 10px rgba(169, 198, 224, .35), 0 0 22px rgba(240, 168, 200, .18); }
  to   { text-shadow: 0 0 22px rgba(169, 198, 224, .7),  0 0 46px rgba(240, 168, 200, .4); }
}

.tachie {
  flex: 0 0 auto;
  /* 縦長なので高さで決める。幅で決めると見出しの上に空白が溜まる */
  width: auto;
  height: clamp(112px, 15vw, 170px);
  display: block;
  filter: drop-shadow(0 0 18px rgba(169, 198, 224, .28));
}

/* ---------- 流れる文字 ---------- */
.news {
  display: block;
  margin: 14px 0 0;
  padding: 4px 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--chill);
  font-family: var(--dot);
  font-size: 12px;
}

/* ---------- 呪符めいた区切り ---------- */
.fuda {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--dot);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ink-4);
  white-space: nowrap;
}

.fuda::before,
.fuda::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

/* ---------- レイアウト（テーブル組み） ---------- */
.layout {
  width: 100%;
  border-collapse: collapse;
  /* セットリストの nowrap が中身の最小幅を決めてしまい、auto レイアウトだと
     表が外枠より広く確定して突き破る。幅は先頭行の指定だけで決める */
  table-layout: fixed;
}
.layout > tbody > tr > td { vertical-align: top; }

.side {
  width: 172px;
  min-width: 172px;
  padding: 14px 10px;
  background: rgba(5, 4, 12, .45);
  border-right: 1px solid var(--line);
}

.main { padding: 14px 16px 24px; }

/* ---------- サイドバー ---------- */
.side-title {
  margin: 16px 0 6px;
  font-family: var(--dot);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--edm);
}

.side-title:first-child { margin-top: 0; }

.menu { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.menu li { margin: 4px 0; }
.menu a { display: block; }

.counter {
  padding: 3px 0;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  color: var(--edm);
  font-family: var(--dot);
  font-size: 18px;
  letter-spacing: 4px;
  text-align: center;
  text-shadow: 0 0 10px rgba(200, 255, 77, .45);
}

.counter-note {
  margin-top: 4px;
  font-size: 10.5px;
  text-align: center;
  color: var(--ink-3);
}

.kiriban {
  margin-top: 6px;
  padding: 4px;
  border: 1px dashed var(--kawa);
  background: rgba(240, 168, 200, .1);
  color: var(--kawa);
  font-size: 10.5px;
  text-align: center;
  animation: blink 1.2s steps(1) infinite;
}

.stat-box { font-size: 11.5px; color: var(--ink-3); }
.stat-box div { display: flex; justify-content: space-between; gap: 6px; }
.stat-box b { font-family: var(--dot); color: var(--edm); font-weight: 400; }

.stat-box .updated {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  text-align: center;
  color: var(--ink-4);
}

.link-box { font-size: 12px; }
.link-box a { display: block; margin: 2px 0; }
.link-note { margin-top: 4px; font-size: 9.5px; color: var(--ink-4); }

/* ---------- セクション ---------- */
.anchor { display: block; position: relative; top: -12px; visibility: hidden; }

.section { margin-bottom: 26px; }

.section-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .14em;
  color: #eae4f2;
}

.new-tag {
  margin-left: 6px;
  padding: 1px 5px;
  background: var(--kawa);
  color: #2a1330;
  font-family: var(--dot);
  font-size: 10px;
  vertical-align: 2px;
  animation: blink 1.4s steps(1) infinite;
}

/* ---------- 読み込み中 / エラー ---------- */
.notice {
  padding: 14px;
  border: 1px dashed var(--line-2);
  background: rgba(5, 4, 12, .5);
  font-size: 12.5px;
  text-align: center;
  color: var(--ink-3);
}

.notice.error {
  border-color: #d98a95;
  background: rgba(90, 30, 40, .35);
  color: #f0c3c8;
}

/* ---------- 今日の一曲（ブラウン管） ---------- */
.today {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: rgba(5, 4, 12, .55);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.crt {
  position: relative;
  flex: 0 0 clamp(150px, 34vw, 228px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: var(--bg-deep);
}

.crt img { width: 100%; height: 100%; object-fit: cover; display: block; }

.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 45%, transparent 55%, rgba(5, 4, 12, .55));
  pointer-events: none;
}

.crt .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 3px 6px;
  background: rgba(5, 4, 12, .82);
  color: var(--chill);
  font-family: var(--dot);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.today-body { flex: 1; min-width: 0; }
.today-body .t-title { font-size: 17px; font-weight: 700; color: #ffd9e9; text-shadow: 0 0 14px rgba(240, 168, 200, .45); }
.today-body .t-artist { font-size: 12px; color: var(--chill); }
.today-body .t-note { margin-top: 4px; font-size: 10.5px; color: var(--ink-4); }

/* ---------- 操作パネル ---------- */
.ctrl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 11.5px;
}

.ctrl label { color: var(--ink-3); font-family: var(--dot); font-size: 10px; letter-spacing: .12em; }

#search {
  width: min(280px, 60vw);
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(5, 4, 12, .6);
  color: var(--ink);
  font-family: var(--maru);
  font-size: 12.5px;
}

#search::placeholder { color: var(--ink-4); }

button, select {
  padding: 3px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--ink-2);
  font-family: var(--maru);
  font-size: 11.5px;
  cursor: pointer;
}

button:hover, select:hover { border-color: var(--kawa); color: var(--ink); }

.genre-filter { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }

.genre-btn { font-weight: 700; }

.genre-btn.on {
  background: var(--kawa);
  border-color: var(--kawa);
  color: #2a1330;
}

.result-count {
  margin-bottom: 6px;
  /* 数値でもラベルでもなく文なので、丸ゴシック側に戻す */
  font-size: 11.5px;
  color: var(--ink-3);
}

/* ---------- 曲テーブル ---------- */
.table-scroll { overflow-x: auto; }

table.songs {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12.5px;
}

table.songs th {
  padding: 5px 8px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--dot);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-align: left;
  color: var(--ink-3);
  white-space: nowrap;
}

table.songs td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line-3);
  vertical-align: top;
  overflow-wrap: anywhere;
}

table.songs tbody tr:hover td { background: rgba(169, 198, 224, .06); }

.col-no { width: 40px; }
.col-title { width: 36%; }
.col-artist { width: 22%; }
.col-genre { width: 92px; }
.col-count { width: 52px; }
.col-date { width: 76px; }

.cell-no, .cell-count, .cell-date {
  font-family: var(--dot);
  font-size: 11.5px;
  text-align: right;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cell-count.count-multi { color: var(--edm); }

.song-title { color: #eae4f2; font-weight: 700; }
.song-title:hover { color: var(--kawa); }
.song-artist { color: var(--chill); font-size: 11.5px; }

.note-tag {
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(240, 168, 200, .14);
  color: #ffd9e9;
  font-size: 9.5px;
  white-space: nowrap;
}

.genre-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(169, 198, 224, .12);
  color: var(--chill);
  font-size: 10px;
  white-space: nowrap;
}

.more-links { margin-top: 3px; font-family: var(--dot); font-size: 10px; }
.more-links a { margin-right: 6px; white-space: nowrap; }

.empty { padding: 16px; text-align: center; color: var(--kawa); font-size: 12.5px; }

/* せまい画面では表が横にはみ出すので、スクロールできることを明示する */
.scroll-hint { display: none; }

/* ---------- ランキング ---------- */
table.ranking { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.ranking td { padding: 5px 8px; border-bottom: 1px solid var(--line-3); }

.rank-no {
  width: 52px;
  font-family: var(--dot);
  font-size: 12px;
  text-align: center;
  color: var(--edm);
  white-space: nowrap;
}

.rank-count {
  width: 60px;
  font-family: var(--dot);
  text-align: right;
  color: var(--edm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rank-bar {
  display: block;
  height: 6px;
  margin-top: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kawa), var(--chill));
}

.rank-note { margin-top: 8px; font-size: 10.5px; color: var(--ink-4); }

/* ---------- 配信の棚 ---------- */
.shelf { display: flex; flex-direction: column; gap: 14px; }

.stream {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: rgba(5, 4, 12, .4);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.jacket {
  flex: 0 0 clamp(112px, 22vw, 168px);
  align-self: flex-start;
}

.jacket .art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--bg-deep);
}

.jacket .art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.jacket .art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.jacket .meta {
  margin-top: 4px;
  font-family: var(--dot);
  font-size: 10px;
  color: var(--ink-3);
}

.jacket .meta b { color: var(--edm); font-weight: 400; }

.kind-badge {
  display: inline-block;
  margin-right: 5px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(240, 168, 200, .18);
  color: #ffd9e9;
  font-family: var(--dot);
  font-size: 9.5px;
  vertical-align: 1px;
}

.kind-badge.other {
  background: rgba(169, 198, 224, .16);
  color: var(--chill);
}

.kind-badge.short {
  background: rgba(200, 255, 77, .14);
  color: var(--edm);
}

/* 棚の「つぎの24本を見る」 */
.shelf-more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  font-family: var(--dot);
  font-size: 12px;
}

/* 歌以外の配信の目次 */
.chapters { margin-top: 4px; font-size: 11.5px; line-height: 1.95; }
.chapters div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapters a { color: var(--ink-2); }
.chapters a:hover { color: var(--kawa); }

.stream.is-other { border-color: var(--line-3); }

.stream-body { flex: 1; min-width: 0; }

.stream-title {
  display: block;
  font-size: 12.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setlist { margin-top: 4px; font-size: 11.5px; line-height: 1.95; }
.setlist div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-time { margin-right: 6px; font-family: var(--dot); font-size: 10.5px; color: var(--edm); }

/* ---------- 記念絵 ---------- */
/* 原画が縦長（1200x1600 / 1400x2129）なので、幅を伸ばすと高さが暴れる。
   上限をつけて、キャプション下に死に空白が出ないよう上端で揃える */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.gallery figure { margin: 0; flex: 0 1 260px; max-width: 300px; }

.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line-2);
  border-radius: 6px;
}

.gallery figcaption { margin-top: 5px; font-size: 10.5px; color: var(--ink-4); }

/* ---------- プロフィール / 公式リンク ---------- */
table.profile, table.links { width: 100%; border-collapse: collapse; font-size: 12.5px; }

table.profile th, table.links th {
  width: 122px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-3);
  font-family: var(--dot);
  font-size: 10px;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  color: var(--ink-3);
  white-space: nowrap;
}

table.profile td, table.links td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-3);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.quote { color: #eae4f2; }
.quote-src { margin-top: 8px; font-size: 10.5px; color: var(--ink-4); }
.link-desc { font-size: 10.5px; color: var(--ink-3); }

/* ---------- このページについて ---------- */
.about p { margin: 0 0 10px; max-width: 62ch; }
.small { font-size: 10.5px; color: var(--ink-3); }

.under-construction {
  margin-top: 12px;
  padding: 8px;
  border: 1px dashed var(--edm);
  background: rgba(200, 255, 77, .06);
  color: var(--edm);
  font-family: var(--dot);
  font-size: 11px;
  text-align: center;
}

/* ---------- フッター ---------- */
footer {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
}

footer .credit { color: var(--ink-2); }

.banner-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin: 10px 0;
}

.mini-banner {
  padding: 3px 7px;
  border: 1px solid var(--line-2);
  background: rgba(5, 4, 12, .5);
  color: var(--ink-3);
  font-family: var(--dot);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.totop { margin-top: 8px; font-size: 11.5px; }

/* ---------- 点滅（懐かしのblink） ---------- */
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- せまい画面 ---------- */
@media (max-width: 700px) {
  body { padding: 8px 4px 32px; }

  .hero { padding: 14px 12px 0; gap: 10px; }

  .layout,
  .layout > tbody,
  .layout > tbody > tr,
  .layout > tbody > tr > td {
    display: block;
    width: auto;
  }

  .side { border-right: 0; border-bottom: 1px solid var(--line); }
  .menu { display: flex; flex-wrap: wrap; gap: 2px 10px; }

  /* 指で押せる大きさにする */
  .menu a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 4px;
  }

  button, select, #search {
    min-height: 40px;
    padding: 6px 14px;
  }

  .scroll-hint {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--ink-4);
  }
  .main { padding: 14px 12px 20px; }
  .today { flex-direction: column; align-items: stretch; }
  .crt { flex: none; width: 100%; }
  .stream { flex-direction: column; }
  .jacket { flex: none; width: 100%; max-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .h-name, .blink, .new-tag, .kiriban { animation: none; }
}