/* 宇宙旅行.jp 共通の見た目の決まり（uy-design-system）tokens v0.1.0 / 2026-11-01
   ・色は「役割の名前」で使う（--uy-text、--uy-accent など）。色の値をCSSに直接書かない。
   ・決まりが効くのは「data-uy-mode を付けた要素の中」と「body.uyds-night（星空のページ・スマホの幅だけ）」だけ。
     ページ全体（ルート要素）には置かない（ほかのページが同じ名前の変数を使っていても、見た目を変えないため）。
       data-uy-mode="night"  … 夜で固定（星空のページ）
       data-uy-mode="auto"   … 端末の設定に合わせる（data-uy-pick="day|night" で上書き）
       data-uy-mode="day"    … 昼で固定
       data-uy-mode="pick"   … 昼が基本。切り替えボタンで夜（data-uy-pick="night"）にできる（v0.3.10）
   ・使う側のCSSは予備の値を必ず添える：color: var(--uy-text, #18243a);
   ・文字の大きさは11px未満にしない。押せる所は高さ44px以上。
   ・Zen Dots は評価の記号（S・A・B…）だけに使う（--uy-font-grade）。本文は端末の文字。 */

[data-uy-mode] {
  /* ---- 元の色（配色で変わらない） ---- */
  --uy-navy-950: #020611;
  --uy-navy-900: #050b1c;
  --uy-navy-850: #071126;
  --uy-navy-800: #0a1227;
  --uy-navy-750: #0d1934;
  --uy-navy-700: #14213f;
  --uy-cyan-200: #9ee8ff;
  --uy-cyan-300: #6addff;
  --uy-cyan-600: #0b9ce4;
  --uy-blue-700: #0670b0;
  --uy-gold-200: #ffe7aa;
  --uy-gold-300: #ffd978;
  --uy-gold-700: #8d5c00;
  --uy-violet-300: #af9eff;
  --uy-violet-600: #6b4fd8;
  --uy-grade-blue: #2456c8;
  --uy-grade-slate: #5c6b8a;

  /* ---- 文字 ---- */
  --uy-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --uy-font-grade: "Zen Dots", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  --uy-fs-1: 11px;   /* 注記・タグ */
  --uy-fs-2: 12px;   /* 補足 */
  --uy-fs-3: 13px;   /* 一覧の説明・ボタン */
  --uy-fs-4: 14px;   /* 一覧の題名・本文（詰める） */
  --uy-fs-5: 16px;   /* 本文 */
  --uy-fs-6: 18px;   /* 小見出し・スマホの見出し */
  --uy-fs-7: 22px;   /* ページの題名（スマホ） */
  --uy-fs-8: 28px;   /* PCの見出し */
  --uy-fw-normal: 400;
  --uy-fw-bold: 700;
  --uy-fw-heavy: 900;
  --uy-lh-tight: 1.3;
  --uy-lh: 1.65;
  --uy-ls-head: -0.02em;
  --uy-ls-kicker: 0.08em;

  /* ---- 形・余白 ---- */
  --uy-r-1: 8px;
  --uy-r-2: 12px;
  --uy-r-3: 16px;
  --uy-r-4: 22px;
  --uy-r-full: 999px;
  --uy-sp-1: 4px;
  --uy-sp-2: 8px;
  --uy-sp-3: 12px;
  --uy-sp-4: 16px;
  --uy-sp-5: 24px;
  --uy-sp-6: 32px;
  --uy-tap: 44px;
  --uy-dur: 180ms;
  --uy-ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- 詰め方（既定は「詰める」：一覧・ポータル） ---- */
  --uy-row-pad: 11px;
  --uy-row-thumb-w: 104px;
  --uy-row-thumb-h: 78px;
  --uy-gap: 12px;

  /* ---- 昼（既定） ---- */
  --uy-bg: #f6f8fc;
  --uy-bg-page: #f6f8fc;
  --uy-surface: #ffffff;
  --uy-surface-2: #f0f4fa;
  --uy-surface-accent: #ebf7ff;
  --uy-line: #e2e9f1;
  --uy-line-strong: #c4d5e6;
  --uy-text: #18243a;
  --uy-text-2: #5f6d83;
  --uy-accent: #0670b0;
  --uy-on-accent: #ffffff;
  --uy-accent-soft: #ebf7ff;
  --uy-highlight: #8d5c00;
  --uy-highlight-bg: #fff4dc;
  --uy-highlight-line: #f0c96a;
  --uy-violet: #6b4fd8;
  --uy-success: #1d7a52;
  --uy-warn-text: #715621;
  --uy-warn-bg: #fff7e8;
  --uy-danger: #b3261e;
  --uy-danger-bg: #fdecea;
  --uy-focus: #eba51d;
  --uy-brand-grad: linear-gradient(90deg, #1596d9, #7b5cff);
  --uy-feature-grad: linear-gradient(90deg, rgba(4,10,25,.96) 0%, rgba(4,10,25,.78) 46%, rgba(4,10,25,.1) 100%);
  --uy-shadow-1: 0 2px 12px rgba(20, 40, 67, .05);
  --uy-shadow-2: 0 12px 28px rgba(14, 35, 68, .12);
  /* アイコンの台（v0.3.5）：白い台に、つやのある色の絵柄を乗せる */
  --uy-ictile-bg: linear-gradient(160deg, #ffffff 0%, #f2f6fd 100%);
  --uy-ictile-shadow: 0 4px 12px rgba(36, 92, 186, .12), 0 1px 2px rgba(36, 92, 186, .06), inset 0 0 0 1px rgba(214, 226, 244, .6);
}

/* ---- 夜：星空のページは data-uy-mode="night"（固定）。ポータルは端末が夜の設定のとき・夜を選んだとき。
   夜の色は1組だけ。違いは背景だけ（星空のページは星空のグラデーション、ポータルは無地の紺） ---- */
[data-uy-mode="night"], [data-uy-mode="auto"][data-uy-pick="night"], [data-uy-mode="pick"][data-uy-pick="night"] {
  --uy-bg: #020611;
  --uy-surface: #0a1227;
  --uy-surface-2: #0d1934;
  --uy-surface-accent: rgba(106, 221, 255, .09);
  --uy-line: rgba(155, 210, 255, .16);
  --uy-line-strong: rgba(110, 200, 255, .36);
  --uy-text: #f4f7ff;
  --uy-text-2: #b9c6dd;
  --uy-accent: #6addff;
  --uy-on-accent: #04223a;
  --uy-accent-soft: rgba(106, 221, 255, .12);
  --uy-highlight: #ffd978;
  --uy-highlight-bg: rgba(255, 217, 120, .14);
  --uy-highlight-line: rgba(255, 217, 120, .5);
  --uy-violet: #af9eff;
  --uy-success: #81e4bd;
  --uy-warn-text: #ffe7aa;
  --uy-warn-bg: rgba(255, 217, 120, .1);
  --uy-danger: #ff9c9c;
  --uy-danger-bg: rgba(255, 120, 120, .12);
  --uy-focus: #ffd978;
  --uy-brand-grad: linear-gradient(90deg, #6addff, #af9eff);
  --uy-shadow-1: 0 2px 14px rgba(0, 0, 0, .22);
  --uy-shadow-2: 0 24px 60px rgba(0, 0, 0, .34);
  --uy-ictile-bg: linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 100%);
  --uy-ictile-shadow: 0 3px 12px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(155, 210, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
}
[data-uy-mode="night"] {
  --uy-bg-page: radial-gradient(circle at 10% 12%, rgba(82, 101, 255, .12), transparent 30%), radial-gradient(circle at 88% 26%, rgba(106, 221, 255, .08), transparent 32%), linear-gradient(180deg, #020611 0%, #071126 100%);
}
[data-uy-mode="auto"][data-uy-pick="night"], [data-uy-mode="pick"][data-uy-pick="night"] { --uy-bg-page: #071126; }
@media (prefers-color-scheme: dark) {
  [data-uy-mode="auto"]:not([data-uy-pick="day"]) {
    --uy-bg: #020611;
    --uy-surface: #0a1227;
    --uy-surface-2: #0d1934;
    --uy-surface-accent: rgba(106, 221, 255, .09);
    --uy-line: rgba(155, 210, 255, .16);
    --uy-line-strong: rgba(110, 200, 255, .36);
    --uy-text: #f4f7ff;
    --uy-text-2: #b9c6dd;
    --uy-accent: #6addff;
    --uy-on-accent: #04223a;
    --uy-accent-soft: rgba(106, 221, 255, .12);
    --uy-highlight: #ffd978;
    --uy-highlight-bg: rgba(255, 217, 120, .14);
    --uy-highlight-line: rgba(255, 217, 120, .5);
    --uy-violet: #af9eff;
    --uy-success: #81e4bd;
    --uy-warn-text: #ffe7aa;
    --uy-warn-bg: rgba(255, 217, 120, .1);
    --uy-danger: #ff9c9c;
    --uy-danger-bg: rgba(255, 120, 120, .12);
    --uy-focus: #ffd978;
    --uy-brand-grad: linear-gradient(90deg, #6addff, #af9eff);
    --uy-shadow-1: 0 2px 14px rgba(0, 0, 0, .22);
    --uy-shadow-2: 0 24px 60px rgba(0, 0, 0, .34);
    --uy-ictile-bg: linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 100%);
    --uy-ictile-shadow: 0 3px 12px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(155, 210, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
    --uy-bg-page: #071126;
  }
}
/* 昼で固定・ポータルで昼を選んだとき */
[data-uy-mode="day"], [data-uy-mode="auto"][data-uy-pick="day"], [data-uy-mode="pick"]:not([data-uy-pick="night"]) {
  --uy-bg: #f6f8fc;
  --uy-bg-page: #f6f8fc;
  --uy-surface: #ffffff;
  --uy-surface-2: #f0f4fa;
  --uy-surface-accent: #ebf7ff;
  --uy-line: #e2e9f1;
  --uy-line-strong: #c4d5e6;
  --uy-text: #18243a;
  --uy-text-2: #5f6d83;
  --uy-accent: #0670b0;
  --uy-on-accent: #ffffff;
  --uy-accent-soft: #ebf7ff;
  --uy-highlight: #8d5c00;
  --uy-highlight-bg: #fff4dc;
  --uy-highlight-line: #f0c96a;
  --uy-violet: #6b4fd8;
  --uy-success: #1d7a52;
  --uy-warn-text: #715621;
  --uy-warn-bg: #fff7e8;
  --uy-danger: #b3261e;
  --uy-danger-bg: #fdecea;
  --uy-focus: #eba51d;
  --uy-brand-grad: linear-gradient(90deg, #1596d9, #7b5cff);
  --uy-feature-grad: linear-gradient(90deg, rgba(4,10,25,.96) 0%, rgba(4,10,25,.78) 46%, rgba(4,10,25,.1) 100%);
  --uy-shadow-1: 0 2px 12px rgba(20, 40, 67, .05);
  --uy-shadow-2: 0 12px 28px rgba(14, 35, 68, .12);
  /* アイコンの台（v0.3.5）：白い台に、つやのある色の絵柄を乗せる */
  --uy-ictile-bg: linear-gradient(160deg, #ffffff 0%, #f2f6fd 100%);
  --uy-ictile-shadow: 0 4px 12px rgba(36, 92, 186, .12), 0 1px 2px rgba(36, 92, 186, .06), inset 0 0 0 1px rgba(214, 226, 244, .6);
}

/* ---- 詰め方：ゆったり（今夜の星空の道具など） ---- */
[data-uy-density="comfortable"] {
  --uy-row-pad: 16px;
  --uy-row-thumb-w: 112px;
  --uy-row-thumb-h: 92px;
  --uy-gap: 16px;
}

/* ---- 端末の部品（入力欄・スクロールバー）の色。部品の中だけ（body には付けない＝PCの見た目を変えない） ---- */
[data-uy-mode="day"], [data-uy-mode="auto"], [data-uy-mode="pick"] { color-scheme: light; }
[data-uy-mode="night"], [data-uy-mode="auto"][data-uy-pick="night"], [data-uy-mode="pick"][data-uy-pick="night"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  [data-uy-mode="auto"]:not([data-uy-pick="day"]) { color-scheme: dark; }
}

@media (prefers-reduced-motion: reduce) {
  [data-uy-mode] { --uy-dur: 0ms; }
}

/* ---- 星空のページ（body.uyds-night）：スマホの幅で、このプラグインがタブの帯・一覧・格付けを整えるときだけ使う。
   PCの幅ではページ全体に決まりの変数を置かない（ほかのCSSの見た目を変えないため） ---- */
@media (max-width: 780px) {
  .uyds-night {
    --uy-navy-950: #020611;
    --uy-navy-900: #050b1c;
    --uy-navy-850: #071126;
    --uy-navy-800: #0a1227;
    --uy-navy-750: #0d1934;
    --uy-navy-700: #14213f;
    --uy-cyan-200: #9ee8ff;
    --uy-cyan-300: #6addff;
    --uy-cyan-600: #0b9ce4;
    --uy-blue-700: #0670b0;
    --uy-gold-200: #ffe7aa;
    --uy-gold-300: #ffd978;
    --uy-gold-700: #8d5c00;
    --uy-violet-300: #af9eff;
    --uy-violet-600: #6b4fd8;
    --uy-grade-blue: #2456c8;
    --uy-grade-slate: #5c6b8a;
    --uy-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
    --uy-font-grade: "Zen Dots", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
    --uy-fs-1: 11px;
    --uy-fs-2: 12px;
    --uy-fs-3: 13px;
    --uy-fs-4: 14px;
    --uy-fs-5: 16px;
    --uy-fs-6: 18px;
    --uy-fs-7: 22px;
    --uy-fs-8: 28px;
    --uy-fw-normal: 400;
    --uy-fw-bold: 700;
    --uy-fw-heavy: 900;
    --uy-lh-tight: 1.3;
    --uy-lh: 1.65;
    --uy-ls-head: -0.02em;
    --uy-ls-kicker: 0.08em;
    --uy-r-1: 8px;
    --uy-r-2: 12px;
    --uy-r-3: 16px;
    --uy-r-4: 22px;
    --uy-r-full: 999px;
    --uy-sp-1: 4px;
    --uy-sp-2: 8px;
    --uy-sp-3: 12px;
    --uy-sp-4: 16px;
    --uy-sp-5: 24px;
    --uy-sp-6: 32px;
    --uy-tap: 44px;
    --uy-dur: 180ms;
    --uy-ease: cubic-bezier(.2, .7, .2, 1);
    --uy-row-pad: 11px;
    --uy-row-thumb-w: 104px;
    --uy-row-thumb-h: 78px;
    --uy-gap: 12px;
    --uy-bg: #020611;
    --uy-bg-page: radial-gradient(circle at 10% 12%, rgba(82, 101, 255, .12), transparent 30%), radial-gradient(circle at 88% 26%, rgba(106, 221, 255, .08), transparent 32%), linear-gradient(180deg, #020611 0%, #071126 100%);
    --uy-surface: #0a1227;
    --uy-surface-2: #0d1934;
    --uy-surface-accent: rgba(106, 221, 255, .09);
    --uy-line: rgba(155, 210, 255, .16);
    --uy-line-strong: rgba(110, 200, 255, .36);
    --uy-text: #f4f7ff;
    --uy-text-2: #b9c6dd;
    --uy-accent: #6addff;
    --uy-on-accent: #04223a;
    --uy-accent-soft: rgba(106, 221, 255, .12);
    --uy-highlight: #ffd978;
    --uy-highlight-bg: rgba(255, 217, 120, .14);
    --uy-highlight-line: rgba(255, 217, 120, .5);
    --uy-violet: #af9eff;
    --uy-success: #81e4bd;
    --uy-warn-text: #ffe7aa;
    --uy-warn-bg: rgba(255, 217, 120, .1);
    --uy-danger: #ff9c9c;
    --uy-danger-bg: rgba(255, 120, 120, .12);
    --uy-focus: #ffd978;
    --uy-brand-grad: linear-gradient(90deg, #6addff, #af9eff);
    --uy-feature-grad: linear-gradient(90deg, rgba(4,10,25,.96) 0%, rgba(4,10,25,.78) 46%, rgba(4,10,25,.1) 100%);
    --uy-shadow-1: 0 2px 14px rgba(0, 0, 0, .22);
    --uy-shadow-2: 0 24px 60px rgba(0, 0, 0, .34);
    --uy-ictile-bg: linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 100%);
    --uy-ictile-shadow: 0 3px 12px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(155, 210, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
  }
}
@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
  .uyds-night { --uy-dur: 0ms; }
}