/* =============================================================
   学習目標明確化支援システム ver.2
   デザインは Figma Community「New Year Deal Web Page」
   （Nickelfox Design）の雰囲気を参考にしています。
   大胆な大型タイポグラフィ／レトロポップな太い輪郭とソリッドシャドウ／
   たっぷりの余白。ベースカラーはオレンジ。

   ■ タイポグラフィ
     フォントサイズは 12 / 14 / 16 / 18 / 20 / 24 / 30 / 40px の8段階のみを使い，
     役割（メタ情報・補助・本文・小見出し・見出し…）ごとに割り当てています。
     本文の基準は 16px，最小は 12px です。
   ■ 文字色
     本文 #241A12，補助 #635447。背景に対するコントラスト比は
     いずれも 5.5:1 以上（WCAG AA 基準 4.5:1 を上回る）を確保しています。
   ============================================================= */

:root {
  /* --- ベースカラー（オレンジ） --- */
  --c-orange: #F4711F;        /* 面・装飾（この上には濃茶の文字を置く） */
  --c-orange-hover: #FF8B45;  /* 面のホバー */
  --c-orange-deep: #D2540A;
  --c-orange-dark: #A83E03;   /* 文字・リンクに使う濃いオレンジ（5.9:1） */
  --c-orange-soft: #FFE4CE;
  --c-orange-tint: #FFF2E6;

  /* --- ニュートラル（温かみのあるクリーム＆ダークブラウン） --- */
  --c-ink: #241A12;           /* 本文（16:1） */
  --c-ink-soft: #635447;      /* 補助テキスト（6.9:1） */
  --c-cream: #FFF8F0;
  --c-cream-dim: #FBEFE2;
  --c-paper: #FFFFFF;
  --c-line: #E8D8C6;

  /* --- アクセント（いずれも背景に対して 5.5:1 以上） --- */
  --c-yellow: #FFC93C;
  --c-yellow-soft: #FFF3D2;
  --c-green: #1F6B44;
  --c-green-soft: #DDF2E5;
  --c-red: #A63320;
  --c-red-soft: #FBE3DD;
  --c-notice: #7A5600;

  /* --- 寸法 --- */
  --sp-2xs: 4px; --sp-xs: 8px; --sp-s: 12px; --sp-m: 16px; --sp-l: 20px;
  --sp-xl: 24px; --sp-2xl: 32px; --sp-3xl: 40px; --sp-4xl: 56px;
  --r-s: 8px; --r-m: 12px; --r-l: 18px; --r-xl: 26px; --r-full: 9999px;

  /* --- タイポグラフィスケール（8段階） --- */
  --fs-xs: 12px;    /* メタ情報・キャプション（最小） */
  --fs-sm: 14px;    /* 補助・テーブル・小さなボタン */
  --fs-md: 16px;    /* 本文（基準） */
  --fs-lg: 18px;    /* 強調・小見出し */
  --fs-xl: 20px;    /* 見出し3 */
  --fs-2xl: 24px;   /* 見出し2 */
  --fs-3xl: 30px;   /* 見出し1 */
  --fs-4xl: 40px;   /* ディスプレイ */
  --lh-tight: 1.3;  /* 見出し */
  --lh-snug: 1.5;   /* 中間 */
  --lh-normal: 1.7; /* 本文 */

  /* --- レトロなソリッドシャドウ --- */
  --shadow-pop: 4px 4px 0 var(--c-ink);
  --shadow-pop-sm: 3px 3px 0 var(--c-ink);
  --shadow-lift: 0 18px 44px rgba(36, 26, 18, 0.22);

  /* --- ガクモくんの吹き出し --- */
  --gk-bubble: #FFF3D2;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Noto Sans JP", "Outfit", system-ui, -apple-system, "Segoe UI", "Hiragino Sans", sans-serif;
  font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--c-ink);
  background: var(--c-cream);   /* 背景は単色（グラデーションなし） */
  font-feature-settings: "palt";
}
a { color: var(--c-orange-dark); text-decoration: none; font-weight: 700; }
a:hover { text-decoration: underline; }
code {
  font-family: ui-monospace, "SF Mono", monospace; background: var(--c-cream-dim);
  border-radius: var(--r-s); padding: 1px 7px; font-size: var(--fs-sm);
}
h1, h2, h3, h4 {
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  line-height: var(--lh-tight); font-weight: 800; letter-spacing: -0.02em; margin-top: 0;
}
/* 個別指定がない見出しもスケールに乗るよう既定値を与える */
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

/* ---- header ---- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-m);
  padding: var(--sp-s) var(--sp-xl);
  background: var(--c-cream); border-bottom: 2px solid var(--c-ink);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; gap: var(--sp-s); align-items: center; flex-wrap: wrap; }
.brand a {
  font-family: "Outfit", "Noto Sans JP", sans-serif; font-weight: 800; color: var(--c-ink);
  font-size: var(--fs-lg); letter-spacing: -0.02em;
}
.brand a:hover { text-decoration: none; color: var(--c-orange-dark); }
.ver-badge {
  background: var(--c-orange); color: var(--c-ink); font-size: var(--fs-xs); font-weight: 800;
  border: 2px solid var(--c-ink); border-radius: var(--r-full); padding: 1px var(--sp-s);
  white-space: nowrap;
}
nav { display: flex; gap: var(--sp-s); align-items: center; flex-wrap: wrap; font-size: var(--fs-sm); }
nav a { color: var(--c-ink); }
nav a:hover { color: var(--c-orange-dark); }
nav .user { color: var(--c-ink-soft); font-weight: 700; }

/* ---- ヘッダーメニュー（トップページと同じボタン型） ---- */
.topbar .user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-orange-tint); border: 2px solid var(--c-ink); border-radius: var(--r-full);
  padding: 2px var(--sp-s); font-size: var(--fs-sm); font-weight: 700;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-ink); border-radius: var(--r-full);
  padding: 4px var(--sp-m); min-height: 34px;
  font-size: var(--fs-sm); font-weight: 800; text-decoration: none; color: var(--c-ink);
  background: var(--c-paper); box-shadow: var(--shadow-pop-sm);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
  white-space: nowrap;
}
.topbar .nav-btn:hover {
  transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--c-ink);
  background: var(--c-orange-tint); color: var(--c-ink); text-decoration: none;
}
.topbar .nav-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--c-ink); }
.topbar .nav-btn.primary { background: var(--c-orange); color: var(--c-ink); }
.topbar .nav-btn.primary:hover { background: var(--c-orange-hover); }
.container { width: min(1200px, calc(100% - var(--sp-2xl))); margin: var(--sp-2xl) auto var(--sp-4xl); }
body.has-gakumo-dock .container { padding-bottom: 240px; }
@media (max-width: 700px) { body.has-gakumo-dock .container { padding-bottom: 280px; } }

