/* ==============================
受検級の目安チェック 固有CSS
/kanken/grades/meyasucheck/ の11ページ専用。
common/layers.css で宣言済みの page レイヤーに参加させることで
_import/*（components レイヤー）に勝ち、_helpers/* には負ける正しい順序になる。
すべてのセレクタを .meyasu-check 配下にスコープし、他ページに影響させない。
============================== */

@layer page {
  /* ------------------------------
  1. 級の概要テーブル（縦型：th左）
  ------------------------------ */

  /* 概要表は列が2つだけなので、PCでは既定の960pxを解除して横スクロールを出さない
     （--table-size: auto は通常フローでは min-width: 0 と同じ扱いになる）。
     SPは幅が足りず th も td も細かく改行されて読みにくいため、受検スタイル比較ページ
     （/kanken/individual/compare/）と同じ 700px を確保し、.table-01-wrapper の
     overflow:auto による横スクロールで見せる。 */
  .meyasu-check .meyasu-overview {
    --table-size: auto;
    margin-top: 24px;
  }

  .meyasu-check .meyasu-overview table {
    min-width: var(--table-size);
  }

  .meyasu-check .meyasu-overview th {
    width: 210px;
    white-space: nowrap;
  }

  @media (max-width: 767px) {
    .meyasu-check .meyasu-overview {
      --table-size: 700px;
    }
  }

  /* 検定料：受検スタイルごとの価格を縦に並べる */
  .meyasu-check .meyasu-fee-list {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    list-style: none;
  }

  /* 団体受検の注記。価格リストと地続きに見えないよう少し離す */
  .meyasu-check .meyasu-fee-list + .txt-08 {
    margin-top: 8px;
  }

  /* 答え合わせボタン押下後、ページ最上部ではなく「●級にチャレンジ」の
     見出しへスクロールする。固定ヘッダー分の余白を確保する。 */
  .meyasu-check [data-meyasu-scroll-target] {
    scroll-margin-top: 160px;
  }

  /* ------------------------------
  2. 大問グループ（発問文＝見出し）
  ------------------------------ */

  .meyasu-check .meyasu-q-group + .meyasu-q-group {
    margin-top: 40px;
  }

  /* 発問文。実際の検定の大問見出しに近い見せ方にする */
  .meyasu-check .meyasu-q-prompt {
    display: flex;
    align-items: flex-start;
    -moz-column-gap: 12px;
    column-gap: 12px;
    padding: 18px 16px;
    border-radius: 8px;
    margin-top: 16px;
    background-color: var(--color-yellow-02);
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1.5;
  }

  @media (max-width: 767px) {
    .meyasu-check .meyasu-q-prompt {
      flex-wrap: wrap;
      font-size: 1rem;
    }
  }

  /* 大問番号（一、二、三…）。括弧で囲むため、単純な水平paddingだけだと
     縦のバランスが崩れる → 上下にも余白を持たせて高さを少し出す。 */
  .meyasu-check .meyasu-q-prompt-number {
    flex: 0 0 auto;
    min-width: 2.5em;
    padding: 4px 0;
    border-radius: 4px;
    background-color: var(--color-dark);
    color: var(--color-white);
    text-align: center;
  }

  /* 発問文本体。flex:1 で伸びることで、後続の分野ラベルが自然に右端へ寄る。 */
  .meyasu-check .meyasu-q-prompt-text {
    flex: 1 1 auto;
  }

  /* 分野ラベル（読み・書き取り等）。アイコン付きの白いチップにして視認性を上げる。 */
  .meyasu-check .meyasu-q-field {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    -moz-column-gap: 4px;
    column-gap: 4px;
    align-self: center;
    padding: 3px 10px 3px 7px;
    border-radius: 999px;
    margin-left: 12px;
    background-color: var(--color-white);
    color: var(--color-grey-02);
    font-size: 0.8125rem;
    font-weight: bold;
    white-space: nowrap;
  }

  /* タグアイコン（インラインSVGをmask-imageで着色。専用画像アセットを増やさない） */
  .meyasu-check .meyasu-q-field::before {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    background-color: currentColor;
    content: "";
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z'/><circle cx='7' cy='7' r='1'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z'/><circle cx='7' cy='7' r='1'/></svg>");
    mask-repeat: no-repeat;
    mask-size: contain;
  }

  /* SP: 発問文が長いのでラベルは自然に次の行へ落ちる。flex-basis:100% を与えると
     その行いっぱいに帯状に伸びてしまうため、基底の flex:0 0 auto のまま
     内容幅で左端に置く。 */
  @media (max-width: 767px) {
    .meyasu-check .meyasu-q-field {
      margin-top: 8px;
      margin-left: 0;
    }
  }

  /* 発問文直下の問題リストは既定の48pxでは離れすぎるため詰める */
  .meyasu-check .meyasu-q-prompt + .check-01-list {
    margin-top: 16px;
  }

  /* 即時採点モードは発問文の直下に問題文が来る */
  .meyasu-check .meyasu-q-prompt + .meyasu-q-text {
    margin-top: 20px;
  }

  /* ------------------------------
  3. 問題文の表記
  ------------------------------ */

  /* 設問1件ずつのグルーピングを視覚的にわかりやすくする（左に少し余白） */
  .meyasu-check .check-01-inner {
    padding-left: 8px;
  }

  /* 四字熟語の意味を問う問題は、問題文が四字熟語のみなので大きく単独表示する */
  .meyasu-check .check-01-text .meyasu-idiom {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1.25;
  }

  @media (max-width: 767px) {
    .meyasu-check .check-01-text .meyasu-idiom {
      font-size: 1.25rem;
    }
  }

  /* 穴埋め箇所を枠で囲み、答えと対になる箇所だと一目でわかるようにする。
     2用途あり、中身の有無で見せ方を分ける（下の :empty を参照）:
       ・空欄            … 中身なし。漢字1字が入る枠（複雑―単□）
       ・記号付きの空欄  … A / B / C 等のラベル入り（条A・B設・C査）
     inline-flex + vertical-align:middle だと、枠自体の中心を前後の文字の
     x-height基準点に合わせることになり、前後の文字のベースラインとズレて
     浮いて見える。inline-block + text-align:center にして、中身のテキストの
     ベースラインをそのまま前後の文字と揃える。 */
  .meyasu-check .meyasu-blank {
    display: inline-block;
    min-width: 1.8em;
    padding: 0 4px;
    border: 2px solid var(--color-dark);
    border-radius: 4px;
    font-feature-settings: "palt" 1;
    letter-spacing: -0.05em;
    text-align: center;
  }

  /* 中身を持たない空欄。「（　）」を枠内に書くと枠が3文字ぶんに広がって
     穴埋めというより括弧の絵に見えるため、テキストを外して枠だけにした。
     ただし inline-block は中身が無いと高さが 0 になり枠が線に潰れるので、
     width / height を明示して全角1文字ぶんの正方形にする。
     これで「ここに漢字1字が入る」ことが形で伝わる。
     vertical-align の負値は、CJKグリフの下端（ベースラインより少し下）に
     枠の下辺を合わせるための微調整。 */
  .meyasu-check .meyasu-blank:empty {
    width: 1em;
    height: 1em;
    min-width: 0;
    padding: 0;
    vertical-align: -0.1em;
  }

  /* 選択肢が長文（四字熟語の意味・誤字訂正）の場合、
     .check-01-group の3等分では窮屈なので縦積みに切り替える */
  .meyasu-check .check-01-group.meyasu-group-stack {
    flex-direction: column;
    row-gap: 12px;
  }

  .meyasu-check .check-01-group.meyasu-group-stack .check-01-item {
    width: 100%;
  }

  /* ------------------------------
  3b. 答え合わせ後（batch モード）に、どこが間違いかを明確にする
  ------------------------------ */

  /* 正解の選択肢：黄色い背景＋「○正解」のラベルで強調する。
     .check-01-item は radio/check-01-check の絶対配置の基準（position:relative）
     なので padding は追加しない（内側の丸位置がずれるため）。 */
  .meyasu-check .check-01-item.is-correct {
    border-radius: 4px;
    background-color: var(--color-yellow-02);
  }

  .meyasu-check .check-01-item.is-correct label::after {
    display: inline-block;
    margin-left: 6px;
    color: var(--color-red);
    font-size: 0.875rem;
    font-weight: bold;
    content: "○正解";
  }

  /* ユーザーが選んで不正解だった選択肢：取り消し線＋「×あなたの回答」 */
  .meyasu-check .check-01-item.is-user-wrong label {
    color: var(--color-grey-02);
    text-decoration: line-through;
  }

  .meyasu-check .check-01-item.is-user-wrong label::after {
    display: inline-block;
    margin-left: 6px;
    color: var(--color-grey-02);
    font-size: 0.875rem;
    font-weight: bold;
    text-decoration: none;
    content: "×あなたの回答";
  }

  /* ------------------------------
  4. 即時採点モード（5級〜10級）
     既存 check-03（縦横並びカード）を縦積みの大ボタンに転用する
  ------------------------------ */

  .meyasu-check .meyasu-choices {
    flex-direction: column;
    justify-content: flex-start;
    row-gap: 12px;
    margin-top: 20px;
  }

  .meyasu-check .meyasu-choices .check-03 {
    max-width: none;
  }

  /* _import/_test.css の .check-03 はラジオを全面に敷くだけで透明化しておらず、
     ネイティブのラジオ丸がカード上に重なって見えてしまう。ここで透明にする。 */
  .meyasu-check .meyasu-choices input[type="radio"] {
    z-index: 2;
    opacity: 0;
    cursor: pointer;
  }

  .meyasu-check .meyasu-choices input[type="radio"]:disabled {
    cursor: default;
  }

  /* opacity:0 でフォーカスリングが見えなくなるため、label 側に表示する */
  .meyasu-check .meyasu-choices input[type="radio"]:focus-visible ~ label {
    outline: 3px solid var(--color-blue-03);
    outline-offset: 2px;
  }

  /* 子どもが押しやすい大きなボタン。160px は縦積みでは高すぎるので詰める。
     背景色（background-02の薄黄色）に同化しないよう、白背景＋淡い影で
     ボタンだと分かるように浮き上がらせる。 */
  .meyasu-check .meyasu-choices input[type="radio"] ~ label {
    min-height: 72px;
    padding: 16px 56px 16px 20px;
    border-radius: 8px;
    background-color: var(--color-white);
    box-shadow: 0 2px 4px rgba(41, 34, 0, 0.08);
    font-size: 1.375rem;
    transition: background-color 0.25s ease, border-color 0.25s ease;
  }

  @media (max-width: 767px) {
    .meyasu-check .meyasu-choices input[type="radio"] ~ label {
      min-height: 64px;
      padding: 14px 48px 14px 16px;
      font-size: 1.25rem;
    }
  }

  /* 回答が確定するまではホバーで押せることを示す */
  @media (min-width: 768px) {
    .meyasu-check .meyasu-choices input[type="radio"]:not(:disabled) ~ label:hover {
      background-color: var(--color-yellow-05);
    }
  }

  /* 回答確定後：選択済みでない選択肢は控えめにする */
  .meyasu-check .meyasu-choices.is-answered input[type="radio"] ~ label {
    color: var(--color-grey-02);
    border-color: var(--color-grey);
  }

  /* 回答確定後：正解の選択肢（既存ページと同じく「正解は赤」の表記ルールに合わせる） */
  .meyasu-check .meyasu-choices .check-03.is-correct input[type="radio"] ~ label {
    border-color: var(--color-red);
    background-color: var(--color-white);
    color: var(--color-red);
  }

  /* 回答確定後：本人が選んだ誤答 */
  .meyasu-check .meyasu-choices .check-03.is-wrong input[type="radio"] ~ label {
    border-color: var(--color-grey-02);
    background-color: var(--color-grey-04);
    color: var(--color-grey-02);
  }

  /* ○ / × のマーク。選択肢の右端に出す */
  .meyasu-check .meyasu-choices .check-03.is-correct input[type="radio"] ~ label::after,
  .meyasu-check .meyasu-choices .check-03.is-wrong input[type="radio"] ~ label::after {
    position: absolute;
    top: 50%;
    right: 16px;
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1;
    transform: translateY(-50%);
  }

  .meyasu-check .meyasu-choices .check-03.is-correct input[type="radio"] ~ label::after {
    background-color: var(--color-red);
    color: var(--color-white);
    content: "○";
  }

  .meyasu-check .meyasu-choices .check-03.is-wrong input[type="radio"] ~ label::after {
    background-color: var(--color-grey-02);
    color: var(--color-white);
    content: "×";
  }

  /* label に position が無いと ::after を配置できない */
  .meyasu-check .meyasu-choices input[type="radio"] ~ label {
    position: relative;
  }

  /* ------------------------------
  5. 即時採点の判定メッセージ（aria-live 領域）
  ------------------------------ */

  .meyasu-check .meyasu-judge {
    margin-top: 16px;
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1.5;
  }

  /* 未回答時は何も表示しない（:empty で余白も出さない） */
  .meyasu-check .meyasu-judge:empty {
    margin-top: 0;
  }

  .meyasu-check .meyasu-judge .meyasu-judge-mark {
    display: inline-flex;
    min-width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 100%;
    margin-right: 8px;
    font-size: 1rem;
    vertical-align: middle;
  }

  .meyasu-check .meyasu-judge[data-judge="correct"] {
    color: var(--color-red);
  }

  .meyasu-check .meyasu-judge[data-judge="correct"] .meyasu-judge-mark {
    background-color: var(--color-red);
    color: var(--color-white);
  }

  .meyasu-check .meyasu-judge[data-judge="wrong"] {
    color: var(--color-grey-02);
  }

  .meyasu-check .meyasu-judge[data-judge="wrong"] .meyasu-judge-mark {
    background-color: var(--color-grey-02);
    color: var(--color-white);
  }

  /* ------------------------------
  6. 即時採点モードの問題ブロック
  ------------------------------ */

  .meyasu-check .meyasu-q {
    padding: 24px 0;
    border-bottom: 1px solid var(--color-yellow-06);
  }

  .meyasu-check .meyasu-q:first-child {
    padding-top: 0;
  }

  /* 問題文（子どもが読むので大きめ・行間広め）。
     1行に収まるときは中央寄せにしたいが、折り返した場合は中央寄せのままだと
     読みにくいので左寄せにしたい。JSで行数判定するのではなく、
     width: fit-content + margin-inline: auto + text-align: left の組み合わせで
     実現する（幅が内容に合わせて縮むため1行なら中央に来て、収まりきらず
     折り返す場合は幅が100%まで広がり左寄せの複数行になる）。 */
  .meyasu-check .meyasu-q-text {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.75;
    text-align: left;
  }

  @media (max-width: 767px) {
    .meyasu-check .meyasu-q-text {
      font-size: 1.375rem;
    }
  }

  .meyasu-check .meyasu-q-text .highlight {
    background-color: var(--color-yellow);
    text-decoration: underline;
  }

  /* ------------------------------
  7. データ・声の枠組み（データ未確定のプレースホルダー）
  ------------------------------ */

  .meyasu-check .meyasu-placeholder {
    display: flex;
    min-height: 200px;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border: 2px dashed var(--color-grey);
    border-radius: 8px;
    background-color: var(--color-grey-13);
    color: var(--color-grey-02);
    font-size: 0.875rem;
    text-align: center;
  }

  /* ------------------------------
  8. 受検スタイルカード（panel-02 流用）
  ------------------------------ */

  /* panel-02 は grid-template-rows: subgrid で2行を前提としているため、
     カテゴリ名と対象級は .title / .text の中に入れる。 */
  .meyasu-check .meyasu-style-category {
    display: block;
    margin-bottom: 6px;
    color: var(--color-grey-02);
    font-size: 0.875rem;
    font-weight: bold;
  }

  .meyasu-check .meyasu-style-grade {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    padding: 2px 12px;
    border-radius: 16px;
    margin-bottom: 8px;
    background-color: var(--color-yellow);
    font-size: 0.875rem;
    font-weight: bold;
  }

  /* ------------------------------
  9. 「答え合わせ」「他の級へのチャレンジ」ボタンの間隔
  ------------------------------ */

  /* .btn-list-center は768px以上でのみ display:flex + gap になり、
     SPでは間隔の無いブロック並びのままボタンがくっついてしまう。
     _import/_button.css は編集できないため、ここでSP時のみ縦積み＋gapを補う。 */
  @media (max-width: 767px) {
    .meyasu-check .btn-list-center {
      display: flex;
      flex-direction: column;
      row-gap: 16px;
    }
  }

  /* ------------------------------
  10. トップページの受検級一覧カード（panel-02 流用）
  ------------------------------ */

  /* 級名を少し大きくする。バッジを持つ.titleだけに絞ることで、
     下の「受検スタイル」セクションのpanel-02（.meyasu-grade-colorを持たない）
     には影響させない。 */
  .meyasu-check .panel-02 .title:has(.meyasu-grade-color) {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
  }

  @media (max-width: 767px) {
    .meyasu-check .panel-02 .title:has(.meyasu-grade-color) {
      font-size: 1.25rem;
    }
  }

  /* 級カラーのバッジ。級名の左に添える縦長の色バー。
     トップページの級一覧パネル（.panel-02 .title）と、級ページの概要テーブル上
     （.meyasu-grade-title）の2箇所で共用する。同じ「級の色」を表すものなので、
     形が絶対にズレないよう値はここ1箇所だけに持たせる。

     色は級ごとに異なるためHTML側でCSS変数として渡す
     （10級分の色をここに個別セレクタで書き並べるより、色データを担う
     HTML側に置くほうが1箇所で見通しがよい。--table-size と同じ流儀）。
     親を flex にしてあるので、vertical-align に頼らずalign-itemsで
     中央揃えする（CJKの太字テキストはx-height基準のmiddleだとズレやすい）。
     高さをemにして親のfont-size（SPで縮む）に自動追従させる。
     共用する2箇所は font-size を揃えてあるため、同じ高さで表示される。 */
  .meyasu-check .meyasu-grade-color {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 1.1em;
    border-radius: 3px;
    margin-right: 10px;
    background-color: var(--meyasu-grade-color, var(--color-dark));
  }

  /* 対象漢字数（「2136字」等）。程度テキストの直後に置く角丸の枠。
     panel-02 はホバーで背景が黄色に変わるため、背景色は敷かず枠線のみに
     して、白／黄どちらの状態でも枠として成立するようにする。 */
  .meyasu-check .meyasu-kanji-count {
    display: inline-block;
    padding: 1px 10px;
    border: 1px solid var(--color-dark);
    border-radius: 16px;
    margin-left: 8px;
    font-size: 0.875rem;
    font-weight: bold;
    white-space: nowrap;
  }

  /* ------------------------------
  11. 級ページの級カラーアクセント（概要テーブルの上）
  ------------------------------ */

  /* 級の概要テーブルの直前に置く「●2級」のラベル。
     色の値はHTML側（級ページの .meyasu-check の style 属性）でCSS変数として
     渡す（トップの .meyasu-grade-color と同じ流儀。10級分の色をここに
     個別セレクタで書き並べない）。変数を持たないページでは fallback の
     --color-dark が効き、既定の見た目のまま変わらない。 */
  .meyasu-check .meyasu-grade-title {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.4;
  }

  @media (max-width: 767px) {
    .meyasu-check .meyasu-grade-title {
      font-size: 1.25rem;
    }
  }

  /* ラベル直後の概要テーブル。既定の 24px では級名と離れて見えるので詰める。 */
  .meyasu-check .meyasu-grade-title + .meyasu-overview {
    margin-top: 12px;
  }

  /* ------------------------------
  12. 準備中セクションの非表示
  ------------------------------ */

  /* 「こんな方が受けています！」「受検したみんなの声」「受検した保護者の声」は
     データ・原稿が未確定のため一旦隠す。中身（プレースホルダー）はそのまま残して
     あるので、公開する際は該当セクションの div から meyasu-wip を外し、
     プレースホルダーを実データに差し替える。
     差し替え先のマークアップは CLAUDE.md「未完成（WIP）セクションと差し替え手順」に
     退避してある（公開HTMLにTODOコメントを残さない方針のため）。 */
  .meyasu-check .meyasu-wip {
    display: none;
  }

  /* display:none でも兄弟セレクタの数には入るため、_background.css の
     `.background-03 + .background-03 { padding: 0 0 80px }`（同色セクションが
     連続したときに上paddingを相殺するルール）が、隠したセクション越しに
     誤発火してしまう。その結果、隠したセクションの次に来る白セクションが
     上paddingを失い、前のセクションに貼り付いて見える。
     隠した直後の白セクションだけ既定の余白に戻す。 */
  .meyasu-check .meyasu-wip + .background-03 {
    padding: 80px 0;
  }
}