/* ============================================================
   見た目の設定
   ・色は下の :root にまとめてあるので、ここを書き換えると全体の色が変わります。
   ・端末がダークモードでも、明るい配色のままにします（ダークモード用の設定は書かない）。
   ・画面の作り：上の帯（固定）／まんなか（上下の帯のあいだで中央）／下の帯（固定）
   ============================================================ */
:root {
  color-scheme: only light;

  /* 生協カラー（水色×黄色） */

  /* 基本の色：ページはごく薄い水色、カード・吹き出し・選択肢は白 */
  --bg: #f4faff;
  --surface: #ffffff;
  --text: #33414e;
  --text-soft: #6b7a88;
  --line: #dce9f3;          /* 枠線（青みのある薄いグレー） */

  /* メイン色（生協の水色）。厚みは濃い版 */
  --main: #1e9be0;
  --main-dark: #1478b0;
  --main-pale: #e1f2fc;
  --main-soft: #9fd3f2;
  --main-text: #13628f;

  /* 選んだ状態の選択肢（黄色） */
  --pick: #f2c200;
  --pick-pale: #fff6cc;
  --pick-text: #7a5c00;

  /* 正解（水色）・不正解（オレンジ。赤は使わない）。緑は目立つところに使わない */
  --good: var(--main);
  --good-dark: var(--main-dark);
  --good-pale: var(--main-pale);
  --good-text: var(--main-text);
  --miss: #f07f1a;
  --miss-dark: #c26210;
  --miss-pale: #fdebdb;
  --miss-text: #9a4a0a;

  /* 押せないボタン */
  --off: #dce9f3;
  --off-text: #9aabb9;

  --radius: 16px;
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;

  /* 上の帯・下の帯の高さ（まんなかの部分は、このぶん空けて中央に置く） */
  --top-h: 64px;
  --bottom-h: 96px;
}

/* 分野ごとの色（ラベルと結果の区切りバー）。--dc 帯の色、--dc-text 文字の色、--dc-pale 薄い背景
   色は config.js の domains で決める（app.js が .domain-pc などの設定を作る） */
/* hidden を付けたものは、display の指定があっても必ず隠す */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
}

p { margin: 0; }
img { max-width: 100%; }
button { font-family: inherit; }

/* 画面の切り替え */
.screen { display: none; }
.screen.is-active { display: block; animation: fade-in 0.2s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 上の帯・下の帯（画面に固定） ---------- */
.topbar, .bottombar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--bg);
}
.topbar { top: 0; height: var(--top-h); }
.bottombar {
  bottom: 0;
  min-height: var(--bottom-h);
  border-top: 2px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.bar-inner {
  width: 100%;
  max-width: 1000px;
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.bottombar .bar-inner { min-height: var(--bottom-h); padding-top: 16px; padding-bottom: 16px; }
.bar-center { justify-content: center; }
.bar-end { justify-content: flex-end; }
.bar-split { justify-content: space-between; }


/* 進み具合（区切りバー）：問題の数だけ細いバーを並べる。平らな色だけ
   終わった問題は水色、今の問題は黄色、これからの問題は薄いグレー */
.segments { flex: 1; display: flex; gap: 5px; }
.seg {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  transition: background-color 0.25s ease;
}
.seg.is-done { background: var(--main); }
.seg.is-current { background: var(--pick); }
.progress-text { font-size: 13px; font-weight: 800; color: var(--text-soft); white-space: nowrap; }

/* ---------- まんなか ---------- */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* 上の余白は app.js の placeContent が決める（視覚的な中心に置く） */
  padding: calc(var(--top-h) + 16px) 16px calc(var(--bottom-h) + 20px);
}
.stage-inner { width: 100%; max-width: 640px; margin: 0 auto; }

/* ぱそぶー */
.pasobu { display: block; height: auto; flex-shrink: 0; }
.pasobu-talk { width: 72px; }
.pasobu-start { width: 120px; margin: 0 auto 12px; }
.pasobu-result { width: 84px; margin: 0 auto 4px; }

/* ぱそぶーと吹き出し（吹き出しは白、薄いグレーの枠、ぱそぶー側にしっぽ） */
.talk {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.bubble {
  position: relative;
  flex: 1;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.bubble::before, .bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  border-style: solid;
}
.bubble::before {           /* しっぽの枠 */
  left: -12px;
  margin-top: -10px;
  border-width: 10px 12px 10px 0;
  border-color: transparent var(--line) transparent transparent;
}
.bubble::after {            /* しっぽの中（白） */
  left: -8px;
  margin-top: -8px;
  border-width: 8px 9px 8px 0;
  border-color: transparent #fff transparent transparent;
}
.question {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.5;
}
.bubble-note { margin-top: 2px; font-size: 14px; color: var(--text-soft); }

/* 分野のラベル */
.domain-label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--dc-pale, var(--main-pale));
  color: var(--dc-text, var(--main-dark));
  font-size: 14px;
  font-weight: 800;
}

/* ---------- 選択肢カード ---------- */
.choices { display: grid; gap: 10px; }
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  background: #fff;
  color: var(--text);
  border: 2px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 0 var(--line);    /* 下だけ 4px に見せて、厚みを出す */
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  word-break: break-word;
}
.choice:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--line); }
.choice:disabled { cursor: default; }
.choice-key {                        /* 左の小さな四角の番号 */
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line);
  border-radius: 8px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 800;
}
.choice-text { flex: 1; }
/* 答え合わせのあとの〇×（カードの右端）。太字の〇と×だけ。丸で囲んだり背景を付けたりしない */
.choice-result {
  flex-shrink: 0;
  font-size: 1.35em;           /* 選択肢の文字より少し大きい */
  font-weight: 800;
  line-height: 1;
}
.choice-result:empty { display: none; }
.choice.is-correct .choice-result { color: var(--good); animation: fade-in 0.2s ease; }
.choice.is-wrong .choice-result { color: var(--miss); animation: fade-in 0.2s ease; }