/* ---- カード ---- */
.card {
  background: var(--c-paper); border: 2px solid var(--c-ink); border-radius: var(--r-xl);
  padding: var(--sp-xl); box-shadow: var(--shadow-pop); margin-bottom: var(--sp-xl);
}
.card.narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
.card.narrow-wide { max-width: 780px; }
.page-head { display: flex; justify-content: space-between; gap: var(--sp-l); align-items: flex-start;
             margin-bottom: var(--sp-xl); flex-wrap: wrap; }
.page-head h1 { margin: 0 0 var(--sp-2xs); font-size: clamp(var(--fs-2xl), 3.4vw, var(--fs-3xl)); }
.page-head p { margin: 0; color: var(--c-ink-soft); font-size: var(--fs-md); }
.actions { display: flex; gap: var(--sp-xs); flex-wrap: wrap; align-items: center; }

/* ---- ボタン ---- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xs);
  border: 2px solid var(--c-ink); background: var(--c-paper); color: var(--c-ink);
  padding: 0 var(--sp-l); min-height: 40px; border-radius: var(--r-full);
  font: inherit; font-weight: 800; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-pop-sm); transition: transform 0.1s, box-shadow 0.1s, background-color 0.15s;
}
.button:hover { background: var(--c-orange-tint); text-decoration: none; transform: translate(-1px, -1px);
                box-shadow: 4px 4px 0 var(--c-ink); }
.button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--c-ink); }
.button:focus-visible { outline: 3px solid var(--c-orange-dark); outline-offset: 2px; }
.button:disabled { background: var(--c-cream-dim); color: var(--c-ink-soft); box-shadow: none;
                   transform: none; cursor: not-allowed; border-color: var(--c-line); }
.button.primary { background: var(--c-orange); color: var(--c-ink); }
.button.primary:hover { background: var(--c-orange-hover); }
.button.primary:disabled { background: var(--c-cream-dim); color: var(--c-ink-soft); }
.button.big { min-height: 46px; padding: 0 var(--sp-xl); font-size: var(--fs-md); }
.button.diagnose {
  background: var(--c-orange); color: var(--c-ink); min-height: 52px; padding: 0 var(--sp-2xl);
  font-size: var(--fs-lg); box-shadow: var(--shadow-pop);
}
.button.diagnose:hover { background: var(--c-orange-hover); box-shadow: 6px 6px 0 var(--c-ink); }
.button.diagnose:disabled, .button.diagnose:disabled:hover {
  background: var(--c-cream-dim); color: var(--c-ink-soft); box-shadow: none; border-color: var(--c-line);
}

/* ---- バッジ・通知 ---- */
.badge {
  display: inline-block; border: 2px solid var(--c-ink); border-radius: var(--r-full);
  padding: 0 var(--sp-s); font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; line-height: 1.9;
}
.badge.ok { background: var(--c-green-soft); color: var(--c-green); }
.badge.warn { background: var(--c-yellow-soft); color: var(--c-notice); }
.badge.ng { background: var(--c-red-soft); color: var(--c-red); }
.notice { border: 2px solid var(--c-ink); border-radius: var(--r-m);
          padding: var(--sp-s) var(--sp-m); font-size: var(--fs-md); }
.notice.error { background: var(--c-red-soft); color: var(--c-red); }
.notice.info { background: var(--c-orange-tint); color: var(--c-orange-dark); }
.notice.warn { background: var(--c-yellow-soft); color: var(--c-notice); }
.notice.ok-notice { background: var(--c-green-soft); color: var(--c-green); }

/* ---- フォーム ---- */
.form { display: grid; gap: var(--sp-m); }
.form label, .step-panel label { display: grid; gap: var(--sp-2xs); font-weight: 800; font-size: var(--fs-md); }
input, textarea, select {
  width: 100%; border: 2px solid var(--c-ink); border-radius: var(--r-m);
  padding: var(--sp-xs) var(--sp-s); font: inherit; font-weight: 400; font-size: var(--fs-md);
  background: var(--c-paper); color: var(--c-ink); min-height: 44px;
}
input:hover, textarea:hover, select:hover { background: var(--c-orange-tint); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--c-orange-dark); box-shadow: 3px 3px 0 var(--c-orange); background: var(--c-paper);
}
textarea { resize: vertical; line-height: var(--lh-normal); }
input:disabled, textarea:disabled, select:disabled {
  background: var(--c-cream-dim); color: var(--c-ink-soft); border-color: var(--c-line); box-shadow: none;
}

