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

   モチーフ: キービジュアル(_src/brand/key-visual.jpg)そのものが雑誌風コラージュ
   (スタンプ枠・ステッカー・チェック柄・ハーフトーン・破れた紙片)なので、それをページ全体の語彙にする。
   実画面でのレビューを2回経て、次を直した:
   - 装飾がすべて背景と同化する薄い色で塗られていた → 装飾専用の濃い色(紺・ペリウィンクル・黒)を導入
   - 見出し下の三角の繰り返しが「区切り線の飾り」にしか見えなかった → 廃止し、節の境目(紺の帯の上端)に
     1か所だけ大きな破れを入れる
   - 紺の帯の上で紺のテープが同化していた(同じ問題が場所を変えて再発) → 帯の中だけテープの地と文字を反転
   - 中身が空の3枚カードが、ページで最も強調された場所(紺の帯)を占めていた → 1行の案内文に縮小し、
     DEBUT バナーだけを帯の主役にする
   ========================================================== */

:root {
  /* 装飾専用(文字色ではないので、読みやすさの検査の対象外)。
     紺・ペリウィンクル・黒は、キービジュアルの地色・シルエット・市松から。
     ペリウィンクル地に白文字を乗せるとコントラスト比 2.09 で不合格になるため、
     文字を乗せるときは黒(8.19)か、地を紺/黒にして白文字(13.6)にする */
  --ink-navy: #1f2a5c;
  --kv-violet: #a8aef5;
  --kv-black: #1a1a2a;
}

body {
  overflow-x: hidden;
  /* 紙にハーフトーン(網点)を敷いた質感。装飾のみなので、文字とのコントラスト検査の対象外 */
  background-image: radial-gradient(circle, rgba(31, 42, 92, .1) 1px, transparent 1.3px);
  background-size: 16px 16px;
}

main {
  max-width: var(--maxw);
  margin: 0 auto;
}

.sec {
  position: relative;
  padding: 0 20px 56px;
}

/* ---------- トップバー(ページ内メニュー) ---------- */
/* 開閉の仕組み(表示・非表示、aria の書き換え)は style.css / script.js。見た目だけここに書く */

/* 不透明な白だと、固定した状態でスクロールしたときにキービジュアル上部が唐突に隠れて見える
   (指摘を受けて修正)。半透明+ぼかしにして、隠れている部分もうっすら透けるようにする。
   script.js を触らずに直せる範囲(スクロール量で分岐する処理は追加しない) */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--kv-black);
}

.brand {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--accent);
  text-decoration: none;
}

.nav-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  position: absolute;
  left: 9px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}

.nav-toggle-bar { top: 50%; transform: translateY(-50%); }
.nav-toggle-bar::before { content: ""; top: -7px; }
.nav-toggle-bar::after { content: ""; top: 7px; }

.topbar.is-open .nav-toggle-bar { background: transparent; }
.topbar.is-open .nav-toggle-bar::before { top: 0; transform: rotate(45deg); }
.topbar.is-open .nav-toggle-bar::after { top: 0; transform: rotate(-45deg); }

#siteNav {
  display: flex;
  gap: 4px;
}

#siteNav a {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

#siteNav a:hover {
  color: var(--accent);
}

@media (max-width: 720px) {
  #siteNav {
    flex-direction: column;
    gap: 2px;
    padding: 6px 16px 16px;
    background: var(--surface);
    border-bottom: 2px solid var(--kv-black);
  }

  #siteNav a {
    padding: 10px 12px;
  }
}

/* ---------- セクション見出し(テープ止めの紙片) ---------- */

.sec-head {
  margin: 0 0 28px;
  text-align: center;
}

/* 紺×黒の縞(白文字がどちらの縞でも読める組み合わせ)+ 濃い縁 + 硬い落ち影 */
.tape {
  display: inline-block;
  padding: 6px 18px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  background: repeating-linear-gradient(45deg, var(--ink-navy), var(--ink-navy) 6px, var(--kv-black) 6px, var(--kv-black) 12px);
  border: 1.5px solid var(--kv-black);
  box-shadow: 3px 3px 0 var(--kv-black);
  transform: rotate(-3deg);
}