/* 選んだとき：薄い黄色の背景、黄色の枠、文字は濃い黄土色 */
.choice.is-selected {
  background: var(--pick-pale);
  border-color: var(--pick);
  box-shadow: 0 2px 0 var(--pick);
  color: var(--pick-text);
}
.choice.is-selected .choice-key { border-color: var(--pick); color: var(--pick-text); }

/* 答え合わせのあと */
.choice.is-correct {
  background: var(--good-pale);
  border-color: var(--good);
  box-shadow: 0 2px 0 var(--good);
  color: var(--good-text);
}
.choice.is-correct .choice-key { border-color: var(--good); color: var(--good-text); }
.choice.is-wrong {
  background: var(--miss-pale);
  border-color: var(--miss);
  box-shadow: 0 2px 0 var(--miss);
  color: var(--miss-text);
}
.choice.is-wrong .choice-key { border-color: var(--miss); color: var(--miss-text); }
.choice.is-faded { opacity: 0.5; }

/* 自己評価：電波マークのような 1〜4 本の棒 */
.signal {
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  width: 30px;
  height: 24px;
}
.signal i {
  display: block;
  width: 5px;
  border-radius: 2px;
  background: var(--line);
}
.signal i:nth-child(1) { height: 25%; }
.signal i:nth-child(2) { height: 50%; }
.signal i:nth-child(3) { height: 75%; }
.signal i:nth-child(4) { height: 100%; }
.signal i.on { background: var(--main); }

/* ---------- ボタン（全画面共通） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 50px;
  padding: 10px 22px;
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.btn-primary { background: var(--main); color: #fff; box-shadow: 0 4px 0 var(--main-dark); }
.btn-miss    { background: var(--miss); color: #fff; box-shadow: 0 4px 0 var(--miss-dark); }
.btn-yellow  { background: var(--pick); color: #4d3a00; box-shadow: 0 4px 0 #c49d00; }
.btn-secondary {
  background: #fff;
  color: var(--text-soft);
  border: 2px solid var(--line);
  box-shadow: 0 2px 0 var(--line);   /* 下だけ 4px に見せる */
}
.btn-secondary:active:not(:disabled) { transform: translateY(2px); }
.btn:disabled {
  background: var(--off);
  color: var(--off-text);
  box-shadow: none;
  cursor: not-allowed;
}
.btn-wide { width: 100%; max-width: 420px; min-height: 54px; font-size: 18px; }

/* フォーカスの枠は、キーボードで操作しているときだけ出す（マウスやタッチで押したときは出さない） */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--main); outline-offset: 3px; }