/* ---- テーブル ---- */
.table {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--c-paper);
  border: 2px solid var(--c-ink); border-radius: var(--r-l); overflow: hidden;
}
.table th, .table td {
  border-bottom: 1px solid var(--c-line); padding: var(--sp-s) var(--sp-m);
  text-align: left; vertical-align: top; font-size: var(--fs-sm); line-height: var(--lh-snug);
}
.table thead th { background: var(--c-orange-soft); font-weight: 800; border-bottom: 2px solid var(--c-ink); }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--c-orange-tint); }
.table .wide { max-width: 420px; }
.table.compact th, .table.compact td { padding: var(--sp-xs) var(--sp-s); }
.table small { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.definition { display: grid; grid-template-columns: 180px 1fr; gap: var(--sp-xs) var(--sp-m); margin: 0; }
.definition dt { font-weight: 800; color: var(--c-ink-soft); font-size: var(--fs-sm); }
.definition dd { margin: 0; font-size: var(--fs-md); }
.definition dd small { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.pre-wrap { white-space: pre-wrap; }
.plain-list { margin: 0; padding-left: var(--sp-l); }
.mini-note { font-weight: 400; font-size: var(--fs-xs); color: var(--c-ink-soft); line-height: var(--lh-snug); }
.sub-links { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.inline-form { display: inline-flex; gap: var(--sp-xs); align-items: center; }
.history-item {
  border: 2px solid var(--c-line); border-radius: var(--r-m);
  padding: var(--sp-xs) var(--sp-m); margin: var(--sp-xs) 0; background: var(--c-cream);
}
.history-item summary { cursor: pointer; font-weight: 800; font-size: var(--fs-md); }
.history-item small { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.accent { color: var(--c-orange-dark); }

/* ---- ガクモくん共通 ---- */
.gakumo-svg { display: block; }
.gakumo-float { animation: gk-float 3.2s ease-in-out infinite; }
@keyframes gk-float { 0%, 100% { transform: translateY(0) rotate(0.4deg); } 50% { transform: translateY(-9px) rotate(-1.2deg); } }
.speech.static {
  background: var(--gk-bubble); border: 2px solid var(--c-ink); border-radius: var(--r-l);
  padding: var(--sp-s) var(--sp-m); font-size: var(--fs-md); position: relative; max-width: 340px;
  box-shadow: var(--shadow-pop-sm); font-weight: 700;
}

/* ---- 認証画面 ---- */
.auth-hero { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-2xl); align-items: start;
             margin-top: var(--sp-xl); }
@media (max-width: 860px) { .auth-hero { grid-template-columns: 1fr; } }
.auth-gakumo { display: grid; justify-items: center; gap: var(--sp-m); }
.auth-gakumo svg { width: 190px; height: auto; }
.auth-card h1 { margin-top: 0; font-size: clamp(var(--fs-2xl), 3.4vw, var(--fs-3xl)); }
.auth-card .lead { color: var(--c-ink-soft); font-size: var(--fs-md); }

/* ---- 一覧 ---- */
.goal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--sp-l); }
.goal-card {
  display: grid; gap: var(--sp-xs); background: var(--c-paper); border: 2px solid var(--c-ink);
  border-radius: var(--r-l); padding: var(--sp-l); color: var(--c-ink); box-shadow: var(--shadow-pop-sm);
  transition: transform 0.12s, box-shadow 0.12s; font-weight: 400;
}
.goal-card:hover { text-decoration: none; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--c-orange); }
.goal-card-head { display: flex; justify-content: space-between; gap: var(--sp-xs); align-items: center; }
.goal-title { font-family: "Outfit", "Noto Sans JP", sans-serif; font-weight: 800; font-size: var(--fs-lg);
              letter-spacing: -0.01em; line-height: var(--lh-tight); }
.goal-card-body { display: flex; gap: var(--sp-2xs); flex-wrap: wrap; font-size: var(--fs-xs); }
.goal-card-body span { background: var(--c-orange-tint); border: 1px solid var(--c-line);
                       border-radius: var(--r-full); padding: 1px var(--sp-xs); font-weight: 700; }
.goal-card-foot { display: flex; justify-content: space-between; gap: var(--sp-xs); flex-wrap: wrap;
                  color: var(--c-ink-soft); font-size: var(--fs-xs);
                  border-top: 1px dashed var(--c-line); padding-top: var(--sp-xs); margin-top: var(--sp-2xs); }
.goal-open { color: var(--c-orange-dark); font-weight: 800; }
.empty-state { display: grid; justify-items: center; gap: var(--sp-m); padding: var(--sp-4xl) 0; }
.empty-gakumo svg { width: 180px; height: auto; }

/* ---- ウィザード ---- */
.done-banner {
  display: flex; justify-content: space-between; gap: var(--sp-m); align-items: center; flex-wrap: wrap;
  background: var(--c-green-soft); color: var(--c-green); border: 2px solid var(--c-ink);
  box-shadow: var(--shadow-pop-sm); margin-bottom: var(--sp-l); font-weight: 700;
}
.wizard-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-m);
               flex-wrap: wrap; margin-bottom: var(--sp-m); }
.wizard-title { flex: 1; min-width: 260px; }
.title-label { display: block; font-size: var(--fs-xs); color: var(--c-ink-soft); font-weight: 800;
               letter-spacing: 0.04em; }
.title-input {
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: clamp(var(--fs-xl), 2.8vw, var(--fs-3xl)); font-weight: 800; letter-spacing: -0.02em;
  border: none; border-bottom: 3px solid var(--c-ink); border-radius: 0;
  padding: var(--sp-2xs) 0; background: transparent; min-height: 46px;
}
.title-input:hover { background: transparent; }
.title-input:focus { outline: none; border-color: var(--c-orange-dark); box-shadow: none; }
.wizard-actions { display: flex; gap: var(--sp-xs); align-items: center; }
.save-status { font-size: var(--fs-xs); color: var(--c-ink-soft); min-width: 122px; text-align: right; font-weight: 700; }
.save-status.is-saved { color: var(--c-green); }
.save-status.is-dirty { color: var(--c-orange-dark); }
.save-status.is-error { color: var(--c-red); }

/* stepper */
.stepper { display: flex; gap: var(--sp-2xs); list-style: none; margin: 0 0 var(--sp-l); padding: 0; flex-wrap: wrap; }
.stepper li {
  display: flex; gap: var(--sp-xs); align-items: center; padding: var(--sp-2xs) var(--sp-m);
  border-radius: var(--r-full); border: 2px solid var(--c-ink); background: var(--c-paper);
  cursor: pointer; font-size: var(--fs-sm); font-weight: 800; color: var(--c-ink-soft);
  transition: transform 0.1s, background-color 0.15s; min-height: 36px;
}
.stepper li:hover { transform: translateY(-2px); background: var(--c-orange-tint); }
.stepper li .step-no {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--c-line); color: var(--c-ink); font-size: var(--fs-xs);
}
.stepper li.is-active { background: var(--c-orange); color: var(--c-ink); box-shadow: var(--shadow-pop-sm); }
.stepper li.is-active .step-no { background: var(--c-paper); color: var(--c-orange-dark); }
.stepper li.is-done { color: var(--c-green); background: var(--c-green-soft); }
.stepper li.is-done .step-no { background: var(--c-green); color: var(--c-paper); }
.step-panel { display: none; scroll-margin-top: 80px; }
.step-panel.is-active { display: block; }
.step-panel h2 { margin-top: 0; font-size: clamp(var(--fs-2xl), 3.2vw, var(--fs-3xl)); }
.step-desc { color: var(--c-ink-soft); margin-top: calc(var(--sp-2xs) * -1); font-size: var(--fs-md); }
.step-nav { display: flex; justify-content: space-between; gap: var(--sp-s); margin-top: var(--sp-xl);
            border-top: 2px dashed var(--c-line); padding-top: var(--sp-m); }
