/* ======================================================================
 * Buddy — Design System
 * ----------------------------------------------------------------------
 * Single source of truth for colors, type, spacing, radii, shadows.
 * Use CSS variables in new code. Legacy inline styles will be migrated
 * incrementally; this file is additive and does not break existing CSS.
 * ====================================================================== */

:root {
  /* ── Brand colors ────────────────────────────────────────────────── */
  --sa-primary: #111111;
  --sa-primary-600: #000000;
  --sa-primary-50: #f1f1ef;
  --sa-primary-100: #eeeeeb;
  --sa-primary-200: #d8d8d4;

  --sa-accent: #3f3f3f;        /* Light purple — gradient partner */
  --sa-accent-deep: #111111;   /* Deep purple — used for stats */
  --sa-accent-50: #f5f5f4;
  --sa-accent-100: #ececea;

  --sa-warm: #d97706;          /* "Senior/mentor" warm accent */
  --sa-warm-50: #fff7ed;
  --sa-warm-100: #fef3c7;
  --sa-warm-200: #fcd9a4;

  --sa-green-50: #dcfce7;
  --sa-green-700: #15803d;
  --sa-amber-50: #fef3c7;
  --sa-amber-700: #92400e;
  --sa-blue-50: #dbeafe;
  --sa-blue-700: #1e40af;
  --sa-red-50: #fee2e2;
  --sa-red-700: #991b1b;

  /* ── Neutrals ────────────────────────────────────────────────────── */
  --sa-ink: #1a1a2e;           /* Strongest text */
  --sa-ink-soft: #1a1a1a;
  --sa-text: #444;
  --sa-text-muted: #666;
  --sa-text-subtle: #888;
  --sa-text-faint: #aaa;
  --sa-text-ghost: #bbb;

  --sa-bg: #ffffff;
  --sa-bg-alt: #ffffff;
  --sa-surface: #ffffff;
  --sa-surface-tint: #ffffff;

  --sa-border: #ebebeb;
  --sa-border-soft: #f0f0f4;
  --sa-border-strong: #e4e4e4;
  --sa-divider: #f5f5f5;

  /* ── Type scale ──────────────────────────────────────────────────── */
  --sa-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sa-fs-xs: 11px;
  --sa-fs-sm: 12px;
  --sa-fs-base: 13.5px;
  --sa-fs-md: 14px;
  --sa-fs-lg: 16px;
  --sa-fs-xl: 20px;
  --sa-fs-2xl: 28px;
  --sa-fs-3xl: 36px;
  --sa-fs-4xl: 48px;
  --sa-lh-tight: 1.2;
  --sa-lh-normal: 1.6;
  --sa-lh-loose: 1.85;

  /* ── Spacing ─────────────────────────────────────────────────────── */
  --sa-space-1: 4px;
  --sa-space-2: 8px;
  --sa-space-3: 12px;
  --sa-space-4: 16px;
  --sa-space-5: 20px;
  --sa-space-6: 24px;
  --sa-space-8: 32px;
  --sa-space-10: 40px;
  --sa-space-12: 48px;
  --sa-space-16: 64px;
  --sa-space-24: 96px;

  /* ── Radii ───────────────────────────────────────────────────────── */
  --sa-radius-sm: 6px;
  --sa-radius-md: 10px;
  --sa-radius-lg: 14px;
  --sa-radius-xl: 18px;
  --sa-radius-2xl: 24px;
  --sa-radius-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────────────────── */
  --sa-shadow-sm: 0 1px 2px rgba(20, 22, 40, 0.04);
  --sa-shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --sa-shadow-lg: 0 8px 28px rgba(0,0,0,0.14);
  --sa-shadow-warm: 0 4px 16px rgba(217, 119, 6, 0.15);

  /* ── Motion ──────────────────────────────────────────────────────── */
  --sa-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sa-dur-fast: 120ms;
  --sa-dur-base: 200ms;
  --sa-dur-slow: 320ms;

  /* ── Layout ──────────────────────────────────────────────────────── */
  --sa-container: 1100px;
  --sa-sidebar-w: 240px;
}

/* ======================================================================
 * Reusable utility classes
 * Prefix everything with `sa-` to avoid colliding with legacy class names.
 * ====================================================================== */

/* Layout */
.sa-container { max-width: var(--sa-container); margin: 0 auto; padding: 0 var(--sa-space-6); }
.sa-section { padding: var(--sa-space-24) var(--sa-space-12); }
.sa-section--alt { background: var(--sa-bg-alt); }
.sa-section--white { background: var(--sa-surface); }

@media (max-width: 720px) {
  .sa-section { padding: var(--sa-space-12) var(--sa-space-5); }
}

/* Eyebrow tag */
.sa-eyebrow {
  display: inline-block;
  font-size: var(--sa-fs-xs);
  font-weight: 700;
  color: var(--sa-primary);
  background: var(--sa-primary-50);
  padding: 5px 14px;
  border-radius: var(--sa-radius-pill);
  letter-spacing: 0.06em;
  margin-bottom: var(--sa-space-4);
}
.sa-eyebrow--warm { color: var(--sa-warm); background: var(--sa-warm-50); }

/* Headings */
.sa-h1 {
  font-size: clamp(var(--sa-fs-2xl), 4vw, var(--sa-fs-4xl));
  font-weight: 900;
  color: var(--sa-ink);
  letter-spacing: -1px;
  line-height: var(--sa-lh-tight);
}
.sa-h2 {
  font-size: clamp(var(--sa-fs-xl), 3vw, var(--sa-fs-3xl));
  font-weight: 900;
  color: var(--sa-ink);
  letter-spacing: -0.7px;
  line-height: var(--sa-lh-tight);
}
.sa-h3 {
  font-size: var(--sa-fs-xl);
  font-weight: 800;
  color: var(--sa-ink);
  letter-spacing: -0.3px;
}
.sa-lead {
  font-size: 15px;
  color: var(--sa-text-muted);
  line-height: var(--sa-lh-normal);
  max-width: 640px;
}

/* Cards */
.sa-card {
  background: var(--sa-surface);
  border: 1.5px solid var(--sa-border);
  border-radius: var(--sa-radius-xl);
  padding: var(--sa-space-6);
  transition: border-color var(--sa-dur-base) var(--sa-ease),
              transform var(--sa-dur-base) var(--sa-ease),
              box-shadow var(--sa-dur-base) var(--sa-ease);
}
.sa-card--interactive { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.sa-card--interactive:hover {
  border-color: var(--sa-primary);
  transform: translateY(-2px);
  box-shadow: var(--sa-shadow-md);
}
.sa-card--tint-primary {
  background: linear-gradient(135deg, var(--sa-accent-50) 0%, var(--sa-accent-100) 100%);
  border-color: var(--sa-primary-200);
}
.sa-card--tint-warm {
  background: linear-gradient(135deg, var(--sa-warm-50) 0%, var(--sa-warm-100) 100%);
  border-color: var(--sa-warm-200);
}
.sa-card--tint-soft {
  background: linear-gradient(135deg, var(--sa-accent-100) 0%, var(--sa-primary-50) 100%);
  border-color: var(--sa-primary-200);
}

/* Buttons */
.sa-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sa-space-2);
  padding: 12px 22px;
  border-radius: var(--sa-radius-md);
  font-size: var(--sa-fs-base);
  font-weight: 800;
  letter-spacing: -0.2px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--sa-dur-base) var(--sa-ease);
  border: 1.5px solid transparent;
}
.sa-btn--primary {
  background: var(--sa-primary);
  color: #fff;
  box-shadow: var(--sa-shadow-md);
}
.sa-btn--primary:hover {
  background: var(--sa-primary-600);
  transform: translateY(-1px);
}
.sa-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.sa-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.sa-btn--outline {
  background: var(--sa-surface);
  color: var(--sa-primary);
  border-color: var(--sa-border-strong);
}
.sa-btn--outline:hover {
  border-color: var(--sa-primary);
  background: var(--sa-primary-50);
}