#gallery .tape {
  transform: rotate(3deg);
}

/* 紺の帯の中では、紺×黒の縞が背景の紺に沈んで見えない(白フチと同じ「同化」問題)。
   帯の中だけ、地をペリウィンクル・文字を黒に反転する */
.status-band .tape {
  color: var(--kv-black);
  background: var(--kv-violet);
  transform: rotate(3deg);
}

.sec-head h2 {
  margin: 0;
  /* 22-28pxだとテープ(12px)との対比が弱く、見出しが添え物に見えていた(指摘を受けて拡大) */
  font-size: clamp(32px, 9vw, 48px);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink);
}

.status-band .sec-head h2 {
  color: #fff;
}

/* ---------- ヒーロー(キービジュアル + プロフィール) ---------- */

.hero {
  padding: 0 0 48px;
}

.hero-visual {
  margin: 0;
}

/* 幅いっぱい・高さは比率どおり。以前は max-height: 56vh で上から押しつぶし、
   広い画面では横長の箱に縦長の絵が小さく収まって余白だらけになっていた(レビューで指摘) */
.hero .kv {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 0 0 28px 28px;
  box-shadow: var(--shadow);
}

/* キービジュアル切り替えの矢印・ドット・一時停止ボタン。style.css は表示/非表示だけを決め、
   見た目は無指定(既定のボタン)のままだった。2枚目以降のプレビューで気づいた(指摘を受けて追加) */
.kv-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px auto 0;
  /* .profile-card の -24px の重なりを打ち消すだけだと計算上の隙間が0になり、
     カードの縁取り(白+黒のリング、外側に6.5pxはみ出す)がボタンに触れて見える(指摘で修正)。
     見た目の余白が残るよう、少し多めに逃がす */
  margin-bottom: 36px;
}

.kv-nav {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--kv-black);
  border-radius: 999px;
  background: #fff;
  color: var(--kv-black);
  font-size: 16px;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--kv-black);
  cursor: pointer;
}

.kv-nav:hover {
  background: var(--accent-soft);
}

.kv-toggle {
  font-size: 12px;
}

.kv-dots {
  display: flex;
  gap: 6px;
}

.kv-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1.5px solid var(--kv-black);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.kv-dot[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
}

/* スマホ幅では前後の矢印を隠す。キービジュアル自体をスワイプで送れるので、
   スワイプと機能が重複する(指摘を受けて追加)。位置を示すドットと、
   スワイプでは代われない一時停止ボタンは残す */
@media (max-width: 720px) {
  .kv-nav:not(.kv-toggle) {
    display: none;
  }
}

.profile-card {
  max-width: 420px;
  /* -40pxだとスマホでキービジュアル右下のロゴに重なって隠れていた(レビューで指摘)。-24pxに縮めて逃がす。
     左右の14pxは、白フチ+濃い縁の影が画面端で切れないための逃げ */
  margin: -24px 14px 0;
  padding: 30px 24px 26px;
  background: var(--surface);
  border-radius: var(--radius);
  /* 白いふち + 濃い縁 + 硬い落ち影で「切り抜いて貼ったステッカー」に見せる。
     白フチだけだと白背景に同化して見えなかった(レビューで指摘) */
  box-shadow: 0 0 0 5px #fff, 0 0 0 6.5px var(--kv-black), 5px 5px 0 rgba(31, 42, 92, .35);
  text-align: center;
  position: relative;
}

.profile-name {
  margin: 0;
  font-size: clamp(44px, 13vw, 72px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--accent);
}

.profile-kana {
  margin-left: 10px;
  font-size: clamp(14px, 4vw, 17px);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

/* ロゴ画像が届いたときに使う。.profile-name(文字の名前)の代わりに、
   images.md の規約どおり Hero の <img> として貼る(今は brief.md のロゴ欄が空なので未使用) */
.profile-logo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
}

.profile-catch {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--ink);
}

.profile-birthday {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 20px 0 0;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--kv-black);
  transform: rotate(-6deg);
}