/* 診断が主アクションになるステップ5では，次へ進むボタンを控えめにする */
.step-panel[data-panel="5"] .step-nav .button.primary {
  background: var(--c-paper); color: var(--c-ink);
}
.step-panel[data-panel="5"] .step-nav .button.primary:hover { background: var(--c-orange-tint); }

/* 科目 */
.subject-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-l); max-width: 560px; }
.subject-card {
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; padding: var(--sp-2xl) var(--sp-s);
  border-radius: var(--r-l); border: 2px solid var(--c-ink); background: var(--c-paper);
  cursor: pointer; color: var(--c-ink); box-shadow: var(--shadow-pop-sm);
  transition: transform 0.12s, box-shadow 0.12s, background-color 0.15s;
}
.subject-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--c-ink); background: var(--c-orange-tint); }
.subject-card.is-selected { background: var(--c-orange); box-shadow: 6px 6px 0 var(--c-ink); }

/* 単元 */
.unit-picker { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--sp-s); align-items: end;
               margin-bottom: var(--sp-m); }
@media (max-width: 760px) { .unit-picker { grid-template-columns: 1fr; } }
.unit-list { display: grid; gap: var(--sp-xs); }
.unit-chip {
  display: flex; justify-content: space-between; gap: var(--sp-s); align-items: center;
  border: 2px solid var(--c-ink); background: var(--c-orange-tint); border-radius: var(--r-m);
  padding: var(--sp-xs) var(--sp-m); box-shadow: var(--shadow-pop-sm);
}
.unit-chip .unit-chip-text { font-weight: 800; font-size: var(--fs-md); }
.unit-chip .unit-chip-text small { display: block; color: var(--c-ink-soft); font-weight: 400;
                                   font-size: var(--fs-xs); }
.unit-remove {
  border: 2px solid var(--c-ink); background: var(--c-paper); color: var(--c-red);
  border-radius: var(--r-full); padding: 2px var(--sp-s);
  font: inherit; font-size: var(--fs-xs); font-weight: 800; cursor: pointer;
}
.unit-remove:hover { background: var(--c-red-soft); }
.unit-goals { margin-top: var(--sp-l); }
.unit-goals h3, .unit-added h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-xs); }
.competency-list-v2 { display: grid; gap: var(--sp-xs); }
.competency-item-v2 {
  background: var(--c-cream); border: 2px solid var(--c-line);
  border-radius: var(--r-m); padding: var(--sp-xs) var(--sp-m); font-size: var(--fs-md);
  line-height: var(--lh-snug);
}
.competency-item-v2 .comp-source { color: var(--c-ink-soft); font-size: var(--fs-xs); }
.unit-name-label { margin-top: var(--sp-l); max-width: 640px; }
.empty-hint {
  color: var(--c-ink-soft); font-size: var(--fs-md); background: var(--c-cream);
  border: 2px dashed var(--c-line); border-radius: var(--r-m); padding: var(--sp-s) var(--sp-m);
}

/* 時間 */
.hours-inputs { display: grid; grid-template-columns: repeat(2, minmax(200px, 300px)); gap: var(--sp-l); }
@media (max-width: 640px) { .hours-inputs { grid-template-columns: 1fr; } }
.hours-row { display: flex; gap: var(--sp-xs); align-items: center; font-weight: 700; font-size: var(--fs-md); }
.hours-row input { width: 96px; text-align: center; font-size: var(--fs-2xl); font-weight: 800;
                   font-family: "Outfit", sans-serif; }
.hours-preview { font-family: "Outfit", "Noto Sans JP", sans-serif; font-weight: 800;
                 color: var(--c-orange-dark); min-height: 1.4em; font-size: var(--fs-xl); }

/* 生徒観 */
.seikan-questions { display: grid; gap: var(--sp-s); margin-bottom: var(--sp-m); }
.seikan-q { border: 2px solid var(--c-line); border-radius: var(--r-m);
            padding: var(--sp-s) var(--sp-m); background: var(--c-paper); }
.seikan-q-head { font-weight: 800; margin-bottom: var(--sp-xs); font-size: var(--fs-md); }
.seikan-q-head .q-multi {
  font-size: var(--fs-xs); color: var(--c-ink); background: var(--c-orange);
  border: 2px solid var(--c-ink); border-radius: var(--r-full);
  padding: 0 var(--sp-xs); margin-left: var(--sp-xs); font-weight: 800; white-space: nowrap;
}
.chip-row { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }
.chip {
  border: 2px solid var(--c-ink); background: var(--c-paper); border-radius: var(--r-full);
  padding: var(--sp-2xs) var(--sp-s); cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 700;
  color: var(--c-ink); transition: transform 0.1s, background-color 0.15s; min-height: 34px;
}
.chip:hover { background: var(--c-orange-tint); transform: translateY(-1px); }
.chip.is-selected { background: var(--c-orange); border-color: var(--c-ink); color: var(--c-ink);
                    box-shadow: var(--shadow-pop-sm); }
.seikan-free { margin-top: var(--sp-s); }
.seikan-free-label { font-size: var(--fs-sm); font-weight: 800;
                     color: var(--c-ink-soft); margin-bottom: var(--sp-2xs); display: block; }
.seikan-free input, .seikan-free textarea { font-weight: 400; }
.seikan-mini-grid { display: flex; gap: var(--sp-s); flex-wrap: wrap; align-items: center;
                    font-weight: 700; font-size: var(--fs-md); }