/* マウスのある端末だけ、上に乗せたときに少し色を変える（スマホでは色が残って見えるため） */
@media (hover: hover) {
  .choice:hover:not(:disabled):not(.is-selected) { background: #f7fbfe; border-color: var(--main-soft); }
  .btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
  .btn-secondary:hover:not(:disabled) { background: #f7fbfe; }
}

/* ---------- ぱそぶーの返事の吹き出し（LINE の続きのメッセージのように） ---------- */
/* reply-area：いちばん長い解説が入ったときの高さを、app.js が測って最初から取っておく。
   吹き出しは中身に合わせた大きさで、答え合わせで大きくなると、この空き地に向かって下に伸びる */
.reply-area {
  margin: -8px 0 16px var(--reply-indent, 48px);   /* ぱそぶーの絵は1つだけ。返事は少し右にずらす */
}
.reply {
  display: inline-block;
  max-width: 100%;
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}
.reply-title { font-weight: 800; }
.reply-text { margin-top: 2px; }
.reply-text:empty { display: none; }
/* 2段目「正解：〇〇」（不正解・わからないのときだけ）。1段目より少し小さい太字 */
.reply-answer { margin-top: 2px; font-size: 15px; font-weight: 800; }
.reply-answer:empty { display: none; }
.reply.is-miss .reply-answer { color: var(--miss-text); }
/* 「正解：〇〇」と解説は、変な位置で切れないよう、区切りのいいところで改行する */
.reply-answer, .reply-text {
  word-break: auto-phrase;     /* 日本語を文節の切れ目で改行する（対応しているブラウザだけ） */
  text-wrap: balance;          /* 行の長さをそろえて、最後の行だけ短くなるのを防ぐ */
}
/* 選ぶ前：白背景・点線の枠・グレーの文字 */
.reply.is-hint { border-style: dashed; color: var(--text-soft); }
.reply.is-hint .reply-title { font-weight: 700; }
/* 選んだあと：選択肢を選んだときと同じ黄色 */
.reply.is-pick { background: var(--pick-pale); border-color: var(--pick); color: var(--pick-text); }
/* 正解・不正解：横幅いっぱいに広がる */
.reply.is-good, .reply.is-miss { display: block; padding: 12px 16px; }
.reply.is-good { background: var(--good-pale); border-color: var(--good); }
.reply.is-good .reply-title { color: var(--good-text); font-size: 20px; line-height: 1.4; }
.reply.is-miss { background: var(--miss-pale); border-color: var(--miss); }
.reply.is-miss .reply-title { color: var(--miss-text); font-size: 20px; line-height: 1.4; }
/* セリフが変わるときに、その場で少しポンと出る */
.reply.is-pop { animation: pop 0.2s ease-out; transform-origin: left top; }
@keyframes pop { from { transform: scale(0.94); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* 下のボタンの帯（問題画面）
   ・画面の下に固定した、画面いっぱいの白い帯。上に 2px の薄い線（.bottombar の設定）
   ・中のボタンは、上の区切りバーと同じ枠（.bar-inner）に入っているので、左右の端がそろう
   ・答え合わせのあとも、帯の色は白のまま（正解・不正解は、ぱそぶーの吹き出しで伝える）
   ・スマホでは、2つのボタンを左右いっぱいに並べる */
.quiz-bar { background: var(--surface); }
/* 帯の上の線から画面の一番下までの、ちょうど真ん中の高さにボタンを置く。
   ボタンの下の 4px の厚みも見た目に入れて、上下の余白が同じになるようにする。
   （iPhone 用の画面下の余白は .bottombar の env(safe-area-inset-bottom)。PC などでは 0 になる） */
.quiz-bar .bar-inner.quiz-actions {
  height: var(--bottom-h);
  min-height: 0;
  padding-top: 0;
  padding-bottom: 4px;
  align-items: center;
}
.quiz-actions .btn { flex: 0 0 calc(50% - 8px); height: 50px; min-height: 0; min-width: 0; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
/* 中身がボタンの帯の下に隠れないよう、ページの下に余白をとる。選ぶ前に1画面に収まっているときは、ページがスクロールしない高さにする
   （スクロールできると、PC ではスクロールバーの幅だけ画面がせまくなり、問題文の行が増えてしまうため。app.js の fitScreen と同じ 8px） */
.stage-quiz { padding-bottom: calc(var(--bottom-h) + 8px + env(safe-area-inset-bottom)); }
/* 選ぶ前の画面が1画面に収まらないときだけ、少しずつ詰める（どこまで詰めるかは app.js の fitScreen が決める）
   文字の大きさは変えない。選択肢カードは高さ 44px 以上を保つ。画像を小さくするのは app.js（2 と 3 のあいだ） */
@media (max-width: 899px) {
  /* 返事の吹き出し（「正解はどれかな？」など）は、問題の吹き出しと左をそろえる（ぱそぶー 72px ＋すき間 14px。
     ぱそぶーを小さくしたときは 56px ＋ 12px） */
  .reply-area { --reply-indent: 86px; }
  #screen-quiz.is-fit-2 .reply-area { --reply-indent: 68px; }
  /* 1. すき間を詰める（吹き出しの中の余白もふくむ） */
  #screen-quiz.is-fit-1 .domain-label { margin-bottom: 4px; }
  #screen-quiz.is-fit-1 .talk { margin-bottom: 8px; }
  #screen-quiz.is-fit-1 .bubble { padding-top: 9px; padding-bottom: 9px; }
  #screen-quiz.is-fit-1 .reply.is-hint { padding-top: 6px; padding-bottom: 6px; }
  #screen-quiz.is-fit-1 .reply-area { margin-bottom: 8px; }
  #screen-quiz.is-fit-1 .choices { gap: 6px; }
  /* 2. ぱそぶーを少し小さく */
  #screen-quiz.is-fit-2 .pasobu-talk { width: 56px; }
  #screen-quiz.is-fit-2 .talk { gap: 12px; }
  /* 3. 選択肢カードの上下の余白を詰める */
  #screen-quiz.is-fit-3 .choice { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
}
/* PC（小さめのノートパソコンなど）でも、同じ順番で詰める */
@media (min-width: 900px) {
  #screen-quiz.is-fit-1 .domain-label, #screen-quiz.is-fit-1 .boss-label { margin-bottom: 6px; }
  #screen-quiz.is-fit-1 .talk { margin-bottom: 10px; }
  #screen-quiz.is-fit-1 .reply-area { margin-bottom: 10px; }
  #screen-quiz.is-fit-1 .choices { gap: 6px; }
  #screen-quiz.is-fit-2 .pasobu-talk { width: 72px; }
  #screen-quiz.is-fit-2 .reply-area { --reply-indent: 86px; }   /* 返事は問題の吹き出しと左をそろえる（ぱそぶー 72px ＋すき間 14px） */
  #screen-quiz.is-fit-3 .choice { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
}

/* ぱそぶーの動き：正解でぴょん、不正解で首をかしげる */
.pasobu.is-hop { animation: hop 0.35s ease; }
.pasobu.is-tilt { animation: tilt 0.5s ease forwards; }
@keyframes hop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-12px); }
}
@keyframes tilt {
  0% { transform: rotate(0); }
  40% { transform: rotate(-12deg); }
  100% { transform: rotate(-8deg); }
}

/* ---------- スタート画面 ---------- */
.start-inner { text-align: center; }
/* 組織名（生協ロゴと横に並べる）。タイトルの上にのる“肩書き”として、タイトルより小さく */
.org {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.org-logo { display: block; width: auto; height: 26px; flex-shrink: 0; }
.org-name { font-weight: 800; line-height: 1.4; text-align: left; }
/* 名前は途中で改行しない。改行が必要なときは「岡山大学生協」と「PCスキルアップ講座」の間だけ */
.org-name .nowrap { display: inline-block; white-space: nowrap; }
.org-start { margin: 2px 0 10px; }
.org-start .org-name { font-size: 15px; color: var(--main-text); letter-spacing: 0.02em; }
.start-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.title-accent { color: var(--main); }
/* 「5分でわかる！／あなたの“大学で通用度”」の2行。「5」は大きくメインの水色、「5分」の下に黄色いマーカー */
.start-sub { margin-top: 14px; font-size: 18px; font-weight: 800; line-height: 1.55; }
.start-sub .line { display: block; }
.lead-time { position: relative; z-index: 0; display: inline-block; padding: 0 2px; margin-right: 4px; }
.lead-time::after {               /* 蛍光ペンを引いたような、うすい黄色の太い線 */
  content: "";
  position: absolute;
  z-index: -1;
  left: -3px;
  right: -3px;
  bottom: 0.02em;
  height: 0.55em;
  border-radius: 999px;
  background: #fff0a0;
}
.lead-num { font-size: 2em; line-height: 1; color: var(--main); margin-right: 2px; }
.start-meta {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--main-pale);
  color: var(--main-dark);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;   /* ラベルは途中で改行しない */
}

/* ---------- 結果画面 ---------- */
.stage-result {
  justify-content: flex-start;
  padding-top: 28px;
  /* 下の帯に組織名の行があるぶん、下の余白を多めにとる */
  padding-bottom: calc(var(--bottom-h) + 56px + env(safe-area-inset-bottom));
}
/* 結果画面の下の帯：「もう一回」の下に、生協ロゴと組織名を小さく */
.bottombar.result-bar .bar-inner { min-height: 0; padding-bottom: 8px; }
.org-foot { gap: 8px; padding: 0 16px 10px; }
.org-foot .org-logo { height: 18px; }
.org-foot .org-name { font-size: 12px; font-weight: 700; color: var(--text-soft); }
.result-head { text-align: center; }
.result-label { color: var(--text-soft); font-size: 14px; font-weight: 700; }
.result-level {
  margin: 2px 0 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--main-dark);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 「次は 〇〇！」：レベル名の下の、小さな水色の札。いちばん上のレベルの「最高ランク達成！」は黄色 */
.result-next {
  display: inline-block;
  margin: 4px 0 2px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--main-pale);
  color: var(--main-text);
  font-size: 14px;
  font-weight: 800;
}
.result-next.is-top { background: var(--pick-pale); color: var(--pick-text); }
.result-next:empty { display: none; }
.result-note { font-size: 14px; color: var(--text-soft); }
.result-note:empty { display: none; }
.result-message { margin: 10px 0 16px; text-align: center; font-weight: 700; font-size: 15px; }
/* メッセージは levels.js で分けた行ごとに改行する。
   1行が画面に収まらないときも、変な位置で切れたり、最後の行が1〜2文字だけになったりしないようにする */
.result-message .line, .gap-comment .line, .recommend-reason .line, .chip-reason .line {
  display: block;
  word-break: auto-phrase;     /* 日本語を文節の切れ目で改行する（対応しているブラウザだけ） */
  text-wrap: balance;          /* 行の長さをそろえて、最後の行だけ短くなるのを防ぐ */
}

/* 小さな成績カード（3つ横並び） */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* 形は「上に色の帯、下に白」。立体感（下だけ太い枠・影）は付けず、上下左右とも同じ細い枠にする */
.stat {
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  text-align: center;
  background: var(--surface);
}
.stat-head {
  padding: 3px 4px;
  font-size: 13px;
  font-weight: 800;
}
/* 正解数・あなたの予想：薄い水色の帯に濃い水色の文字。中の数字・文字は濃いグレー */
.stat-score .stat-head, .stat-self .stat-head { background: var(--main-pale); color: var(--main-text); }
/* 診断結果：薄い黄色の帯に黄土色の文字。中の文字も黄土色 */
.stat-actual .stat-head { background: #fff0a8; color: var(--pick-text); }
.stat-actual .stat-value { color: var(--pick-text); }
.stat-value {
  min-height: 52px;
  padding: 6px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}
.stat-small { font-size: 13px; }
.gap-comment { margin: 12px 0 8px; text-align: center; font-weight: 800; color: var(--main-dark); }
.recommend-chip {
  display: table;
  margin: 0 auto 20px;
  padding: 6px 20px 11px;          /* 上の「おすすめ」の小さな文字で上が広く見えるので、下を少し広めにして、見た目の上下をそろえる */
  border-radius: 14px;
  background: var(--pick-pale);
  color: var(--pick-text);
  text-align: center;
  line-height: 1.5;
  font-size: 15px;
}
.chip-label { display: block; font-size: 12px; font-weight: 700; }
.recommend-chip strong { font-weight: 800; word-break: keep-all; overflow-wrap: anywhere; }
/* 「おすすめ」の枠の中の理由の文（講座名のすぐ下に、少し小さめに。下の講座カードと同じ文） */
.chip-reason { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; line-height: 1.55; }
.chip-reason:empty { display: none; }
/* スマホ（幅 900px 未満）では、おすすめの理由の文（「おすすめ」の枠の中と、おすすめ講座のカード）を左寄せにする。
   スタンダードの文とアドバンスの文のあいだ（levels.js で分けたところ）で改行し、
   1つの文が入りきらないときは、その文の中で画面の幅に合わせて折り返す。
   最後の行が1〜2文字だけにならないよう、文節の切れ目で改行し（auto-phrase）、行の長さを整える（pretty）。
   PC では今までどおり */
@media (max-width: 899px) {
  .recommend-reason, .chip-reason { text-align: left; }
  .recommend-reason .line, .chip-reason .line { text-wrap: pretty; }
}

/* カード */
.card {
  margin-bottom: 16px;
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.card-thick { box-shadow: 0 4px 0 var(--line); }
.card[hidden] { display: none; }
.card-title { margin: 0 0 12px; font-size: 17px; font-weight: 800; }

/* 分野ごとの横棒（分野の色） */
.domain-bars { display: grid; gap: 10px; }
/* 1行目：分野名と右側の文字は、レベル1〜3 の範囲に入れて、文字はレベル3の右端にそろえる（ボスの列の上は「撃破」バッジだけ） */
.domain-row-head { align-items: end; font-weight: 800; }
.domain-row-main {
  grid-column: 1 / 4;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.domain-row-name { font-size: 14px; color: var(--dc-text); white-space: nowrap; }
.domain-row-score {                  /* 分野名より少し小さく */
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--text-soft);
  white-space: nowrap;
}
.domain-row-score .crown { width: 12px; height: 9px; fill: #e8a200; }
.domain-boss-top { grid-column: 5; display: flex; justify-content: center; }
/* 区切りバー：満点の数だけマス（列の数は app.js の drawBars が決める）。取れたマスは分野の色、残りは薄いグレー。平らな色だけ */
.domain-segs {
  display: grid;
  gap: 5px;
  margin-top: 4px;
}
.domain-seg {
  height: 9px;
  border-radius: 3px;
  background: #e6eef5;
}
.domain-seg.is-on { background: var(--dc); }

/* 大学でこんな場面、ありそう */
.scene-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.scene-list li {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--dc-pale);
  border-left: 6px solid var(--dc);
  font-size: 15px;
}
.scene-domain { display: block; font-size: 13px; font-weight: 800; color: var(--dc-text); }

/* おすすめ講座 */
.recommend-card { border-color: var(--main-soft); box-shadow: 0 4px 0 var(--main-soft); }
.recommend-reason { margin-bottom: 14px; font-weight: 800; color: var(--main-dark); }
.course-list { display: grid; gap: 8px; }
.course-box {
  display: flex;
  flex-direction: column;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 0 var(--line);
  background: #fff;
}
.course-name { font-size: 18px; font-weight: 800; }
/* スタンダード講座は水色、アドバンス講座は黄色（どちらも同じ大きさ） */
.course-standard { background: var(--main-pale); border-color: var(--main-soft); box-shadow: 0 2px 0 var(--main-soft); }
.course-standard .course-name { color: var(--main-text); }
.course-advance { background: var(--pick-pale); border-color: var(--pick); box-shadow: 0 2px 0 var(--pick); }
.course-advance .course-name { color: var(--pick-text); }
.course-desc { margin: 4px 0 14px; font-size: 14px; color: var(--text-soft); }
.course-box .btn { margin-top: auto; width: 100%; min-width: 0; font-size: 16px; }
.course-box .btn + .btn { margin-top: 10px; }   /* 「申し込む」は「詳しく見る」のすぐ下に、同じ形で */
.course-plus { text-align: center; font-size: 22px; font-weight: 800; line-height: 1; color: var(--text-soft); }

.parent-note { font-size: 14px; color: var(--text-soft); }
.screenshot-hint { font-size: 13px; font-weight: 700; color: var(--text-soft); }
#btn-retry { min-width: 120px; flex-shrink: 0; }

/* 紙吹雪（結果画面で1回だけ） */
.confetti { position: fixed; inset: 0 0 auto 0; height: 0; z-index: 20; pointer-events: none; }
.confetti i {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation: confetti-fall 1.4s ease-in forwards;
}
@keyframes confetti-fall {
  from { transform: translateY(0) rotate(0); opacity: 1; }
  to { transform: translateY(70vh) rotate(540deg); opacity: 0; }
}

.noscript { text-align: center; padding: 24px; }

/* ---------- せまいスマホ（幅 360px 以下） ---------- */
@media (max-width: 360px) {
  .bar-inner { padding: 0 12px; gap: 10px; }
  .stage { padding-left: 12px; padding-right: 12px; }
  .question { font-size: 18px; }
  .pasobu-talk { width: 64px; }
  .reply-area { --reply-indent: 78px; }   /* 返事は問題の吹き出しと左をそろえる（ぱそぶー 64px ＋すき間 14px） */
  .btn { min-width: 0; padding: 10px 16px; }
  .start-title { font-size: 24px; }
}

/* ---------- パソコンなど、広い画面（幅 900px 以上） ---------- */
@media (min-width: 900px) {
  :root { --top-h: 80px; --bottom-h: 112px; }
  .bar-inner { padding: 0 32px; gap: 24px; }
  .bottombar .bar-inner { padding-top: 20px; padding-bottom: 20px; }
  .progress-text { font-size: 14px; }
  .segments { gap: 6px; }

  .pasobu-talk { width: 104px; }
  .pasobu-start { width: 160px; }
  .pasobu-result { width: 100px; }
  .question { font-size: 23px; }
  .bubble { padding: 16px 22px; }
  .domain-label { font-size: 15px; }
  .choice { min-height: 60px; font-size: 18px; padding: 12px 18px; }
  .btn { min-width: 180px; }
  .btn-wide { max-width: 360px; }

  /* 返事の吹き出しは、問題の吹き出しと左をそろえる（ぱそぶー 104px ＋すき間 14px） */
  .reply-area { --reply-indent: 118px; }
  .reply { font-size: 16px; }
  .reply.is-good .reply-title, .reply.is-miss .reply-title { font-size: 22px; }
  .reply-answer { font-size: 16px; }
  .quiz-actions .btn { flex: 0 0 170px; }   /* 2つのボタンは同じ大きさ（幅170px） */

  .start-title { font-size: 36px; }
  .org-start .org-logo { height: 32px; }
  .org-start .org-name { font-size: 18px; }
  .start-sub { font-size: 22px; }

  .result-level { font-size: 32px; }
  .result-message { font-size: 17px; }
  .stat-value { font-size: 24px; min-height: 60px; }
  .stat-small { font-size: 15px; }
  .stat-head { font-size: 14px; }
  .card { padding: 20px 24px; }
  .recommend-card.is-set .course-list { grid-template-columns: 1fr auto 1fr; }
  .course-plus { align-self: center; }
  .screenshot-hint { font-size: 15px; }
  #btn-retry { min-width: 180px; }
}

/* 画面の縦が短いパソコン（ノートパソコンなど）：少し詰める */
@media (min-width: 900px) and (max-height: 760px) {
  :root { --top-h: 68px; --bottom-h: 96px; }
  .bottombar .bar-inner { padding-top: 14px; padding-bottom: 14px; }
  .talk { margin-bottom: 14px; }
  .pasobu-talk { width: 96px; }
  .reply-area { --reply-indent: 110px; }
  .choice { min-height: 54px; padding: 8px 18px; }
  .choices { gap: 8px; }
}

/* 動きを減らす設定にしている人には、動きを控えめにする */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .confetti { display: none; }
}

/* ---------- 調整パネル（URL に ?debug=1 を付けたときだけ出る） ---------- */
.debug-panel {
  position: fixed;
  right: 12px;
  bottom: calc(var(--bottom-h) + 12px + env(safe-area-inset-bottom));
  z-index: 50;
  width: 220px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(30, 60, 90, 0.15);
  font-size: 13px;
}
.debug-title { font-weight: 800; color: var(--text-soft); }
.debug-panel input[type="range"] { display: block; width: 100%; margin: 8px 0 4px; accent-color: var(--main); }
.debug-value { font-size: 18px; font-weight: 800; color: var(--main-text); text-align: center; }
.debug-note { font-size: 12px; color: var(--text-soft); text-align: center; }

/* 診断結果のカード：レベル名を言葉で出す。収まらないときは区切りのいいところで2行に */
.stat-actual .stat-value { font-size: 15px; word-break: keep-all; overflow-wrap: anywhere; }   /* 改行は app.js の setBreakable が入れた切れ目だけで */
@media (min-width: 900px) { .stat-actual .stat-value { font-size: 18px; } }

/* ---------- 結果画面の5段階のものさし ---------- */
.ruler { position: relative; margin: 18px 0 14px; }
/* 旗（吹き出しのような小さなラベル）。位置は app.js の layoutRuler が決める */
.ruler-flags { position: relative; height: 34px; }
.ruler.has-raised-flag .ruler-flags { height: 66px; }   /* 旗が重なりそうなときは2段に */
.ruler-flag {
  position: absolute;
  bottom: 8px;
  padding: 3px 12px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}
.ruler-flag.is-raised { bottom: 40px; }
.ruler-flag.is-actual { background: var(--pick); border-color: var(--pick); color: var(--pick-text); }
.ruler-flag.is-expect { background: var(--surface); border-color: var(--main); color: var(--main-text); }
/* 区切りバー（5つ）と、その右の「その先」の区切り */
.ruler-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 1.4fr;   /* いちばん右は「その先：就活・社会人」が入る広さ */
  gap: 6px;
  align-items: start;
}
.ruler-col { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.ruler-bar {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: var(--line);
}
.ruler-col.is-filled .ruler-bar { background: var(--pick); }                      /* 診断結果のレベルまで黄色 */
.ruler-col.is-current .ruler-bar { box-shadow: 0 0 0 4px #fff0a8; }               /* 今いるレベルは少し強調 */
.ruler-col.is-beyond .ruler-bar { background: transparent; border: 2px dashed var(--line); }   /* 色は塗らない */
.ruler-lv { margin-top: 8px; font-size: 11px; font-weight: 800; color: var(--text-soft); line-height: 1.3; }
.ruler-name {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-soft);
  line-height: 1.35;
  word-break: keep-all;          /* 改行は app.js の setBreakable が入れた切れ目だけで */
  overflow-wrap: anywhere;
}
.ruler-name .nowrap { display: inline-block; white-space: nowrap; }
.ruler-col.is-current .ruler-lv, .ruler-col.is-current .ruler-name { color: var(--pick-text); }
.ruler-col.is-beyond .ruler-name { margin-top: 8px; font-weight: 700; color: var(--off-text); }
/* Lv.3 と Lv.4 の間の緑の点線と、その説明（位置は app.js が --x などで決める） */
.ruler-line {
  position: absolute;
  left: var(--x, 50%);
  width: 0;
  border-left: 2px dashed #2ea44f;
}
.ruler-caption {
  position: relative;
  margin-top: 10px;
  padding-left: calc(var(--x, 50%) + 10px);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #23803c;
}
.ruler-caption::before {                /* 説明の頭の小さな点線（点線の位置にそろえる） */
  content: "";
  position: absolute;
  left: var(--x, 50%);
  top: 3px;
  bottom: 3px;
  border-left: 2px dotted #9fd3f2;
}
.ruler-caption .nowrap { display: inline-block; white-space: nowrap; }

@media (min-width: 900px) {
  .ruler { margin: 24px 0 16px; }
  .ruler-flags { height: 42px; }
  .ruler.has-raised-flag .ruler-flags { height: 80px; }
  .ruler-flag { font-size: 15px; padding: 4px 16px; bottom: 10px; }
  .ruler-flag.is-raised { bottom: 48px; }
  .ruler-grid { gap: 8px; grid-template-columns: repeat(5, 1fr) 1.15fr; }
  .ruler-bar { height: 20px; }
  .ruler-lv { margin-top: 10px; font-size: 14px; }
  .ruler-name { font-size: 14px; }
  .ruler-caption { font-size: 14px; }
}

/* ---------- 結果画面：「↓ 分野ごとのくわしい結果は下へ」の案内（PC だけ。レイアウトは変えずに上に重ねる） ---------- */
/* 置く場所は app.js の placeScrollHint が決める。
   ・ふつうは、下の帯のすぐ上の真ん中（ページといっしょにスクロールする）
   ・そこだと文字や枠に重なるときは、下の帯の中の真ん中（.is-in-band） */
.scroll-hint {
  position: absolute;
  left: 50%;
  z-index: 15;
  padding: 6px 18px;
  border: 2px solid var(--main);
  border-radius: 999px;
  background: #fff;
  color: var(--main-text);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  translate: -50% 0;
  animation: hint-float 1.8s ease-in-out infinite;   /* ゆっくり上下にふわふわ */
  transition: opacity 0.3s ease;
}
.scroll-hint.is-in-band { top: 50%; translate: -50% -50%; }
.scroll-hint[hidden] { display: none; }
.scroll-hint.is-gone { opacity: 0; pointer-events: none; }   /* 少しスクロールしたら、ふわっと消える */
.result-bar .bar-inner { position: relative; }               /* 帯の中に出すときの基準（見た目は変わらない） */
@keyframes hint-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint { animation: none; }      /* 視差効果を減らす設定なら、動かさない */
}

/* ---------- 可変出題（基本チェック・チャレンジ・ボス問題） ---------- */
/* 上の帯：区切りバーの上に、小さく段階の名前 */
.progress-box { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.progress-box .segments { flex: none; }
.stage-name { font-size: 11px; font-weight: 800; line-height: 1; color: var(--text-soft); }
/* 「ここで結果を見る」：答えるボタンから遠い右上に。白地に水色の枠の、小さな丸いボタン */
.btn-finish {
  flex-shrink: 0;
  height: 34px;
  padding: 0 12px;
  border: 2px solid var(--main);
  border-radius: 999px;
  background: var(--surface);
  color: var(--main-text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
@media (min-width: 900px) {
  .stage-name { font-size: 12px; }
  .btn-finish { height: 38px; padding: 0 16px; font-size: 14px; }
}

/* ボス問題：分野ラベルのとなりに「アドバンス講座レベル」（アドバンス講座と同じ黄色） */
.boss-label {
  display: inline-block;
  margin: 0 0 12px 6px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--pick);
  color: #4d3a00;
  font-size: 14px;
  font-weight: 800;
  vertical-align: top;
}
@media (min-width: 900px) { .boss-label { font-size: 15px; } }
@media (max-width: 899px) { #screen-quiz.is-fit-1 .boss-label { margin-bottom: 4px; } }

/* 段階の切りかわりの画面（ぱそぶーの一言）。どこをタップしても次へ */
#screen-break { cursor: pointer; }
.break-inner { max-width: 560px; }
.break-text { margin: 0; word-break: auto-phrase; text-wrap: pretty; }   /* 文節の切れ目で改行し、最後の行が短くならないように */
.break-text .line { display: block; }   /* levels.js で分けた行ごとに改行 */
.break-tap { margin-top: 18px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text-soft); }

/* 学部を選ぶ画面：選択肢を2列に、低めのカードで並べる（スマホでもスクロールなしで全部見えるように）。
   名前が長いもの（グローバル・ディスカバリー・プログラム）は横いっぱい */
#screen-faculty .domain-label { margin-bottom: 8px; }
#screen-faculty .talk { margin-bottom: 12px; }
.faculty-choices { grid-template-columns: 1fr 1fr; gap: 8px; }
.faculty-choice {
  min-height: 44px;
  padding: 6px 10px;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  line-height: 1.35;
}
.faculty-choice.is-wide { grid-column: 1 / -1; }
/* 下の小さな文（名前などは集めないこと）と「詳しく見る」 */
.privacy-short {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-soft);
}
.privacy-short .line { display: block; }
.privacy-more {
  display: inline;
  margin: 0 0 0 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--main-text);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
@media (max-width: 899px) {
  #screen-faculty .pasobu-talk { width: 56px; }
  #screen-faculty .question { font-size: 18px; }
}
/* 背の低いスマホ（360×640 など）：「はじめに」のラベルを出さず、すき間を詰めて1画面に収める */
@media (max-width: 899px) and (max-height: 660px) {
  #screen-faculty .domain-label { display: none; }
  #screen-faculty .talk { margin-bottom: 8px; }
  .faculty-choices { gap: 6px; }
  .privacy-short { margin-top: 6px; }
}

/* 「詳しく見る」の窓：回答の取りあつかいの全文。窓の中はスクロールしてよい */
.modal-box.privacy-box {
  position: relative;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  padding: 20px 8px 16px 20px;
  text-align: left;
}
.privacy-title { margin: 0 44px 10px 0; font-size: 17px; font-weight: 800; line-height: 1.4; }
.privacy-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 12px;
  font-size: 14px;
  line-height: 1.65;
}
.privacy-head { margin: 14px 0 2px; font-size: 14px; font-weight: 800; color: var(--main-text); }
.privacy-line.is-item { padding-left: 1em; text-indent: -1em; }
.privacy-mail { color: var(--main-text); font-weight: 700; word-break: break-all; }
.privacy-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--text-soft);
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.privacy-close { align-self: center; margin: 14px 12px 0 0; min-height: 44px; }

