/* ---------------------------------------------------------------------------
   CODE144 読みやすさの補正（2026-08-18）

   base.css は承認されたプレビューの写しなので触らない。
   移築後に実測して見つかった、基準を下回る箇所だけをここで直す。
   どこがプレビュー由来で、どこが後から直した分かを区別できるようにするため、
   ファイルを分けている。

   基準（確定済み）
     本文 16px / 補助 14px / コントラスト WCAG AA 4.5 以上
     読者に40代以上・老眼の人が多いことを前提にする

   ここで直さないもの
     ・ナビの英字13px / 日本語11px … 6項目を375pxに収めるための設計上の判断
     ・惑星記号などの装飾グリフ     … 読ませる文字ではない
   --------------------------------------------------------------------------- */

/* ── TODAY ─────────────────────────────────────────────────────────────── */

/* 「SCAN後に、あなた専用の推移として表示されます。」
   実測 11.5px / コントラスト2.4。未ログインの人がSCANに進むかを決める一文で、
   この画面でいちばん読まれるべき補助文なのに、いちばん読みにくかった。 */
.demo-series-note{
  font-size:14px !important;
  line-height:1.8 !important;
  color:rgba(255,255,255,.78) !important;   /* 2.4 → 約12 */
}

.sky-telemetry-guide{
  display:block;
  margin:14px 0 2px;
  padding-top:13px;
  border-top:1px solid rgba(216,194,122,.18);
  color:#cdbcf8;
  font-size:12px;
  font-weight:700;
  line-height:1.6;
  text-decoration:none;
}
.sky-telemetry-guide:hover{color:#fff;}

/* 「今日に関連する惑星」 実測 10px / 2.9。見出しの意味を説明する語なので上げる */
.mp-sec-sub{
  font-size:14px !important;
  color:rgba(196,181,253,.92) !important;   /* 2.9 → 約9 */
  letter-spacing:.04em;
}

/* AXIA観測盤のラベル（PEAK / TIME / VECTOR / PRIME）
   実測 8px / 3.5。腕時計の文字盤に寄せた意匠だが、8pxは読める大きさではない。
   計器らしさは字間と色で残しつつ、サイズとコントラストだけ引き上げる。 */
.axia-obs-label{
  font-size:11px !important;
  letter-spacing:.16em !important;
  color:rgba(235,215,155,.95) !important;   /* 3.5 → 約11 */
}

/* ピーク推移チャートの時刻軸 実測 9px / 3.1、数値 10px / 4.2。
   グラフは軸が読めて初めて意味を持つ。 */
#mpPeakChart div{
  color:rgba(255,255,255,.72) !important;   /* 3.1 → 約9 */
}
#mpPeakChart [style*="font-size:9px"],
#mpPeakChart [style*="font-size: 9px"]{
  font-size:11px !important;
}

/* 「毎日 04:00 更新」 実測 12.5px / 4.5（ぎりぎり）。余裕を持たせる */
.mp-footer-update{
  font-size:14px !important;
  color:rgba(255,255,255,.68) !important;
}

/* 閉じるボタン「×」 実測 3.8。押す対象なので確実に見えるようにする */
.axia-modal-close,
[class*="modal"] [class*="close"]{
  color:rgba(255,255,255,.85) !important;
}

/* ── 全画面共通の底上げ ────────────────────────────────────────────────
   個別に拾いきれない補助文が 12px 以下で残ることがあるため、
   「読ませる文章」に限って下限を引く。ナビ・記号・数値は対象外。 */
.hint,
.demo-lead-note,
.demo-lead-desc,
.fc-legend-note,
.forecast-note{
  font-size:14px !important;
  line-height:1.8 !important;
}

/* ── 実測して見つかった取りこぼし（詳細度で負けていた分）──────────────── */

/* 観測盤の下段レール（PEAK / TIME / VECTOR / PRIME）
   実測 7.4px / コントラスト3.5。base.css 側の
   .axia-obs-footer .axia-obs-label が先の指定に勝っていたので、
   同じ深さで書き直す。腕時計の刻印らしさは字間で残す。 */
.axia-card .axia-obs-footer .axia-obs-label,
.axia-obs-footer .axia-obs-label{
  font-size:11px !important;
  letter-spacing:.14em !important;
  color:rgba(238,220,165,.95) !important;   /* 3.5 → 約11 */
}

/* 2時間ごとの推移バーの時刻目盛り
   実測 10px / #6b7280（4.2）。グラフは目盛りが読めて初めて意味を持つ。 */
.mp-series-hour{
  font-size:11px !important;
  color:rgba(255,255,255,.70) !important;   /* 4.2 → 約9 */
}