.profile-label {
  font-size: 11px;
  letter-spacing: .08em;
  opacity: .8;
}

/* ファンマーク。以前は18pxの文字が点線の丸枠に埋もれて見えなかった(レビューで指摘)。
   矢印型の紙片に大きく載せ、カードの角からはみ出させる。キービジュアルの「FN 💎🌺」の
   タグと揃うよう、絵文字の前に FN のラベルを足した(レビューで「何の絵文字か分からない」と指摘) */
.fanmark-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 -8px;
  padding: 10px 14px 10px 22px;
  background: var(--kv-violet);
  color: var(--kv-black);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
  box-shadow: 3px 3px 0 var(--kv-black);
  transform: rotate(4deg);
}

.fanmark-fn {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  opacity: .7;
}

.fanmark-text {
  font-size: 30px;
  line-height: 1;
}

.fanmark-copy {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1.5px solid var(--kv-black);
  border-radius: 999px;
  background: #fff;
  color: var(--kv-black);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.fanmark-copy:hover {
  background: var(--kv-black);
  color: #fff;
}

@media (min-width: 780px) {
  /* 広い画面では、キービジュアルとプロフィールを左右に並べる(スマホの縦積みのまま拡大すると、
     左右に空白だけが残っていた。レビューで指摘)。カードはキービジュアルに少し寄せて重ね、
     傾きも付けて「汎用カードUI」ではなく貼られたステッカーの一部に見せる */
  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 20px;
  }

  .hero-visual {
    flex: 1 1 42%;
  }

  .hero .kv {
    max-width: 480px;
    margin: 0 0 0 auto;
    border-radius: 28px;
  }

  .profile-card {
    flex: 1 1 46%;
    max-width: 440px;
    margin: 0;
    transform: rotate(-2deg);
  }
}

/* ---------- リンク ---------- */

.link-main,
.link-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.link-main {
  margin-bottom: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn-primary {
  width: 100%;
  max-width: 280px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  /* 主ボタンにもステッカーの白フチ+濃い縁を付け、互い違いに傾ける */
  box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px var(--kv-black);
  font-size: 16px;
  transform: rotate(var(--tilt, 0deg));
}

.link-main li:nth-child(1) .btn-primary {
  --tilt: -3deg;
}

.link-main li:nth-child(2) .btn-primary {
  --tilt: 3deg;
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px) rotate(0deg);
}

/* 従のボタンも、黒い細い縁+小さい硬い影を付けて主ボタンと同じステッカーの語彙に揃える
   (以前は薄い灰色の縁だけで、汎用UIに見えた。レビューで指摘) */
.btn-sub {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--kv-black);
  box-shadow: 2px 2px 0 var(--kv-black);
  font-size: 14px;
  font-weight: 500;
}

.btn-sub:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (min-width: 480px) {
  .link-main {
    flex-wrap: nowrap;
  }

  .btn-primary {
    max-width: none;
    flex: 1;
  }

  .profile-card {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- 配信にむけて ---------- */
/* 端から端までの紺の帯にして、他の節と型を変える。帯の上端に、キービジュアルの「Who am I?」の
   紙片のような、不規則な破れ目を1か所だけ大きく入れる(繰り返しの三角の飾りは廃止。レビューで指摘) */

.status-band {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 64px 20px 56px;
  background: var(--ink-navy);
  color: #fff;
}

/* 山の高さと間隔を揃えると、破れではなく幾何学模様に見える(指摘を受けて修正)。
   間隔・深さをばらつかせ、大小混ぜて紙の繊維っぽさを出す */
.status-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 46px;
  background: var(--bg);
  clip-path: polygon(
    0% 0%, 0% 40%, 2% 62%, 5% 20%, 7% 48%, 9% 10%, 12% 55%, 15% 30%, 16% 68%,
    19% 15%, 22% 45%, 24% 5%, 26% 38%, 29% 58%, 32% 22%, 34% 50%, 37% 8%,
    40% 42%, 43% 65%, 45% 18%, 48% 35%, 51% 60%, 53% 12%, 56% 46%, 59% 28%,
    61% 70%, 64% 15%, 67% 40%, 70% 5%, 72% 52%, 75% 25%, 78% 60%, 80% 10%,
    83% 44%, 86% 20%, 88% 65%, 91% 8%, 94% 38%, 97% 55%, 100% 18%, 100% 0%
  );
}

/* DEBUT バナーを帯の主役にする。中身の無い3枚カードは1行の案内文に縮めた(レビューで指摘) */
.debut-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin: 0 auto 32px;
  padding: 14px 36px;
  background: var(--kv-violet);
  color: var(--kv-black);
  box-shadow: 5px 5px 0 var(--kv-black);
  transform: rotate(-5deg);
}