.seikan-mini-grid select, .seikan-mini-grid input { width: 116px; }
.seikan-compose { display: flex; gap: var(--sp-s); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-s); }
.seikan-text-label textarea { font-weight: 400; }

/* 学習目標・診断 */
.source-goals {
  border: 2px dashed var(--c-line); border-radius: var(--r-m);
  padding: var(--sp-s) var(--sp-m); margin-bottom: var(--sp-l); background: var(--c-cream);
}
.source-goals summary { font-weight: 800; cursor: pointer; font-size: var(--fs-md); }
.source-goals .competency-list-v2 { margin-top: var(--sp-xs); }
.source-goals .competency-item-v2 { background: var(--c-paper); }
.objective-list { display: grid; gap: var(--sp-l); margin-bottom: var(--sp-s); }
.objective-card {
  border: 2px solid var(--c-ink); border-radius: var(--r-l); padding: var(--sp-l);
  background: var(--c-paper); box-shadow: var(--shadow-pop-sm);
}
.objective-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-xs);
                       margin-bottom: var(--sp-s); }
.objective-card-head h3 { margin: 0; font-size: var(--fs-xl); }
.objective-bloom-row { display: flex; gap: var(--sp-xs); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-xs); }
.bloom-chip {
  display: inline-flex; align-items: center; gap: var(--sp-xs); border-radius: var(--r-full);
  padding: var(--sp-2xs) var(--sp-s); font-weight: 800; font-size: var(--fs-sm);
  border: 2px solid var(--c-ink);
}
.bloom-processes { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-bottom: var(--sp-xs);
                   line-height: var(--lh-snug); }
.bloom-processes-label { font-weight: 800; }
.verb-chips { display: flex; gap: var(--sp-2xs); flex-wrap: wrap; align-items: center;
              margin: var(--sp-xs) 0 var(--sp-s); }
.verb-chips .mini-note { font-size: var(--fs-sm); }
.verb-chip {
  background: var(--c-paper); border: 2px solid var(--c-line); color: var(--c-orange-dark);
  border-radius: var(--r-full); padding: 2px var(--sp-s); font: inherit; font-size: var(--fs-sm);
  font-weight: 700; cursor: pointer; transition: 0.12s;
}
.verb-chip:hover { background: var(--c-orange); border-color: var(--c-ink); color: var(--c-ink); }
.objective-textarea { font-weight: 400; min-height: 104px; }
.objective-remove {
  border: 2px solid var(--c-ink); background: var(--c-paper); color: var(--c-red);
  border-radius: var(--r-full); padding: 2px var(--sp-s);
  font: inherit; font-size: var(--fs-xs); font-weight: 800; cursor: pointer;
}
.objective-remove:hover { background: var(--c-red-soft); }
.diagnose-bar { display: flex; gap: var(--sp-m); align-items: center; flex-wrap: wrap;
                margin: var(--sp-l) 0 var(--sp-2xs); }

/* 診断結果 */
.result-box { margin-top: var(--sp-m); border-top: 2px dashed var(--c-line); padding-top: var(--sp-m); }
.result-banner {
  border: 2px solid var(--c-ink); border-radius: var(--r-m); padding: var(--sp-s) var(--sp-m);
  font-family: "Outfit", "Noto Sans JP", sans-serif; font-weight: 800; letter-spacing: -0.01em;
  font-size: var(--fs-xl); margin-bottom: var(--sp-s); box-shadow: var(--shadow-pop-sm);
}
.result-banner.clear { background: var(--c-green-soft); color: var(--c-green); }
.result-banner.notclear { background: var(--c-yellow-soft); color: var(--c-notice); }
.result-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: var(--sp-xs);
                border: 2px solid var(--c-ink); border-radius: var(--r-m); overflow: hidden; }
.result-table th, .result-table td {
  border-bottom: 1px solid var(--c-line); padding: var(--sp-xs) var(--sp-m);
  text-align: left; font-size: var(--fs-md); line-height: var(--lh-snug);
  background: var(--c-paper); vertical-align: top;
}
.result-table thead th { background: var(--c-orange-soft); font-weight: 800; border-bottom: 2px solid var(--c-ink);
                         font-size: var(--fs-sm); }
.result-table tbody tr:last-child th, .result-table tbody tr:last-child td { border-bottom: none; }
.result-table tbody th, .result-table tbody td:first-of-type { white-space: nowrap; width: 1%; }
.correction-box {
  background: var(--c-red-soft); border: 2px solid var(--c-ink);
  border-radius: var(--r-m); padding: var(--sp-s) var(--sp-m);
  margin-bottom: var(--sp-s); font-size: var(--fs-md); box-shadow: var(--shadow-pop-sm);
}
.correction-box .correction-head { font-weight: 800; color: var(--c-red); margin-bottom: var(--sp-2xs); }
.gakumo-hints {
  background: var(--gk-bubble); border: 2px solid var(--c-ink); border-radius: var(--r-m);
  padding: var(--sp-s) var(--sp-m); font-size: var(--fs-md); box-shadow: var(--shadow-pop-sm);
}
.gakumo-hints .hints-head { font-weight: 800; margin-bottom: var(--sp-2xs); }
.gakumo-hints ul { margin: 0; padding-left: var(--sp-l); }
.gakumo-hints li { margin: var(--sp-2xs) 0; }
.result-meta { color: var(--c-ink-soft); font-size: var(--fs-xs); margin-top: var(--sp-xs); }
.diag-history { margin-top: var(--sp-xs); }
.diag-history .mini-note { font-size: var(--fs-sm); }