/* ── CALENDAR ─────────────────────────────────────────────────────────── */

/* 状態の凡例チップの日数（「4日」「8日」など）
   状態色をそのまま文字色に使っており、暗い背景の上で 2.9〜3.2 しかない。
   マスの塗りとしては成立する色でも、文字にすると読めない。

   色ごとに書き換えると状態の色体系が崩れるので、明るさだけ持ち上げる。
   色相はそのまま残るため「点火は金、安定は紫、調律は緑」の対応は保たれる。
   インラインの color を上書きするので filter を使う（!important でも
   インラインの color 自体は勝てないため、描画側で調整する）。 */
.fc-state-chip span:last-child{
  filter:brightness(1.75) saturate(1.1);
  font-weight:600;
}

/* 「毎朝4:00頃更新」 インラインで .28 が指定されており 4.0。
   クラスが無いためインライン指定を目印に拾う。 */
.fc-legend [style*="rgba(255,255,255,.28)"],
#pageContent [style*="color:rgba(255,255,255,.28)"]{
  color:rgba(255,255,255,.68) !important;
  font-size:14px !important;
}

/* ── CIRCLE ───────────────────────────────────────────────────────────── */

/* 金色の補助ラベル
   実測 7〜11px、コントラスト 2.9〜4.1。金は暗い背景で沈みやすく、
   透明度を下げるとさらに読めなくなる。不透明に寄せて底上げする。 */
.circle-demo-score small,
.circle-presentation-hero small,
.circle-group-intro small,
.fr-score-label{
  font-size:11px !important;
  letter-spacing:.14em !important;
  color:rgba(240,222,168,.95) !important;   /* 2.9〜4.1 → 10以上 */
}

/* 「話しやすい相手」「ペースを見たい相手」
   インラインで 11px / .40 が指定されている。相手を選ぶ根拠になる語なので上げる。 */
.fr-state-row span[style*="rgba(255,255,255,.40)"],
.fr-state-row span[style*="rgba(255,255,255,0.40)"]{
  font-size:14px !important;
  color:rgba(255,255,255,.78) !important;
}

/* グループの残り枠「2 / 3」 実測 12px / 3.8 */
.slot-meta{
  font-size:14px !important;
  color:rgba(255,255,255,.74) !important;
}

/* CIRCLE スポットライト内の小見出し
   .circle-demo-spotlight > .circle-demo-action > span > small の入れ子。
   7px / 2.9 だった。前の指定では届いていなかったので、直接指定する。 */
.circle-demo-spotlight small,
.circle-demo-action small{
  font-size:11px !important;
  letter-spacing:.14em !important;
  color:rgba(240,222,168,.95) !important;
}

/* ── SYNC ─────────────────────────────────────────────────────────────── */

/* 2つのCODEが重なる円の下の「CODE × CODE」 実測 8px / 4.2 */
.sync-preview-orbit small{
  font-size:11px !important;
  letter-spacing:.14em !important;
  color:rgba(240,222,168,.92) !important;
}

/* 注: .btn-sync（相性を見る）は CODE 未入力時 disabled で薄い。
   これは「押せない」ことを示す正しい表現なので変更しない。
   WCAG も無効化された操作部品はコントラスト要件の対象外としている。 */

/* ── ABOUT ────────────────────────────────────────────────────────────── */

/* 「AXIAを起動しています…」 実測 12px / 3.9。
   一瞬しか出ないが、遅い回線ほど長く出る＝読める必要がある文字。 */
.about-live-axia-loading{
  font-size:14px !important;
  color:rgba(255,255,255,.72) !important;
}

/* ── PLANS ────────────────────────────────────────────────────────────── */

/* 購入ボタン「月読プランをはじめる」
   白文字 15px を rgb(149,104,255) の上に置いており 3.7。
   お金を払う判断をする場所なので、ここは確実に読めなければならない。
   文字はすでに白＝これ以上明るくできないため、紫を一段深くする。
   紫であることは保たれる（DON方針「紫・金・緑を明瞭に」）。 */
.plan-btn--accent{
  background:#7856d6 !important;   /* 3.7 → 4.7 */
  border-color:#7856d6 !important;
}

/* 「おすすめ」バッジ 同じ紫に白文字、10px。 */
.plan-badge{
  background:#7856d6 !important;
  font-size:12px !important;
  letter-spacing:.06em;
}

/* 無料プランの種別ラベル「FREE」 紫の52%で 2.7。
   同じ紫を不透明にすれば 7.0 になる（有料側の表記と同じ扱いに揃う）。 */