.debut-label {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.debut-date {
  margin: 0;
  font-size: clamp(40px, 12vw, 60px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
}

.status-note {
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .85);
}

.status-note a {
  color: var(--kv-violet);
  font-weight: 700;
}

/* 配信時間・活動履歴に実データが入ったときに使う構造(紺の帯の中)。
   今は brief.md がすべて「未定」なので index.html では使っていないが、
   後で崩れないことを確認するため、先に用意しておく */

.band-sub {
  margin: 36px auto 14px;
  max-width: 480px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--kv-violet);
  text-align: center;
}

.slots,
.history {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 480px;
  display: grid;
  gap: 10px;
}

.slot,
.history li {
  padding: 12px 18px;
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: calc(var(--radius) * .6);
}

.slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.slot-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--kv-violet);
}

.slot-time {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.history li {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.hist-date {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--kv-violet);
  font-variant-numeric: tabular-nums;
}

.history p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .9);
}

/* ---------- ギャラリー ---------- */
/* .sec は上パディング0が既定だが、直前が紺の帯(端から端まで)なので、
   境目の余白が無いとテープが帯にくっついて見える(指摘を受けて追加) */
#gallery {
  padding-top: 48px;
}

.lead {
  margin: 0 0 20px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

.gallery {
  margin-top: 8px;
}

/* 傾きは付けない。row-gap: 0 の詰め段組み(script.js が計算)なので、
   回転させると隣の行の作品に少しでもかぶる */
.art {
  border-radius: calc(var(--radius) * .5);
  overflow: hidden;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px var(--kv-black);
}

.gallery-note {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- 注意事項 ---------- */
/* ギャラリーの後、最後に置く。合わなければここで離れてもらう節なので、
   「配信にむけて」の高揚感(紺の帯)とは切り離し、他の節と同じ明るい背景に静かに置く
   (孤月ユキのサイトでも同じ理由で最後に置いている。ユーザー指摘で移動) */

#rules {
  padding-top: 8px;
}

.rules {
  list-style: none;
  counter-reset: rule;
  margin: 0 auto;
  padding: 0;
  max-width: 480px;
  display: grid;
  gap: 10px;
}

.rules li {
  counter-increment: rule;
  position: relative;
  padding: 12px 18px 12px 46px;
  background: var(--surface);
  border: 1.5px solid var(--kv-black);
  border-radius: calc(var(--radius) * .6);
  box-shadow: 2px 2px 0 var(--kv-black);
}

.rules li::before {
  content: counter(rule, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 900;
  color: var(--accent);
}

.rules p {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

/* ---------- 拡大表示 ---------- */
/* 表示・非表示・前後の切り替えは script.js。色味だけ主色に寄せる */

.lightbox {
  background: rgba(31, 42, 92, .94);
}

.lb-close,
.lb-nav {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.lb-close:hover,
.lb-nav:hover {
  background: rgba(255, 255, 255, .26);
}

#lb-cap {
  color: #f1f3f5;
  font-size: 13px;
  text-align: center;
}

#lb-cap a {
  color: var(--kv-violet);
}

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

.footer {
  margin-top: 8px;
  padding: 28px 20px 40px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  text-align: center;
}

.footer-note {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
}

/* 既定の青リンクのままだと「作りかけ」に見える(レビューで指摘)。装飾色に揃える */
.footer-note a {
  color: var(--ink-navy);
  font-weight: 700;
}

.footer-note a:hover {
  color: var(--accent);
}

.footer .copy {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}