/*
 * 歌ってみたメモリーズ2026 デザイントークン
 * 使い方とルールは mockup/DESIGN.md を参照。画面のCSSに色・文字サイズ・余白などの値を直接書かず、ここの変数を使う。
 * 例外（ロゴの固定描画など）は DESIGN.md の「例外」に従い、design-exception で囲む。
 */
:root {
  --mini-player-width: 360px;
  --mini-player-controls-height: 28px;
  --side-panel-width: 400px;
  --side-panel-max-width: 640px;
  --side-panel-min-width: 320px;
  /* サイドパネルの幅：作品ページの右の列（左は16:9のプレイヤー列）に合わせる。screen-bindings.css の .work-page と同じ (100vh - 200px) * 16 / 9。% は表示領域の幅 */
  --side-panel-size: clamp(var(--side-panel-width), calc(100% - var(--sp-16) * 3 - (100vh - 200px) * 16 / 9), var(--side-panel-max-width));
  --player-min-height: 200px;
  /* ブランド色（ロゴ・2025年の告知画像から） */
  --c-navy: #2E3192;
  --c-navy-deep: #192A6B;
  --c-pink: #D12A76;
  --c-pink-strong: #B32163;
  --c-pink-bright: #FF4F9E; /* 装飾のみ。白地の文字には使わない */
  --c-red: #C8001A;
  --c-aqua: #4DD8E6; /* ロゴの水色。装飾のみ。文字には --c-aqua-text */
  --c-aqua-text: #1F7E8C;
  --c-purple-text: #7552A3; /* 協力クリエイターの文字・操作。白地で6.01 */
  --c-yellow: #FFF6A5; /* ロゴの黄。背景・強調のみ */
  --c-lime: #B5EE7B; /* ロゴの黄緑。ページ見出しの影のみ */
  --c-gold: #C99430; /* 金の線（10選・評価） */
  --c-gold-text: #73531D;
  --c-star: #FFCC43; /* 評価の星 */
  --c-white: #FFFFFF;

  /* 外部サービスの認証ボタン */
  --c-x-black: #000000; /* Xログインの背景・枠。白文字で21 */

  /* 役割の色：投稿者・視聴者・協力クリエイター・共通の案内で統一して使う */
  --c-role-creator: var(--c-pink-strong);
  --c-role-viewer: var(--c-aqua-text);
  --c-role-collaborator: var(--c-purple-text);
  --c-role-common: var(--c-navy);

  /* 文字 */
  --c-text: var(--c-navy);
  --c-text-sub: #5A5C8F;
  --c-text-inverse-sub: #D6D8F0; /* 紺・濃い背景の上の補足文字 */

  /* 線 */
  --c-border: #D6D8F0;
  --c-border-input: #8587B8; /* 操作できる部品の薄い枠（選択欄・チェック項目）・点線の囲み・無効表示・プレースホルダー。入力欄の標準の枠は 2px の --c-navy */
  --c-pink-border: #EDABCE;
  --c-aqua-border: #85D1DF;
  --c-lilac-border: #B9A5E0;
  --c-yellow-border: #E5D48A;
  --c-success-border: #88CFBE;

  /* 背景 */
  --c-bg: var(--c-white);
  --c-bg-soft: #F4F4FD;
  --c-bg-muted: #E8E9F7; /* 進捗バーの溝・無効のボタン */
  --c-bg-pink: #FFF0F7;
  --c-bg-aqua: #F0FCFF;
  --c-bg-lilac: #F5F0FF;
  --c-bg-yellow: #FFFBE8;
  --c-deco-pink: #FFE1EE; /* 背景の図形・グラデーション用 */
  --c-deco-aqua: #DDF8FC;
  --c-deco-lilac: #ECE6FF;
  --c-glass: #FFFFFFD9; /* 色の上に重ねる半透明の白 */
  --c-glass-line: #FFFFFF80;
  --c-overlay: #121A46B3; /* ダイアログの背面 */

  /* 状態 */
  --c-success: #1F7A5A;
  --c-success-bg: #E9F8F1;
  --c-warning: var(--c-gold-text);
  --c-warning-bg: var(--c-bg-yellow);
  --c-error: var(--c-red);
  --c-error-bg: #FFF0F1;

  /* フォント（太さは 400・700・800・900 の4つ。本文・見出しの書体は 400・700 だけ読み込み、800・900 も 700 で表示する。丸ゴシックは 800・900 を読み込む） */
  --font-body: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-heading: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif; /* 見出しは本文と同じ書体 */
  --font-display: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif; /* 26px以上の大きなタイトル専用（丸ゴシック） */

  /* 文字サイズ */
  --fs-10: 10px; /* 注記専用 */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-date: 36px; /* トップの開催日時の月日・時刻の数字だけ */
  --fs-hero: 52px; /* トップのカウントダウンの数字だけ */

  /* 通常UIの文字は役割で統一。数値トークンは固定描画にも使うため保持する。 */
  --fs-ui-page: var(--fs-22);
  --fs-ui-heading: var(--fs-16);
  --fs-ui-emphasis: var(--fs-14);
  --fs-ui-body: var(--fs-13);
  --fs-ui-compact: var(--fs-12);
  --fs-ui-meta: var(--fs-11);
  --fs-ui-small: var(--fs-10);
  --fs-ui-input: var(--fs-16);

  /* 行間 */
  --lh-default: normal; /* モックで行間を指定していない部品の既定値 */
  --lh-tight: 1.25; /* 見出し・大きな数字 */
  --lh-normal: 1.5; /* ボタン・ラベルなど1〜2行の短い文字 */
  --lh-relaxed: 1.75; /* 本文・説明 */

  /* 余白（padding・margin・gap） */
  --sp-2: 2px; /* 小さなバッジ内や文字の位置合わせだけ */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;

  /* 角丸（円は 50% と書く） */
  --radius-s: 6px; /* タグ・小さなバッジ */
  --radius-m: 10px; /* ボタン・入力欄・小さな囲み */
  --radius-l: 14px; /* カード */
  --radius-xl: 20px; /* 大きなパネル・ダイアログ */
  --radius-pill: 999px;

  /* 影 */
  --shadow-offset: 0 3px 0; /* ずらした線の影。色を続けて書く：box-shadow: var(--shadow-offset) var(--c-navy) */
  --shadow-float: 0 12px 44px #101A5340; /* メニュー・ダイアログだけ */
  --shadow-title: 3px 3px 0 var(--c-lime); /* ページ見出し */
  --shadow-text-outline: 2px 0 0 var(--c-navy), -2px 0 0 var(--c-navy), 0 2px 0 var(--c-navy), 0 -2px 0 var(--c-navy), 1.5px 1.5px 0 var(--c-navy), -1.5px -1.5px 0 var(--c-navy), 1.5px -1.5px 0 var(--c-navy), -1.5px 1.5px 0 var(--c-navy); /* ロゴ風の縁取り文字 */

  /* ボタン・入力欄の高さ（タップ領域は44px以上） */
  --control-h: 44px;
  --control-h-lg: 52px; /* 画面の主要な操作 */
  --tag-h: 24px;

  /* フォーカス表示 */
  --focus-ring: none;
  --focus-ring-inverse: none;
  --focus-offset: 2px;
  --shadow-focus: inset 0 0 0 1px currentColor;

  /* 操作演出：短い反応・切り替え・一度だけのきらめき */
  --motion-background-spin: 180000ms; /* 背景が等速で一周回転する周期 */
  --motion-background: 36000ms; /* 背景の図形がゆっくり漂う基準周期 */
  --motion-control: 140ms;
  --motion-mini-player: 320ms;
  --motion-reveal: 180ms;
  --motion-header-retract: 320ms;
  --motion-sparkle: 640ms;
  --motion-footprint-pop: 480ms; /* 足跡マークが塗りつぶされる瞬間の弾みと輪の広がり */
  --motion-hero-fade: 900ms; /* ロゴが浮かび上がるまで */
  --motion-hero-enter: 2600ms; /* ロゴがじわじわ寄る長さ。呼びかけが出終わるころに揃える */
  --motion-hero-decoration: 2600ms;
  --motion-hero-catch: 700ms; /* ロゴの下の呼びかけの1文字分。最後の文字が終わるまでを --motion-hero-enter に揃える */
  --motion-hero-catch-delay: 800ms;
  --motion-hero-catch-step: 45ms;
  --motion-award-cycle: 10000ms;
  --motion-selection-viewer: 360ms; /* 数え上げに合わせて選んだ人のアイコンが1つずつ現れる */
  --motion-selection-count: 2400ms; /* みんなの10選で選ばれた人数（20人前後まで）を0から数え上げる */
  --motion-all-heard-burst: 2600ms; /* 全作品視聴の視聴状況が画面に入ったときの星が弾けて消えるまで */
  --motion-loading-delay: 500ms; /* 短い読み込みでは表示しない */
  --motion-loading-fade: 150ms; /* 長引いた読み込みだけ穏やかに表示する */
  --motion-loading: 2400ms; /* 読み込み中だけの穏やかな波形。操作の完了は待たせない */
  --motion-telop: 20000ms; /* リプライのテロップ。長い本文は移動距離に合わせて延長 */
  --ease-festival: cubic-bezier(.2, .8, .2, 1);
  --ease-hero-settle: cubic-bezier(.16, 1, .3, 1);
  --ease-hero-drift: cubic-bezier(.3, .5, .5, 1); /* ロゴがほぼ一定の速さで寄る */

  /* ブレークポイント（メディアクエリでは変数が使えないため数値で書く）：360px・600px・960px */

  /* PCレイアウト（幅960px以上）の中身の最大幅 */
  --layout-max: 1120px; /* TOP・一覧・マイページなど */
  --layout-reading: 760px; /* 文章・フォームが中心の画面 */
}