/* Pills / chips */
.sa-pill {
  display: inline-block;
  font-size: var(--sa-fs-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--sa-radius-pill);
  letter-spacing: 0.02em;
}
.sa-pill--primary { background: var(--sa-primary-50); color: var(--sa-primary); }
.sa-pill--warm { background: var(--sa-warm-50); color: var(--sa-warm); }
.sa-pill--success { background: var(--sa-green-50); color: var(--sa-green-700); }
.sa-pill--info { background: var(--sa-blue-50); color: var(--sa-blue-700); }
.sa-pill--warn { background: var(--sa-amber-50); color: var(--sa-amber-700); }

/* Grid helpers */
.sa-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sa-space-6); }
.sa-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sa-space-4); }
.sa-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sa-space-4); }
@media (max-width: 900px) {
  .sa-grid-2, .sa-grid-3, .sa-grid-4 { grid-template-columns: 1fr; }
}

/* Section header with right slot */
.sa-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sa-space-8);
  flex-wrap: wrap;
  margin-bottom: var(--sa-space-8);
}
.sa-section-header__lead { flex: 1; min-width: 260px; }

/* Banner CTA — small, sits inline */
.sa-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sa-space-3);
  background: linear-gradient(135deg, var(--sa-accent-100), var(--sa-primary-50));
  border: 1.5px solid var(--sa-primary-200);
  border-radius: var(--sa-radius-lg);
  padding: var(--sa-space-4) var(--sa-space-5);
  color: var(--sa-ink);
  text-decoration: none;
  max-width: 340px;
  transition: transform var(--sa-dur-base) var(--sa-ease),
              border-color var(--sa-dur-base) var(--sa-ease);
}
.sa-banner-cta:hover { transform: translateY(-1px); border-color: var(--sa-primary); }
.sa-banner-cta__icon { font-size: 24px; flex-shrink: 0; }
.sa-banner-cta__body { flex: 1; min-width: 0; }
.sa-banner-cta__title { font-size: var(--sa-fs-base); font-weight: 800; color: var(--sa-ink); letter-spacing: -0.2px; }
.sa-banner-cta__sub { font-size: var(--sa-fs-xs); color: var(--sa-text-muted); margin-top: 3px; line-height: 1.5; }
.sa-banner-cta__arrow { font-size: var(--sa-fs-md); font-weight: 800; color: var(--sa-primary); flex-shrink: 0; }

/* Feature card — used for the SELF / WITH duo and similar */
.sa-feature {
  display: flex;
  flex-direction: column;
  padding: var(--sa-space-10) var(--sa-space-8);
  border-radius: var(--sa-radius-2xl);
  text-decoration: none;
  color: inherit;
  transition: transform var(--sa-dur-base) var(--sa-ease),
              box-shadow var(--sa-dur-base) var(--sa-ease);
}
/* Hard reset so that the <a> wrapping the card never paints children
   as default blue-underlined links if a fallback stylesheet kicks in. */