.plan-type{
  color:rgb(167,139,250) !important;
  font-size:12px !important;
}

/* ── FORECAST ─────────────────────────────────────────────────────────── */

/* FORECASTは長文を読ませる有料の画面なのに、見出しと項目名が
   すべて半透明で 2.3〜4.0 だった。色相は残し、透明度を上げて実測4.5以上にする。 */

/* 「FORECASTについて」 12.8px / 2.3（この画面で最も読みにくかった） */
.forecast-explain-lead{
  color:rgba(167,139,250,.95) !important;
  font-size:14px !important;
}

/* 章見出し「今月の要点」「今月の節目」など 13.8px / 4.0 */
.forecast-section-title{
  color:rgba(186,164,255,.98) !important;
  font-size:16px !important;
}

/* 「あなたの観測値から読む、◯月の動き方」 13px / 3.8 */
.forecast-sub{
  color:rgba(255,255,255,.74) !important;
  font-size:14px !important;
}

/* 「あなたの観測」 13px / 3.1 */
.forecast-user{
  color:rgba(255,255,255,.74) !important;
  font-size:14px !important;
}

/* 領域ラベル「仕事」「お金」「人間関係」 10.9px / 3.3。
   どの領域の話かを示す語なので、小さすぎると本文の意味が取れない。 */
.forecast-domain-label{
  color:rgba(255,255,255,.80) !important;
  font-size:14px !important;
  letter-spacing:.04em;
}

/* 時期タグ「前半」「後半」 10.9px / 2.4 */
.forecast-phase-tag{
  color:rgba(186,164,255,.95) !important;
  font-size:13px !important;
}

/* ── OUTLINE（CODEの結果画面）─────────────────────────────────────────── */

/* 「― 太陽と月が描く、あなたの輪郭 ―」 13px / 4.1 */
.outline-header-sub{
  font-size:14px !important;
  color:rgba(255,255,255,.76) !important;
}

/* 「← 入力画面に戻る」 13px / 4.1。戻り導線は確実に見えている必要がある */
a[href*="/scan"]:not(.btn):not([class*="cta"]),
.outline-back{
  color:rgba(255,255,255,.80) !important;
}

/* ── TYPOGRAPHY SYSTEM v1（全画面共通）──────────────────────────────────
   「ページごと」ではなく「文字の役割」で大きさを決める。
   読ませる文字は14px未満にしない。時計盤・グラフ軸・カレンダーの
   マス内・装飾英字だけは、限られた面積に情報を置くための例外。 */
:root{
  --type-page-title:32px;
  --type-section-title:20px;
  --type-card-title:16px;
  --type-body:16px;
  --type-note:14px;
  --type-label:14px;
  --type-control:15px;
  --leading-body:1.8;
  --leading-note:1.7;
}

/* Header identity is user information, not decorative microtype. */
#headerInlineName{
  font-size:14px !important;
  color:rgba(255,255,255,.88) !important;
  line-height:1.35 !important;
  max-width:180px !important;
}
#headerInlineCode{
  font-size:13px !important;
  color:#c4b5fd !important;
  letter-spacing:.04em !important;
  line-height:1.35 !important;
  font-weight:650 !important;
}
@media(max-width:600px){
  #headerInlineName{max-width:128px !important;}
}

/* 通常ページの主見出し。FORECAST表紙とAXIAは表示物なので別体系 */
.scan-hero-h1,
.about-hero-h1,
.sync-hero-title,
.plans-hero h1,
.grp-header-name{
  font-size:var(--type-page-title) !important;
  line-height:1.35 !important;
}
/* SYNCもCIRCLEと同じ密度に揃える */
body:has(.sync-hero) .sync-hero{
  min-height:0 !important;
  padding:44px 38px 38px !important;
}
body:has(.sync-hero) .sync-hero .sync-hero-title{
  max-width:500px !important;
  font-size:30px !important;
  line-height:1.35 !important;
  font-weight:560 !important;
  letter-spacing:.035em !important;
}
body:has(.sync-hero) .sync-hero .sync-preview-orbit{
  right:18px !important;
  bottom:-88px !important;
  transform:scale(.62);
  transform-origin:right bottom;
  opacity:.72;
}
main h2:not(.forecast-cover-title),
.about-h2,
.forecast-section-title{
  font-size:var(--type-section-title) !important;
  line-height:1.5 !important;
}