/* 「ここで結果を見る」を押したときの確認 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(51, 65, 78, 0.45);
}
.modal-box {
  width: 100%;
  max-width: 360px;
  padding: 24px 20px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.modal-title { margin: 0 0 18px; font-size: 18px; font-weight: 800; }
.modal-actions { display: flex; gap: 12px; }
.modal-actions .btn { flex: 1; min-width: 0; }

/* 問題の画像。PC は吹き出しの右隣、スマホは吹き出しの中の問題文の右（置き場所は app.js の placeQuestionImage）。
   高さは app.js が、画面に収まるように決める（--q-img-h）。タップで画面いっぱいに拡大 */
.q-image-btn {
  position: relative;
  display: block;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.q-image {
  display: block;
  width: auto;
  max-width: 300px;
  height: var(--q-img-h, 120px);
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
/* スマホ：吹き出しの中で、問題文の右に小さく */
.bubble.has-image { display: flex; align-items: flex-start; gap: 10px; }
.bubble.has-image .question { flex: 1; min-width: 0; }
.bubble.has-image .q-image { max-width: 110px; }
/* PC：吹き出しの右隣（高さは吹き出しと同じくらいまで） */
.talk.has-image > .q-image-btn { align-self: center; }
.q-image-zoom {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(51, 65, 78, 0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.bubble.has-image .q-image-zoom { right: 3px; bottom: 3px; padding: 1px 6px; font-size: 10px; }
/* 選択肢が画像のとき（ポスターA〜D を比べる問題など）：小さな画像カードを 2×2 に並べる。
   画像の高さは app.js が、画面に収まるように決める（--c-img-h）。右上の「拡大」で画面いっぱいに大きく */
.choices.has-images { grid-template-columns: 1fr 1fr; }
.choice.has-image {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "img img img" "key text result";
  align-items: center;
  gap: 6px 8px;
  padding: 8px;
}
.choice.has-image .choice-img { grid-area: img; }
.choice.has-image .choice-key { grid-area: key; }
.choice.has-image .choice-text { grid-area: text; }
.choice.has-image .choice-result { grid-area: result; }
.choice-img {
  display: block;
  width: 100%;
  height: var(--c-img-h, 96px);
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}
.choice-zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(51, 65, 78, 0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: zoom-in;
}

/* 画像を画面いっぱいに大きく表示（どこかをタップすると閉じる） */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 28, 36, 0.92);
  cursor: zoom-out;
}
.lightbox-img {                    /* 小さい画像も、画面に収まるいちばん大きな大きさまで広げる */
  width: 100%;
  height: calc(100% - 40px);
  object-fit: contain;
}
.lightbox-close { margin-top: 10px; color: #fff; font-size: 13px; font-weight: 700; }
.lightbox-x {                       /* 右上の × */
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: inherit;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

/* 結果画面：「（今回の問題での結果）」と、区切りバーの上のマスの名前 */
.card-title-note { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--text-soft); }
/* 4マスの並び（講座の囲み・マスの名前・区切りバーで共通）。ボスの列（4つ目）は、レベル3とのあいだを約28px空ける */
.step-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 18px 1fr;
  column-gap: 5px;
}
.step-grid > :nth-child(4) { grid-column: 5; }
.domain-legend {
  margin-bottom: -2px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-soft);
  text-align: center;
}
/* 王冠＋ボス：計算上は列の真ん中でも右に寄って見えるので、見た目で真ん中になるように 3px 左にずらす */
.domain-legend .is-boss { display: inline-flex; align-items: center; justify-content: center; gap: 3px; color: #9a5a00; transform: translateX(-3px); }
.crown { width: 13px; height: 10px; flex-shrink: 0; fill: #e0a54a; }
/* 講座の囲み：文字の下に、下向きに開いたカッコ型の線（上と左右だけ、角丸） */
.step-courses { align-items: end; margin-bottom: 2px; }
.step-course {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  color: var(--course-text);
}
.step-course::after {
  content: "";
  display: block;
  height: 7px;
  margin-top: 3px;
  border: 1.5px solid var(--course-line);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.step-course .nowrap { display: inline-block; white-space: nowrap; }
.step-course.is-standard { grid-column: 1 / 4; --course-text: #2f5f8f; --course-line: #8fa9c4; }
.step-course.is-advance  { grid-column: 5 / 6; --course-text: #9a5a00; --course-line: #e0a54a; }
/* ボスの列：正解は分野の色（.is-on）／未挑戦は薄いオレンジ／不正解は塗らずに点線の枠（未挑戦と見分けられるように） */
.domain-seg.is-boss:not(.is-on) { background: #f3ead9; }
.domain-seg.is-boss.is-miss { background: transparent; border: 1.5px dashed #e0a54a; }
.domain-seg.is-boss.is-on { box-shadow: 0 0 0 3px #fbe3a0; }   /* ボスに正解：うっすら金色に光らせる */
/* ボスに正解した分野の、ボスの列の上の小さなバッジ「（王冠）撃破」 */
.boss-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 1px;
  padding: 0 6px;
  border-radius: 6px;
  background: #fff4e0;
  color: #9a5a00;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
}
.boss-badge .crown { width: 11px; height: 8px; fill: #e8a200; }
/* ボス問題がない分野（PC基本・Word・Excel・PowerPoint）：バーは出さず「—」だけ */
.domain-seg-none {
  height: 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 9px;
  text-align: center;
  color: var(--off-text);
}
/* ボス問題をまちがえた分野：ボスの列の下に小さく「ボスおしい！」 */
.domain-boss-note { margin-top: 2px; }
.domain-boss-note > span {
  grid-column: 5;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: #9a5a00;
  white-space: nowrap;
}

/* 「すべてのボス問題に挑戦！」：分野ごとのできぐあいのカードと、おすすめ講座のあいだ */
.all-boss { margin: -2px 0 16px; text-align: center; }
.btn-boss {
  min-width: 260px;
  background: #fff4e0;
  color: #9a5a00;
  border: 2px solid #e0a54a;
  box-shadow: 0 4px 0 #e0a54a;
}
.all-boss-note { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--text-soft); }

/* スタッフ紹介（全ボス撃破した人だけ）：おすすめ講座の中の、別の箱。落ち着いた紺のアクセントで、講座のボタンより目立たせない */
.staff-box {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1.5px solid #c9d4e3;
  border-left: 5px solid #1f3a5f;
  border-radius: 12px;
  background: #f5f8fc;
  text-align: left;
}
.staff-title { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: #1f3a5f; }
.staff-text { font-size: 13px; line-height: 1.7; color: var(--text); }
.staff-text .line { display: block; }
.staff-link {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  border: 1.5px solid #1f3a5f;
  border-radius: 999px;
  background: #fff;
  color: #1f3a5f;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.staff-link::after { content: " ↗"; }
/* 右側の「レベル2までクリア」など：0段はグレー、1段以上は分野の色 */
.domain-row-score.is-on { color: var(--dc-text); }
/* 「今のきみ」の帯（結果画面の「診断結果」の黄色に合わせる）。
   横幅は中の文の長さに合わせて伸び縮みし、カードの真ん中に置く。カードの幅を超えるときは、文を折り返す */
.now-self {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: -2px auto 14px;
  padding: 7px 11px;
  border: 2px solid #f6e08a;
  border-radius: 10px;
  background: #fff8d6;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.now-self-text { min-width: 0; word-break: auto-phrase; text-wrap: pretty; }   /* 文節の切れ目で改行し、言葉の途中で切らない。最後の行に1〜2文字だけ残さない */
.now-self-text .line { display: block; }   /* 「！」のあとで改行（1文が1行。入りきらないときは、その行の中で折り返す） */
.now-self-label {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f5c400;
  color: #4a3600;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* テスト公開のあいだだけ出す「テスト版」（config.js の testVersion）。
   画面の左下の角に小さく固定。下のボタンや組織名に重ならない大きさにし、押しても何も起きない */
.test-label {
  position: fixed;
  left: 4px;
  bottom: calc(3px + env(safe-area-inset-bottom));
  z-index: 30;
  margin: 0;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  pointer-events: none;
}