/* 学習目標カード：診断した文（上に残す）と，修正版の入力欄（診断結果の下・再診断ボタンの直前） */
.objective-diagnosed {
  border: 2px solid var(--c-line); border-radius: var(--r-m);
  background: var(--c-cream); padding: var(--sp-xs) var(--sp-m); margin-top: var(--sp-xs);
}
.objective-diagnosed-label { font-size: var(--fs-xs); font-weight: 800; color: var(--c-ink-soft); margin-bottom: 2px; }
.objective-diagnosed-text { font-size: var(--fs-md); line-height: var(--lh-normal); white-space: pre-wrap; }
.objective-card .result-box { margin-top: var(--sp-s); border-top: none; padding-top: 0; }
.objective-edit { margin-top: var(--sp-s); }
.objective-edit.is-revision {
  margin-top: var(--sp-m); border-top: 2px dashed var(--c-line); padding-top: var(--sp-m);
}
.objective-edit-label {
  display: flex; align-items: baseline; gap: var(--sp-xs); flex-wrap: wrap;
  font-weight: 800; font-size: var(--fs-md); margin-bottom: var(--sp-2xs);
}
.objective-edit.is-revision .objective-edit-label { color: var(--c-orange-dark); }
.objective-edit-note { font-weight: 400; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.objective-edit .objective-textarea { width: 100%; }
.objective-diagnose-bar { margin: var(--sp-s) 0 0; }

/* 仕上げ：第1版と最終版を横に並べる */
.final-summary { display: grid; gap: var(--sp-xs); margin-bottom: var(--sp-m); }
.final-summary h3 { font-size: var(--fs-xl); margin: 0 0 var(--sp-2xs); }
.final-objective {
  border: 2px solid var(--c-line); border-radius: var(--r-m);
  padding: var(--sp-xs) var(--sp-m); background: var(--c-cream); font-size: var(--fs-md);
}
.final-objective .final-status { font-weight: 800; margin-right: var(--sp-xs); }
.final-compare {
  border: 2px solid var(--c-ink); border-radius: var(--r-l); background: var(--c-paper);
  padding: var(--sp-s) var(--sp-m) var(--sp-m); box-shadow: var(--shadow-pop-sm);
}
.final-compare-head {
  display: flex; align-items: baseline; gap: var(--sp-xs); flex-wrap: wrap; margin-bottom: var(--sp-xs);
}
.final-compare-head .final-status { font-weight: 800; }
.final-compare-title { font-weight: 800; font-size: var(--fs-lg); }
.final-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-s); align-items: stretch; }
.final-col {
  border: 2px solid var(--c-line); border-radius: var(--r-m); padding: var(--sp-xs) var(--sp-m);
  background: var(--c-cream); min-width: 0;
}
.final-col.is-final { background: var(--c-orange-tint); border-color: var(--c-orange); }
.final-col-label { font-size: var(--fs-xs); font-weight: 800; color: var(--c-ink-soft); margin-bottom: var(--sp-2xs); }
.final-col.is-final .final-col-label { color: var(--c-orange-dark); }
.final-col-text { font-size: var(--fs-md); line-height: var(--lh-normal); white-space: pre-wrap; overflow-wrap: anywhere; }
.final-col-text.is-empty { color: var(--c-ink-soft); font-size: var(--fs-sm); }
.final-compare-note { font-size: var(--fs-xs); color: var(--c-ink-soft); margin-top: var(--sp-2xs); }
@media (max-width: 760px) {
  .final-compare-row { grid-template-columns: 1fr; }
}

/* 仕上げのふり返り質問（はい・いいえ＋理由）。ver.2 ⑥ と評価設計支援 ③ で共通（2026-09-09 追加） */
.review-questions { display: grid; gap: var(--sp-s); margin: var(--sp-m) 0; }
.review-q {
  border: 2px solid var(--c-line); border-radius: var(--r-m); background: var(--c-cream);
  padding: var(--sp-s) var(--sp-m);
}
.review-q-label { font-weight: 800; font-size: var(--fs-md); margin-bottom: var(--sp-xs); }
.review-choices { display: flex; gap: var(--sp-s); flex-wrap: wrap; }
/* ※ .step-panel label { display: grid } より詳細度を上げて，ラジオボタンと文字を横に並べる */
.step-panel label.review-choice,
label.review-choice {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  font-weight: 700; font-size: var(--fs-md); cursor: pointer;
  padding: var(--sp-2xs) var(--sp-m); border: 2px solid var(--c-ink); border-radius: var(--r-full);
  background: var(--c-paper); box-shadow: var(--shadow-pop-sm);
}
.step-panel label.review-choice:has(input:checked) { background: var(--c-orange-soft); }
.step-panel label.review-choice:has(input:disabled) { cursor: default; }
/* グローバルの input { width:100%; min-height:44px; … } を打ち消して，ラジオボタン本来の大きさにする */
.review-choice input[type="radio"] {
  width: 18px; height: 18px; min-height: 0; min-width: 0; padding: 0; margin: 0;
  flex: 0 0 auto; accent-color: var(--c-orange);
}
.step-panel label.review-reason,
label.review-reason { margin-top: var(--sp-s); font-size: var(--fs-sm); }
.review-reason textarea { width: 100%; }
.gakumo-dock {
  position: fixed; right: var(--sp-m); bottom: var(--sp-s); z-index: 500;
  display: flex; align-items: flex-end; gap: var(--sp-xs);
  max-width: min(620px, calc(100vw - 32px));

  /* 吹き出しの大きさ（「吹き出し：大 中 小」で切り替える）。
     文字・ボタン・余白・幅をまとめてスケールさせる。既定は「中」。 */
  --gk-fs-text: var(--fs-md);   /* 16px */
  --gk-fs-ctrl: var(--fs-xs);   /* 12px */
  --gk-pad-v: var(--sp-s);      /* 12px */
  --gk-pad-h: var(--sp-m);      /* 16px */
  --gk-min-w: 270px;
  --gk-max-w: 400px;
  --gk-toggle: 28px;
  --gk-btn-pad: var(--sp-xs);
}
.gakumo-dock.is-size-sm {
  --gk-fs-text: var(--fs-sm);   /* 14px */
  --gk-fs-ctrl: var(--fs-xs);   /* 12px（最小サイズ） */
  --gk-pad-v: var(--sp-xs);
  --gk-pad-h: var(--sp-s);
  --gk-min-w: 210px;
  --gk-max-w: 300px;
  --gk-toggle: 24px;
  --gk-btn-pad: 6px;
}
.gakumo-dock.is-size-lg {
  --gk-fs-text: var(--fs-xl);   /* 20px */
  --gk-fs-ctrl: var(--fs-sm);   /* 14px */
  --gk-pad-v: var(--sp-m);
  --gk-pad-h: var(--sp-l);
  --gk-min-w: 340px;
  --gk-max-w: 500px;
  --gk-toggle: 34px;
  --gk-btn-pad: var(--sp-s);
}
.gakumo-body {
  width: 128px; flex-shrink: 0; cursor: grab; touch-action: none;
  filter: drop-shadow(3px 4px 0 rgba(36, 26, 18, 0.25));
}
.gakumo-body svg { width: 100%; height: auto; pointer-events: none; }
.gakumo-dock.is-dragging { user-select: none; }
.gakumo-dock.is-dragging .gakumo-body { cursor: grabbing; }
.gakumo-dock.is-dragging .gakumo-float { animation: none; }
.gakumo-dock.is-dragging .gakumo-bubble { opacity: 0.92; }
.gakumo-bubble {
  background: var(--gk-bubble); border: 2px solid var(--c-ink); border-radius: var(--r-l);
  padding: var(--gk-pad-v) var(--gk-pad-h) var(--sp-xs); box-shadow: var(--shadow-pop);
  position: relative;
  min-width: min(var(--gk-min-w), calc(100vw - 40px));
  max-width: var(--gk-max-w);
}
/* 吹き出しのしっぽ。ガクモくんの体の中ほどを指すように少し上げている */
.gakumo-bubble::after {
  content: ""; position: absolute; right: -13px; bottom: 42px; border-width: 9px 0 7px 15px;
  border-style: solid; border-color: transparent transparent transparent var(--c-ink);
}
.gk-toggle {
  position: absolute; top: -12px; right: -10px;
  width: var(--gk-toggle); height: var(--gk-toggle); border-radius: var(--r-full);
  border: 2px solid var(--c-ink); background: var(--c-paper); cursor: pointer; font-size: var(--gk-fs-ctrl);
  font-weight: 800; line-height: 1; color: var(--c-ink); display: grid; place-items: center; padding: 0;
}
.gk-toggle:hover { background: var(--c-orange); }
.gakumo-text {
  font-size: var(--gk-fs-text); min-height: 3.4em; max-height: 10em; overflow-y: auto; white-space: pre-wrap;
  line-height: var(--lh-normal); font-weight: 700;
}
.gakumo-text .caret { display: inline-block; width: 7px; background: var(--c-orange-dark); margin-left: 2px;
                      animation: gk-caret 0.8s steps(1) infinite; }