/* 本文。詳細説明・結果文・設定文を同じ読み心地に揃える */
.core-body,
.today-hint-text,
.fc-dp-hero-desc,
.fc-dp-moon-card-body,
.fc-dp-operation-text,
.fr-body,
.fr-copy,
.sync-copy,
.about-body,
.forecast-body,
.forecast-sample-body p,
.plan-desc,
.settings-description,
.scan-hero-lead,
.scan-hero-note{
  font-size:var(--type-body) !important;
  line-height:var(--leading-body) !important;
}

/* 補足・注釈・メタ情報。情報として読む文字の下限は14px */
.grp-header-meta,
.visibility-label,
.my-mode-desc,
.pulse-comment,
.slot-meta,
.fc-sub,
.fc-range,
.fc-summary-title,
.fc-summary-item,
.fc-summary-score,
.fc-state-sheet-intro,
.fc-state-sheet-row,
.fc-dp-moon-card-time,
.fc-dp-moon-card-sign,
.fc-dp-scores-row,
.fc-dp-trigger-reaction,
.fc-dp-trigger-detail,
.fc-dp-metric-note,
.fc-dp-operation-label,
.mp-header-date,
.fc-next-go-desc,
.login-desc,
.forecast-kd-range,
.forecast-lock-hint,
.forecast-cta-lead,
.forecast-cta-sub,
.fc-prompt-desc,
.fc-prompt-note,
.forecast-lock-sub,
.precision-note,
.cta-lead,
.unknown-hint,
.ssm-row,
.ssm-note,
.ol-save-note,
.scan-mode-label,
#partnerCaution{
  font-size:var(--type-note) !important;
  line-height:var(--leading-note) !important;
}
.mp-header-date{
  font-variant-numeric:tabular-nums;
  letter-spacing:.07em !important;
}

/* 小見出し・項目名。字間は残しても、サイズは読める14pxに統一 */
.section-label,
.fc-label,
.fc-month-flow-title,
.fc-state-sheet-title,
.fc-dp-section,
.fc-dp-moon-card-label,
.fc-dp-action-label,
.fc-sky-card-title,
.fc-dp-metric-label,
.fc-next-go-title,
.today-hint-label,
.ar-card__label,
.ar-card__item-label,
.settings-section-heading,
.settings-title{
  font-size:var(--type-label) !important;
}

/* カードタイトルと主要な項目名 */
.fc-dp-date,
.fc-dp-moon-card-title,
.login-title,
.fc-lock-cta-title,
.fc-prompt-title,
.ar-card__color-name{
  font-size:var(--type-card-title) !important;
}

/* ボタン・入力。読むだけでなく押す文字は一段強くする */
main button:not(.fc-cell):not(.visibility-switch),
main .btn,
main input,
main select,
main textarea,
.copy-btn,
.scan-mode-btn{
  font-size:var(--type-control) !important;
}

/* インライン指定の多い設定画面は、意味のある文字だけ下限を保証する */
.settings-wrap label,
.settings-wrap input,
.settings-wrap select,
.settings-wrap button,
.settings-wrap [id$="-msg"],
.settings-wrap [id$="-note"],
.settings-wrap [id$="-status"]{
  font-size:var(--type-note) !important;
  line-height:var(--leading-note) !important;
}
.settings-wrap button,
.settings-wrap input,
.settings-wrap select{
  font-size:var(--type-control) !important;
}

/* グループ詳細の動的生成文にも同じ下限を適用 */
.group-detail-page .panel,
.group-detail-page .member-card,
.group-detail-page .url-text,
.group-detail-page .copy-ok,
#pulseForecast{
  font-size:var(--type-note) !important;
  line-height:var(--leading-note) !important;
}

/* フッターも本文の一部。12pxのまま取り残さない */
footer a,
footer > div,
footer > div > div > div{
  font-size:var(--type-note) !important;
  line-height:var(--leading-note) !important;
}

@media (max-width:600px){
  :root{
    --type-page-title:28px;
    --type-section-title:19px;
  }
  body:has(.sync-hero) .sync-hero{
    min-height:0 !important;
    padding:32px 22px 28px !important;
  }
  body:has(.sync-hero) .sync-hero .sync-hero-title{
    font-size:27px !important;
  }
  body:has(.sync-hero) .sync-hero .sync-preview-orbit{
    right:-8px !important;
    bottom:-76px !important;
    transform:scale(.56) !important;
  }
}

/* State identity: colour mark + Japanese label, never emoji alone. */
.fc-state-sheet-name{display:inline-flex;align-items:center;gap:8px}
.fc-state-key{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.fc-state-key--ignite{background:#f87171}.fc-state-key--stable{background:#60a5fa}
.fc-state-key--tune{background:#4ade80}.fc-state-key--ready{background:#fbbf24}
.fc-state-key--rest{background:#94a3b8}