/* ABA 会員サイト・ABA Studio の色と文字（_reference/DESIGN.md §6K ファミリー K「Cobalt」・2026-09-30 いとうさん裁定＝J「書斎」から切り替え）。
   Phase 4A は承認済み見本 34d50898 の値を採用。朱とホイールは契約の例外を維持。
   変数の名前は J のまま残し、値だけを Cobalt にした（既存の画面の CSS をそのまま使うため）。Cobalt の見本の名前（--paper・--ink など）も同じ値で使える。
   読む画面（辞典・鑑定書・恋愛OS診断の文章・ノート）は、書斎の読みやすさ（本文 16px 以上・行間 1.9）を残す（2026-09-30 いとうさん）。
   ABA 月額の主な層は 30〜35 歳・スマホで読む前提＝画面の文字は 13px 未満にしない（チャートの図の中の目盛りだけは例外）。 */
:root {
  color-scheme: light;
  /* 書体：本文＝Zen Kaku Gothic New／大きな数字＝Geist（300〜400・斜体なし）／等幅＝Geist Mono／天体記号＝Noto Sans Symbols */
  --font-sans: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
  --font-serif: var(--font-sans); /* 見出し用の名前。Cobalt では明朝をやめ、ゴシックの太字で組む */
  --font-display: 'Geist', 'Helvetica Neue', 'Hiragino Sans', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-symbol: 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Segoe UI Symbol', 'Apple Symbols', sans-serif;

  /* Cobalt の見本の値（ライト） */
  --paper: #ECEEF2; --sheet: #F8F9FB; --ink: #0B1026; --ink-2: #434A68; --ink-3: #5A6080;
  --line: rgba(11,16,38,.11); --line-2: rgba(11,16,38,.24);
  --cobalt: #3346B8; --cobalt-2: #2A3BA0; --on-cobalt: #F3F5FF; --wash: rgba(51,70,184,.07); --wash-2: rgba(51,70,184,.13);
  --ember: #BA4524; --ember-wash: rgba(194,74,40,.09); /* 見本は #C24A28。地の上で 4.2:1 と小さい文字の基準 4.5:1 に届かないため、わずかに濃くした（4.56:1） */
  --sky: #2B3A8C; --sky-ink: #F3F5FF; --sky-dim: rgba(243,245,255,.74); --sky-line: rgba(243,245,255,.28); --sky-faint: rgba(243,245,255,.12);

  --sky-ember: #ff9a74; /* 確定見本 v3：青い面の出生図へ届く朱の線 */

  /* 既存の名前 → Cobalt の値 */
  --color-bg: var(--paper); --color-surface: var(--sheet); --color-surface-soft: #E3E6EE;
  --color-text: var(--ink); --color-text-secondary: var(--ink-2); --color-text-muted: var(--ink-3);
  --color-border: var(--line); --color-border-soft: rgba(11,16,38,.07); --color-line-strong: var(--line-2);
  /* 差し色はコバルトの1色（カード 7.36:1・地 6.67:1）。強い青（--sky）は「いまの空」「今月の号」の背景だけに使う */
  --color-accent: var(--cobalt); --color-accent-hover: var(--cobalt-2); --color-accent-soft: var(--wash);
  --color-on-accent: var(--on-cobalt);
  /* 朱＝動く天体（トランジット・進行・ソーラーアーク）と新着・ライブ・次の公開までの日数だけ */
  --color-point: var(--ember);
  --color-emph: var(--ember); --color-emph-soft: var(--ember-wash);
  --color-success: #23704A; --color-warning: #955400; --color-error: #B3261E;
  --aspect-minor: var(--color-text-muted);
  --wheel-outer: var(--color-point);
  --wheel-line: var(--color-line-strong);
  /* ホイールの中だけの色（2026-10-01 いとうさん裁定＝Astrologer 風の明るいホイール。§6K の「強い色は 1 か所」の例外はホイールの中に限る）。
     見本：_reference/design-lab/aba-studio-wheel-v2/preview.html。ホームの「いまの空」の青い輪には使わない */
  --aspect-hard: #E38C86; --aspect-soft: #7EAED8; /* 緊張＝淡い赤・調和＝淡い青 */
  --wheel-band: #E6EBF7; --wheel-retro: #C8412B; --wheel-print-band: #EEEEEE;
  --wheel-bg: #FFFFFF; --wheel-rule: rgba(11,16,38,.55); --wheel-tick: rgba(11,16,38,.42); --wheel-cusp: rgba(11,16,38,.16);
  --wheel-axis: #0B1026; --wheel-house-num: #3346B8; --wheel-house-ring: #F3F5FA; --wheel-outer-band: rgba(186,69,36,.07);
  --wheel-deg: #0B1026; --wheel-min: #6A7090;
  --el-fire-band: #FCE9E3;  --wheel-el-fire: #C8412B; --el-fire: rgba(194,74,40,.10);
  --el-earth-band: #E7F2E1; --wheel-el-earth: #3A843D; --el-earth: rgba(96,120,72,.12);
  --el-air-band: #FBF3D2;   --wheel-el-air: #A67F0A; --el-air: rgba(176,140,40,.12);
  --el-water-band: #E2EEF9; --wheel-el-water: #2E72B3; --el-water: rgba(51,70,184,.10);
  --pl-sun: #C98200; --pl-moon: #5D6C8C; --pl-mercury: #23866F; --pl-venus: #CF4F86; --pl-mars: #C8412B;
  --pl-jupiter: #7549B3; --pl-saturn: #6A5836; --pl-uranus: #2E6BD0; --pl-neptune: #1897B3; --pl-pluto: #8B2C4E;
  --pl-point: #434A68; /* キロン・リリス・バーテックス・フォーチュンなど 10 天体以外 */
  --wheel-hl: #3346B8; --wheel-hl-fill: rgba(51,70,184,.14); --wheel-hl-fill-2: rgba(51,70,184,.06); --wheel-hl-glow: rgba(51,70,184,.18);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --radius-sm: 8px; --radius-md: var(--r-small); --radius-lg: var(--r-card); --radius-xl: var(--r-panel); --radius-pill: 999px;
  /* 影はカードに薄く1段だけ（見本の --shadow）。解説シートは少し強く浮かせる */
  --shadow: 0 1px 0 rgba(11,16,38,.04), 0 24px 56px -28px rgba(11,16,38,.30);
  --shadow-card: var(--shadow);
  --shadow-subnav: 0 1px 2px rgba(11,16,38,.12);
  --gut: clamp(16px, 3.4vw, 48px);
  --r-panel: 26px; --r-card: 18px; --r-small: 12px;
  --ease: cubic-bezier(.2,.7,.1,1); --img-dim: 1;
  --shadow-xs: none; --shadow-sm: var(--shadow-card); --shadow-md: var(--shadow-card); --shadow-lg: var(--shadow-card);
  --shadow-sheet: 0 -20px 60px -20px rgba(0,0,0,.35);
  --shadow-xl: var(--shadow-sheet);
  --breakpoint-sm: 480px; --breakpoint-md: 768px; --breakpoint-lg: 1024px;
  /* Phase 4A: UI は見本 v3 の 15.5px。読む画面は下の reading-size を使う。 */
  --text-xs: 13px; --text-sm: 14px;
  --text-base: 15.5px; --text-lg: clamp(18px,1.125rem,19px);
  --text-xl: clamp(21px,1.375rem,23px); --text-2xl: clamp(24px,1.75rem,28px);
  --text-3xl: clamp(28px,2.25rem,36px); --text-4xl: clamp(32px,3rem,48px);
  /* 読む画面（書斎から引き継ぐ） */
  --reading-size: 16.5px; --reading-line-height: 1.9;
  --content-width: 1480px; --tap-size: 44px; --line-width: 1px; --focus-width: 2px; --focus-offset: 2px;
  --weight-normal: 400; --weight-medium: 500; --weight-heading: 700; --line-height: 1.8; --heading-line-height: 1.35; --nav-layer: 100;
  --full: 100%; --zero: 0; --nav-columns: repeat(5, minmax(0, 1fr));
}