@keyframes gk-caret { 50% { opacity: 0; } }
.gakumo-controls {
  display: flex; gap: var(--sp-2xs); align-items: center; flex-wrap: wrap; margin-top: var(--sp-xs);
  border-top: 2px dashed rgba(36, 26, 18, 0.25); padding-top: var(--sp-xs);
  font-size: var(--gk-fs-ctrl); color: var(--c-ink-soft); font-weight: 700;
}
/* 話す速さ・吹き出しの大きさは，吹き出しの右下の歯車ボタンから開く小窓にまとめる
   （吹き出しの中はセリフを読むための場所として広く保つ） */
.gk-settings-panel {
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 5;
  background: var(--c-paper); border: 2px solid var(--c-ink); border-radius: var(--r-m);
  box-shadow: var(--shadow-pop); padding: var(--sp-s) var(--sp-m);
  display: grid; gap: var(--sp-xs); white-space: nowrap;
  font-size: var(--gk-fs-ctrl); color: var(--c-ink); font-weight: 700;
}
.gk-settings-panel.is-below { bottom: auto; top: calc(100% + 10px); }
.gk-setting-row { display: grid; grid-template-columns: auto auto; gap: var(--sp-s); align-items: center; }
.gk-setting-btns { display: inline-flex; gap: 3px; }
.gk-group-label { white-space: nowrap; }
.gk-btn {
  border: 2px solid var(--c-ink); background: var(--c-paper); border-radius: var(--r-full);
  padding: 1px var(--gk-btn-pad); font: inherit; font-size: var(--gk-fs-ctrl); font-weight: 800;
  cursor: pointer; color: var(--c-ink);
}
/* 選択中（is-active）とマウスを乗せただけの状態を見分けられるように色を分ける */
.gk-btn:hover:not(:disabled) { background: var(--c-orange-tint); }
.gk-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gk-btn.is-active { background: var(--c-orange); }
.gk-btn.is-active:hover { background: var(--c-orange-hover); }
.gk-pos { min-width: 4em; text-align: center; }
/* 「遅 普 速」「大 中 小」は同じ幅にして縦に揃える */
.gk-btn.gk-speed, .gk-btn.gk-size { min-width: 2.4em; }
/* 歯車は枠も背景もない，アイコンだけのボタンにする
   （.gk-btn の枠・余白を打ち消すため詳細度を上げている） */
.gk-btn.gk-settings-btn {
  margin-left: auto; display: inline-grid; place-items: center;
  width: 1.9em; height: 1.9em; padding: 0; border: none; background: transparent;
  color: var(--c-ink); transition: color 0.15s;
}
.gk-btn.gk-settings-btn svg { width: 100%; height: 100%; display: block; }
.gk-btn.gk-settings-btn:hover:not(:disabled) { background: transparent; color: var(--c-orange-dark); }
.gk-btn.gk-settings-btn[aria-expanded="true"] { background: transparent; color: var(--c-orange-dark); }
.gk-btn.gk-settings-btn:focus-visible { outline: 2px solid var(--c-orange-dark); outline-offset: 2px; }
.gakumo-dock.is-collapsed .gakumo-text,
.gakumo-dock.is-collapsed .gakumo-controls,
.gakumo-dock.is-collapsed .gk-settings-panel { display: none; }
.gakumo-dock.is-collapsed .gakumo-bubble {
  min-width: 0; padding: var(--sp-2xs); background: transparent; border-color: transparent; box-shadow: none;
}
.gakumo-dock.is-collapsed .gakumo-bubble::after { display: none; }
.gakumo-dock.is-collapsed .gakumo-body { width: 82px; }