a.sa-feature, a.sa-feature * { text-decoration: none !important; }
a.sa-feature .sa-feature__body,
a.sa-feature .sa-feature__list,
a.sa-feature .sa-feature__list li,
a.sa-feature .sa-feature__title { color: var(--sa-ink) !important; }
a.sa-feature .sa-feature__body { color: var(--sa-text) !important; }
a.sa-feature .sa-feature__list,
a.sa-feature .sa-feature__list li { color: var(--sa-text-muted) !important; }
.sa-feature:hover { transform: translateY(-3px); box-shadow: var(--sa-shadow-lg); }
.sa-feature__head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sa-space-5); }
.sa-feature__icon {
  width: 56px; height: 56px;
  background: var(--sa-surface);
  border-radius: var(--sa-radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: var(--sa-shadow-md);
}
.sa-feature--warm .sa-feature__icon { box-shadow: var(--sa-shadow-warm); }
.sa-feature__eyebrow {
  font-size: var(--sa-fs-xs);
  font-weight: 800;
  color: var(--sa-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sa-feature--warm .sa-feature__eyebrow { color: var(--sa-warm); }
.sa-feature__title {
  font-size: 22px;
  font-weight: 900;
  color: var(--sa-ink);
  letter-spacing: -0.5px;
}
.sa-feature__body {
  font-size: var(--sa-fs-md);
  color: var(--sa-text);
  line-height: var(--sa-lh-loose);
  margin-bottom: var(--sa-space-5);
}
.sa-feature__list {
  font-size: var(--sa-fs-base);
  color: var(--sa-text-muted);
  line-height: 1.9;
  margin: 0 0 var(--sa-space-6) 18px;
}
.sa-feature__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sa-space-2);
  font-size: var(--sa-fs-base);
  font-weight: 800;
  color: var(--sa-primary);
}
.sa-feature--warm .sa-feature__cta { color: var(--sa-warm); }

/* Notice / disclaimer block */
.sa-notice {
  background: var(--sa-warm-50);
  border: 1px solid var(--sa-warm-200);
  border-radius: var(--sa-radius-lg);
  padding: 14px 18px;
  font-size: var(--sa-fs-sm);
  color: var(--sa-amber-700);
  line-height: 1.7;
}

/* Focus ring */
.sa-btn:focus-visible,
.sa-banner-cta:focus-visible,
.sa-card--interactive:focus-visible,
.sa-feature:focus-visible {
  outline: 2px solid var(--sa-primary);
  outline-offset: 3px;
}

/* ======================================================================
 * Global cascade fixes — design critique で指摘された問題への対応
 * 既存ページに影響を与えないよう、安全な !important 無しの上書きのみ
 * ====================================================================== */

/* タッチターゲット最低サイズ：ボタン / リンク的要素は 36px 以上 */
button, .sa-btn, .btn, [role="button"] {
  min-height: 32px;
}

/* グローバル focus-visible：すべての対話要素に */
*:focus-visible {
  outline-offset: 2px;
}

/* WCAG AA 不合格カラーの底上げ：本文中の薄いグレーを濃く
 * 注意: 装飾用の #aaa（区切り線・プレースホルダー等）には影響しないよう、
 *       body 直下の段落・補助テキストに限定 */

/* 'aria-hidden="true"' な絵文字は読み上げない */
.sa-emoji {
  font-style: normal;
  speak: none;
}

/* ======================================================================
 * Extended pill / chip system — 既存 .sa-pill の拡張
 * ====================================================================== */

.sa-pill--sm { padding: 2px 8px; font-size: 10.5px; font-weight: 700; }
.sa-pill--lg { padding: 7px 14px; font-size: 13px; font-weight: 700; }

/* solid variants（active 状態などで） */
.sa-pill--solid-primary { background: var(--sa-primary); color: #fff; }
.sa-pill--solid-warm    { background: var(--sa-warm); color: #fff; }
.sa-pill--solid-success { background: var(--sa-green-700); color: #fff; }

/* outline variants（未選択状態） */
.sa-pill--outline {
  background: var(--sa-surface);
  border: 1.5px solid var(--sa-border-strong);
  color: var(--sa-text-muted);
}
.sa-pill--outline:hover {
  border-color: var(--sa-primary);
  color: var(--sa-primary);
}

/* color tones */
.sa-pill--neutral { background: var(--sa-bg); color: var(--sa-text-muted); }

/* ======================================================================
 * Standardized hero section pattern
 * ====================================================================== */
.sa-hero {
  background: linear-gradient(135deg, var(--sa-accent-100) 0%, var(--sa-primary-50) 100%);
  padding: 48px 56px 36px;
  border-bottom: 1.5px solid var(--sa-primary-200);
}
.sa-hero--warm {
  background: linear-gradient(135deg, var(--sa-warm-50), var(--sa-warm-100));
  border-bottom-color: var(--sa-warm-200);
}
.sa-hero__eyebrow {
  display: inline-block;
  font-size: var(--sa-fs-xs);
  font-weight: 700;
  color: var(--sa-primary);
  background: var(--sa-surface);
  padding: 5px 12px;
  border-radius: var(--sa-radius-pill);
  margin-bottom: 12px;
  letter-spacing: 0.06em;
}
.sa-hero--warm .sa-hero__eyebrow { color: var(--sa-warm); }
.sa-hero__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: -0.8px;
  color: var(--sa-ink);
  margin-bottom: 10px;
  line-height: var(--sa-lh-tight);
}
.sa-hero__sub {
  font-size: var(--sa-fs-md);
  color: var(--sa-text-muted);
  line-height: var(--sa-lh-normal);
  max-width: 680px;
}

@media (max-width: 720px) {
  .sa-hero { padding: 32px 24px 24px; }
}

/* ======================================================================
 * Standardized notice variants
 * ====================================================================== */
.sa-notice--info {
  background: var(--sa-blue-50);
  border: 1px solid var(--sa-primary-200);
  color: var(--sa-blue-700);
  border-radius: var(--sa-radius-lg);
  padding: 12px 16px;
  font-size: var(--sa-fs-sm);
  line-height: 1.7;
}
.sa-notice--success {
  background: var(--sa-green-50);
  border: 1px solid var(--sa-green-700);
  color: var(--sa-green-700);
  border-radius: var(--sa-radius-lg);
  padding: 12px 16px;
  font-size: var(--sa-fs-sm);
  line-height: 1.7;
}
.sa-notice--warn {
  background: var(--sa-amber-50);
  border: 1px solid var(--sa-warm-200);
  color: var(--sa-amber-700);
  border-radius: var(--sa-radius-lg);
  padding: 12px 16px;
  font-size: var(--sa-fs-sm);
  line-height: 1.7;
}

/* ======================================================================
 * Color role conventions — どのページでも一貫した「色の意味」
 *
 *   purple (--sa-primary)     : ブランド / CTA / リンク / 学習・知識
 *   warm (--sa-warm)          : メンター関連 / 暖色アクセント / 注意喚起
 *   green (--sa-green-700)    : 成功・プライバシー保証・最安・合格
 *   red (--sa-red-700)        : エラー・違反・サスペンド
 *   blue (--sa-blue-700)      : 情報・補足
 *
 * これらは設計原則。新規コンポーネントは必ずこの役割に従う。
 * ====================================================================== */


/* ======================================================================
 * GLOBAL RESPONSIVE FALLBACK (added 2026-05-16)
 * 個別ページの @media が未定義でも最低限のモバイル対応を保証する。
 * 個別ページCSSと衝突する場合は !important で勝負しない（個別優先）。
 * ====================================================================== */

@media (max-width: 768px) {
  /* 画像・動画の最大幅 */
  img, video, iframe, svg { max-width: 100%; height: auto; }

  /* テーブルの横スクロール */
  table { display: block; overflow-x: auto; max-width: 100vw; }

  /* 横はみ出し防止 */
  body { overflow-x: hidden; }

  /* グローバルサイドバーをモバイルで隠す（partials/sidebar 系） */
  body.sidebar-collapsed .sidebar,
  body[data-page] aside.sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
  }
  body[data-page] main.main {
    margin-left: 0 !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 共通ハンバーガーボタン */
  .sidebar-ham { display: flex !important; position: fixed; top: 12px; left: 12px; z-index: 200;
    width: 36px; height: 36px; border-radius: 8px; background: #fff;
    border: 1px solid #ebebeb; box-shadow: 0 2px 8px rgba(0,0,0,.06);
    flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    cursor: pointer; padding: 0; }
  .sidebar-ham span { display: block; width: 18px; height: 2px; background: #1a1a2e; }
}

@media (max-width: 600px) {
  /* font-size scaling for narrow viewports */
  h1 { font-size: 22px !important; line-height: 1.3 !important; }
  h2 { font-size: 18px !important; }
  /* primary CTA — keep tap target ≥44px */
  button, .btn, .btn-primary, .btn-cta { min-height: 44px; }
}

/* タッチデバイス向け：hover効果を無効化 */
@media (hover: none) {
  *:hover { transition: none !important; }
}

/* 印刷時の最適化 */
@media print {
  .sidebar, aside, nav, .lang-toggle, .dev-status-badge, #dev-status-badge { display: none !important; }
  main, .main { margin: 0 !important; max-width: 100% !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ======================================================================
 * ACCESSIBILITY (WCAG AA 準拠強化, 2026-05-16)
 * ====================================================================== */

/* Skip-to-content link（キーボードでTab最初に出る） */
.skip-to-content {
  position: absolute; top: -40px; left: 8px;
  background: #1a1a2e; color: #fff;
  padding: 8px 16px; border-radius: 0 0 8px 8px;
  font-size: 13px; font-weight: 700;
  text-decoration: none; z-index: 99999;
  transition: top 0.15s;
}
.skip-to-content:focus { top: 0; outline: 3px solid #111111; outline-offset: 2px; }

/* Focus indicator — 全インタラクティブ要素 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 2px;
  border-radius: 4px;
}

/* スクリーンリーダー専用テキスト */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 動きを抑える設定（vestibular disorder 対応） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ハイコントラストモード */
@media (prefers-contrast: more) {
  body { color: #000; background: #fff; }
  a { text-decoration: underline; }
  button, .btn { border: 2px solid currentColor; }
}

/* ======================================================================
 * SECTION REORDER (drag-and-drop) — 2026-05-16
 * 個別ページは <section class="sa-section" data-section-key="xxx"> でラップ
 * トグル: <button id="reorder-toggle" onclick="toggleReorderMode()">
 * JS: js/section-reorder.js (data-storage-key で永続化キー指定)
 * ====================================================================== */

/* デフォルト：handle 非表示 */
.sa-section[data-section-key] > .sa-section-handle { display: none; }

/* sections-container を flex-wrap で 2D レイアウト対応 */
#sections-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}
#sections-container > .sa-section[data-section-key] {
  flex: 1 1 100%;
  min-width: 0;
}

/* 並び替えモード */
body.reorder-mode .sa-section[data-section-key] {
  border: 2px dashed #cfcfca !important;
  border-radius: 14px;
  padding: 10px 12px;
  background: #ffffff;
  cursor: grab;
  break-inside: avoid;
  position: relative;
}
body.reorder-mode .sa-section[data-section-key]:active { cursor: grabbing; }
body.reorder-mode .sa-section[data-section-key] > .sa-section-handle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: #111111;
  padding: 6px 10px; margin-bottom: 10px;
  background: #ececea; border-radius: 8px;
  letter-spacing: 0.05em;
  flex-wrap: wrap;
}
body.reorder-mode .sa-section[data-section-key].dragging { opacity: 0.4; }

/* 4方向ドロップインジケーター */
body.reorder-mode .sa-section[data-section-key].drag-over-top::before,
body.reorder-mode .sa-section[data-section-key].drag-over-bottom::before,
body.reorder-mode .sa-section[data-section-key].drag-over-left::before,
body.reorder-mode .sa-section[data-section-key].drag-over-right::before {
  content: '';
  position: absolute;
  background: #111111;
  border-radius: 2px;
  z-index: 10;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  pointer-events: none;
}
body.reorder-mode .sa-section[data-section-key].drag-over-top::before    { top: -10px; left: 0; right: 0; height: 4px; }
body.reorder-mode .sa-section[data-section-key].drag-over-bottom::before { bottom: -10px; left: 0; right: 0; height: 4px; }
body.reorder-mode .sa-section[data-section-key].drag-over-left::before   { left: -10px; top: 0; bottom: 0; width: 4px; }
body.reorder-mode .sa-section[data-section-key].drag-over-right::before  { right: -10px; top: 0; bottom: 0; width: 4px; }

/* 幅切替コントロール */
.sa-width-controls {
  display: inline-flex; gap: 4px; margin-left: auto;
  background: #fff; border-radius: 6px; padding: 2px;
  border: 1px solid #d4cbf6;
}
.sa-w-btn {
  font-size: 10px; font-weight: 700;
  padding: 4px 8px; border: none;
  background: transparent; color: #111111;
  border-radius: 4px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.sa-w-btn:hover { background: #f4f4f2; }
.sa-w-btn.active { background: #111111; color: #fff; }

#reorder-toggle.active {
  background: #ececea !important;
  color: #111111 !important;
  border-color: #cfcfca !important;
}

/* モバイルでは強制全幅 */
@media (max-width: 768px) {
  #sections-container > .sa-section[data-section-key] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────
 * Buddy AI Chat widget (ai-chat.js)
 * 右下フローティング → クリックでパネル展開
 * ────────────────────────────────────────────────────── */
#sa-ai-chat-root { position: fixed; bottom: 24px; right: 24px; z-index: 9998; font-family: inherit; }

#sa-aic-fab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: none; border-radius: 999px;
  background: linear-gradient(135deg, #111111, #111111);
  color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
#sa-aic-fab:hover  { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
.sa-aic-fab-emoji  { font-size: 18px; }

#sa-aic-panel {
  position: fixed; bottom: 24px; right: 24px;
  width: 380px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 80px);
  background: #fff; border: 1px solid #e8e8ee; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
}

.sa-aic-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid #f1f1f5;
}
.sa-aic-title { display: flex; align-items: center; gap: 10px; }
.sa-aic-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #ffffff; border: 1px solid #e4e4e4;
  display: grid; place-items: center; font-size: 18px;
}
.sa-aic-name { font-weight: 800; font-size: 14px; color: #1a1a2e; }
.sa-aic-sub  { font-size: 11px; color: #888; }
#sa-aic-close {
  border: none; background: transparent; font-size: 22px; line-height: 1;
  cursor: pointer; color: #888; padding: 4px 8px; border-radius: 6px;
}
#sa-aic-close:hover { background: #f5f5fa; color: #444; }

.sa-aic-personas {
  display: flex; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid #f1f1f5; overflow-x: auto;
  background: linear-gradient(180deg, #ffffff, #fff);
}
.sa-aic-persona-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border: 1px solid #e4e4ec; background: #fff;
  border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 700;
  color: #666; cursor: pointer; white-space: nowrap; transition: 0.12s;
}
.sa-aic-persona-chip:hover  { border-color: #cfcfca; color: #111111; background: #ffffff; }
.sa-aic-persona-chip.active { border-color: #111111; color: #fff; background: linear-gradient(135deg, #111111, #111111); }
.sa-aic-chip-emoji { font-size: 13px; }

.sa-aic-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: #fafafd; }
.sa-aic-bubble {
  max-width: 85%; padding: 10px 13px; border-radius: 14px;
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.sa-aic-bubble.bot { background: #fff; border: 1px solid #ececf2; align-self: flex-start; border-bottom-left-radius: 4px; }
.sa-aic-bubble.me  { background: #111111; color: #fff;     align-self: flex-end;   border-bottom-right-radius: 4px; }

.sa-aic-form {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px; border-top: 1px solid #f1f1f5; background: #fff;
}
#sa-aic-input {
  flex: 1; resize: none; border: 1px solid #e4e4ec; border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 13px; line-height: 1.5;
  max-height: 120px;
}
#sa-aic-input:focus { outline: none; border-color: #111111; }
#sa-aic-send {
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: #111111; color: #fff; font-size: 16px; font-weight: 800; cursor: pointer;
}
#sa-aic-send:hover    { background: #000000; }
#sa-aic-send:disabled { opacity: 0.5; cursor: not-allowed; }

.sa-aic-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 14px 10px; font-size: 10px; color: #aaa;
}
.sa-aic-foot a { color: #888; text-decoration: none; }
.sa-aic-foot a:hover { color: #111111; }

@media (max-width: 520px) {
  #sa-aic-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 16px); border-radius: 14px; }
  #sa-aic-fab   { padding: 10px 14px; font-size: 13px; }
  .sa-aic-fab-label { display: none; }
}

/* ──────────────────────────────────────────────────────
 * 公式情報源 disclaimer バナー（情報サイトとして公開する全ページに表示）
 * 使い方: <div class="sa-disclaim" data-variant="standard|visa|simulate"></div>
 * 内容は js/source-disclaim.js が自動注入
 * ────────────────────────────────────────────────────── */
.sa-disclaim {
  background: #fef9e7; border-left: 4px solid #f59e0b;
  border-radius: 0 10px 10px 0;
  padding: 12px 16px; margin: 16px 0;
  font-size: 12.5px; color: #92400e; line-height: 1.65;
}
.sa-disclaim strong { display: inline; margin-right: 6px; font-size: 12.5px; font-weight: 800; }
.sa-disclaim a { color: #b45309; text-decoration: underline; }
.sa-disclaim[data-variant="visa"]     { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.sa-disclaim[data-variant="simulate"] { background: #f0f9ff; border-color: #0ea5e9; color: #0c4a6e; }
.sa-disclaim[data-variant="award"]    { background: #ffffff; border-color: #111111; color: #444444; }
.sa-disclaim[data-variant="mentor"]   { background: #ecfeff; border-color: #06b6d4; color: #155e75; }
.sa-disclaim[data-variant="community"]{ background: #f0fdf4; border-color: #22c55e; color: #166534; }

/* Buddy に聞く バー（explorer / compare 等の上部に置くチャット入力） */
.sa-ai-ask-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 20px; padding: 10px 14px;
  background: #fff; border: 1.5px solid #e0e0ea; border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sa-ai-ask-bar:focus-within { border-color: #111111; box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.sa-ai-ask-icon { font-size: 20px; line-height: 1; }
.sa-ai-ask-bar input {
  flex: 1; border: none; outline: none; font: inherit; font-size: 14px;
  padding: 8px 4px; background: transparent; color: #1a1a1a;
}
.sa-ai-ask-bar input::placeholder { color: #aaa; }
.sa-ai-ask-bar button {
  border: none; padding: 9px 16px; border-radius: 999px;
  background: linear-gradient(135deg, #111111, #111111); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.sa-ai-ask-bar button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

/* 「これ何？」インラインボタン（data-ai-explain で自動生成） */
.sa-ai-explain-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin-left: 6px;
  border: 1px solid #e0e0ea; border-radius: 50%;
  background: #fff; color: #111111; font-size: 11px; line-height: 1;
  cursor: pointer; vertical-align: middle;
  transition: 0.12s; opacity: 0.7;
}
.sa-ai-explain-btn:hover { opacity: 1; background: #f4f4f2; border-color: #cfcfca; transform: scale(1.1); }
.sa-ai-explain-btn--corner { position: absolute; top: 8px; right: 8px; margin-left: 0; }

/* ============================================================
 * 旧 .lang-bar (各ページ上部の `<select>` 言語スイッチャー) を
 * 全ページで非表示にする。floating の `.lang-switcher` partial と
 * 重複していたため。  2026-05-17
 * ============================================================ */
.lang-bar { display: none !important; }

/* ============================================================
 * Sidebar refresh (2026-05-19)
 * - Stroke SVG icons replacing colored emoji
 * - Cleaner section labels (no emoji, smaller, lighter)
 * - Sub-menu uses muted typography only
 * - Unified user-mini CTA buttons
 * Inline page styles still set .nav-item base layout; these rules
 * tune the new icon container, sub-menu, section header, and the
 * (formerly inline-styled) auth CTAs.
 * ============================================================ */

/* Icon container — overrides legacy `.nav-icon { font-size:16px; width:20px }` */
.sidebar .nav-icon,
aside .nav-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.78;
}
.sidebar .nav-icon svg,
aside .nav-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.sidebar .nav-item:hover .nav-icon,
aside .nav-item:hover .nav-icon { opacity: 1; }
.sidebar .nav-item.active .nav-icon,
aside .nav-item.active .nav-icon { opacity: 1; }

/* Section labels — small, muted, no emoji, with tracking */
.sidebar .nav-section-label,
aside .nav-section-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #b5b5c2 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 18px 20px 6px !important;
  display: block !important;
}
.sidebar .nav-section-label > span,
aside .nav-section-label > span { display: inline; }
.sidebar .nav-section-icon,
aside .nav-section-icon { display: none; }

/* Logo — slightly more presence */
.sidebar-logo {
  letter-spacing: -0.02em !important;
}

/* ── Sidebar brand toggle (Buddy + hamburger, all viewports)
   sidebar-brand-toggle は logo と hamburger を統合した button。
   click で sidebar 全体を collapse / expand する。 */
.sidebar-brand-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 22px 20px 16px;
  font-family: inherit;
  letter-spacing: -0.02em;
  color: inherit;
  text-align: left;
}
.sidebar-brand-toggle:hover { background: rgba(0,0,0,0.05); }
.sidebar-brand-ham {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 18px;
  height: 14px;
  flex-shrink: 0;
}
.sidebar-brand-ham span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .2s;
}
.sidebar-brand-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* collapsed 時: text 隠す、ham だけ表示 */
.sidebar.collapsed .sidebar-brand-text,
body.sidebar-collapsed .sidebar-brand-text { display: none; }
.sidebar.collapsed { width: 56px !important; min-width: 56px !important; }
.sidebar.collapsed .nav-item > span:not(.nav-icon):not(.nav-caret),
.sidebar.collapsed .nav-item-toggle > span:not(.nav-icon):not(.nav-caret),
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-sub,
.sidebar.collapsed .sidebar-footer,
.sidebar.collapsed .nav-item-badge,
.sidebar.collapsed .nav-caret { display: none !important; }
.sidebar.collapsed .nav-item,
.sidebar.collapsed .nav-item-toggle {
  padding: 10px !important;
  justify-content: center !important;
  margin: 1px 4px !important;
  width: calc(100% - 8px) !important;
}
.sidebar.collapsed .nav-item .nav-icon,
.sidebar.collapsed .nav-item-toggle .nav-icon { margin: 0 auto !important; }
body:has(.sidebar.collapsed) main.main,
body.sidebar-collapsed main.main { margin-left: 56px !important; max-width: calc(100% - 56px) !important; }

/* ── ALL nav items: 強制統一 (per-page inline CSS の差異を吸収)
   サイドバー partial が <a>/<button>/<span> 混在のため、ボタンの user-agent style を抑える */
.sidebar .nav-item,
.sidebar .nav-item-toggle,
aside .nav-item,
aside .nav-item-toggle,
button.nav-item,
button.nav-item-toggle {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: left;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  margin: 1px 8px;
  border-radius: 8px;
  border: none;
  background: none;
  border-left: 3px solid transparent;
  text-decoration: none;
  width: calc(100% - 16px);
  box-sizing: border-box;
}
.sidebar .nav-item:hover,
.sidebar .nav-item-toggle:hover,
aside .nav-item:hover,
aside .nav-item-toggle:hover { background: #f5f5f4; color: #111111; }
.sidebar .nav-item.active,
aside .nav-item.active { background: #f1f1ef; color: #111111; border-left-color: #111111; }
.sidebar .nav-icon,
aside .nav-icon {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.sidebar .nav-icon svg,
aside .nav-icon svg { width: 18px; height: 18px; }
.sidebar .nav-section-label,
aside .nav-section-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #bbb !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 20px 6px !important;
}
.sidebar .nav-caret,
aside .nav-caret {
  display: inline-flex;
  align-items: center;
  width: 12px;
  color: #c8c8d4;
  transition: transform .18s ease;
}
.sidebar .nav-caret svg,
aside .nav-caret svg { width: 10px; height: 10px; }

/* Sub-menu */
.sidebar .nav-sub,
aside .nav-sub {
  display: none;
  flex-direction: column;
  padding: 2px 8px 8px 44px;
  margin: 0;
  border-left: none;
}
.sidebar .nav-sub.open,
aside .nav-sub.open { display: flex; }
.sidebar .nav-sub-item,
aside .nav-sub-item {
  padding: 6px 10px;
  font-size: 12.5px;
  color: #6b6b7a;
  text-decoration: none;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.sidebar .nav-sub-item:hover,
aside .nav-sub-item:hover {
  background: #f4f4f2;
  color: #111111;
}
.sidebar .nav-sub-item.nav-sub-all,
aside .nav-sub-item.nav-sub-all {
  font-weight: 700;
  color: #111111;
  margin-top: 4px;
}

/* Anon CTAs in footer — moved out of inline style attributes */
.user-mini-cta-primary,
.user-mini-cta-secondary {
  display: block;
  text-align: center;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.user-mini-cta-primary {
  background: #1a1a2e;
  color: #fff;
  margin-bottom: 6px;
  transition: background .15s;
}
.user-mini-cta-primary:hover { background: #2a2a44; }
.user-mini-cta-secondary {
  background: #fff;
  color: #1a1a2e;
  border: 1px solid #e4e4e8;
  font-weight: 600;
  font-size: 12.5px;
  transition: border-color .15s, color .15s;
}
.user-mini-cta-secondary:hover { border-color: #1a1a2e; color: #1a1a2e; }

/* nav-item visual refresh — softer hover, cleaner active marker.
   We can't easily override the per-page inline rules' border-left,
   so we layer on background-only hover + active pill. */
.sidebar .nav-item,
aside .nav-item {
  border-radius: 0;
  margin: 1px 8px;
  padding-right: 12px !important;
}

/* ============================================================
 * Sidebar scroll fix (2026-06-03)
 * Ensures the sidebar is always scrollable regardless of content
 * height. Works with position:fixed (per-page inline) and flex
 * column layouts. Mobile: hidden via transform, so no side effect.
 * ============================================================ */
.sidebar,
aside.sidebar {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;   /* dvh = dynamic viewport (mobile chrome bar aware) */
  height: 100vh !important;    /* fallback for browsers without dvh support */
  overflow-y: hidden !important; /* sidebar shell does NOT scroll; nav-nav does */
}
/* The nav area is the only scrollable region */
.sidebar .sidebar-nav,
aside.sidebar .sidebar-nav {
  flex: 1 1 0 !important;
  min-height: 0 !important;    /* required: flex children won't shrink below content by default */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* smooth momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  /* thin scrollbar on desktop */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.12) transparent;
}
/* Footer stays pinned at bottom, never scrolls out of view */
.sidebar .sidebar-footer,
aside.sidebar .sidebar-footer {
  flex-shrink: 0 !important;
}
/* Mobile: sidebar is hidden via translateX, so dvh/overflow rules are harmless */
@media (max-width: 768px) {
  .sidebar,
  aside.sidebar {
    height: 100dvh !important;
    height: 100vh !important;
  }
}

/* ============================================================
 * 「準備中」バナー / バッジ (BDY-launch-prep-004, 2026-05-24)
 * ページ最上部の banner と、要素レベルの inline badge。
 * data-stage 属性で色と意味合いを切替。
 * 参照: docs/audit/2026-05-21_beta1-prep-badge-audit.md
 * ============================================================ */
.sa-prep-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 12px 18px;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
}
.sa-prep-banner__icon {
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}
.sa-prep-banner__text { flex: 1; }
.sa-prep-banner__text strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 2px;
}
.sa-prep-banner a {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
}

/* β-2 機能（メンター / Studio Tutor / 学校追加プレビュー等） */
.sa-prep-banner[data-stage="beta2"] {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}
/* β-3 機能（community v2, 在校生レビュー等） */
.sa-prep-banner[data-stage="beta3"] {
  background: #ffffff;
  border-color: #e4e4e4;
  color: #444444;
}
/* β-1 スコープ内だが現時点 mock のページ（実データ未接続） */
.sa-prep-banner[data-stage="mock"] {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}
/* β期間中は無料 (pricing 系) */
.sa-prep-banner[data-stage="free"] {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}
/* 公開時期未確定 */
.sa-prep-banner[data-stage="tbd"] {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}

/* インライン用「準備中」バッジ — ボタン/リンク横の小ラベル */
.sa-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.4;
}
.sa-coming-soon[data-stage="beta2"] { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.sa-coming-soon[data-stage="beta3"] { background: #ffffff; color: #444444; border-color: #e4e4e4; }
.sa-coming-soon[data-stage="mock"]  { background: #fff7ed; color: #9a3412; border-color: #fdba74; }

@media (max-width: 520px) {
  .sa-prep-banner { padding: 10px 14px; font-size: 12.5px; }
  .sa-prep-banner__icon { font-size: 16px; }
}

/* Sidebar nav-item-badge — monochrome stage indicator (mock / beta2 / beta3 / tbd).
   Per-page inline definitions still exist (yellow #fef3c7), but the .sidebar
   prefix raises specificity so the global rule wins inside the partial. */
.sidebar .nav-item-badge,
aside .nav-item-badge {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--sa-primary-100, #ededeb);
  color: var(--sa-text, #3d3d3d);
  border: 1px solid var(--sa-border, #ddddda);
}
.sidebar .nav-item-badge[data-stage="mock"],
aside .nav-item-badge[data-stage="mock"] {
  background: var(--sa-primary-100, #ededeb);
  color: var(--sa-text, #3d3d3d);
}
.sidebar .nav-item-badge[data-stage="beta2"],
aside .nav-item-badge[data-stage="beta2"] {
  background: var(--sa-primary-50, #f5f5f4);
  color: var(--sa-ink, #101010);
  border-color: var(--sa-border-strong, #cfcfca);
}
.sidebar .nav-item-badge[data-stage="beta3"],
aside .nav-item-badge[data-stage="beta3"] {
  background: transparent;
  color: var(--sa-text-muted, #666666);
  border-color: var(--sa-border-soft, #e9e9e5);
}
.sidebar .nav-item-badge[data-stage="tbd"],
aside .nav-item-badge[data-stage="tbd"] {
  background: transparent;
  color: var(--sa-text-muted, #666666);
  border-color: var(--sa-border-soft, #e9e9e5);
  font-style: italic;
}

/* Buddy monochrome direction
   Inspired by WGB's restrained black/white system: fewer hues, thin borders,
   compact radius, and almost no decorative shadow. */
:root {
  --sa-primary: #111111;
  --sa-primary-600: #000000;
  --sa-primary-50: #f5f5f4;
  --sa-primary-100: #ededeb;
  --sa-primary-200: #d8d8d4;
  --sa-accent: #111111;
  --sa-accent-deep: #000000;
  --sa-accent-50: #f6f6f4;
  --sa-accent-100: #ececea;
  --sa-warm: #3f3f3f;
  --sa-warm-50: #f6f6f4;
  --sa-warm-100: #ececea;
  --sa-warm-200: #d8d8d4;
  --sa-ink: #101010;
  --sa-ink-soft: #1d1d1d;
  --sa-text: #3d3d3d;
  --sa-text-muted: #666666;
  --sa-bg: #f7f7f5;
  --sa-bg-alt: #efefec;
  --sa-surface: #ffffff;
  --sa-surface-tint: #fbfbfa;
  --sa-border: #ddddda;
  --sa-border-soft: #e9e9e5;
  --sa-border-strong: #cfcfca;
  --sa-radius-md: 8px;
  --sa-radius-lg: 10px;
  --sa-radius-xl: 12px;
  --sa-radius-2xl: 16px;
  --sa-shadow-sm: none;
  --sa-shadow-md: none;
  --sa-shadow-lg: none;
  --sa-shadow-warm: none;
}

body {
  background: var(--sa-bg) !important;
  color: var(--sa-ink) !important;
}

a,
.link,
.card-arrow,
.url-link,
.comp-link,
.sched-title,
.sidebar-logo span,
.logo span,
.header-meta strong,
.tab-btn.active,
.tl-month.current {
  color: var(--sa-ink) !important;
}

.sidebar,
.card,
.sa-card,
.stat-card,
.mentor-card,
.mentor-row,
.event-card,
.q-card,
.article-card,
.quick-card,
.advice-card,
.pf-school-card,
.check-item,
.route,
.similar-card,
.url-section,
.changelog-section,
.timeline-wrap,
.search-row,
.tab-nav,
.filter-bar,
.school-select,
.modal,
.sa-prep-banner,
.sa-coming-soon,
.filter-chip,
.country-chip,
.flow-chip,
.pill,
.badge,
.f-chip,
.h-option,
.btn,
input,
select,
textarea {
  border-color: var(--sa-border) !important;
  box-shadow: none !important;
}

.card,
.sa-card,
.stat-card,
.mentor-card,
.mentor-row,
.event-card,
.q-card,
.article-card,
.quick-card,
.advice-card,
.pf-school-card,
.check-item,
.route,
.similar-card,
.url-section,
.changelog-section,
.timeline-wrap,
.search-row,
.tab-nav,
.filter-bar,
.school-select,
.modal {
  background: var(--sa-surface) !important;
  border-radius: var(--sa-radius-lg) !important;
}

.sidebar,
.main,
.page-wrap,
.content-wrap,
.dashboard-wrap {
  background-color: var(--sa-bg) !important;
}

.nav-item:hover,
.nav-item.active,
.flow-chip:hover,
.filter-chip:hover,
.country-chip:hover,
.school-select:hover,
.tab-btn:hover,
.pill:hover,
.f-chip:hover,
.h-option:hover {
  background: var(--sa-primary-50) !important;
  border-color: var(--sa-border-strong) !important;
  color: var(--sa-ink) !important;
}

.filter-chip.active,
.country-chip.active,
.tab-btn.active,
.pill.active,
.f-chip.active,
.h-option.active,
.crel-5 {
  background: var(--sa-ink) !important;
  border-color: var(--sa-ink) !important;
  color: #ffffff !important;
}

.btn-primary,
.btn-scan,
.modal-submit,
a.btn-primary,
button[type="submit"],
[style*="background:#111111"],
[style*="background: #111111"],
[style*="background:#111111"],
[style*="background: #111111"] {
  background: var(--sa-ink) !important;
  background-image: none !important;
  border-color: var(--sa-ink) !important;
  color: #ffffff !important;
}

.btn-outline,
a.btn-outline,
[style*="color:#111111"],
[style*="color: #111111"],
[style*="color:#111111"],
[style*="color: #111111"] {
  color: var(--sa-ink) !important;
  border-color: var(--sa-border-strong) !important;
}

[style*="linear-gradient"][style*="#111111"],
[style*="linear-gradient"][style*="#111111"],
[style*="linear-gradient"][style*="#3f3f3f"],
[style*="linear-gradient"][style*="#ececea"],
[style*="linear-gradient"][style*="#f5f5f4"] {
  background: var(--sa-primary-50) !important;
  background-image: none !important;
}

[style*="#ececea"],
[style*="#f5f5f4"],
[style*="#f1f1ef"],
[style*="#cfcfca"],
.badge-purple,
.ctag-student,
.sa-prep-banner[data-stage="beta3"],
.sa-coming-soon[data-stage="beta3"] {
  background: var(--sa-primary-50) !important;
  border-color: var(--sa-border) !important;
  color: var(--sa-text) !important;
}

.tl-today,
.legend-dot,
.dl-dot {
  background-color: var(--sa-ink) !important;
}

table th,
.url-table th {
  background: var(--sa-bg-alt) !important;
  color: var(--sa-ink) !important;
}

#sa-aic-fab,
#sa-aic-send,
.sa-ai-ask-bar button,
.sa-aic-bubble.me,
.sa-w-btn.active {
  background: var(--sa-ink) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#sa-aic-fab:hover,
#sa-aic-send:hover,
.sa-ai-ask-bar button:hover {
  background: #000000 !important;
  box-shadow: none !important;
}

#sa-aic-panel,
.sa-ai-ask-bar,
.sa-width-controls {
  border-color: var(--sa-border) !important;
  box-shadow: none !important;
}

.sa-aic-avatar,
.sa-aic-personas,
.sa-aic-msgs,
#reorder-toggle.active,
.sa-disclaim,
.sa-disclaim[data-variant],
.sa-w-btn:hover {
  background: var(--sa-primary-50) !important;
  background-image: none !important;
  border-color: var(--sa-border) !important;
  color: var(--sa-text) !important;
}

.sa-aic-persona-chip:hover,
.sa-aic-persona-chip.active {
  border-color: var(--sa-ink) !important;
  color: #ffffff !important;
  background: var(--sa-ink) !important;
  background-image: none !important;
}

#sa-aic-input:focus,
.sa-ai-ask-bar:focus-within {
  border-color: var(--sa-ink) !important;
  box-shadow: none !important;
}

.sa-ai-explain-btn,
.sa-ai-explain-btn:hover,
.sa-aic-foot a:hover,
.sa-w-btn {
  color: var(--sa-ink) !important;
  border-color: var(--sa-border) !important;
  background: #ffffff !important;
}

/* ======================================================================
 * Global typographic lift (Mika 指示 2026-05-29「全ページ余白・タイポ底上げ」)
 * 全 wireframe に効く。安全な可読性プロパティのみ !important で底上げ。
 * font-size・色は既存層に任せ、ここでは line-height / 字間 / リズムのみ。
 * ====================================================================== */
body {
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  letter-spacing: 0.005em !important;
}
h1, h2, h3, h4,
.page-title, .sa-h1, .sa-h2, .sa-h3,
.card-title, .section-title {
  line-height: 1.28 !important;
  letter-spacing: -0.012em !important;
}
h1, .page-title, .sa-h1 { letter-spacing: -0.02em !important; }
p, li, .lead, .sa-lead, .card-sub, .page-subtitle, .meta-row, .row-sub {
  line-height: 1.75 !important;
}
/* 見出し→本文のリズム（inline 未指定時のみ効くよう控えめ・!important無し） */
h2 { margin-bottom: 14px; }
h3 { margin-bottom: 10px; }
.section-title { margin-bottom: 16px; }
/* 本文の読みやすい行長（measure）。幅広な段落のみ制限、レイアウト崩さない範囲 */
.lead, .sa-lead, .page-subtitle { max-width: 64ch; }
/* カード内の余白を一段ふっくら（inline padding が無いカードに効く） */
.card, .sa-card { padding: 22px 24px; }

/* ======================================================================
 * UNIFY LAYER (2026-05-31) — 全ページ最終統一上書き
 * 各ページの inline <style> が好き勝手な色・タイポを使っていても
 * ここで Hara-style minimal に強制統一する。
 * ====================================================================== */
:root {
  --u-ink: #111;
  --u-muted: #666;
  --u-soft: #999;
  --u-line: #e8e8e8;
  --u-paper: #fff;
  --u-shade: #fafaf8;
  --u-accent: #111;
}
html, body {
  background: var(--u-paper) !important;
  color: var(--u-ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.7;
  letter-spacing: 0.005em;
}
/* 紫・青グラデ・派手色を全廃 → 黒/白/グレーへ */
[style*="linear-gradient"] { background: var(--u-paper) !important; }
[style*="#6366f1"], [style*="#7c3aed"], [style*="#8b5cf6"], [style*="#a78bfa"],
[style*="purple"], [style*="indigo"], [style*="violet"] {
  color: var(--u-ink) !important;
}
/* 見出しリズム統一 */
h1, .h1 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; }
h2, .h2 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
h3, .h3 { font-weight: 700; line-height: 1.4; }
h1 + p, h2 + p, h3 + p { margin-top: 8px; color: var(--u-muted); }
/* リンク */
a { color: inherit; }
a:hover { opacity: .7; }
/* ボタン CTA は黒ベース */
.btn-cta, .btn-primary, button.primary, .sa-btn-primary {
  background: var(--u-ink) !important;
  color: #fff !important;
  border: 1px solid var(--u-ink) !important;
  border-radius: 6px;
  font-weight: 600;
}
.btn-cta:hover, .btn-primary:hover, button.primary:hover, .sa-btn-primary:hover {
  background: #000 !important; opacity: 1;
}
/* 副ボタン */
.btn-secondary, .sa-btn-secondary, button.secondary {
  background: #fff !important;
  color: var(--u-ink) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 6px;
  font-weight: 600;
}
/* カードの線・角・余白を均一に */
.card, .sa-card, .panel, .box {
  background: #fff !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
/* 入力欄統一 */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"],
input[type="tel"], input[type="date"], input[type="time"],
textarea, select {
  border: 1px solid var(--u-line);
  border-radius: 6px;
  background: #fff;
  color: var(--u-ink);
  padding: 9px 12px;
  font: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--u-ink);
}
/* 仕切り線 */
hr { border: 0; border-top: 1px solid var(--u-line); margin: 24px 0; }
/* tag / chip / badge → 単色 */
.tag, .chip, .badge, .pill, .f-chip {
  background: #fff;
  border: 1px solid var(--u-line);
  color: var(--u-ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}
.tag.active, .chip.active, .pill.active, .f-chip.active {
  background: var(--u-ink);
  color: #fff;
  border-color: var(--u-ink);
}
/* サイドバーアイコン SVG サイズ */
.sidebar .nav-icon svg, aside .nav-icon svg { width: 18px; height: 18px; }
.sidebar svg, aside svg { max-width: 22px; max-height: 22px; }
/* スクロールバー控えめ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d4d4d0; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* UNIFY LAYER追補: explorer の装飾色を全廃 */
[class*="ftag-"] {
  background: #f5f5f4 !important;
  color: #111 !important;
  border: 1px solid #e8e8e8 !important;
}
.rank-badge, .rank-badge.qs, .rank-badge.top10 {
  background: #111 !important;
  color: #fff !important;
}
.parent-badge { background: #f5f5f4 !important; color: #111 !important; }
.country-card { background: #fff !important; border: 1px solid #e8e8e8 !important; }
.country-card[style*="gradient"] { background: #fff !important; }
.school-card.saved { background: #fff !important; border-color: #111 !important; }
.deadline-badge { background: #f5f5f4 !important; color: #111 !important; border: 1px solid #e8e8e8 !important; }
/* deadline 緊急のみ赤線で区別（背景色は使わない） */
.deadline-badge.urgent, .deadline-badge[data-urgency="high"] {
  border-color: #b00 !important; color: #b00 !important; background: #fff !important;
}

/* UNIFY LAYER 追補2: landing-page white */
:root {
  --u-paper: #ffffff;
  --u-paper-pure: #ffffff;
}
html, body { background: var(--u-paper) !important; }
.card, .sa-card, .panel, .box, .school-card, .country-card, .field-card,
.f-chip, .tag, .chip, .badge, .pill, input, textarea, select {
  background: var(--u-paper-pure) !important;
}
.topbar, .sidebar, aside.sidebar { background: var(--u-paper) !important; }
/* 入力欄も紙色寄せ */
input:focus, textarea:focus, select:focus { background: #fff !important; }

/* UNIFY LAYER 追補3: 地域別色分けは廃止 — 全 chip をクリーンな白に統一 */
[data-region="eu"], [data-region="na"], [data-region="as"],
[data-region="oc"], [data-region="sa"], [data-region="mea"] {
  background: #fff !important; border-color: #e4e4e4 !important; color: #444 !important;
}
.f-chip.active[data-region] { background: #111 !important; color: #fff !important; }

/* UNIFY LAYER 追補4: 意味のない grey 背景・空 disclaim・linear-gradient を全廃 */
.page-header, .page-hero, .hero, .hero-section { background: transparent !important; }
.sa-disclaim:empty { display: none !important; }
/* class 内の linear-gradient 由来の色も無効化 */
*[class*="hero"], *[class*="banner"], *[class*="cover"] {
  background-image: none !important;
}

/* Explorer: 地域別フィルター */
.region-group { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start; padding: 4px 0; }
.region-label { font-size: 11px; font-weight: 700; color: #888; letter-spacing: 0.05em; padding-top: 7px; }
.region-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ────────────── Landing page: 全セクション背景を body 色に統一 ────────────── */
body[data-page="landing"] .section-situation,
body[data-page="landing"] .section-allinone,
body[data-page="landing"] .section-testimonials,
body[data-page="landing"] .section-cta,
body[data-page="landing"] .sa-section,
body[data-page="landing"] .sa-section--white,
body[data-page="landing"] footer,
body[data-page="landing"] .scroll-strip,
body[data-page="landing"] .quiz-panel,
body[data-page="landing"] .allinone-inner,
body[data-page="landing"] .situation-inner {
  background: transparent !important;
  background-color: transparent !important;
}
body[data-page="landing"] .feature-card.purple,
body[data-page="landing"] .feature-card.blue,
body[data-page="landing"] .feature-card.green,
body[data-page="landing"] .feature-card.amber,
body[data-page="landing"] .feature-card.pink,
body[data-page="landing"] .feature-card.slate {
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
/* section-cta (ダーク) と footer だけ意図的に維持 */
body[data-page="landing"] .section-cta {
  background: #1a1a1a !important;
}
body[data-page="landing"] footer {
  background: transparent !important;
}

/* Landing hero CTA button: fit-content, block-level for flex alignment */
body[data-page="landing"] .cta-main {
  width: fit-content !important;
  display: block !important;
}

/* ────────────── 全ページ背景: オフホワイト固定（テーマ上書き禁止） ────────────── */
html, body {
  background: #fff !important;
  background-image: none !important;
}

/* ────────────── Landing: 全背景を #fff に完全統一 ────────────── */
body[data-page="landing"],
body[data-page="landing"] *:not(button):not(.cta-main):not(.cta-btn-white):not(.quiz-badge):not(.nav-dropdown):not(.nav-lang-dropdown):not(.mentor-recruit):not(.mentor-recruit__tag):not(.mentor-recruit__btn) {
  background-color: #fff !important;
  background-image: none !important;
}
/* ボタン・ドット・アクセントは保持 */
body[data-page="landing"] .cta-main { background: #1a1a1a !important; }
body[data-page="landing"] .cta-btn-white { background: #fff !important; color: #1a1a1a !important; }
body[data-page="landing"] .hero-tag-dot { background: #1a1a1a !important; }
body[data-page="landing"] .section-cta { background: #1a1a1a !important; }
body[data-page="landing"] .section-cta * { background-color: transparent !important; }
body[data-page="landing"] .section-cta .cta-btn-white { background: #fff !important; }
/* nav は半透明白維持 */
body[data-page="landing"] nav { background: rgba(255,255,255,0.92) !important; }

/* ======================================================================
 * MOBILE NAV DRAWER (added 2026-06-03)
 * モバイル(≤768px)で off-canvas サイドバーを開くハンバーガー + 背景。
 * loader.js ensureMobileNav() が .m-nav-ham / .m-nav-backdrop を body に注入。
 * サイドバーがある app ページのみ（LP には注入されない）。
 * 目的: スマホのログイン後ページで「ナビを開く導線が無い / 浮遊ピルが被る」を解消。
 * ====================================================================== */
.m-nav-ham, .m-nav-backdrop { display: none; }

@media (max-width: 768px) {
  /* ハンバーガー（常時表示・左上固定） */
  .m-nav-ham {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    position: fixed; top: 10px; left: 10px; z-index: 350;
    width: 40px; height: 40px; padding: 0;
    background: #fff; border: 1px solid #e8e8e8; border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08); cursor: pointer;
  }
  .m-nav-ham span { display: block; width: 18px; height: 2px; background: #1a1a2e; border-radius: 2px; }

  /* サイドバーを off-canvas ドロワー化 */
  body[data-page] .sidebar,
  body[data-page] aside.sidebar {
    left: 0 !important;
    width: min(82vw, 300px) !important;
    min-width: 0 !important;
    max-width: 300px !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 400 !important;
    overflow-y: auto;
    box-shadow: none;
  }
  body.nav-open .sidebar,
  body.nav-open aside.sidebar {
    transform: translateX(0) !important;
    box-shadow: 0 0 40px rgba(0,0,0,.25);
  }
  /* collapsed(PC用 56px rail) はモバイルでは full ドロワー表示に戻す */
  body.nav-open .sidebar.collapsed { width: min(82vw,300px) !important; }
  body.nav-open .sidebar.collapsed .sidebar-brand-text,
  body.nav-open .sidebar.collapsed .nav-section-label,
  body.nav-open .sidebar.collapsed .nav-item-badge,
  body.nav-open .sidebar.collapsed .sidebar-footer,
  body.nav-open .sidebar.collapsed .nav-sub,
  body.nav-open .sidebar.collapsed .nav-caret { display: block !important; }
  body.nav-open .sidebar.collapsed .nav-item > span:not(.nav-icon):not(.nav-caret),
  body.nav-open .sidebar.collapsed .nav-item-toggle > span:not(.nav-icon):not(.nav-caret) { display: inline !important; }

  /* 背景オーバーレイ */
  body.nav-open .m-nav-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.42); z-index: 390;
  }
  body.nav-open { overflow: hidden; }

  /* 浮遊する言語(EN)/通貨($USD)ピルはモバイルでは隠す（ヘッダーに被って分かりにくいため） */
  .lang-switcher, #lang-switcher-mount,
  .currency-switcher, #currency-switcher-mount { display: none !important; }

  /* 本文がハンバーガーに被らないよう上部に余白 */
  body[data-page] main.main { padding-top: 54px !important; }
}