:root{--orl:rgba(255,154,60,0.12);--ord:#FFB870;} /* ══ Phase 4(2026-08-19): 筐体（シャーシ）の真鍮トークン ══════════════════════ 試験UIを「筐体＝真鍮固定 / 盤面＝テーマ可変」の2層に分ける（設計 §5）。筐体は ベース6テーマにも演出7テーマにも振らない＝「同じ機械の中にいる」を担う層。 ⚠️ 命名は「--exam- 接頭辞 かつ vars.css に同名が無い」の2条件を必須にすること。 --exam- は既に共有名前空間で、vars.css が --exam-modal-a / --exam-modal-b を持つ。 接頭辞を付けただけでは安全ではない（2026-08-14 に --cb が vars.css のカード背景色を 継承で拾い、animation ショートハンドが色を duration に食ってプロパティごと unset に なった事故がある。あのときは「4つ中1つだけ動く」という気づきにくい壊れ方をした）。 ⚠️ vars.css には1文字も足さない。真鍮はベース配色ではないので :root に居場所は無い。 ⚠️ index.html の .gauge{--brass:...} と値は同じだが共有しない。片方を触ったらもう片方が 動く関係を作ると「ハブは触らない」という範囲の約束が壊れる＝意図的な重複である。 */ body{ --exam-brass : #C9A227; /* 真鍮。index.html の .gauge と同値（意図的な重複） */ --exam-brass-hi : #E0C25E; /* 磨いた面 */ --exam-copper : #B87333; /* 銅。影側・リベットの底 */ --exam-bevel-hi : rgba(224,194,94,.34); /* 稜線の明側（--exam-brass-hi の RGB） */ --exam-bevel-lo : rgba(0,0,0,.45); /* 稜線の暗側。無彩色＝どのテーマでも中立 */ --exam-rivet : rgba(224,194,94,.42); /* リベットの頭 */ } /* ⚠️ --exam-bevel-lo を「見えないから」と省かないこと。明線だけだと「地が少し明るい帯」に 見えるだけで、明線＋暗線の対になって初めて「縁」＝金属に見える。黒は6テーマすべてで 中立なので、対の片側が常にテーマに依存しない。省いた瞬間に暖色テーマ（琥珀・薔薇）で 意匠が消える。これが Phase 4 の唯一の技術的な要。 */ *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{font-family:-apple-system,'Noto Sans JP','Helvetica Neue',sans-serif;background:transparent;color:var(--tx);font-size:14px;line-height:1.7;} /* ── Header glassmorphism ── */ .st-hdr{background:rgba(var(--hdr-rgb),.94);border-bottom:1px solid rgba(255,255,255,.08);color:#fff;padding:10px 12px 8px;position:sticky;top:0;z-index:var(--z-hdr);box-shadow:0 2px 20px rgba(0,0,0,.45);} /* ⚠️ flex-wrap 必須。既定ではテキスト要素が最小幅まで縮み、日本語は文字間で改行できるため 狭い画面（iPhone実機・2026-07-20）で「統合学習ツール」が1文字幅の縦書きに潰れ、 ヘッダーだけで画面の4割を占めていた。折りたたみボタンは .st-filter-panel しか畳まないので この行が肥大化すると回避手段が無くなる。子要素側の white-space:nowrap と必ずセットで維持すること。 */ .st-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;flex-wrap:nowrap;} .st-title-left{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0;} .st-title-left::-webkit-scrollbar{display:none;} .st-title-right{display:flex;align-items:center;gap:5px;flex-shrink:0;margin-left:auto;z-index:2;} .hdr-toggle, .hdr-btn{background:none;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.65);font-size:9px;font-weight:700;cursor:pointer;padding:2px 6px;border-radius:10px;font-family:inherit;flex-shrink:0;transition:background .15s;} .hdr-theme-btn, .hdr-sound-btn{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.35);color:#fff;font-weight:800;padding:2px 7px;} .hdr-toggle{transition:transform .25s,background .15s;} .hdr-toggle:hover, .hdr-btn:hover{background:rgba(var(--glass-rgb),.1);} .hdr-theme-btn:hover, .hdr-sound-btn:hover{background:rgba(0,229,255,.25);border-color:#00E5FF;color:#fff;} @media (max-width: 480px) { .st-title { display: none !important; } .hdr-theme-btn, .hdr-sound-btn { padding: 2px 6px !important; font-size: 8.5px !important; } } .st-hdr.hdr-collapsed .hdr-toggle{transform:rotate(-90deg);} .st-filter-panel{overflow:hidden;max-height:220px;transition:max-height .3s cubic-bezier(.16,1,.3,1),padding .3s cubic-bezier(.16,1,.3,1),margin .3s cubic-bezier(.16,1,.3,1),opacity .2s;padding:6px 10px 5px;margin:4px 0;} .st-hdr.hdr-collapsed .st-filter-panel{max-height:0;padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;border-top-width:0!important;border-bottom-width:0!important;border-color:transparent!important;box-shadow:none!important;opacity:0;pointer-events:none;} .st-hdr.hdr-collapsed .st-stats{margin-bottom:0;} /* D3(2026-08-19): ヘッダのレール＝試験に入ると筐体が閉じる。計器ベイの下端に真鍮の板が通る。 ⚠️ .st-hdr の padding / border-bottom を1pxも変えないこと。既存の border-bottom はそのまま残し、 その上に疑似要素で重ねる（値を書き換えると通常閲覧にも影響が出る）。position:absolute なので フローに出ず高さ0＝_fxBand() の焦点は動かない（.st-hdr は position:sticky＝包含ブロック）。 ⚠️ レールは ::before・稼働灯(D9)は ::after。逆にすると後から描かれる稼働灯の光がレールの下に 隠れる。z-index で捻じるより最初から順番どおりに割り当てる。 ⚠️ backdrop-filter を足さないこと。.qc / .st-hdr / .sgh に載せると iOS WebKit の合成が破綻して 画面下が白くなる（下の「iOS WebKit」の記録を参照）。金属の質感を出したくなって backdrop-filter:saturate() に手を伸ばすのが一番ありそうな失敗。 ⚠️ ▼で畳んだ状態（hdr-collapsed）でもレールは残る＝.st-hdr 本体に付いており bottom:0 が 親の高さの変化に自動で追従する。.st-filter-panel の中に入れると畳んだ瞬間に消える。 両端を transparent へ落としているのは、角で切れると「板が貼ってある」ように見えるため。 */ /* S9(2026-08-21 / Phase 7): レールの断面に丸みを与える。height 1px → 2px にして **上1px を明側・下1px を暗側**にすると「上が光り下が翳る」＝平線ではなく管に見える。 既存の稜線の考え方（明線と暗線の対で初めて金属の縁になる）をそのまま当てただけ。 ⚠️ bottom:0 の absolute なのでヘッダの高さは1pxも増えない（§5-5 は死守）。実測で確認済み。 ⚠️ 稼働灯（::after）は 1px のままにすること。太くすると光が「帯」になり、 管の中を通る細い流体に見えなくなる。 ⚠️ 筐体の改修なのでテーマにも tier にも振らない。 */ body.exam-mode .st-hdr::before{content:'';position:absolute;left:0;right:0;bottom:0;height:2px; pointer-events:none; background-image:linear-gradient(90deg,transparent,var(--exam-bevel-lo) 12%,rgba(0,0,0,.62) 50%,var(--exam-bevel-lo) 88%,transparent), linear-gradient(90deg,transparent,var(--exam-brass) 12%,var(--exam-brass-hi) 50%,var(--exam-brass) 88%,transparent); background-repeat:no-repeat; background-size:100% 1px,100% 1px; background-position:0 100%,0 0;} /* D9 稼働灯（ヘッダ下端を光が走る .st-hdr::after）は 2026-09-28 に撤去した（ユーザー判断）。戻さないこと。 */ .st-title{font-family:var(--font-display);letter-spacing:var(--font-display-ls);font-size:10px;font-weight:800;white-space:nowrap;flex-shrink:0;} .hub-link{font-size:9px;color:#FFFFFF;font-weight:750;text-decoration:none;padding:2px 7px;border:1px solid rgba(255,255,255,.45);border-radius:8px;white-space:nowrap;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);box-shadow:0 1px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35);transition:all .16s ease-out;display:inline-flex;align-items:center;gap:2px;flex-shrink:0;} .hub-link:hover{background:rgba(255,255,255,.28);border-color:#FFFFFF;box-shadow:0 0 8px rgba(255,255,255,.45);transform:translateY(-1px);} .mec-sync-badge{font-size:8.5px;padding:2px 6px;border-radius:10px;font-weight:700;background:rgba(var(--glass-rgb),.1);color:rgba(255,255,255,.8);margin-left:auto;white-space:nowrap;flex-shrink:0;} /* 統計チップは折り返さず横スクロール＝常に1行に収める（Lv/ミッションのチップが増えて 狭い画面では2〜3行に折り返し、ヘッダーを押し上げていた） */ .st-stats{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:4px;} .st-stats::-webkit-scrollbar{display:none;} .st-stat{background:rgba(var(--glass-rgb),.08);border-radius:10px;padding:2px 6px;font-size:9px;font-weight:700;border:1px solid rgba(255,255,255,.1);font-variant-numeric:tabular-nums;flex-shrink:0;white-space:nowrap;} .st-stat span{color:var(--yl);} .st-stat.exam-mode-chip{background:rgba(224,194,94,.14);border:1.5px solid rgba(224,194,94,.55);color:var(--or,#FFD700);cursor:pointer;font-family:inherit;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:12px;margin-left:4px;transition:background .18s,border-color .18s,transform .12s,box-shadow .18s;display:inline-flex;align-items:center;gap:3px;box-shadow:0 1px 4px rgba(0,0,0,.25);} .st-stat.exam-mode-chip:hover{background:rgba(224,194,94,.24);border-color:rgba(224,194,94,.85);box-shadow:0 0 8px rgba(224,194,94,.38);} .st-stat.exam-mode-chip:active{transform:scale(.96);} .st-stat.exam-mode-chip.exam-on{background:rgba(255,107,107,.18);border-color:rgba(255,107,107,.55);color:#FF6B6B;} /* ── Filter chips ── */ .chip-row{display:flex;gap:3px;overflow-x:auto;padding:2px 2px 3px;scrollbar-width:none;margin-bottom:3px;} .chip-row::-webkit-scrollbar{display:none;} /* B1(2026-08-18): 読み込み中のチップ。縁が科目色で脈打つ（ハブの .cta-redo[data-load] と同型）。 ⚠️ 変数名は --chip- 接頭辞を必須にすること。--cb のような短い名前は vars.css の共通トークンを 継承で拾い、animation ショートハンドが色を duration に食ってプロパティごと unset になる （2026-08-14にハブで実際に起きた）。 */ .chip{position:relative;} .chip[data-load]::after{content:'';position:absolute;inset:-2px;border-radius:12px;pointer-events:none; border:1px solid var(--chip-load,var(--yl));opacity:.25;animation:chipLoadPulse 1.05s ease-in-out infinite;} @keyframes chipLoadPulse{0%,100%{opacity:.18;transform:scale(1);}50%{opacity:.85;transform:scale(1.06);}} /* カードの着地（上から順に）。--land-i が段差、14枚までしか付けない */ .qc.subj-land{animation:subjLand .52s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--land-i,0) * 34ms);} @keyframes subjLand{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} .chip{padding:2px 6px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(var(--glass-rgb),.04);color:rgba(255,255,255,.52);font-size:8.5px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;flex-shrink:0;} .chip.on{color:#fff;background:rgba(var(--glass-rgb),.12);border-color:rgba(255,255,255,.38);} .filter-row{display:flex;align-items:center;gap:2px;overflow-x:auto;padding:2px 2px;scrollbar-width:none;} .filter-row::-webkit-scrollbar{display:none;} .nb{flex-shrink:0;background:rgba(var(--glass-rgb),.04);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:2px 6px;font-size:8.5px;font-weight:700;font-family:inherit;cursor:pointer;color:rgba(255,255,255,.58);transition:background .15s,border-color .15s,color .15s;white-space:nowrap;} .nb.fc-on{background:var(--or);border-color:var(--or);color:#fff;} .nb[data-filter="hard"].fc-on{background:var(--rd);border-color:var(--rd);} .nb[data-filter="mid"].fc-on{background:var(--yl);border-color:var(--yl);color:#1a1200;} .nb[data-filter="easy"].fc-on{background:var(--gr);border-color:var(--gr);color:#061a0f;} .nb[data-filter="star"].fc-on{background:var(--yl);border-color:var(--yl);color:#1a1200;} .nb[data-filter="img"].fc-on{background:var(--blu);border-color:var(--blu);color:#001a40;} .fsep{width:1px;height:10px;background:rgba(var(--glass-rgb),.15);margin:0 1px;flex-shrink:0;align-self:center;} .vis-count{font-size:8.5px;font-weight:700;color:rgba(255,255,255,.45);white-space:nowrap;flex-shrink:0;} .nb2{flex-shrink:0;background:rgba(var(--glass-rgb),.04);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:2px 6px;font-size:8.5px;font-weight:700;font-family:inherit;cursor:pointer;color:rgba(255,255,255,.58);transition:background .15s,border-color .15s,color .15s;white-space:nowrap;} .nb2.fs-on{background:rgba(var(--glass-rgb),.15);border-color:rgba(255,255,255,.5);color:#fff;} .nb2[data-state="flag"].fs-on{background:var(--rd);border-color:var(--rd);color:#fff;} .search-wrap{position:relative;flex:2;min-width:0;} .search-wrap::before{content:'🔍';position:absolute;left:7px;top:50%;transform:translateY(-50%);font-size:9px;pointer-events:none;} .search-input{width:100%;background:rgba(var(--glass-rgb),.07);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:3px 8px 3px 22px;font-size:9.5px;color:#fff;font-family:inherit;box-sizing:border-box;height:22px;} .search-input::placeholder{color:rgba(255,255,255,.28);} .search-input:focus{border-color:rgba(255,255,255,.38);background:rgba(var(--glass-rgb),.1);} .search-input::-webkit-search-cancel-button{filter:invert(1);opacity:.5;} /* 検索欄＋章ジャンプの行（study.html の .find-row）。広い画面ではボタンの行と同じ1行に並べ、 ボタンが入りきらない幅（980px 以下＝iPhone・iPad 縦）では2行目に回して全幅を使う。 ⚠️⚠️ .find-row の中身を .filter-row へ戻さないこと。ボタンは縮まない（flex-shrink:0）ので、 同じ横スクロール行に入れると検索欄 29px・章の選択欄 12px まで潰れて画面外へ押し出され、 番号ジャンプも章ジャンプも使えなかった（2026-09-11 に 375〜820px の全幅で実測）。 ⚠️ 試験中（body.exam-mode）は狭い画面でも折り返さずに行ごと隠す。ヘッダの高さは試験演出の 焦点の基準（_fxBand）なので1pxも変えない約束で、試験中にこの2つを使う場面も無い。 */ .filter-line{display:flex;align-items:center;gap:2px;} .filter-line>.filter-row{flex:0 1 auto;min-width:0;} /* padding の上下 2px は .filter-row と同じ。検索欄（22px）は元はその余白の内側にあり、行の高さ 26px を決めていた——外へ出して余白を落とすとヘッダが 4px 縮む（試験中も含めて）。 */ .find-row{display:flex;align-items:center;gap:2px;flex:1 1 180px;min-width:0;padding:2px 0;} @media (max-width:980px){ body:not(.exam-mode) .filter-line{flex-wrap:wrap;row-gap:3px;} body:not(.exam-mode) .filter-line>.filter-row{flex:1 1 100%;} body:not(.exam-mode) .find-row{flex:1 1 100%;} /* display:none にしないこと——行の高さの計算から抜けてヘッダが 6px 縮む。幅0の見えない箱で残す */ body.exam-mode .find-row{flex:0 0 0;width:0;overflow:hidden;visibility:hidden;} } /* iOS は 16px 未満の入力欄にフォーカスするとページを自動で拡大する（戻らない）。番号を打つたびに 拡大されては番号ジャンプにならないので、iOS だけ 16px にする（エラー報告のコメント欄と同じ理由）。 */ @supports (-webkit-touch-callout: none){ body:not(.exam-mode) .find-row .search-input, body:not(.exam-mode) .find-row .jump-select{font-size:16px!important;} body:not(.exam-mode) .find-row .search-input{height:28px;} } /* ── Exam mode ── */ .nb.exam-on{background:var(--rd);border-color:var(--rd);color:#fff;} body.exam-mode .ab,body.exam-mode .eg{display:none!important;} body.exam-mode .qc.exam-revealed .ab{display:flex!important;} body.exam-mode .qc.exam-revealed .eg{display:grid!important;} body.exam-mode .ch2{cursor:pointer;border-radius:5px;padding:2px 5px;margin:-2px -5px;transition:background .1s, box-shadow .15s, translate .1s;} body.exam-mode .ch2:hover{background:rgba(var(--glass-rgb),.08);} body.exam-mode .ch2.exam-selected{background:rgba(96,165,250,.22);font-weight:700;color:var(--tx);box-shadow:0 2px 8px -2px rgba(96,165,250,.45),0 0 0 1px rgba(96,165,250,.38);translate:0 1px;} body.exam-mode .qc:not(.exam-revealed) .ch2.ok{color:inherit;font-weight:normal;} body.exam-mode .qc:not(.exam-revealed) .ch2::before{content:none!important;display:none!important;} body.exam-mode .qc.exam-target-loaded .exam-reveal-btn{animation:examBtnReady 1.2s infinite alternate ease-in-out;border-color:var(--exam-brass,#C9A227);color:var(--exam-brass-hi,#E0C25E);box-shadow:0 0 12px rgba(224,194,94,.4);} @keyframes examBtnReady{0%{scale:1;box-shadow:0 0 6px rgba(224,194,94,.3);}100%{scale:1.02;box-shadow:0 0 16px rgba(224,194,94,.65);}} body.exam-mode .qc.exam-multi-correct .ab,body.exam-mode .qc.exam-multi-correct .eg{display:none!important;} body.exam-mode .qc.exam-multi-correct.exam-answer-opened .ab{display:flex!important;} body.exam-mode .qc.exam-multi-correct.exam-answer-opened .eg{display:grid!important;} body.exam-mode .qc.exam-multi-correct{opacity:.4;} body.exam-mode .qc.exam-multi-correct.exam-answer-opened{opacity:1;} body.exam-mode .qc.exam-multi-correct::after{content:'✓ 正解';display:block;text-align:center;color:var(--gr);font-weight:700;font-size:13px;padding:4px 0;} .exam-multi-info{font-size:11px;font-weight:700;padding:4px 8px;margin:4px 0;border-radius:var(--r-sm);background:rgba(var(--glass-rgb),.06);color:var(--ts);border:1.5px solid rgba(255,255,255,.12);transition:background .2s,border-color .2s,color .2s;} .exam-multi-info[data-ready="1"]{background:rgba(61,214,140,.1);color:var(--gr);border-color:rgba(61,214,140,.3);} .exam-excluded-note{font-size:11px;font-weight:700;padding:5px 9px;margin:5px 0;border-radius:var(--r-sm);background:rgba(196,181,253,.12);color:#C4B5FD;border:1.5px solid rgba(196,181,253,.32);} /* ══ Phase 5 段1(2026-08-19): 焦点まわり ══════════════════════════════════════ 読んでいる 8〜15 秒はほぼ無演出だった（焦点枠は静止・稼働灯は 1px）。設計 §11。 R13 焦点カードを持ち上げる／R5 真鍮のクランプで「装填」する／R3 連続正解を枠の色で残す。 ⚠️ 命名は Phase 4 と同じ2条件（--exam- 接頭辞 かつ vars.css に同名が無い）を守ること。 vars.css が持つ --exam-* は --exam-modal-a / --exam-modal-b の2つだけ＝この2つは安全。 */ body{ --exam-focus-c : var(--yl); /* R3: 焦点枠の色。JS が tier 色で上書きする */ --exam-focus-glow: rgba(255,184,48,.15); /* 同上（--yl の RGB）。ぼかし側 */ } /* ⚠️ R13 は .qc の既存 box-shadow（0 4px 24px ＋ inset ハイライト）を必ず書き足すこと。 box-shadow はカスケードで合成されないので、書かないと消える＝カードが平らになり、 .qc:hover でも戻らない（B5 で同じ注意を書いている）。 ⚠️ 焦点枠の色は --exam-focus-c であって真鍮ではない。ここは「盤面」＝可変で正しい （筐体＝真鍮固定という Phase 4 の約束は下のクランプの側が守る）。 */ body.exam-mode .qc.exam-key-focus:not(.exam-revealed){ position:relative; outline:3px solid var(--exam-focus-c);outline-offset:2px; box-shadow:0 0 0 5px var(--exam-focus-glow), 0 16px 40px rgba(0,0,0,.5), 0 4px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08); } /* R5: 真鍮のクランプ（上下の顎が閉じてカードを掴む）。 ⚠️⚠️ .qc::before を使ってよい理由を消さないこと。C5 の .exam-scar::before と衝突しないのは 「.exam-scar が付くのは exam-revealed のカードだけ」「焦点は _getExamTargetCard() が !exam-revealed で絞った未解答カードにしか付かない」という**状態の排他**による。 この排他を担保しているのは _getExamTargetCard() のフィルタなので、あそこを触るときは 必ずここを思い出すこと。CSS 側も :not(.exam-revealed) を明示して二重に守っている。 ⚠️ B5 の成績は実要素 .qc-recap（疑似要素を使わない）、.qc.exam-multi-correct は ::after 側＝無関係。 ⚠️ クランプは筐体なので真鍮固定。tier にもテーマにも振らない（設計 §11-7 の条件2）。 顎は上下 16px の塊・間は 3px の桟。太さを変えられないので background の3層で描いている。 */ body.exam-mode .qc.exam-key-focus:not(.exam-revealed)::before{ content:'';position:absolute;left:0;top:10px;bottom:10px;width:5px; pointer-events:none;z-index:1; background-image:linear-gradient(180deg,var(--exam-brass-hi),var(--exam-copper)), linear-gradient(180deg,var(--exam-copper),var(--exam-brass-hi)), linear-gradient(180deg,var(--exam-copper),var(--exam-brass) 50%,var(--exam-copper)); background-repeat:no-repeat; background-size:5px 16px,5px 16px,3px 100%; background-position:0 0,0 100%,1px 0; box-shadow:1px 0 0 var(--exam-bevel-lo); animation:examClampIn .34s cubic-bezier(.34,1.56,.64,1) both; } /* ⚠️ 顎は「箱の中で background-position を動かす」こと。要素ごと transform で外から 滑り込ませると .qc の overflow:hidden の外へ出る＝2026-08-19 の縮尺振動と同じ型の罠。 */ @keyframes examClampIn{ from{background-position:0 -20px,0 calc(100% + 20px),1px 0;opacity:0;} to {background-position:0 0,0 100%,1px 0;opacity:1;} } /* ══ Phase 7 段D(2026-08-21): S11 炉のヴィネット（設計 §12-2 S11）═════════════ 2巡目の案5「排気フレーム」と案9「ボイラーの呼吸」を1つに統合したもの。 案9 を全画面でやれない理由は3つある——① .qc は 6% のガラスなので背景の明滅が **問題文の背面コントラストを直接動かす** ② 背景を描いているのは html::before （vars.css・position:fixed）で**これは全ページ共有**＝触るとハブも統計も呼吸し始める ③ あの層は iOS で塗り残し（白wash）を起こした前科があり、**最も踏みたくない場所**。 触らずに済む場所は「画面の縁」だけで、そこは案5 が枠を置きたがっている場所と同じ。 だから2つ置くのではなく「呼吸する縁」を1つ作る。 ⚠️⚠️ width / height / transform を1つも書かないこと。2026-08-19 に稼働灯が包含ブロックの 128% まではみ出し、**iOS Safari でページの縮尺が1.4秒周期で伸び縮みし続けた**事故がある。 使ってよいのは position:fixed / inset:0 / pointer-events:none と box-shadow:inset / radial-gradient / opacity **だけ**。 ⚠️ body に transform を掛けてはいけないという既存の禁則（_fxBand の項）もここで守る。 ⚠️ セレクタは body.exam-mode::before / ::after であること（body::before にしない）。 exitExam で exam-mode が外れれば縁も消える＝通常閲覧へ持ち越さない。 ⚠️ 進捗で赤くしないこと。それは R11「セッションが進むと筐体が温まる」で、採るには 「筐体は真鍮固定」という約束を明示的に緩める判断が要る（§11-2・§12-7）。 ⚠️ z-index は --z-hdr + 1（＝201）。カードとヘッダの上・**すべてのモーダル（5000〜）と #examStreakBorder（9045・2026-09-28 撤去）の下**。tier の外周グローは常にこの縁の上に光る＝ 「常時＝静止した筐体の縁／tier＝その上で光る盤面」という Phase 4 の役割分担が縁でも保たれる。 */ /* ⚠️⚠️ セレクタを body.exam-mode::before へ戻さないこと（§13-3 P4）。 html.ui-* body::before（8テーマの環境光・詳細度 0,1,3）が body.exam-mode::before（0,1,2）に 勝つので **z-index が 0 で確定**し、稜線がカードの下敷きになり、四隅の排気口は テーマの background に丸ごと上書きされて消える。::before は1つの箱なので 「テーマの環境光は背景(0)・試験の筐体は前景(201)」を分け合えない。 #examChrome は study.html の markup にある（無いと筐体が丸ごと消える）。 */ body.exam-mode #examChrome{position:fixed;inset:0;pointer-events:none; z-index:calc(var(--z-hdr) + 1); /* 四辺の稜線（明線と暗線の対）＋内側へ落ちる暗がり。⚠️ 明線だけだと「地が少し明るい帯」に 見えるだけで金属の縁にならない（Phase 4 の唯一の技術的な要）。 */ box-shadow:inset 0 0 0 1px var(--exam-bevel-hi), inset 0 0 0 2px var(--exam-bevel-lo), inset 0 0 30px rgba(0,0,0,.42); /* 四隅の排気口＝暗がり。到達距離は 8vmin 以内（§12-3 のゲート5）。 */ background-image:radial-gradient(circle 8vmin at 0 0, rgba(0,0,0,.34),transparent 72%), radial-gradient(circle 8vmin at 100% 0, rgba(0,0,0,.34),transparent 72%), radial-gradient(circle 8vmin at 0 100%,rgba(0,0,0,.34),transparent 72%), radial-gradient(circle 8vmin at 100% 100%,rgba(0,0,0,.34),transparent 72%);} /* 熾火（四隅が呼吸する body.exam-mode::after）は 2026-09-28 に撤去した（ユーザー判断）。戻さないこと。 */ /* ══ Phase 5 段3(2026-08-19): R7 読影灯 ／ R9 相転移 ／ R6 キーキャップ ═══════ ⚠️ セレクタに .qc を含めるかどうかで意味が変わる。画像の枠は「掛ける台」＝カードの装飾では ないので body.exam-mode .qimg（カードに依らない）で書く。 */ /* R7: 試験中の画像はシャウカステン（読影灯）に掛かっている＝真鍮の枠に嵌る。枠は常時・静的。 */ body.exam-mode .qimg{border-color:rgba(201,162,39,.5); box-shadow:0 0 0 1px var(--exam-bevel-lo),0 6px 18px rgba(0,0,0,.45);} /* ⚠️ 素の状態を暗くしないこと。クラスが付いた時だけ「暗→明」が一度走る形にしてあるので、 JS が落ちても画像は普通に読める（stats.html の armReveal で踏んだ失敗の型を避ける）。 ⚠️ pointer-events を作らない＝拡大表示（zoom-in）と競合させない。filter だけで作る。 */ .qimg.qimg-lit{animation:qimgLight .75s ease both;} @keyframes qimgLight{ 0% {filter:brightness(.30) saturate(.45);} 42% {filter:brightness(1.22) saturate(1.06);} 100%{filter:none;} } /* R9: 選択肢が視野に入ったら「読む」から「決める」へ相転移する。肢の側を生かす。 */ /* R6: 決断フェーズで選択肢がわずかに起き上がる。 ⚠️ R9 と必ずセット。単体では静的で弱く、意味も持たない。 ⚠️ .ch2 の padding/margin を変えないこと（負マージンで詰めてあり、.exam-selected と .exam-instant-correct の背景の当たりがずれる）。 ⚠️ 計算問題には .ch2 が無い＝何も出ないのが正しい。 ⚠️ 下の .exam-selected の再宣言を消さないこと。この規則は study.css:156 より後ろにあるので、 書かないと複数選択の「選択中」の青が background ごと上書きされて消える。 ⚠️⚠️ 水平の「線」を1本も作らないこと（2026-08-19 にユーザー報告を受けて全部落とした）。 初版はキーキャップらしさを出すために inset 0 1px 0 --exam-bevel-hi … 各肢の上端に明るい線 inset 0 -1px 0 --exam-bevel-lo … 各肢の下端に暗い線 0 2px 0 --exam-copper … 各肢の直下に硬い銅の側壁 の3本を置いていたが、肢は負マージンで詰めて積んであるので**各行に罫線が引かれた表**に 見え、とくに銅の側壁が**下線そのもの**に見えた。 これは見た目の好みの問題では済まない——**下線部はこの教材では意味を持つ記号**で、 「本文中の下線部①〜⑤が選択肢そのもの」という問題が実在する（整形外科 NO.167/171・ NO.142、放射線科 NO.2 など）。装飾の線がそこに紛れると設問の読解を壊す。 キーの立体感は「硬い線」ではなく**拡散した影＋わずかな浮き**だけで出すこと。 負の spread(-3px) は影を要素より内側へ縮めて、左右の端で線状に伸びるのを防いでいる。 */ body.exam-mode .qc.exam-deciding .ch2{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)); box-shadow:0 3px 8px -3px rgba(0,0,0,.5); animation:examKeycapUp .3s cubic-bezier(.34,1.56,.64,1) both; } body.exam-mode .qc.exam-deciding .ch2.exam-selected{background:rgba(96,165,250,.2);} @keyframes examKeycapUp{from{transform:translateY(3px);}to{transform:translateY(-1px);}} /* ══ Phase 7(2026-08-21): S6 選択肢に「押した」手応えを与える ════════════════ これは演出の追加ではなく **現に存在する欠落の修復**である。.ch2 の押下フィードバックは body.exam-mode .ch2:hover の背景だけで、**iPad には hover が無い**＝主要な使用端末では 選択肢を押しても押した瞬間には何も起きなかった。R6 でキーキャップの見た目までは作ったのに、 キーが沈まないまま止まっていた。 ⚠️⚠️ transform で書くと黙って死ぬ。translate プロパティで書くこと。 R6 の examKeycapUp が both で transform:translateY(-1px) を保持し続けているので、 :active{transform:translateY(2px)} は走行中のアニメーションに上書きされて何も起きない。 §11-5-4' で歯車の拡大を scale プロパティへ逃がしたのと同一の罠。独立プロパティなら合成される。 ⚠️ 水平の「線」を1本も作らないこと（§11-6-3'）。沈み込みは影の縮小だけで表す ——box-shadow の blur を 0 にしない・inset を使わない。下線部が選択肢そのものになる設問が 実在するため、装飾の線がそこに紛れると設問の読解を壊す。 ⚠️ .ch2 の padding / margin を1pxも変えないこと（負マージンで詰めてあり、.exam-selected と .exam-instant-correct の背景の当たりがずれる）。 ⚠️ 計算問題には .ch2 が無い＝何も出ないのが正しい。 ⚠️ :not(.exam-revealed) で絞るのは「押しても何も起きない場所で手応えを返さない」ため （解答済みカードの肢はクリックしても revealAnswer が即 return する）。 */ body.exam-mode .qc:not(.exam-revealed) .ch2{transition:background .1s,translate .09s ease,box-shadow .09s ease;} body.exam-mode .qc:not(.exam-revealed) .ch2:active{translate:0 2px;} /* 影が縮むのは R6 が影を与えている決断フェーズだけ。素の状態に影は無いので縮めようが無い。 */ body.exam-mode .qc.exam-deciding:not(.exam-revealed) .ch2:active{box-shadow:0 1px 4px -3px rgba(0,0,0,.5);} @keyframes examShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} /* ── Correct answer effects ── */ @keyframes correctPop{ 0% {background:rgba(0,255,128,.65);color:#fff;text-shadow:0 0 24px rgba(0,255,180,1),0 0 55px rgba(0,255,128,.75);transform:scale(1.025) translateX(4px);} 28% {background:rgba(61,214,140,.42);color:#00FF90;text-shadow:0 0 16px rgba(61,214,140,.85);transform:scale(1.012) translateX(-2px);} 55% {transform:scale(1.006) translateX(.6px);} 100%{background:rgba(61,214,140,.18);color:var(--gr);text-shadow:none;transform:scale(1);} } @keyframes correctShimmer{ 0% {background-position:-240% center;opacity:1;} 100%{background-position:280% center;opacity:0;} } @keyframes cardCorrectGlow{ 0% {box-shadow:0 0 0 3px rgba(61,214,140,1),0 0 70px rgba(61,214,140,.6),0 0 130px rgba(61,214,140,.28),inset 0 1px 0 rgba(255,255,255,.18);border-left-color:var(--gr);transform:scale(1.01);} 45% {box-shadow:0 0 0 2px rgba(61,214,140,.7),0 0 45px rgba(61,214,140,.35),0 0 85px rgba(61,214,140,.15),inset 0 1px 0 rgba(255,255,255,.1);border-left-color:var(--gr);transform:scale(1);} 100%{box-shadow:0 4px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);border-left-color:rgba(255,255,255,.1);transform:scale(1);} } body.exam-mode .ch2.exam-instant-correct{ background:rgba(61,214,140,.18)!important;color:var(--gr)!important;font-weight:700!important; border-radius:4px;position:relative;overflow:hidden; animation:correctPop .58s cubic-bezier(.34,1.56,.64,1) forwards; } body.exam-mode .ch2.exam-instant-correct::before{ content:'';position:absolute;inset:0;pointer-events:none;border-radius:4px; background:linear-gradient(105deg,transparent 15%,rgba(255,255,255,.45) 50%,transparent 85%); background-size:200% 100%; animation:correctShimmer .8s ease .05s forwards; } body.exam-mode .qc:has(.exam-instant-correct){animation:cardCorrectGlow 1.4s ease forwards;} /* ── 演出セット別: 正解の即時グロー（ネオン/和風） ── */ @keyframes neonCorrectPop{ 0% {background:rgba(0,229,255,.10);text-shadow:0 0 2px rgba(0,229,255,.4);} 20% {background:rgba(0,229,255,.55);text-shadow:0 0 10px #00E5FF,0 0 22px rgba(255,43,214,.8);} 45% {background:rgba(0,229,255,.15);text-shadow:0 0 4px rgba(0,229,255,.5);} 70% {background:rgba(0,229,255,.4);text-shadow:0 0 8px #00E5FF,0 0 16px rgba(255,43,214,.6);} 100%{background:rgba(0,229,255,.18);text-shadow:0 0 6px rgba(0,229,255,.6);} } body.exam-effect-neon.exam-mode .ch2.exam-instant-correct{ background:rgba(0,229,255,.18)!important;color:#00E5FF!important;font-weight:700!important; border-radius:2px;position:relative;overflow:hidden; text-shadow:0 0 6px rgba(0,229,255,.8),0 0 14px rgba(255,43,214,.5); animation:neonCorrectPop .5s steps(6,end) forwards; } body.exam-effect-neon.exam-mode .ch2.exam-instant-correct::before{ background:linear-gradient(105deg,transparent 15%,rgba(0,229,255,.5) 50%,transparent 85%); } @keyframes neonCardGlow{ 0% {box-shadow:0 0 0 3px rgba(0,229,255,1),0 0 70px rgba(0,229,255,.55),0 0 130px rgba(255,43,214,.3),inset 0 1px 0 rgba(255,255,255,.18);border-left-color:#00E5FF;} 45% {box-shadow:0 0 0 2px rgba(255,43,214,.7),0 0 45px rgba(255,43,214,.35),0 0 85px rgba(0,229,255,.15),inset 0 1px 0 rgba(255,255,255,.1);border-left-color:#FF2BD6;} 100%{box-shadow:0 4px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);border-left-color:rgba(255,255,255,.1);} } body.exam-effect-neon.exam-mode .qc:has(.exam-instant-correct){animation:neonCardGlow 1.2s ease forwards;} @keyframes inkCorrectPop{ 0% {background:rgba(201,58,58,.5);color:#fff;} 100%{background:rgba(201,58,58,.15);color:#C93A3A;} } body.exam-effect-ink.exam-mode .ch2.exam-instant-correct{ background:rgba(201,58,58,.15)!important;color:#C93A3A!important;font-weight:700!important; border-radius:2px;position:relative;overflow:hidden; animation:inkCorrectPop .6s ease forwards; } body.exam-effect-ink.exam-mode .ch2.exam-instant-correct::before{ background:linear-gradient(105deg,transparent 20%,rgba(26,26,26,.3) 50%,transparent 80%); } @keyframes inkCardGlow{ 0% {box-shadow:0 0 0 3px rgba(201,58,58,.9),0 0 55px rgba(201,58,58,.4),inset 0 1px 0 rgba(255,255,255,.1);border-left-color:#C93A3A;} 45% {box-shadow:0 0 0 2px rgba(26,26,26,.6),0 0 35px rgba(26,26,26,.25),inset 0 1px 0 rgba(255,255,255,.08);border-left-color:#1a1a1a;} 100%{box-shadow:0 4px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);border-left-color:rgba(255,255,255,.1);} } body.exam-effect-ink.exam-mode .qc:has(.exam-instant-correct){animation:inkCardGlow 1.4s ease forwards;} /* ── Wrong answer effects ── */ @keyframes wrongPop{ 0% {background:rgba(255,35,35,.6);color:#fff;text-shadow:0 0 20px rgba(255,60,60,1),0 0 40px rgba(255,60,60,.65);} 100%{background:rgba(255,107,107,.15);color:var(--rd);text-shadow:none;} } @keyframes cardWrongGlow{ 0% {box-shadow:0 0 0 3px rgba(255,80,80,.9),0 0 55px rgba(255,80,80,.42),inset 0 1px 0 rgba(255,255,255,.08);border-left-color:var(--rd);} 100%{box-shadow:0 4px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);border-left-color:rgba(255,255,255,.1);} } body.exam-mode .ch2.exam-instant-wrong{ background:rgba(255,107,107,.15)!important;color:var(--rd)!important;font-weight:700!important; animation:wrongPop .3s ease forwards,examShake .48s .04s ease; } body.exam-mode .qc:has(.exam-instant-wrong){animation:cardWrongGlow .8s ease forwards;} /* ── 結果画面に進むボタン（全問回答後に最後のカード直後へ表示） ── */ .exam-finish-btn{display:block;width:calc(100% - 24px);max-width:440px;margin:14px auto 48px;padding:16px 18px;border:none;border-radius:var(--r-lg);background:linear-gradient(135deg,#3DD68C,#2AA765);color:#fff;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:0 6px 22px rgba(61,214,140,.4);animation:examFinishIn .38s ease;} .exam-finish-btn:hover{filter:brightness(1.06);} .exam-finish-btn:active{transform:translateY(1px);} .exam-finish-btn:disabled{opacity:.6;cursor:default;} /* 未解答の案内の帯（_syncPendingBand）。結果ボタンと同じ場所・同じ寸法で、琥珀＝まだ残っている */ .exam-pending-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;width:calc(100% - 24px);max-width:440px;margin:14px auto 48px;padding:14px 18px;border:1.5px solid rgba(255,184,48,.75);border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(255,184,48,.22),rgba(255,140,40,.14));color:inherit;font-size:15px;font-family:inherit;cursor:pointer;box-shadow:0 6px 22px rgba(255,170,40,.25);animation:examFinishIn .38s ease;} .exam-pending-band b{font-size:19px;color:#FFB830;} .exam-pending-band .epb-n{font-weight:800;} .exam-pending-band .epb-sub{font-size:12px;opacity:.8;} .exam-pending-band .epb-go{font-weight:800;color:#FFB830;} .exam-pending-band:hover{filter:brightness(1.1);} .exam-pending-band:active{translate:0 1px;} @keyframes examFinishIn{0%{opacity:0;transform:translateY(12px) scale(.96);}100%{opacity:1;transform:none;}} /* ── Streak effects ── */ /* 画面の縁の光（#examStreakBorder とテーマ別の外周装飾）は 2026-09-28 に撤去した（ユーザー判断）。戻さないこと。 */ /* §13-3 P4: 試験の筐体を載せる1枚。クラスが付くまでは箱があるだけで何も描かない。 */ #examChrome{position:fixed;inset:0;pointer-events:none;z-index:-1;} /* ゾーンの呼吸（10連続〜の画面全体の明滅）は 2026-09-28 に撤去した（ユーザー判断）。戻さないこと。 */ .streak-ring{position:fixed;border-radius:50%;pointer-events:none;z-index:9055;} /* コンボメーター（画面上端の帯）は 2026-09-28 に撤去した（ユーザー判断）。戻さないこと。 */ /* 赤旗ピン打刻 ＆ 警戒光彩（案4） */ .qc.flag-pinned{animation:cardFlagGlow .75s ease-out;} @keyframes cardFlagGlow{0%{box-shadow:0 0 0 0 rgba(239,68,68,.7);}50%{box-shadow:0 0 0 6px rgba(239,68,68,.4),0 8px 30px rgba(239,68,68,.25);}100%{box-shadow:none;}} @media (prefers-reduced-motion: reduce){ .qc.flag-pinned{animation:none;} } .mec-myrate{font-size:10px;font-weight:700;padding:1px 6px;border-radius:var(--r-md);border:1.5px solid rgba(255,255,255,.14);white-space:nowrap;margin-left:2px;display:inline-block;color:var(--ts);} .mec-myrate[data-ok="true"]{background:rgba(61,214,140,.14);color:var(--gr);border-color:rgba(61,214,140,.32);} .mec-myrate[data-ok="false"]{background:rgba(255,154,60,.14);color:var(--or);border-color:rgba(255,154,60,.32);} .exam-reveal-btn{display:block;width:100%;padding:9px;margin:6px 0 2px;border-radius:var(--r-md);border:2px solid var(--or);background:rgba(255,154,60,.08);color:var(--or);font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s;} .exam-reveal-btn:hover{background:var(--or);color:#fff;} body.exam-mode .qc.exam-revealed.exam-ans-hidden .ab{display:none!important;} body.exam-mode .qc.exam-revealed.exam-ans-hidden .eg{display:none!important;} /* Progress bar */ .exam-prog{display:none;align-items:center;gap:4.8px;padding:0.6px 14px;background:rgba(0,0,0,.5);color:#fff;font-size:6.6px;font-weight:700;font-variant-numeric:tabular-nums;} body.exam-mode .exam-prog{display:flex;} /* 試験モード中：ヘッダー全体（「統合学習ツール」からゲージまで）の上下余白スリム化（2026-09-01） */ body.exam-mode .st-hdr{padding:3px 12px 2px;} body.exam-mode .st-title-row{margin-bottom:2px;} body.exam-mode .st-filter-panel{margin:1px 0;padding:2px 10px 1.5px;} /* 試験モード中：折りたたみ時（hdr-collapsed）の余白スリム化 */ body.exam-mode .st-hdr.hdr-collapsed{padding:1.5px 12px 1px;} body.exam-mode .st-hdr.hdr-collapsed .st-title-row{margin-bottom:0;} body.exam-mode .st-hdr.hdr-collapsed .exam-prog{padding:0 10px;} /* D2(2026-08-19): 計器ベイ＝「まだの側」を真鍮／銅の樋（チャネル）にする。ここは表示ではなく 容れ物なので筐体側。上に暗線・下に明線＝凹んで見える（ボタンの逆）。塗りが伸びるにつれて 樋が埋まっていく構図になる。 ⚠️ height:7px / border-radius:4px / overflow:hidden を変えないこと。高さを変えるとヘッダが 伸びて _fxBand() の焦点が動く。 ⚠️ バーの上に印を載せるなら真鍮にしないこと。真鍮 #E0C25E(L=.5525) は --yl #FFB830(L=.5575) と輝度がほぼ同一＝1.008:1 で、通過済み区間で完全に消える（旧 .ep-tick は白 .85＋黒縁だった。 目盛り・難問印は 2026-08-23g に撤去済み）。 ⚠️ --exam-copper は「レイヤー」ではなく background ショートハンド最終位置の地の色（＝ background-color）として効く。色は最終レイヤーにしか置けないので、暗いグラデを上に敷いて 銅を沈めるこの書き方が正しい。レイヤーのつもりで前へ動かすと none になって銅が消える。 */ .exam-prog-track{position:relative;flex:1;height:4.2px;border-radius:2.4px;overflow:hidden; background:linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,.30)),var(--exam-copper); box-shadow:inset 0 1px 0 var(--exam-bevel-lo),inset 0 -1px 0 var(--exam-bevel-hi);} .exam-prog-fill{height:100%;background:var(--yl);border-radius:2.4px;transition:width .3s;} /* ══ Phase 5 段2(2026-08-19): R2 歯車 ／ R10 スリープと起動 ═══════════════════ ⚠️ 13px は「この行が既に持っている高さ」に収まる寸法。ヘッダを1pxも伸ばさない（§5-5）。 .exam-prog は padding:4px と 11px×1.7 の文字＋終了ボタン（約23px）を含むので歯車は行を伸ばさない。 ⚠️ 寸法を変えるときは必ず .exam-prog の実測高さを before/after で比べること。 ⚠️ 歯車は筐体なので真鍮固定。tier にもテーマにも振らない（設計 §11-7 の条件2）。 ⚠️ 歯車は 2026-09-28 から回らない（静止した意匠）。 */ /* S12(2026-08-21 / Phase 7 段E): ヘッダの数字をニキシー管にする。 意匠だけを採る＝**フリッカーは入れない**（不規則な輝度変化は周辺視野で最も視線を引き、 §11-1 原則3「周期を一定にする」に正面から反する。ニキシー管の意匠は光り方ではなく 「ガラスと琥珀の数字」の側にある）。 ⚠️ 文字サイズと字送りを変えないこと。.exam-prog の行の高さが1pxでも増えると _fxBand() の焦点がずれる（§5-5）。等幅化は font-variant-numeric で行い、 **font-family を差し替えない**（メトリクスが変わる）。 ⚠️ #examTimer は動かさない（点灯の脈を入れない）。1秒ごとに変わる数字なので、 「変わった瞬間にともす」を適用すると 1Hz の常時フリッカーになる。意匠だけを与える。 */ #examProgTxt,#examTimer{color:#FFD98A;font-variant-numeric:tabular-nums; text-shadow:0 0 8px rgba(255,196,90,.35),0 1px 2px rgba(0,0,0,.7);} /* S1 排圧計（.ep-relief / .ep-needle）は 2026-09-28 に撤去した（ユーザー判断）。戻さないこと。 */ /* 歯車（.ep-gear）は静止した筐体の意匠として残す。回転（R2）・膨張・軸光（S4）は 2026-09-28 に撤去した（ユーザー判断）。戻さないこと。 */ .ep-gear{width:7.8px;height:7.8px;flex:none;fill:var(--exam-brass);opacity:.72;} /* R10: 離席（60秒）で機械が休む。⚠️「叱られている」に見せないこと＝暗くするだけで印は消さない。 */ body.exam-mode.exam-asleep .st-hdr::before{opacity:.3;} body.exam-mode.exam-asleep .ep-gear{opacity:.28;} /* ⚠️ .st-hdr::before は必ず body.exam-mode でゲートすること（通常閲覧のヘッダを1pxも変えない）。 */ body.exam-mode .st-hdr::before,body.exam-mode .ep-gear{transition:opacity .5s ease;} /* 起動シーケンス（一度きり）。 */ body.exam-mode.exam-waking .st-hdr::before{animation:examRailWake .9s ease-out;} @keyframes examRailWake{0%{opacity:.3;}35%{opacity:1;filter:brightness(1.7);}100%{opacity:1;}} /* B2(2026-08-18): 節目は「祝わない」。 ⚠️ 目盛り（.ep-tick）と難問印（.ep-hard）は 2026-08-23g に撤去した（study_exam.js の _renderExamProgMarks は掃除だけをする）。CSS も 2026-09-28 に削除済み。 */ /* 節目で進捗バーを光が走る・残り5問のラストスパートは 2026-09-28 に撤去した（ユーザー判断）。戻さないこと。 */ /* B3(2026-08-18): 難問の成績。B4の予告 → B2の道中の印 → ここ、と data-rate 1本が経路を貫く */ .exam-hard-note{font-size:12px;font-weight:700;color:var(--ts);margin:-4px 0 12px; padding:6px 10px;border-radius:var(--r-md);background:rgba(255,154,60,.08); border:1px solid rgba(255,154,60,.28);display:flex;align-items:baseline;justify-content:center; gap:6px;flex-wrap:wrap;} .exam-hard-note b{font-size:15px;color:var(--tx);font-variant-numeric:tabular-nums;} .exam-hard-note .hn-ic{font-size:13px;} .exam-hard-note .hn-sub{font-size:10px;color:rgba(255,255,255,.42);} /* B5: 結果画面を閉じる＝幕が下りる。即座に消えると数字の行方が分からないまま放り出される */ .exam-overlay.closing{animation:examOvOut .3s ease-in forwards;} .exam-overlay.closing .exam-modal{animation:examBoxOut .3s cubic-bezier(.4,0,1,1) forwards;} @keyframes examOvOut{to{opacity:0;}} @keyframes examBoxOut{to{opacity:0;transform:translateY(22px) scale(.97);}} /* B5: 戻った先で、今解いた問題が成績付きで並び直す（誤答が赤く残る）。 ⚠️ C5 の .exam-scar（セッション中だけの傷）とは別物。あちらは持ち越さない、こちらは持ち越す。 ⚠️ .qc の box-shadow を上書きしないこと（影と内側ハイライトを持っており、平らになる。 .qc:hover も box-shadow を書くので hover で消える）。 ⚠️⚠️ 帯は疑似要素ではなく実要素 .qc-recap（_applyRecapChips が足す）で描く。 ::before は C5 の .exam-scar、::after は UIテーマ全8種の透かし模様が使っている。 2026-09-12 まで ::after で描いており、テーマ側の詳細度が勝って帯の left/top と テーマの 170〜240px の円が合成され、Brass では緑の歯車の円がカード左上に居座った。 */ .qc[data-recap]{position:relative;} .qc > .qc-recap{position:absolute;left:0;top:0;bottom:0;width:3px;z-index:3; border-radius:0 3px 3px 0;pointer-events:none;background:var(--recap-c,var(--gr));opacity:.85;} .qc:not([data-recap]) > .qc-recap{display:none;} .qc[data-recap="ok"]{--recap-c:var(--gr);} .qc[data-recap="ng"]{--recap-c:var(--rd);} .qc.qc-recap-in > .qc-recap{animation:qcRecapIn .5s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--recap-i,0) * 42ms);} @keyframes qcRecapIn{from{opacity:0;transform:scaleY(.2);}to{opacity:.85;transform:none;}} /* Start modal */ /* ⚠️ iOS WebKit対策: backdrop-filterの入れ子(オーバーレイ＋ボックス)や、backdrop-filter付き 要素のアニメーションはカクつき・チラつき・ぼかし欠落を起こす。ぼかしはオーバーレイ1枚だけに して、アニメーションするボックス自体はほぼ不透明なグラデ背景で表現する */ .exam-start-ov{display:none;position:fixed;inset:0;background:rgba(var(--ov-rgb),.62);z-index:var(--z-modal);align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);} .exam-start-ov.open{display:flex;} /* 単色アクセントの静的ボーダー（虹色グラデボーダー＋光彩オーブはAI装飾テルのため廃止・2026-07-20） */ .exam-start-box{position:relative;--exam-face:linear-gradient(160deg,rgba(var(--exam-modal-a),.97),rgba(var(--exam-modal-b),.99) 55%);border-radius:20px;padding:24px 24px 0;max-width:480px;width:92%;text-align:center;max-height:90vh;overflow-y:auto;overflow-x:hidden;} .exam-start-ov.open .exam-start-box{animation:examBoxIn .32s cubic-bezier(.16,1,.3,1);} @keyframes examBoxIn{from{opacity:0;transform:translateY(16px) scale(.95);}to{opacity:1;transform:none;}} .exam-start-box h2{font-size:20px;font-weight:800;letter-spacing:.04em;margin-bottom:4px;color:var(--tx);} /* タイトルは単色アクセント（グラデ文字＝background-clip:textはAI生成UIの典型テルのため廃止・2026-07-20） */ .grad-txt{color:var(--yl);} .exam-start-box p{font-size:12px;color:var(--ts);margin-bottom:14px;} /* B4(2026-08-18): 開始前の予告。演出であると同時に情報（開始を押すまで問題数が分からなかった） */ .exam-predict{font-size:12px;font-weight:700;color:var(--ts);text-align:center;margin-bottom:10px; padding:7px 10px;border-radius:var(--r-md);background:rgba(var(--glass-rgb),.05); border:1px solid rgba(255,255,255,.10);display:flex;flex-wrap:wrap;gap:4px 12px; align-items:baseline;justify-content:center;} .exam-predict b{color:var(--yl);font-size:16px;font-variant-numeric:tabular-nums;} .exam-predict .pd-hard{color:var(--or);} .exam-predict .pd-hard b{color:var(--or);font-size:13px;} .exam-predict .pd-ex{color:rgba(255,255,255,.4);font-size:11px;} .exam-predict.empty{color:var(--rd);flex-direction:column;gap:2px;} .exam-predict .pd-sub{font-size:10px;color:var(--ts);font-weight:700;} /* Chapter filter in exam modal */ .exam-ch-section{margin-bottom:14px;text-align:left;} .exam-ch-label{font-size:11px;font-weight:700;color:var(--ts);margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;} .exam-ch-clear{font-size:10px;cursor:pointer;background:none;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);padding:1px 7px;color:var(--ts);font-family:inherit;display:none;} /* 章選択: 科目タブ（横スクロール）＋章カードのグリッド */ .exam-subj-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:2px;-webkit-overflow-scrolling:touch;} .exam-subj-tabs::-webkit-scrollbar{height:3px;} .exam-subj-tabs::-webkit-scrollbar-thumb{background:rgba(var(--glass-rgb),.2);border-radius:2px;} .exam-subj-tab{flex-shrink:0;padding:5px 13px;border-radius:var(--r-lg);border:1.5px solid rgba(255,255,255,.14);background:rgba(var(--glass-rgb),.05);font-size:11px;font-weight:700;color:var(--ts);cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .2s,border-color .2s,color .2s;} .exam-subj-tab.sel{background:rgba(96,165,250,.22);border-color:rgba(96,165,250,.65);color:#A8CDFF;} .exam-subj-tab.has-pick::after{content:'●';color:var(--or);font-size:8px;margin-left:4px;vertical-align:middle;} .exam-ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px;max-height:300px;overflow-y:auto;padding:2px;} .exam-ch-empty{grid-column:1/-1;font-size:11px;color:var(--ts);padding:12px;background:rgba(var(--glass-rgb),.04);border:1px dashed rgba(255,255,255,.15);border-radius:var(--r-md);text-align:center;} /* モーダルを開いた時とタブ切替時だけ、章カードが順番にポップ入場（.anim-in はJSが付与） */ .exam-ch-grid.anim-in .exam-ch-card{animation:ccPop .34s cubic-bezier(.16,1,.3,1) both;} @keyframes ccPop{from{opacity:0;transform:translateY(12px) scale(.8);}to{opacity:1;transform:none;}} .exam-ch-grid::-webkit-scrollbar{width:3px;} .exam-ch-grid::-webkit-scrollbar-thumb{background:rgba(var(--glass-rgb),.2);border-radius:2px;} .exam-ch-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));cursor:pointer;font-family:inherit;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;box-shadow:0 2px 8px rgba(0,0,0,.22);} .exam-ch-card:hover{transform:translateY(-2px);background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05));box-shadow:0 6px 16px rgba(0,0,0,.32);} .exam-ch-card:active{transform:scale(.95);} .exam-ch-card.sel{background:rgba(255,154,60,.22);border-color:rgba(255,154,60,.8);} .exam-ch-card .cc-num{font-size:13px;font-weight:800;color:var(--tx);} .exam-ch-card.sel .cc-num{color:#FFCF9E;} .exam-ch-card .cc-cnt{font-size:9px;color:var(--ts);} /* ベスト正答率のピルバッジ: 未受験グレー / 80%↑緑 / 60-79黄 / 60未満赤 */ .exam-ch-card .cc-score{font-size:9px;font-weight:800;padding:1px 7px;border-radius:var(--r-sm);margin-top:1px;} .cc-score.sc-none{color:rgba(255,255,255,.3);background:rgba(var(--glass-rgb),.06);} .cc-score.sc-hi{color:#7CEFB2;background:rgba(61,214,140,.15);} .cc-score.sc-mid{color:#FFD37A;background:rgba(255,184,48,.15);} .cc-score.sc-lo{color:#FF9B9B;background:rgba(255,107,107,.15);} /* 学習カバー率（この章で回答済みの割合）。正答率(cc-score)と混同しないよう青系で表示。 低い＝一部(★のみ等)しか学習していない、100%＝全問学習済みの目安。 */ .exam-ch-card .cc-cov{display:flex;flex-direction:column;align-items:center;gap:1.5px;font-size:8px;font-weight:800;line-height:1;margin-top:1px;color:var(--ts);} .cc-cov-bar{width:36px;height:3px;border-radius:3px;background:rgba(var(--glass-rgb),.16);overflow:hidden;} .cc-cov-fill{display:block;height:100%;border-radius:3px;background:#60A5FA;transition:width .3s;} .cc-cov.cov-full{color:#7CEFB2;} .cc-cov.cov-full .cc-cov-fill{background:#3DD68C;} .cc-cov.cov-mid{color:#93C5FD;} .cc-cov.cov-mid .cc-cov-fill{background:#60A5FA;} .cc-cov.cov-lo{color:rgba(147,197,253,.72);} .cc-cov.cov-lo .cc-cov-fill{background:rgba(96,165,250,.72);} .cc-cov.cov-none{color:rgba(255,255,255,.28);} .cc-cov.cov-none .cc-cov-fill{background:transparent;} /* ★クリアバッジ: ★問だけ全部終わっている章に表示（右上隅・金色） */ .exam-ch-card{position:relative;} .cc-star-badge{position:absolute;top:3px;right:4px;font-size:10px;line-height:1;color:#FFD166;text-shadow:0 0 6px rgba(255,209,102,.7);pointer-events:none;} /* 開始ボタンとキャンセルボタンをモーダル下部に吸着（左2/3を開始、右1/3をキャンセル） */ .exam-start-foot{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(var(--exam-modal-b),0) 0%,rgba(var(--exam-modal-b),.97) 30%);padding:14px 0 18px;margin-top:4px;display:flex;gap:10px;align-items:stretch;} /* 開始ボタン: 左2/3（グラデ脈動＋光沢スイープ） */ .exam-go-btn{position:relative;overflow:hidden;flex:2;padding:13px;border-radius:var(--r-md);border:none;background:linear-gradient(120deg,#FFB13C,#FF7A45 45%,#FF5E8A);background-size:220% 220%;color:#fff;font-size:16px;font-weight:800;letter-spacing:.08em;cursor:pointer;margin-bottom:0;transition:transform .2s;animation:goPulse 2.6s ease-in-out infinite;display:flex;align-items:center;justify-content:center;font-family:inherit;} @keyframes goPulse{0%,100%{background-position:0% 50%;box-shadow:0 6px 20px rgba(255,138,60,.4);}50%{background-position:100% 50%;box-shadow:0 8px 32px rgba(255,94,138,.6);}} .exam-go-btn::after{content:'';position:absolute;top:-10%;bottom:-10%;left:-45%;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-22deg);animation:goShine 2.6s ease-in-out infinite;} @keyframes goShine{0%,25%{left:-45%;}70%,100%{left:130%;}} .exam-go-btn:hover{transform:translateY(-1px);} .exam-go-btn:active{transform:scale(.98);} /* キャンセルボタン: 右1/3（押しやすい同一高さのボタン） */ .exam-cancel-btn{flex:1;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);border-radius:var(--r-md);color:var(--tx,#fff);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;padding:13px 8px;display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s,transform .12s;} .exam-cancel-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);transform:translateY(-1px);} .exam-cancel-btn:active{transform:scale(.98);} /* Resume section */ .exam-resume-section{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);} .exam-resume-head{font-size:12px;font-weight:800;color:var(--tx);text-align:left;margin-bottom:8px;} /* 中断データカード: 全緑だと情報が塊で読めないため種類ごとに色分けする。 タイトル=白 / 章=青(.er-ch) / フィルター=オレンジ(.er-filter) / 進捗数=アンバー(.er-prog) ＋進捗バー(.er-bar) / 日付=グレー。緑は主アクションの「再開」ボタンだけに残す */ .exam-resume-card{background:linear-gradient(135deg,rgba(96,165,250,.13),rgba(255,255,255,.04) 60%);border:1px solid rgba(96,165,250,.3);border-radius:var(--r-md);padding:10px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px;text-align:left;box-shadow:0 4px 14px rgba(0,0,0,.25);} .exam-resume-info{flex:1;min-width:0;} .exam-resume-info .er-title{font-size:12px;font-weight:700;color:var(--tx);margin-bottom:2px;} .exam-resume-info .er-sub{font-size:11px;color:var(--ts);} .er-ch{color:var(--blu);} .er-filter{background:var(--orl);color:var(--ord);border:1px solid rgba(255,154,60,.35);border-radius:4px;padding:1px 6px;font-size:10px;font-weight:700;margin-left:5px;white-space:nowrap;} .er-prog{color:var(--yl);font-weight:700;} .er-bar{height:4px;background:rgba(var(--glass-rgb),.1);border-radius:2px;margin-top:6px;overflow:hidden;} .er-bar-fill{height:100%;background:linear-gradient(90deg,var(--yl),var(--gr));border-radius:2px;position:relative;overflow:hidden;} .er-bar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:erShine 2.4s ease-in-out infinite;} @keyframes erShine{from{transform:translateX(-100%);}to{transform:translateX(100%);}} .exam-resume-btn{background:linear-gradient(135deg,#4BE29B,#2BB673);color:#04180C;border:none;border-radius:var(--r-sm);padding:7px 14px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;font-family:inherit;flex-shrink:0;transition:transform .2s,box-shadow .2s;box-shadow:0 3px 10px rgba(0,0,0,.3);} /* 再開ボタン押下時の中央演出テキスト（MecFXのバースト・リングと同時発火） */ /* 単色（グラデ文字＝background-clip:text は .grad-txt と同様に廃止・2026-07-20） */ .resume-intro-pop{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:var(--z-mfx);pointer-events:none;font-size:30px;font-weight:900;letter-spacing:.06em;white-space:nowrap;color:#7CEFB2;filter:drop-shadow(0 4px 18px rgba(61,214,140,.5));animation:resumePop 1.15s cubic-bezier(.2,1.3,.4,1) both;} @keyframes resumePop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5);}18%{opacity:1;transform:translate(-50%,-50%) scale(1.12);}30%{transform:translate(-50%,-50%) scale(1);}75%{opacity:1;}100%{opacity:0;transform:translate(-50%,-58%) scale(1.04);}} .exam-resume-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.4);} .exam-resume-btn:active{transform:scale(.96);} .exam-resume-or{font-size:11px;color:var(--ts);margin-bottom:10px;} .exam-resume-marker{display:flex;align-items:center;gap:8px;padding:7px 12px;margin:6px 0 2px;background:rgba(61,214,140,.08);border:1.5px solid rgba(61,214,140,.3);border-radius:var(--r-sm);color:var(--gr);font-size:11px;font-weight:700;} /* Summary modal */ /* height は iOS のアドレスバー伸縮を考慮した dvh（可視領域）基準。vh だと表示高さより大きくなり、 中央寄せ時に結果モーダル上端が画面外(アドレスバーの裏)へ飛び出す（landscape iPadで顕著・2026-07-08）。*/ .exam-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;background:rgba(var(--ov-rgb),.62);z-index:var(--z-modal);align-items:center;justify-content:center;padding:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);} .exam-overlay.open{display:flex;} /* 結果モーダル: 開始モーダルと同系の静的ボーダー＋出現アニメ */ .exam-modal{position:relative;--exam-face:linear-gradient(160deg,rgba(var(--exam-modal-a),.97),rgba(var(--exam-modal-b),.99) 55%);border-radius:20px;padding:24px 28px;max-width:380px;width:90%;text-align:center;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;} /* D4/D5(2026-08-19): 2つのモーダルの筐体。開始＝琥珀・結果＝青という根拠の無い色分けを やめ、両方とも同じ真鍮の額縁にした＝「同じ機械の前と後」。 ⚠️ 必ず1つのルールブロックで書くこと。2本に分けると片方だけ直されて乖離する （chapter_exam.js のミラーで実際に起きている失敗の型）。 ⚠️ 疑似要素で描いてはいけない。どちらのモーダルも overflow-y:auto なので、中に置いた position:absolute の疑似要素は内容と一緒にスクロールし、章チップを下まで送ると リベットと稜線だけ上へ流れて消える。background-image と box-shadow:inset は ボーダーボックスに固定されて流れない＝この2つで描く。 副産物として入場アニメも要らない（箱ごと examBoxIn でスケールインするので筐体も一緒に入る）。 ⚠️ 明線(--exam-bevel-hi)と暗線(--exam-bevel-lo)は必ず対で置くこと。明線だけだと「地が少し 明るい帯」に見えるだけで、対になって初めて「縁」＝金属に見える。黒は6テーマすべてで中立 なので、対の片側が常にテーマに依存しない。省くと暖色テーマ（琥珀・薔薇）で意匠が消える。 ⚠️ 既存の外側の落ち影と内側ハイライトを消さずに追記すること（モーダルの浮き上がりを作っている）。 枠(真鍮) → 明線 → 暗線 → 面 の4段で「厚みのある板」に見える。 ⚠️ border-radius:20px は各自の即値のまま。--r-lg を参照させないこと——リベットの位置 （角から10px内側）は角丸の半径に依存しており、薔薇テーマ(24px)でリベットが角丸の外へ出る。 面のグラデーションだけは各自の --exam-face に持たせてある（将来どちらかの面を変えたときに リベットの4層まで巻き込まれないようにするため）。 */ .exam-start-box,.exam-modal{ --exam-rivet-dot:radial-gradient(circle at 50% 50%,var(--exam-rivet) 0 32%,rgba(0,0,0,.34) 48%,transparent 64%); border:2px solid var(--exam-brass); background-image:var(--exam-rivet-dot),var(--exam-rivet-dot),var(--exam-rivet-dot),var(--exam-rivet-dot),var(--exam-face); background-repeat:no-repeat; background-size:5px 5px,5px 5px,5px 5px,5px 5px,auto; background-position:10px 10px,calc(100% - 10px) 10px,10px calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),0 0; box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--exam-bevel-hi),inset 0 0 0 2px var(--exam-bevel-lo);} .exam-overlay.open .exam-modal{animation:examBoxIn .32s cubic-bezier(.16,1,.3,1);} .exam-modal h2{font-size:18px;font-weight:800;letter-spacing:.03em;color:var(--tx);margin-bottom:10px;position:relative;} /* スコアリング: conic-gradientで正答率ぶんだけ着色（--p/--ringc はJSが更新） */ .exam-pct-ring{--p:0;--ringc:#3DD68C;width:150px;height:150px;border-radius:50%;margin:8px auto 6px;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--ringc) calc(var(--p)*1%),rgba(255,255,255,.08) 0);position:relative;} .exam-pct-ring::before{content:'';position:absolute;inset:10px;border-radius:50%;background:var(--surf-2);} /* B(2026-09-24): 描き進む線の先端の光。リングと同じ箱いっぱい（inset:0）の要素を回すだけ＝箱の外へ出ない。 色はリングと同じ意味色（--ringc）。描き終えた瞬間（tubes-lit）に一度ふくらんで消える。 */ .exam-pct-tip{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:1;rotate:calc(var(--p) * 3.6deg);} .exam-pct-tip::after{content:'';position:absolute;left:50%;top:0;width:10px;height:10px;margin-left:-5px;border-radius:50%; background:#fff;box-shadow:0 0 6px 2px var(--ringc),0 0 16px 4px color-mix(in srgb,var(--ringc) 55%,transparent);} .exam-modal.tubes-lit .exam-pct-tip::after{animation:pctTipDone var(--dur-long) var(--ease-out) forwards;} @keyframes pctTipDone{0%{scale:1;opacity:1}40%{scale:1.8;opacity:.9}100%{scale:2.4;opacity:0}} .exam-pct{position:relative;font-size:40px;font-weight:900;line-height:1;color:var(--tx);text-shadow:0 0 18px rgba(255,255,255,.14);font-variant-numeric:tabular-nums;} .exam-pct-sub{font-size:12px;color:var(--ts);margin-bottom:14px;} .exam-detail{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;} .exam-detail-item{border-radius:var(--r-md);padding:9px 8px;position:relative;} /* 統計タイルの色分け: 正解=緑 / 不正解=赤 / 回答=青 / 時間=紫 */ .exam-detail-item.di-ok{background:linear-gradient(160deg,rgba(61,214,140,.17),rgba(61,214,140,.05));border:1px solid rgba(61,214,140,.32);} .exam-detail-item.di-ok .val{color:#7CEFB2;} .exam-detail-item.di-ng{background:linear-gradient(160deg,rgba(255,107,107,.17),rgba(255,107,107,.05));border:1px solid rgba(255,107,107,.32);} .exam-detail-item.di-ng .val{color:#FF9B9B;} .exam-detail-item.di-n{background:linear-gradient(160deg,rgba(96,165,250,.15),rgba(96,165,250,.04));border:1px solid rgba(96,165,250,.32);} .exam-detail-item.di-n .val{color:#A8CDFF;} .exam-detail-item.di-t{background:linear-gradient(160deg,rgba(167,139,250,.15),rgba(167,139,250,.04));border:1px solid rgba(167,139,250,.32);} .exam-detail-item.di-t .val{color:#C9B8FF;} /* タイルは開いた時に順番にポップ入場 */ .exam-overlay.open .exam-detail-item{animation:ccPop .34s cubic-bezier(.16,1,.3,1) both;} .exam-overlay.open .exam-detail-item:nth-child(1){animation-delay:.10s;} .exam-overlay.open .exam-detail-item:nth-child(2){animation-delay:.16s;} .exam-overlay.open .exam-detail-item:nth-child(3){animation-delay:.22s;} .exam-overlay.open .exam-detail-item:nth-child(4){animation-delay:.28s;} .exam-detail-item .lbl{font-size:10px;color:var(--ts);font-weight:700;} .exam-detail-item .val{font-size:19px;font-weight:800;color:var(--tx);font-variant-numeric:tabular-nums;} .exam-subj-wrap{text-align:left;margin-bottom:12px;} .exam-subj-wrap h3{font-size:11px;font-weight:700;color:var(--ts);margin-bottom:6px;} /* ── 今日の進み（day_progress.js・2026-10-01）：このセッションで今日の目標がどこまで動いたか ── バーは「前から済んでいたぶん（暗い）」と「今回のぶん（明るい）」の2段。達成した回は緑、 このセッションで目標を越えた回だけ見出しを強める（数字が変わるだけでなく状態が変わる）。 ⚠️ 常時アニメを置かない（結果画面の授与トレイ・セレモニーと競わせない）。 */ .exam-day .ed-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:8px;row-gap:4px;align-items:baseline; font-size:12px;color:var(--tx);font-variant-numeric:tabular-nums;margin-bottom:9px;} .exam-day .ed-l{font-weight:700;} .exam-day .ed-v{color:var(--ts);text-align:right;} .exam-day .ed-v b{color:var(--tx);font-size:13px;} .exam-day .ed-st{font-size:11px;font-weight:700;color:var(--ts);white-space:nowrap;} .exam-day .ed-st b{color:var(--or,#f97316);} .exam-day .ed-st.is-ok{color:var(--gr);} .exam-day .ed-st.is-hit{color:#fff;background:var(--gr);padding:1px 7px;border-radius:999px;} .exam-day .ed-bar{grid-column:1/-1;position:relative;display:block;height:7px;border-radius:4px;overflow:hidden; background:rgba(var(--glass-rgb),.10);} .exam-day .ed-bar i{position:absolute;top:0;bottom:0;left:0;display:block;} .exam-day .ed-pre{background:rgba(var(--glass-rgb),.32);} .exam-day .ed-now{background:linear-gradient(90deg,#38bdf8,#0ea5e9);} .exam-day .ed-row.is-ok .ed-pre{background:rgba(61,214,140,.45);} .exam-day .ed-row.is-ok .ed-now{background:linear-gradient(90deg,#3DD68C,#22c55e);} .exam-day .ed-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px; font-size:11.5px;color:var(--ts);font-weight:700;font-variant-numeric:tabular-nums;} .exam-day .ed-foot b{color:var(--tx);font-size:13px;} .exam-day .ed-gem b{color:#7dd3fc;} .exam-subj-table{width:100%;font-size:12px;border-collapse:collapse;color:var(--tx);font-variant-numeric:tabular-nums;} .exam-subj-table td{padding:3px 4px;border-bottom:1px solid rgba(255,255,255,.06);} .exam-flag-note{font-size:11px;color:var(--rd);font-weight:700;margin-bottom:10px;} .exam-close-btn{width:100%;padding:10px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.14);background:rgba(var(--glass-rgb),.08);color:var(--tx);font-size:14px;font-weight:700;cursor:pointer;} .exam-close-btn:hover{background:rgba(var(--glass-rgb),.12);} .exam-retry-btn{width:100%;padding:11px;border-radius:var(--r-md);border:none;background:linear-gradient(120deg,#FF6B6B,#FF5E8A);color:#fff;font-size:14px;font-weight:800;cursor:pointer;margin-bottom:8px;box-shadow:0 4px 14px rgba(255,107,107,.35);transition:transform .2s,box-shadow .2s;} .exam-retry-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,94,138,.5);} .exam-retry-btn:active{transform:scale(.98);} .exam-fresh-btn{background:none;border:none;color:var(--ts);font-size:12px;cursor:pointer;margin-top:8px;display:block;width:100%;padding:4px;} .exam-fresh-btn:hover{color:var(--tx);} /* ── Main content ── */ .ct{max-width:900px;margin:0 auto;padding:14px 12px 60px;} .subj-section[data-visible="false"]{display:none;} /* ⚠️ .subj-section に content-visibility:auto を付けてはいけない。 .qc（カード側）も content-visibility:auto を持つため入れ子になり、iOS WebKit の 既知バグ（入れ子の内側がスクロールで再描画されず永久に空白）を踏む。 2026-07-07 iPad Brave で「スクロールするとカードが全く出なくなる」実害を確認して撤去。 セクションは素のブロックのまま＝描画スキップはカード単位（.qc）だけで行う。 */ .subj-hdr{display:none;} .subj-hdr-icon{font-size:18px;} .subj-hdr-name{font-family:var(--font-display);letter-spacing:var(--font-display-ls);font-size:13px;font-weight:800;} .subj-hdr-count{margin-left:auto;font-size:11px;background:rgba(var(--glass-rgb),.15);padding:2px 8px;border-radius:var(--r-md);} .ch-divider{font-family:var(--font-display);letter-spacing:var(--font-display-ls);font-size:11px;font-weight:700;color:var(--ts);padding:6px 6px 4px;margin-top:4px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:6px;} .ch-div-prog{float:right;font-size:10px;font-weight:700;padding:1px 7px;border-radius:var(--r-md);background:rgba(var(--glass-rgb),.07);color:var(--ts);border:1px solid rgba(255,255,255,.1);transition:background .3s,border-color .3s,color .3s;font-variant-numeric:tabular-nums;} .ch-div-prog.all-done{background:rgba(61,214,140,.18);color:var(--gr);border-color:rgba(61,214,140,.4);} .jump-select{flex:1;min-width:0;background:rgba(var(--glass-rgb),.07);border:1.5px solid rgba(255,255,255,.14);border-radius:20px;padding:4px 10px 4px 12px;font-size:11px;color:rgba(255,255,255,.75);font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;} .jump-select option{background:var(--surf-4);color:#fff;} #reviewBanner{margin:6px 12px -2px;padding:7px 14px;background:rgba(255,107,107,.1);border:1.5px solid rgba(255,107,107,.28);border-radius:var(--r-md);font-size:12px;font-weight:700;color:var(--rd);display:none;align-items:center;justify-content:space-between;gap:8px;} #reviewBanner.show{display:flex;} .review-close-btn{background:none;border:1px solid rgba(255,107,107,.35);border-radius:var(--r-sm);color:var(--rd);font-size:11px;padding:2px 9px;cursor:pointer;font-family:inherit;white-space:nowrap;} .exam-review-btn{width:100%;padding:11px;border-radius:var(--r-md);border:none;background:linear-gradient(120deg,var(--blu),#7C6CF6);color:#fff;font-size:14px;font-weight:800;cursor:pointer;margin-bottom:8px;box-shadow:0 4px 14px rgba(96,165,250,.35);transition:transform .2s,box-shadow .2s;} .exam-review-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(124,108,246,.5);} .exam-review-btn:active{transform:scale(.98);} /* ══ Phase 7 段B(2026-08-21): S10 結果画面を「計器盤」にする（設計 §12-2 S10）══════ 結果画面は**読解が完全に終わった後**の画面で、§11-1 の5原則が1つも掛からない ——演出を強くしてよい唯一の広い面でありながら、Phase 4 は額縁を与えただけで 中身は数字が並んでいるだけで止まっていた。しかもここは**セッションの締めくくり＝ 最も記憶に残る場所**である。 ⚠️⚠️ 配色の裁定（2026-08-21・ユーザー判断）: **枠＝真鍮／数字＝意味色のまま**。 設計の原文は「タイルも数字も琥珀のニキシー管」だったが、4タイルは 緑=正解／赤=不正解／青=回答／紫=時間 で**意味を色分けしている**ので、琥珀で統一すると その情報が消える。Phase 4 の「筐体は真鍮固定／盤面はテーマ可変」と、ハブのゲージ （真鍮の歯車 ⇔ --or/--gr の弧）の分け方をそのまま当てはめ、 **物（枠・面の稜線・リベット・ボタン）は真鍮／読み値（数字）は意味色**とした。 これにより Phase 4 の D6（盤面に真鍮を入れない）を実質的に守れている。 ⚠️ .gm-*（授与トレイ・セレモニー・トースト）には1バイトも触れないこと。CSS は gamify.js が 自分で注入しており **ハブ（index.html）と共有**している。study.css から上書きすると ハブ側の見た目が黙って動く。授与トレイは既に #FFD166（琥珀）なので色は喧嘩しない。 ⚠️ 水平の「線」を作らないこと（§11-6-3'）。沈み込みは影の縮小だけで表し、 inset の稜線は使わない（金属の窪みは background のグラデで作る）。 ⚠️ .exam-modal は overflow-y:auto なので、モーダル本体の筐体は疑似要素ではなく background-image と box-shadow:inset で描く（§5 の既存の不変条件）。S10 が足すのは **タイルとボタンの中**なので、その規約はモーダル側にそのまま残る。 */ /* ── タイル＝計器の窓。縁だけ真鍮に替え、面の色（意味）はそのまま残す ── */ .exam-detail-item.di-ok,.exam-detail-item.di-ng, .exam-detail-item.di-n,.exam-detail-item.di-t{border-color:var(--exam-brass);} /* リベットは --exam-rivet-dot をそのまま借りる（.exam-modal が定義し継承で降りてくる）。 ⚠️ 新しいリベットの絵を作らないこと——額縁の鋲とタイルの鋲が別物になる。 3層目は「数字が沈むガラスの窪み」。inset の影を使わずグラデで作る（上の注意）。 */ .exam-detail-item::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background-image:var(--exam-rivet-dot),var(--exam-rivet-dot), radial-gradient(ellipse 72% 56% at 50% 78%,rgba(0,0,0,.40),transparent 72%); background-repeat:no-repeat; background-size:5px 5px,5px 5px,100% 100%; background-position:4px 4px,calc(100% - 4px) calc(100% - 4px),0 0;} /* ⚠️ ::before は position:absolute＝位置指定ボックスなので、素のテキストより上に描かれる。 ラベルと数字を position:relative にして窪みの上へ戻すこと（消えて見える）。 */ .exam-detail-item .lbl,.exam-detail-item .val{position:relative;} .exam-detail-item .val{text-shadow:0 1px 2px rgba(0,0,0,.6);transition:text-shadow .5s ease;} /* ── 管が「ともる」のは、数字が動き終わった瞬間に一度だけ ── ⚠️ 常時フリッカーは入れない（結果画面も「読む面」である）。点灯は結果が確定した合図。 ⚠️ 動いている数字は #sumPct（900ms のカウントアップ）だけなので、その完了を セッション全体の確定とみなして5本まとめてともす。フックは showExamSummary の1か所。 */ .exam-modal.tubes-lit .exam-detail-item .val{ text-shadow:0 0 10px currentColor,0 1px 2px rgba(0,0,0,.6);} .exam-pct{transition:text-shadow .5s ease;} .exam-modal.tubes-lit .exam-pct{ text-shadow:0 0 18px color-mix(in srgb,var(--ringc) 60%,transparent),0 1px 4px rgba(0,0,0,.7);} /* ── ボタン＝押すと沈む金属板。面の色（意味）は残し、縁と鋲だけ真鍮にする ── ⚠️⚠️ 沈み込みは translate プロパティで書くこと。:hover の transform:translateY(-1px) と :active の transform:scale(.98) が既にあり、transform で書くと後勝ちで潰し合う。 独立プロパティなら3つとも合成される（§11-5-4' と同じ罠）。 */ .exam-review-btn,.exam-retry-btn{border:1px solid var(--exam-brass); transition:transform .2s,box-shadow .2s,translate .1s ease;} .exam-review-btn{background-image:var(--exam-rivet-dot),var(--exam-rivet-dot),linear-gradient(120deg,var(--blu),#7C6CF6);} .exam-retry-btn {background-image:var(--exam-rivet-dot),var(--exam-rivet-dot),linear-gradient(120deg,#FF6B6B,#FF5E8A);} .exam-review-btn,.exam-retry-btn{background-repeat:no-repeat;background-size:5px 5px,5px 5px,100% 100%; background-position:6px 50%,calc(100% - 6px) 50%,0 0;} .exam-close-btn{border-color:var(--exam-brass); background-image:var(--exam-rivet-dot),var(--exam-rivet-dot); background-repeat:no-repeat;background-size:5px 5px,5px 5px; background-position:6px 50%,calc(100% - 6px) 50%; transition:background .15s,translate .1s ease;} .exam-fresh-btn{transition:color .15s,translate .1s ease;} .exam-review-btn:active,.exam-retry-btn:active, .exam-close-btn:active,.exam-fresh-btn:active{translate:0 2px;} .exam-review-btn:active,.exam-retry-btn:active{box-shadow:0 1px 5px -2px rgba(0,0,0,.5);} #studySoundOv, #studyThemeOv{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:var(--z-ov);align-items:center;justify-content:center;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);} #studySoundOv.open, #studyThemeOv.open{display:flex;} .ssov-box{background:var(--surf-1);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:16px 18px;max-width:420px;width:92%;max-height:92vh;max-height:92dvh;overflow-y:auto;} .ssov-title{font-size:15px;font-weight:800;margin-bottom:6px;color:var(--tx);} .ssov-lbl{font-size:11px;font-weight:700;color:var(--ts);margin:10px 0 5px;} .ssov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;} .ssov-btn{padding:6px 3px;line-height:1.25;border-radius:var(--r-sm);border:1.5px solid rgba(255,255,255,.14);background:rgba(var(--glass-rgb),.06);font-size:11px;font-weight:700;cursor:pointer;color:var(--tx);transition:background .15s,border-color .15s,color .15s;font-family:inherit;} #ssovBootGrid .ssov-btn{grid-column:1/-1;} .ssov-btn:hover,.ssov-btn.sel{background:rgba(61,214,140,.14);border-color:rgba(61,214,140,.42);color:var(--gr);} mark.sh{background:rgba(255,215,0,.28);color:inherit;border-radius:2px;padding:0 1px;-webkit-box-decoration-break:clone;box-decoration-break:clone;} .st-streak{font-size:11px;font-weight:800;color:var(--or);} /* 誤答レビュー: ユーザーが選択した選択肢マーカー */ .ch2.exam-review-chosen:not(.ok){background:rgba(255,107,107,.12)!important;border-radius:4px;padding:2px 5px;margin:-2px -5px;} .ch2.exam-review-chosen:not(.ok)::after{content:' ← あなたの選択';font-size:10px;color:var(--rd);font-weight:700;opacity:.85;} /* ── Glass question cards ── */ .qc{background:rgba(var(--glass-rgb),.06);border-radius:var(--r-md);box-shadow:0 4px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);margin-bottom:12px;border:1px solid rgba(255,255,255,.1);overflow:hidden;transition:box-shadow .2s;contain:layout style;content-visibility:auto;contain-intrinsic-block-size:300px;contain-intrinsic-block-size:auto 300px;} /* ⚠️ 白wash（画面下が白くなりスクロールで一緒に動く）真因の確定整理（iPad Brave・2026-07-08）: ① backdrop-filter:blur() が .qc/.st-hdr/.sgh に載ると iOS WebKit の合成が破綻し白タイル化 → base から完全撤去して恒久対策（上の各ルール）。 ② content-visibility:auto は iOS でカードを白く描画する実バグがある（★=少数でも再発を実機確認）。 一方 visible は正しく描画されるが、全問=約5000枚を一度に描くとページが高すぎて iOS の タイル上限を超え下部が白化する。→ **visible を採用して描画を正しくし（下の @supports）**、 全問の枚数過多は別途ページング/仮想化で抑える方針（描画枚数の上限化）。 ③ contain: layout style が残っていると、遅延ロード画像でカード高さが伸びた際、 iOS WebKit が GPU 合成レイヤーおよび疑似要素（::before/::after）の包含ブロック再計算をスキップし、 画像ロード前の初期高さ（約155px）で装飾や背景が切り取られて画像に被る重大バグが発生する。 → contain: none !important と backdrop-filter 解除で完全に解消する。 */ /* iOS 限定でカードの描画スキップ(content-visibility:auto)と contain、backdrop-filter を無効化。 @supports(-webkit-touch-callout) は iOS WebKit のみ真＝UA/JS非依存で確実に効く。 さらに study.html 冒頭で付与される html.ios-no-cv でも二重に保証する。 */ @supports (-webkit-touch-callout: none) { .qc{ content-visibility:visible!important; contain-intrinsic-block-size:none!important; contain:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } html[class*="ui-"] .qc{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } } html.ios-no-cv .qc{ content-visibility:visible!important; contain-intrinsic-block-size:none!important; contain:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } html.ios-no-cv html[class*="ui-"] .qc{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* 章ジャンプ中は content-visibility:auto の画面外カード高さが推定値に変わって目標がずれ、 章まで飛ばず先頭付近で止まる。ジャンプ中だけ全カードのスキップを止めて高さを確定させ、 着地後に元へ戻す（study.html _jumpScrollToEl が付与/除去。iOSは元々 visible なので影響なし）。 ⚠️⚠️ ここで contain-intrinsic-block-size を none にしないこと（2026-09-11 に外した）。 基本ルールの `auto 300px` の auto は「最後に描いた実寸を覚えておき、描画をスキップしている間も その高さを使う」指定で、覚えるのは「描かれている間」だけ。ジャンプ中に none で打ち消すと 全カードを描いているのに1枚も実寸が記録されず、mec-jumping を外した瞬間に画面外のカードが 一斉に 300px へ戻る（中毒・職業病でページが 107,789px → 29,355px に縮んだ）。上のカードが 縮めば目標も上へずれ、ジャンプが数千px手前で止まる——章・番号ジャンプが効かない科目の正体。 */ html.mec-jumping .qc{content-visibility:visible!important;} /* ジャンプ到達カードの一瞬のハイライト */ @keyframes mecJumpFlash{0%{box-shadow:0 0 0 3px var(--yl),0 0 22px rgba(255,184,48,.5);}100%{box-shadow:0 4px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);}} .qc.mec-jump-flash{animation:mecJumpFlash 1.2s ease forwards;} .qc:hover{box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);} .qh{display:flex;align-items:center;gap:5px;padding:4px 12px 3px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.07);} .qn{font-family:var(--font-display);letter-spacing:var(--font-display-ls);font-size:11px;font-weight:800;color:var(--qn-col);min-width:24px;} .qe{font-size:10px;color:var(--ts);} /* Badge tags */ .bg{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:1px 5px;border-radius:3px;} .bs{background:rgba(255,184,48,.15);color:var(--yl);border:1px solid rgba(255,184,48,.35);} .bc{background:rgba(96,165,250,.15);color:var(--blu);border:1px solid rgba(96,165,250,.35);} .bh{background:rgba(255,107,107,.15);color:#FF8A8A;border:1px solid rgba(255,107,107,.35);} .bi{background:rgba(167,139,250,.15);color:#C4B5FD;border:1px solid rgba(167,139,250,.35);} .bk{background:rgba(61,214,140,.15);color:#52E09E;border:1px solid rgba(61,214,140,.35);} .bm{background:rgba(255,154,60,.15);color:var(--or);border:1px solid rgba(255,154,60,.35);} .br{background:rgba(125,211,252,.12);color:#7DD3FC;border:1px solid rgba(125,211,252,.3);} .bx{background:rgba(196,181,253,.12);color:#C4B5FD;border:1px solid rgba(196,181,253,.3);} .bsub{background:rgba(148,163,184,.15);color:#94A3B8;border:1px solid rgba(148,163,184,.35);} /* 一般(bip)/臨床(brn)＝国試の出題区分。全問がどちらか一方を必ず持つので、 ★・📷・必修・CBT と同じ強さで塗ると毎カードがバッジで埋まって稀なバッジの意味が薄まる。 常にある属性＝メタ情報なので .bsub と同じ灰系で沈める。⚠️ 色を上げないこと。 ⚠️ クラス名に bg は使えない（全バッジ共通の土台）／br も連問バッジが使用中。 */ .bip,.brn{background:rgba(148,163,184,.12);color:#94A3B8;border:1px solid rgba(148,163,184,.28);} /* bb＝模試の問題番号（「A問題 17」）。表示番号 Q.n は科目内の通し番号なので、 マークシートと突き合わせるための紙面の番号をここで別に出す（引き継ぎ §6-0）。 ⚠️ クラス名は bg（土台）・br（連問）・bs/bc/bh/bi/bk/bm/bx/bsub/bip/brn と衝突しないこと。 ⚠️ 一般/臨床(bip/brn)と違って**これは識別子**なので灰系には沈めない。桃色は ★(琥珀)・CBT(青)・必修(赤)・画像(菫)・計算(緑)・N択(橙)のどれとも被らない。 */ .bb{background:rgba(244,114,182,.14);color:#F9A8D4;border:1px solid rgba(244,114,182,.35);} /* Accuracy rate badges */ .cr{margin-left:auto;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;flex-shrink:0;} .ch{background:rgba(61,214,140,.12);color:var(--gr);border:1px solid rgba(61,214,140,.3);} .cm{background:rgba(255,184,48,.12);color:var(--yl);border:1px solid rgba(255,184,48,.3);} .cl{background:rgba(255,107,107,.12);color:var(--rd);border:1px solid rgba(255,107,107,.3);} /* Card body */ .qb{padding:11px 15px 14px;} .qt{font-size:13.5px;line-height:1.75;margin-bottom:9px;} .qt strong{color:#FFB870;} /* Choices */ .cs{background:rgba(var(--glass-rgb),.04);border-radius:var(--r-sm);padding:9px 13px;margin-bottom:11px;border:1px solid rgba(255,255,255,.06);} .ch2{font-size:13px;padding:2px 0;line-height:1.6;} .ch2.ok{color:var(--gr);font-weight:700;} /* Answer box */ .ab{background:rgba(61,214,140,.08);border:1.5px solid rgba(61,214,140,.25);border-radius:var(--r-sm);padding:9px 13px;margin-bottom:11px;display:flex;align-items:flex-start;gap:7px;animation:abShutterIn .28s cubic-bezier(.2,.8,.3,1);} @keyframes abShutterIn{0%{opacity:0;translate:0 -6px;scale:.98;}100%{opacity:1;translate:0 0;scale:1;}} .ai{font-size:15px;flex-shrink:0;margin-top:1px;} /* ⚠️ white-space:pre-line を外さないこと。正解が2肢以上ある問題の ans_label は 「ａ　NSAID\nｅ　ACE阻害薬」と改行で肢を区切る科目が7つ（401問。過去問HTMLにも218問） あり、指定が無いと改行が空白に潰れて肢が1行につながって読めない （2026-09-09 エラー報告 jinzo_d_ch03_q106）。 ⚠️ 実データの改行739個のうち738個は肢の頭の直前にあり、残る1個（peds_ch03_q127 の 「男児：50％／女児：50％」）も改行されるのが正しい＝pre-line で困る箇所は無い。 ⚠️ 過去問ビューア（国家試験過去問/*.html）は同じ規則をインラインで30枚持っている。 片方だけ直すと同じ問題が経路によって違う見え方になるので、必ず両方を揃えること。 */ .ac{font-size:13.5px;font-weight:700;color:var(--gr);line-height:1.5;white-space:pre-line;} .as{font-size:12px;font-weight:400;color:rgba(61,214,140,.72);margin-top:2px;} /* Explanation blocks */ .eg{display:grid;gap:9px;margin-top:9px;animation:egShutterIn .32s ease-out;} @keyframes egShutterIn{0%{opacity:0;translate:0 -4px;}100%{opacity:1;translate:0 0;}} .eb{border-radius:var(--r-sm);padding:9px 12px;font-size:13px;line-height:1.7;} .eb h4{font-size:11px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:4px;text-transform:uppercase;letter-spacing:.05em;} .ep{background:rgba(var(--eb-ep),.08);border-left:3px solid rgba(var(--eb-ep),.5);}.ep h4{color:var(--eb-ep-h);} .ee{background:rgba(var(--eb-ee),.07);border-left:3px solid rgba(var(--eb-ee),.45);}.ee h4{color:var(--eb-ee-h);} .ept{position:relative;overflow:hidden;background:rgba(var(--eb-ept),.08);border:1.5px solid rgba(var(--eb-ept),.25);border-radius:var(--r-sm);}.ept h4{color:var(--eb-ept-h);font-size:11px;} .ept::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,215,0,.22),transparent);translate:-100% 0;animation:eptSweepShine .9s ease .2s forwards;pointer-events:none;} @keyframes eptSweepShine{0%{translate:-100% 0;}100%{translate:100% 0;}} .em{background:rgba(var(--eb-em),.08);border-left:3px solid rgba(var(--eb-em),.45);}.em h4{color:var(--eb-em-h);} .ec{background:rgba(var(--eb-ec),.07);border-left:3px solid rgba(var(--eb-ec),.45);font-size:13px;}.ec h4{color:var(--eb-ec-h);} .ei{background:rgba(var(--eb-ei),.08);border-left:3px solid rgba(var(--eb-ei),.45);}.ei h4{color:var(--eb-ei-h);} /* Keyword highlights */ .kw{color:#FFB870;font-weight:700;} .kw2{color:var(--blu);font-weight:700;} .kw3{color:var(--gr);font-weight:700;} .kw4{color:var(--rd);font-weight:700;} /* Tables */ .tb{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:5px;} .tb th{background:rgba(var(--tbl-th),.9);color:#fff;padding:5px 9px;text-align:left;font-weight:700;} .tb td{padding:4px 9px;border-bottom:1px solid rgba(255,255,255,.06);} .tb tr:last-child td{border-bottom:none;} .tb tr:nth-child(even) td{background:rgba(var(--glass-rgb),.03);} /* Series group */ .sg{margin-bottom:6px;} .sgh{background:linear-gradient(90deg,rgba(30,63,114,.95),rgba(42,84,148,.95));color:#fff;border-radius:8px 8px 0 0;padding:7px 16px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;} .sg>.qc{border-radius:0;margin-bottom:0;border-top:1px solid rgba(255,255,255,.06);} .sg>.qc:last-child{border-radius:0 0 12px 12px;margin-bottom:12px;} /* Images */ .qimg-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px;} /* ⚠️ width/height:auto は必須。card_renderer.js が実寸を width/height 属性で出すため、 auto を外すと max-width:48% で横だけ縮んで縦が属性値のまま残り、画像が潰れる。 auto にしておくと属性は「縦横比の先出し」だけに効き、デコード前から正しい高さの箱が 確保される（＝画像の遅延読込によるスクロールずれが消える）。 */ /* 解説の図（画像診断）。設問の図（.qimg-row）とは別の行に置く——「🖼️画像だけ」 フィルタは `.qimg-row .qimg` を数えるので、ここを .qimg-row にすると解説に図がある だけで画像問題に化ける。⚠️ class から `qimg` は外さないこと（ライトボックスの名前）。 ⚠️ 1枚のときだけ横幅いっぱい。2枚並ぶ紙面（D20 の正面像＋断層像）は .qimg の 48% で 自然に並ぶ。注記の文字ごと写した図なので高さの上限は設問の図より高くとる。 */ .exfig-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px;} .exfig-row .qimg.exfig{max-height:360px;background:#fff;} .exfig-row .qimg.exfig:only-child{max-width:100%;} .qimg{width:auto;height:auto;max-height:220px;max-width:48%;object-fit:contain;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.12);cursor:zoom-in;transition:max-height .2s,max-width .2s;} /* Image lightbox (真鍮シャウカステン・読影灯演出) */ #mecImgLb{display:none;position:fixed;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(14,20,32,.97) 0%,rgba(4,7,11,.98) 100%);z-index:var(--z-lightbox);align-items:center;justify-content:center;cursor:zoom-out;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);} #mecImgLb.open{display:flex;} #mecImgLb.open img{animation:filmDropIn .32s cubic-bezier(.16,1,.3,1);max-width:95vw;max-height:90vh;object-fit:contain;border-radius:4px;border:2px solid rgba(220,240,255,.35);box-shadow:0 0 45px rgba(160,210,255,.22),0 16px 60px rgba(0,0,0,.85);} @keyframes filmDropIn{0%{translate:0 -20px;scale:.96;opacity:0;filter:brightness(.6);}50%{filter:brightness(1.4);}100%{translate:0 0;scale:1;opacity:1;filter:brightness(1);}} @media (prefers-reduced-motion: reduce){ .ab,.eg,.ept::after,#mecImgLb.open img{animation:none;} } /* ── Controls ── */ .mec-controls{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0;} /* 自己採点（× / △ / ○）。旧「済」1つを3分割したもの。 ⚠️ progress.js の _injectSeriesCSS が .mec-lap-btn の旧・章ページ用パレット（白地）を 実行時に