/* 画面の左半分に置いたとき：ガクモくんが左，吹き出しが右になる */
.gakumo-dock.is-left { flex-direction: row-reverse; }
.gakumo-dock.is-left .gakumo-bubble::after {
  right: auto; left: -13px; bottom: 42px;
  border-width: 9px 15px 7px 0;
  border-color: transparent var(--c-ink) transparent transparent;
}
/* 閉じるボタンは，ガクモくんと重ならないよう常に吹き出しの外側（画面端側）に置く */
.gakumo-dock.is-left .gk-toggle { right: -10px; left: auto; }

@media (max-width: 700px) {
  .gakumo-dock { flex-direction: column; align-items: flex-end; }
  .gakumo-dock.is-left { flex-direction: column; align-items: flex-start; }
  .gakumo-body { width: 90px; }
  .gakumo-bubble { max-width: calc(100vw - 36px); min-width: 0; }
  .gakumo-bubble::after { display: none; }
}

/* ---- 診断中オーバーレイ ---- */
.diagnosing-overlay { position: fixed; inset: 0; background: rgba(36, 26, 18, 0.62); z-index: 1000;
                      display: grid; place-items: center; padding: var(--sp-l); }
.diagnosing-box {
  background: var(--c-cream); border: 3px solid var(--c-ink); border-radius: var(--r-xl);
  padding: var(--sp-2xl); max-width: 580px; width: 100%; text-align: center; box-shadow: var(--shadow-lift);
}
.diagnosing-gakumo svg { width: 150px; height: auto; margin: 0 auto; }
.diagnosing-title {
  font-family: "Outfit", "Noto Sans JP", sans-serif; font-size: var(--fs-3xl); font-weight: 800;
  letter-spacing: -0.02em; margin: var(--sp-xs) 0 var(--sp-m); color: var(--c-orange-dark);
}
.diagnosing-title .dots span { animation: gk-dot 1.4s infinite; display: inline-block; }
.diagnosing-title .dots span:nth-child(2) { animation-delay: 0.2s; }
.diagnosing-title .dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes gk-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } }
.diagnosing-trivia {
  text-align: left; background: var(--gk-bubble); border: 2px solid var(--c-ink);
  border-radius: var(--r-l); padding: var(--sp-m) var(--sp-l); box-shadow: var(--shadow-pop-sm);
}
.trivia-head { font-size: var(--fs-xs); font-weight: 800; color: var(--c-orange-dark);
               margin-bottom: var(--sp-2xs); letter-spacing: 0.04em; }
.trivia-title { font-family: "Outfit", "Noto Sans JP", sans-serif; font-weight: 800;
                margin-bottom: var(--sp-2xs); font-size: var(--fs-lg); }
.trivia-text { font-size: var(--fs-md); min-height: 4.5em; font-weight: 400; }

/* ---- モーダル ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(36, 26, 18, 0.62); z-index: 1000; display: grid;
                  place-items: center; padding: var(--sp-l); }
.modal { background: var(--c-cream); border: 3px solid var(--c-ink); border-radius: var(--r-xl);
         padding: var(--sp-xl); max-width: 660px; width: 100%; box-shadow: var(--shadow-lift); }
.modal h3 { margin-top: 0; font-size: var(--fs-2xl); }
.modal p { font-size: var(--fs-md); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-xs); margin-top: var(--sp-m); }

/* ブルームの三角形 */
.bloom-triangle { display: grid; gap: var(--sp-2xs); justify-items: center; margin: var(--sp-m) 0; }
.bloom-row {
  border: 2px solid var(--c-ink); border-radius: var(--r-m); padding: var(--sp-xs) var(--sp-s);
  text-align: center; cursor: pointer; font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-weight: 800; font-size: var(--fs-md); color: var(--c-ink); line-height: var(--lh-tight);
  position: relative; transition: transform 0.12s, box-shadow 0.12s;
}
.bloom-row small { display: block; font-family: "Noto Sans JP", sans-serif; font-weight: 400;
                   font-size: var(--fs-xs); color: var(--c-ink); line-height: var(--lh-snug);
                   margin-top: 2px; }
.bloom-row small.bloom-row-processes { color: var(--c-ink); opacity: 0.82; }
.bloom-row:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-pop); }
.bloom-row.is-selected { box-shadow: var(--shadow-pop); }

/* ---- 管理 ---- */
.stat-row { display: flex; gap: var(--sp-s); flex-wrap: wrap; margin-bottom: var(--sp-l); }
.stat { background: var(--c-paper); border: 2px solid var(--c-ink); border-radius: var(--r-l);
        padding: var(--sp-s) var(--sp-xl); display: grid; justify-items: center; box-shadow: var(--shadow-pop-sm); }
.stat-num { font-family: "Outfit", sans-serif; font-size: var(--fs-3xl); font-weight: 800;
            color: var(--c-orange-dark); line-height: 1.1; letter-spacing: -0.02em; }
.stat-label { font-size: var(--fs-xs); color: var(--c-ink-soft); font-weight: 700; }
.filter-form { display: flex; gap: var(--sp-s); align-items: end; flex-wrap: wrap; }
.filter-form label { display: grid; gap: var(--sp-2xs); font-size: var(--fs-sm); font-weight: 800; }
.filter-form select, .filter-form input { width: auto; min-width: 150px; }
.error-card { text-align: center; }
.error-gakumo svg { width: 120px; height: auto; margin: 0 auto; }

/* 保存トースト */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-xl); transform: translateX(-50%);
  background: var(--c-ink); color: var(--c-cream); border: 2px solid var(--c-ink);
  border-radius: var(--r-full); padding: var(--sp-s) var(--sp-l); font-weight: 800; font-size: var(--fs-md);
  z-index: 2000; opacity: 0; transition: opacity 0.2s; pointer-events: none; box-shadow: var(--shadow-pop);
}
.toast.is-visible { opacity: 1; }

/* 狭い画面では，診断結果の表の見出し列を折り返せるようにする（3列目が1文字ずつ縦に潰れるのを防ぐ） */
@media (max-width: 640px) {
  .result-table tbody th, .result-table tbody td:first-of-type { white-space: normal; width: auto; }
  .result-table th, .result-table td { padding: var(--sp-2xs) var(--sp-xs); font-size: var(--fs-sm); }
}