/* PC（幅960px以上）は画面から目が離れるため、本文〜小見出しの文字を一段大きくする。
   :root ではなく body で上書きし、協力フライヤーの画像（ルートの値で描く固定サイズの画像）は変えない */
@media (min-width: 960px) {
  body {
    /* M PLUS 1p の太字は画素の粗いPC画面で画数の多い漢字がつぶれるため、本文と見出しを Noto Sans JP にする。丸ゴシック（--font-display）は大きなタイトル専用 */
    --font-body: "Noto Sans JP", "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --font-heading: "Noto Sans JP", "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    /* 大きさは plugmuster.com のPC表示（本文16px・カード見出し22px・セクション見出し30px台）に合わせる */
    --fs-10: 12px;
    --fs-11: 13px;
    --fs-12: 16px;
    --fs-13: 16px;
    --fs-14: 17px;
    --fs-16: 19px;
    --fs-18: 22px;
    --fs-22: 26px;
    --fs-28: 34px;
    --fs-date: 44px;
    --fs-hero: 64px;
    /* 同じbodyで再定義し、PCの基礎値を役割にも反映する。 */
    --fs-ui-page: var(--fs-22);
    --fs-ui-heading: var(--fs-16);
    --fs-ui-emphasis: var(--fs-14);
    --fs-ui-body: var(--fs-13);
    --fs-ui-compact: var(--fs-11);
    --fs-ui-meta: var(--fs-11);
    --fs-ui-small: var(--fs-10);
    --fs-ui-input: var(--fs-14);
  }
}

/* 操作部品のフォーカスは内側の細い線で示し、外側に枠を追加しない（サイト全体） */
:is(button,a[href],summary,input,textarea,select,[contenteditable=true],[role=button],[role=tab],[tabindex]:not([tabindex="-1"])):focus-visible{outline:var(--focus-ring) !important;outline-offset:var(--focus-offset) !important;box-shadow:var(--shadow-focus) !important}

/* コントラストテーマでは影の代わりに、システム文字色の線を内側へ置く */
@media (forced-colors: active) {
  :root {
    --focus-ring: 2px solid currentColor;
    --focus-ring-inverse: var(--focus-ring);
    --focus-offset: calc(-1 * var(--sp-4));
  }
}

/* 入力時の自動拡大を避ける共通基準。動的に追加した欄も初期表示から適用する。 */
input,textarea,select,[contenteditable=true]{font-size:var(--fs-ui-input)}