/* ダーク（見本の値）。端末の設定に従い、data-theme="light" で明示されたときはライトのまま */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #080B19; --sheet: #0F1430; --ink: #E7E9F4; --ink-2: #AEB3CE; --ink-3: #9097B6;
    --line: rgba(231,233,244,.10); --line-2: rgba(231,233,244,.24);
    --cobalt: #8E9BF0; --cobalt-2: #A9B3F2; --on-cobalt: #080B19; --wash: rgba(142,155,240,.10); --wash-2: rgba(142,155,240,.18);
    --ember: #F08560; --ember-wash: rgba(240,133,96,.12);
    --sky: #1C2766; --sky-ink: #EEF0FF; --sky-dim: rgba(238,240,255,.74); --sky-line: rgba(238,240,255,.28); --sky-faint: rgba(238,240,255,.11);
    --color-surface-soft: #161C3D; --color-border-soft: rgba(231,233,244,.06);
    --color-success: #6CC896; --color-warning: #E5A64A; --color-error: #F08A80;
    --shadow: 0 1px 0 rgba(0,0,0,.2), 0 24px 56px -28px rgba(0,0,0,.75);
    --img-dim: .9;
    --shadow-sheet: 0 -20px 60px -20px rgba(0,0,0,.35);
    --aspect-hard: #C9716C; --aspect-soft: #5E8FC4;
    --wheel-band: #161D42; --wheel-retro: #F2846B;
    --wheel-bg: #111736; --wheel-rule: rgba(231,233,244,.55); --wheel-tick: rgba(231,233,244,.40); --wheel-cusp: rgba(231,233,244,.14);
    --wheel-axis: #E7E9F4; --wheel-house-num: #A9B3F2; --wheel-house-ring: #161D42; --wheel-outer-band: rgba(240,133,96,.10);
    --wheel-deg: #EEF0FA; --wheel-min: #9097B6;
    --el-fire-band: rgba(240,120,95,.16);  --wheel-el-fire: #F28A73; --el-fire: rgba(240,133,96,.12);
    --el-earth-band: rgba(120,196,122,.14); --wheel-el-earth: #82C784; --el-earth: rgba(150,180,120,.12);
    --el-air-band: rgba(230,196,90,.15);   --wheel-el-air: #E4C45E; --el-air: rgba(220,190,100,.12);
    --el-water-band: rgba(120,172,232,.16); --wheel-el-water: #86B6EB; --el-water: rgba(142,155,240,.13);
    --pl-sun: #F2BA4E; --pl-moon: #B8C2DC; --pl-mercury: #5CCBAE; --pl-venus: #F08DB6; --pl-mars: #F2846B;
    --pl-jupiter: #B79AF0; --pl-saturn: #CDB98E; --pl-uranus: #7FAAF5; --pl-neptune: #62CFE6; --pl-pluto: #E08AA8;
    --pl-point: #AEB3CE;
    --wheel-hl: #A9B3F2; --wheel-hl-fill: rgba(142,155,240,.22); --wheel-hl-fill-2: rgba(142,155,240,.09); --wheel-hl-glow: rgba(142,155,240,.26);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #080B19; --sheet: #0F1430; --ink: #E7E9F4; --ink-2: #AEB3CE; --ink-3: #9097B6;
  --line: rgba(231,233,244,.10); --line-2: rgba(231,233,244,.24);
  --cobalt: #8E9BF0; --cobalt-2: #A9B3F2; --on-cobalt: #080B19; --wash: rgba(142,155,240,.10); --wash-2: rgba(142,155,240,.18);
  --ember: #F08560; --ember-wash: rgba(240,133,96,.12);
  --sky: #1C2766; --sky-ink: #EEF0FF; --sky-dim: rgba(238,240,255,.74); --sky-line: rgba(238,240,255,.28); --sky-faint: rgba(238,240,255,.11);
  --color-surface-soft: #161C3D; --color-border-soft: rgba(231,233,244,.06);
  --color-success: #6CC896; --color-warning: #E5A64A; --color-error: #F08A80;
  --shadow: 0 1px 0 rgba(0,0,0,.2), 0 24px 56px -28px rgba(0,0,0,.75);
    --img-dim: .9;
  --shadow-sheet: 0 -20px 60px -20px rgba(0,0,0,.35);
  --aspect-hard: #C9716C; --aspect-soft: #5E8FC4;
  --wheel-band: #161D42; --wheel-retro: #F2846B;
  --wheel-bg: #111736; --wheel-rule: rgba(231,233,244,.55); --wheel-tick: rgba(231,233,244,.40); --wheel-cusp: rgba(231,233,244,.14);
  --wheel-axis: #E7E9F4; --wheel-house-num: #A9B3F2; --wheel-house-ring: #161D42; --wheel-outer-band: rgba(240,133,96,.10);
  --wheel-deg: #EEF0FA; --wheel-min: #9097B6;
  --el-fire-band: rgba(240,120,95,.16);  --wheel-el-fire: #F28A73; --el-fire: rgba(240,133,96,.12);
  --el-earth-band: rgba(120,196,122,.14); --wheel-el-earth: #82C784; --el-earth: rgba(150,180,120,.12);
  --el-air-band: rgba(230,196,90,.15);   --wheel-el-air: #E4C45E; --el-air: rgba(220,190,100,.12);
  --el-water-band: rgba(120,172,232,.16); --wheel-el-water: #86B6EB; --el-water: rgba(142,155,240,.13);
  --pl-sun: #F2BA4E; --pl-moon: #B8C2DC; --pl-mercury: #5CCBAE; --pl-venus: #F08DB6; --pl-mars: #F2846B;
  --pl-jupiter: #B79AF0; --pl-saturn: #CDB98E; --pl-uranus: #7FAAF5; --pl-neptune: #62CFE6; --pl-pluto: #E08AA8;
  --pl-point: #AEB3CE;
  --wheel-hl: #A9B3F2; --wheel-hl-fill: rgba(142,155,240,.22); --wheel-hl-fill-2: rgba(142,155,240,.09); --wheel-hl-glow: rgba(142,155,240,.26);
}

/* 会員サイトの全ページの地と文字（Studio 以外の画面も同じ系統にそろえる） */
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--line-height); letter-spacing: .01em; font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased; }

/* Keep the established wheel palette local; v3 element washes are shared UI tokens. */
.interactive-wheel {
  --el-fire: var(--wheel-el-fire); --el-earth: var(--wheel-el-earth);
  --el-air: var(--wheel-el-air); --el-water: var(--wheel-el-water);
}
html { -webkit-text-size-adjust: 100%; }
/* Shared inset belongs to main, never to html/body (iOS vertical scrolling). */
main { box-sizing: border-box; max-width: var(--content-width); margin-inline: auto; padding: 8px var(--gut) calc(104px + env(safe-area-inset-bottom, 0px)); overflow-x: clip; }
main > * { min-width: 0; }
label, fieldset { min-width: 0; }
button, .button, summary { min-height: 44px; min-width: 44px; }
input, select, textarea { font-family: var(--font-sans); font-size: 16px; }
input[type=date], input[type=time], input[type=datetime-local] {
  -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%;
  display: block; box-sizing: border-box; width: 100%; text-align: left;
}
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value,
input[type=datetime-local]::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }