/* 問題集モードと勉強ログモードの切り替え（assets/mode-switch.js）と、v3（2026-09-30）の
   共通ナビ（左上の切り替えボタン「.switcher」・下の大きなメニュー「.appnav」・切り替えシート「.sw-*」）。
   色・角丸の値は DESIGN.md 現行のものをそのまま数値で書く（quiz 側の data-quiz-theme スコープ変数にも
   log 側の変数にも依存させず、どちらの画面に挿入しても同じ見た目にするため）。
   デザイン出典: デザイン依頼_Cowork_20260929/納品/_assets/base.css（v3）。 */
.switcher{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:48px;max-width:100%;padding:4px 10px 4px 4px;border:0;border-radius:999px;background:none;color:#292622;cursor:pointer;text-align:left;font:inherit}
.switcher:hover{background:#f3edff}
/* 名前は詰めない（base.css と同じ）。漢字は白紙のまま normal だと文字の間でも折り返せてしまうので、
   既定は nowrap（箱からわずかにはみ出しても1行を保つ）。狭い実効幅で見切れる場面（.phead）だけ、
   下の個別ルールで折り返しを許す。 */
.switcher__name{min-width:0;flex-shrink:1;font-weight:800;font-size:19px;line-height:1.3;white-space:nowrap}
.switcher--log .switcher__name{font-size:20px;text-decoration:underline;text-decoration-color:#9166ea;text-decoration-thickness:3px;text-underline-offset:6px}
.switcher__down{width:22px;height:22px;color:#6535b5;flex:none}
.switcher .dot{position:absolute;top:4px;left:30px;width:12px;height:12px;border-radius:50%;background:#b94720;box-shadow:0 0 0 2px #fff}
/* 案内（帯 A・カード B）を出した起動では赤い点を隠す（1回の起動で案内は1つまで）。解いている途中も何も出さない。 */
html[data-dpg-guide] .switcher .dot,body:has(.qz-app[data-screen=quiz]) .switcher .dot,body:has(.qz-app[data-screen=setup]) .switcher .dot{display:none}
.face{display:inline-block;width:36px;height:36px;border-radius:50%;flex:none;background:#f3edff center/cover no-repeat;box-shadow:inset 0 0 0 1.5px #e5cdb8}
.face--quiz{background-image:url("character/dopagaki.webp")}
.face--log{background-color:#fff;background-image:url("log/fluffy-smile.webp")}

/* スマホの上の細い見出し（左上に切り替えボタンだけを置く）。PC（≥1024px）では appnav 側に同じボタンを出すので隠す。 */
.phead{position:sticky;top:0;z-index:20;background:var(--page,#fffcf7);border-bottom:1px solid #eee5da}
.phead--quiz{border-bottom:0}
.phead--quiz::after{content:"";display:block;height:3px;background:linear-gradient(100deg,#f47a91,#f9c65d,#94cf89,#70c5e5,#a092e5,#e495ce)}
.phead__in{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 16px}
/* スマホの実効幅（特に200%拡大時）では、詰めるより折り返して見出し全体を画面内に収める。 */
.phead .switcher__name{white-space:normal;overflow-wrap:anywhere}
/* 200% に拡大したとき（実効幅が 190px 前後）は、顔・余白・⌄を詰めて、名前に1行あたり3字以上の幅を残す。
   拡大（zoom）は @media の幅には効かないので、名前が実際に置かれる箱の幅（container query）で判定する。 */
.phead__in{container-type:inline-size}
@container (max-width:200px){
  .phead .switcher{gap:4px;padding:0 2px 0 0}
  .phead .switcher .face{width:28px;height:28px}
  .phead .switcher__name{font-size:16px}
  .phead .switcher__down{width:16px;height:16px}
  /* 2026-10-18 区間13 FIX: 赤い点（知らせ）は顔の絵の右上の内側へ。left:30px のままだと、顔が 28px に縮んだ分「ドパガキ問題集」の「ド」に重なっていた（200% の 187px） */
  .phead .switcher .dot{top:calc(50% - 14px);left:16px}
}
@media(min-width:1024px){.phead{position:static}}
@media(min-width:1024px){.phead--quiz{display:none}}

/* 下の大きなメニュー（スマホ）／左の縦メニュー（PC）。真ん中がそのモードの主役。 */
/* メニューと見出しの寸法・書体は、どのページでも同じにする。ページごとの CSS（box-sizing の有無・body の書体・
   button:hover など）を受け継ぐと、ページを移るたびにメニューの幅が 232↔261px、書体も変わり、画面が揺れていた（本人指摘）。 */
.appnav,.appnav *,.phead,.phead *{box-sizing:border-box}
/* スクロールバーの分の幅を最初から空けておく（読み込み後にバーが出ても中身が横に動かない）。 */
html{scrollbar-gutter:stable}
.appnav,.phead{font-family:"Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.5}
.appnav__item,.switcher{margin:0}
.appnav__item:hover{background:none}
.appnav__item[aria-current=page]:hover{background:#f3edff}
.appnav{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:6px 4px 10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid #eee5da;border-radius:22px 22px 0 0;box-shadow:0 -4px 18px rgb(124 75 30 / 8%)}
.appnav--log{background:#fffcf7}
.appnav__switch{display:none}
.appnav__item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;padding:4px 0;border:0;background:none;border-radius:16px;color:#65594d;font:inherit;font-size:14px;font-weight:800;line-height:1.3;text-decoration:none;white-space:nowrap;cursor:pointer}
.appnav__item svg{width:26px;height:26px}
.appnav__item[aria-current=page]{color:#6535b5;background:#f3edff}
.appnav__item .dot{position:absolute;top:6px;right:calc(50% - 22px);width:12px;height:12px;border-radius:50%;background:#b94720;box-shadow:0 0 0 2px #fff}
.appnav__item--main{background:none !important}
.appnav__disc{display:grid;place-items:center;width:58px;height:58px;margin-top:-26px;border-radius:50%;background:linear-gradient(165deg,#9742f5 0%,#6424ed 48%,#441cf0 100%);color:#fff;box-shadow:0 3px 0 #4215a8,0 8px 18px rgb(101 53 181 / 30%);border:3px solid #fff}
.appnav__disc svg{width:28px;height:28px}
.appnav__item--main[aria-current=page]{color:#6535b5}
.appnav__item--main:not([aria-current=page]) .appnav__disc{background:#fff;color:#6535b5;box-shadow:inset 0 0 0 2.5px #6535b5,0 6px 14px rgb(101 53 181 / 18%)}
.appnav__item--main .lbl-pc{display:none}
@media(min-width:1024px){
  body:has(.appnav){padding-left:232px}
  .appnav{top:0;bottom:auto;right:auto;width:232px;height:100vh;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:18px 14px;border-top:0;border-right:1px solid #eee5da;border-radius:0;box-shadow:none}
  .appnav__switch{display:block;order:-2;margin:0 0 12px}
  /* 左のメニューの幅（204px）に、顔＋名前＋⌄が1行で収まるよう、ここだけ少し詰める。 */
  .appnav__switch .switcher,.tabbar__switch .switcher{width:100%;gap:6px;padding:4px 6px 4px 4px}
  .appnav__switch .switcher__name,.tabbar__switch .switcher__name{font-size:17px;overflow-wrap:normal}
  .appnav__switch .switcher--log .switcher__name,.tabbar__switch .switcher--log .switcher__name{font-size:18px}
  .appnav__switch .switcher__down,.tabbar__switch .switcher__down{width:20px;height:20px}
  .appnav__item{flex-direction:row;justify-content:flex-start;gap:12px;min-height:52px;padding:0 14px;font-size:16px}
  .appnav__item .dot{position:static;margin-left:auto}
  .appnav__item--main{order:-1}
  .appnav__disc{width:32px;height:32px;margin:0;border:0;box-shadow:none !important}
  .appnav__disc svg{width:20px;height:20px}
  /* 問題集側の「問題集」の行は、ほかの行と同じ並び（アイコン 26px・背景なし）。丸に入れると 6px ずれていた（本人指摘）。 */
  .appnav--quiz .appnav__item--main .appnav__disc,.appnav--quiz .appnav__item--main:not([aria-current=page]) .appnav__disc{width:26px;height:26px;border-radius:0;background:none;color:inherit;box-shadow:none !important}
  .appnav--quiz .appnav__item--main .appnav__disc svg{width:26px;height:26px}
  .appnav--quiz .appnav__item--main[aria-current=page]{background:#f3edff !important}
  .appnav--log .appnav__item--main{order:10;margin-top:10px;justify-content:center;gap:8px;min-height:52px;border-radius:16px;background:linear-gradient(165deg,#9742f5 0%,#6424ed 48%,#441cf0 100%) !important;color:#fff !important;box-shadow:0 3px 0 #4215a8,0 6px 12px #6d33d322}
  .appnav--log .appnav__item--main .appnav__disc{background:none;color:#fff;box-shadow:none !important}
  .appnav--log .appnav__item--main:not([aria-current=page]) .appnav__disc{background:none;color:#fff;box-shadow:none}
  .appnav--log .appnav__item--main .lbl-sp{display:none}
  .appnav--log .appnav__item--main .lbl-pc{display:inline}
}
@media(min-width:1400px){body:has(.appnav){padding-left:256px}.appnav{width:256px}}
/* スマホ: 下のメニューの分だけ本文の下を空ける（勉強計画・体験記・マイページで最後の行がメニューに隠れていた）。
   一般のお知らせ（DpgSite.notice）も、メニューの上に出して押す邪魔をしない。 */
@media(max-width:1023.98px){
  body:has(.appnav){padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  body:has(.appnav) .dpg-site-status{bottom:calc(100px + env(safe-area-inset-bottom,0px))}
}
/* 切り替えた直後の知らせ（site-shell.js の switchedToast）。勉強ログの .toast と同じ形で、画面の上に2秒だけ出す。 */
.sw-toast{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:10001;width:min(560px,calc(100% - 32px));display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:16px;background:#fff;border:1px solid #eee5da;box-shadow:0 8px 24px rgb(41 38 34 / 14%);font-family:"Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;font-size:15px;font-weight:800;line-height:1.4;color:#292622;box-sizing:border-box}
.sw-toast[hidden]{display:none}
.sw-toast__check{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:#6535b5;color:#fff}
.sw-toast__check svg{width:16px;height:16px}
.sw-toast__text{flex:1}
.sw-toast .face{width:40px;height:40px}

/* 切り替えのシート（アカウントを切り替える見た目）。 */
.sw-layer{position:fixed;inset:0;z-index:10002;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;background:rgb(41 38 34 / 45%);font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;color:#292622;line-height:1.7}
.sw-layer[hidden]{display:none}
.sw-sheet{box-sizing:border-box;width:100%;max-width:560px;background:#fffcf7;border-radius:28px 28px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px));display:grid;gap:12px}
.sw-sheet *{box-sizing:border-box}
.sw-grip{width:48px;height:5px;border-radius:5px;background:#d8cfc4;justify-self:center}
.sw-sheet h2{margin:4px 0 0;font-size:20px;line-height:1.4;text-align:center;font-weight:800}
.sw-opt{display:grid;grid-template-columns:52px minmax(0,1fr) 30px;gap:12px;align-items:center;width:100%;min-height:80px;padding:12px 14px;border:1.5px solid #eee5da;border-radius:22px;background:#fff;text-align:left;cursor:pointer;color:#292622;font:inherit}
.sw-opt__face{width:52px;height:52px}
.sw-opt b{display:block;font-size:19px;line-height:1.35}
.sw-opt__body span{display:block;font-size:14px;color:#65594d;line-height:1.5}
.sw-opt__check{width:30px;height:30px;padding:5px;border-radius:50%;background:#6535b5;color:#fff;visibility:hidden}
.sw-opt[aria-current=true]{border-color:#9166ea;background:#f3edff}
.sw-opt[aria-current=true] .sw-opt__check{visibility:visible}
.sw-hint{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;margin:0;padding:8px 10px;border-radius:16px;background:#fff3e6;font-size:14px;line-height:1.6;color:#292622}
.sw-hint .face{width:30px;height:30px}
.sw-close{justify-self:center;min-height:44px;padding:0 12px;border:0;background:none;color:#6535b5;text-decoration:underline;text-underline-offset:4px;font:inherit;font-size:15px;cursor:pointer}
.switcher:focus-visible,.appnav__item:focus-visible,.sw-opt:focus-visible,.sw-close:focus-visible{outline:3px solid #6535b5;outline-offset:3px}
@media (min-width:700px){.sw-layer{justify-content:center}.sw-sheet{border-radius:28px;padding-bottom:22px}}

/* C 切り替えの案内: 勉強ログの初回だけの帯（画面を暗くしない・1回だけ）。 */
.guide-band{position:relative;z-index:21;background:#f3edff;border-bottom:1.5px solid #9166ea}
.guide-band::before{content:"";position:absolute;top:-9px;left:52px;width:16px;height:16px;background:#f3edff;border-left:1.5px solid #9166ea;border-top:1.5px solid #9166ea;transform:rotate(45deg)}
.guide-band__in{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center;padding:8px 16px}
.guide-band img{width:44px}
.guide-band p{margin:0;font-size:15px;line-height:1.6}
.guide-band p>*{display:block}
.guide-band b{color:#6535b5}
.guide-band .gb-sp{display:block}
.guide-band .gb-pc{display:none}
.guide-band__x{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#65594d;cursor:pointer}
.guide-band__x svg{width:20px;height:20px}
@media(min-width:1024px){.guide-band .gb-sp{display:none}.guide-band .gb-pc{display:block}.guide-band::before{display:none}}

/* C 切り替えの案内: 問題集の初回の結果画面だけの説明カード（「勉強ログに残す」を差し替える）。 */
.qz-studylog-card{position:relative;margin-top:10px;display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 12px;align-items:center;padding:16px;border-radius:16px;background:#f3edff;border:1.5px solid #9166ea}
.qz-studylog-card__tag{position:absolute;top:-12px;left:16px;padding:0 10px;border-radius:999px;background:#292622;color:#fff;font-size:14px;font-weight:700;line-height:1.7}
.qz-studylog-card__img{width:56px;height:56px;grid-row:span 2;border-radius:50%;object-fit:cover}
.qz-studylog-card h3{margin:0;font-size:16px;line-height:1.4}
.qz-studylog-card p{margin:0;font-size:14px;color:#65594d;line-height:1.6}
.qz-studylog-card .qz-btn{grid-column:1/-1;margin-top:8px}
.qz-studylog-card__later{grid-column:1/-1;justify-self:center;min-height:44px;padding:0 12px;border:0;background:none;color:#65594d;font-weight:700;font:inherit;font-size:14px;cursor:pointer}

/* ページをまたぐ切り替え（下のメニューの5画面・問題集 ⇄ 勉強ログ）は、アニメーションを付けない（2026-10-02）。
   ここにあったページをまたぐ View Transition の指定は、iPhone で「真っ白 → 古い画面がもう一度出る → 0.3秒のクロスフェード」になり、
   WebKit の白いコマの不具合（Bug 300877）にも当たるので外した。下のメニューは各ページに同じ位置で描いてあるので、動かさなくても止まって見える。
   tools/qa-tab-switch.mjs が、この規則が戻っていないかを見る。 */

/* v4.css の .appframe（後に読む）より強くするため html を前に付ける。
   画面の枠線（v4 2026-10-02。Cowork の納品 v4 の G_枠線と動き/動き.md の数字）: アプリ（html.is-native、native-shell.js が付ける）と
   ホーム画面の PWA（display-mode: standalone）だけに出す。ブラウザのタブでは出さない。要素は mode-switch.js が body の最後に置く
   .appframe（勉強ログ＝.appframe--log、問題集＝.appframe--quiz）。押す操作は邪魔しない（pointer-events:none）。
   勉強ログ: 紫の線 2.5px と内側の紫の光（14px・35%）が 3.2秒でゆっくり強く・弱く（光の層の opacity）。
   問題集: 虹の線 2.5px と内側の虹の光（線を 8px ぼかして 45%）が 9秒で一周（虹の層を回転）。
   撮る画面（body.is-shooting）では消す（カメラは .cam-frame）。動きを減らす設定では止める（線だけ残る）。 */
html .appframe{display:none;position:fixed;inset:0;z-index:100000;pointer-events:none;border-radius:var(--frame-r,44px)}
html.is-native .appframe{display:block}
@media (display-mode:standalone){html .appframe{display:block}}
body.is-shooting .appframe{display:none!important}
html .appframe--log{box-shadow:inset 0 0 0 2.5px #9166ea}
html .appframe--log::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 14px 3px rgb(145 102 234 / 35%);opacity:.7;animation:dpg-frame-breathe 3.2s ease-in-out infinite}
html .appframe .af-ring{position:absolute;inset:0;border-radius:inherit;padding:2.5px;overflow:hidden;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html .appframe .af-glow{position:absolute;inset:0;border-radius:inherit;filter:blur(8px);opacity:.45}
html .appframe .af-glow .af-ring{padding:7px}
html .appframe .af-ring::before{content:"";position:absolute;left:50%;top:50%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;background:conic-gradient(#f47a91,#f9c65d,#94cf89,#70c5e5,#a092e5,#e495ce,#f47a91);animation:dpg-frame-spin 9s linear infinite}
@keyframes dpg-frame-breathe{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes dpg-frame-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html .appframe::after,html .appframe .af-ring::before{animation:none!important}}

/* 外枠の色（2026-10-02 本人決定「色は外枠の枠の色も変更できるように」）。mode-switch.js（DpgFrameColor）が、枠の要素を置く前に html へ data-frame を付ける。
   おまかせ（auto・既定）＝属性なし＝上の今までの見た目（問題集は虹色、勉強ログは log-accent.css の色）。rainbow＝どちらのページも虹色。色の名前＝どちらのページもその色。
   色の値は log-accent.css の --frame と同じ（むらさきは勉強ログの既定の枠 #9166ea、きいろは暗い芥子色）。変えたら tools/qa-frame-color.mjs が見る。
   :root[…] を前に付けるのは、log-accent.css（html[data-accent] .appframe--log。このファイルより後に読む）より強くするため。
   虹色の層（.af-ring・.af-glow）は mode-switch.js が両方のページに置く。勉強ログでは、虹色を選んだときだけ見せる。
   撮る画面のまわりの線（.cam-frame。録っていない間）も、選んだ色・虹色に合わせる（録っている間は赤で埋まる）。 */
:root{--fc-purple:#9166ea;--fc-purple-rgb:145 102 234;--fc-pink:#e0508d;--fc-pink-rgb:224 80 141;--fc-blue:#3d83e6;--fc-blue-rgb:61 131 230;--fc-green:#2b9455;--fc-green-rgb:43 148 85;--fc-yellow:#aa7c00;--fc-yellow-rgb:170 124 0;--fc-orange:#d9650a;--fc-orange-rgb:217 101 10}
:root[data-frame=purple]{--af-c:var(--fc-purple);--af-rgb:var(--fc-purple-rgb)}
:root[data-frame=pink]{--af-c:var(--fc-pink);--af-rgb:var(--fc-pink-rgb)}
:root[data-frame=blue]{--af-c:var(--fc-blue);--af-rgb:var(--fc-blue-rgb)}
:root[data-frame=green]{--af-c:var(--fc-green);--af-rgb:var(--fc-green-rgb)}
:root[data-frame=yellow]{--af-c:var(--fc-yellow);--af-rgb:var(--fc-yellow-rgb)}
:root[data-frame=orange]{--af-c:var(--fc-orange);--af-rgb:var(--fc-orange-rgb)}
html .appframe--log .af-ring,html .appframe--log .af-glow{display:none}
:root[data-frame]:not([data-frame=rainbow]) .appframe{box-shadow:inset 0 0 0 2.5px var(--af-c)}
:root[data-frame]:not([data-frame=rainbow]) .appframe::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 14px 3px rgb(var(--af-rgb) / 35%);opacity:.7;animation:dpg-frame-breathe 3.2s ease-in-out infinite}
:root[data-frame]:not([data-frame=rainbow]) .appframe .af-ring,:root[data-frame]:not([data-frame=rainbow]) .appframe .af-glow{display:none}
:root[data-frame=rainbow] .appframe--log{box-shadow:none}
:root[data-frame=rainbow] .appframe--log::after{display:none}
:root[data-frame=rainbow] .appframe--log .af-ring,:root[data-frame=rainbow] .appframe--log .af-glow{display:block}
:root[data-frame]:not([data-frame=rainbow]) .cam:not(.cam--rec) .cam-frame{background:rgb(var(--af-rgb) / 70%)}
:root[data-frame=rainbow] .cam:not(.cam--rec) .cam-frame{background:conic-gradient(#f47a91,#f9c65d,#94cf89,#70c5e5,#a092e5,#e495ce,#f47a91);opacity:.7}

/* 外枠の色の選び方（mode-switch.js の DpgFrameColor.picker。勉強ログの「名前とアイコン」のシートと、問題集の設定が同じ部品を使う）。
   ラジオの組（おまかせ・虹色・6色）。どのページにも同じ色の名前があるとは限らないので、色は値で書く。
   選んだ印は色だけに頼らない（おまかせ・虹色は黒い面と白い字とチェック、6色は黒い輪とチェック）。操作の大きさは 44px 以上、フォーカスの輪は青で外に 3px 離す。 */
.fc{min-width:0;margin:0;padding:0;border:0}
.fc__lbl{display:block;padding:0}
.fc__row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.fc__row--sw{justify-content:space-between;gap:6px}
.fc__chip,.fc__sw{position:relative;display:block;margin:0;cursor:pointer}
.fc__in{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.fc__face{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;min-height:44px;padding:0 16px;border:1.5px solid #8a7d70;border-radius:999px;background:#fff;color:#292622;font-size:15px;font-weight:700;line-height:1.2}
.fc__in:checked + .fc__face{background:#292622;border-color:#292622;color:#fff}
.fc__in:checked + .fc__face::before{content:"";flex:none;width:6px;height:11px;margin:0 2px 3px 0;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.fc__rb{flex:none;width:16px;height:16px;border-radius:50%;background:conic-gradient(#f47a91,#f9c65d,#94cf89,#70c5e5,#a092e5,#e495ce,#f47a91)}
.fc__dot{position:relative;display:block;box-sizing:border-box;width:44px;height:44px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 1px #8a7d70}
.fc__dot--purple{--c:var(--fc-purple)}.fc__dot--pink{--c:var(--fc-pink)}.fc__dot--blue{--c:var(--fc-blue)}.fc__dot--green{--c:var(--fc-green)}.fc__dot--yellow{--c:var(--fc-yellow)}.fc__dot--orange{--c:var(--fc-orange)}
.fc__in:checked + .fc__dot{box-shadow:0 0 0 3px #292622}
.fc__in:checked + .fc__dot::after{content:"";position:absolute;left:14px;top:8px;width:8px;height:15px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.fc__in:focus-visible + .fc__face,.fc__in:focus-visible + .fc__dot{outline:3px solid #1d5fbd;outline-offset:3px}
.fc__hint{margin:0;color:#65594d;font-size:14px;line-height:1.6}
.fc__hint + .fc__hint{margin-top:2px}
/* 規約の改定のお知らせ（mode-switch.js の showNotice。1週間だけ）。
   v4（2026-10-01・I_音声とお知らせ/mock-お知らせ.html の .notice）: 細い帯を1本、左に紫の細い線。本文の流れの中に置き、
   下の「今日の目安」と同じ 12px の間。色は v3 の値をそのまま書く（どのページにも同じ色の名前があるとは限らないので）。
   幅が足りないとき（スマホ・ランキングの細い枠）は「規約を見る」「閉じる」が文の下の右に回る（flex の折り返し）。420px 以下は2行目（何が変わったか）を隠す。
   出るときは上から 8px 下りる（240ms。動きを減らす設定ではすぐ出る）。 */
.sw-notice{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;min-height:60px;margin:0 0 12px;padding:8px 6px 8px 12px;border-radius:16px;background:#fff;border:1px solid #e5cdb8;box-shadow:inset 4px 0 0 #6535b5;color:#292622;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;line-height:1.45;box-sizing:border-box}
.sw-notice .notice__ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#f3edff;color:#6535b5}
.sw-notice .notice__ic svg{width:20px;height:20px}
.sw-notice p{flex:1 1 200px;min-width:0;margin:0;font-size:15px;font-weight:800;line-height:1.45}
.sw-notice p small{display:block;font-size:14px;font-weight:700;color:#65594d}
.sw-notice .notice__acts{display:flex;align-items:center;gap:2px;margin:-2px -2px -4px auto}
.sw-notice .linkbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:#6535b5;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.sw-notice .notice__x{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 10px;border:0;border-radius:999px;background:none;color:#65594d;font:inherit;font-weight:800;font-size:15px;cursor:pointer}
.sw-notice .notice__x span,.sw-notice .notice__x svg{display:block;width:18px;height:18px}
@media(max-width:420px){.sw-notice p small{display:none}}
/* 2026-10-18 区間13 FIX: 200% の 187px で［閉じる］が「閉／じ／る」と1字ずつ縦に折れていた。字は折らず、押す所（規約を見る・閉じる）は文の下の行で折り返す。
   1行に収まる幅（320px 以上）では、どちらも何も変わらない。 */
.sw-notice .notice__x{white-space:nowrap}
.sw-notice .notice__acts{flex-wrap:wrap;justify-content:flex-end}
/* ランキング・勉強計画などの本文の先頭では上を少し空ける（問題集の #app は上の余白がもとからある）。 */
main:not(#app) > .sw-notice{margin-top:12px}
/* ランキング: 本文の枠（.rank-page。390 では幅 480・内側 12px、PC の2列は幅 1280）と同じ幅で、飾りの絵より手前。 */
main > .sw-notice:has(+ .rank-page){position:relative;z-index:1;max-width:456px;margin:12px auto 0}
@media(min-width:1460px){main > .sw-notice:has(+ .rank-page){max-width:1217px}}
/* 問題集の #app は上の余白（20px 前後）がもとからあるので詰め、ホームの「今日の目安」までをちょうど 12px にする。 */
#app > .sw-notice{margin-top:-8px}
:root[data-quiz-theme] #app[data-screen=home]:has(> .sw-notice) .qz-header{margin-top:0}
@media(prefers-reduced-motion:no-preference){.sw-notice--in{animation:sw-notice-in .24s cubic-bezier(.2,.8,.2,1) both}}
@keyframes sw-notice-in{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}

/* iOS アプリ（html.is-native。capacitor.config.json の ios.contentInset = never）では、ページが画面の上端から描く。
   時刻・電池の下（上の安全域）に、ページと同じ色の帯を敷いて本文が潜らないようにする（2026-10-01。前は ViewController の
   紙色の帯で、撮る画面でも上が紙色になり、iOS の自動の余白と env() の余白が重なって位置もずれていた）。
   撮る〜送る（body.is-shooting / is-composing）は映像が上端まで出るので帯を敷かない（それぞれの上の部品が env() を持つ）。
   問題集のページは本文を安全域の下から始め、上の細い見出し（.phead）も安全域の下に留める。勉強ログは .lg-shell が持つ。
   重なりの順は本文と sticky（20）の上、全画面の重ねもの（メニューの幕 40・拡大 50・購入 59・満点の演出 90）の下（25）。 */
/* 帯と .phead の色（--page）は、そのページの本文の背景に合わせる（ブラウザ版の .phead は変えないので html.is-native の中だけ）。
   紙色テーマのページ（問題集・ダッシュボード・about・購入・契約）は本文の背景が --bg、それ以外の account 系・story-admin は #fffcf7、
   ranking.css と stories.css・story-edit.css は本文の背景を自分で持つので、同じ値をここに写す（ずれたら tools/qa-native-top.mjs が落とす）。 */
html.is-native body{--page:var(--bg,#fffcf7)}
html.is-native body[data-site-page=ranking]{--page:#f9f9f5}
html.is-native body[data-site-page=stories]{--page:#fbf4e6}
html.is-native body:has(#story-admin-main){--page:#fffcf7}
html.is-native body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--page,#fffcf7);z-index:25;pointer-events:none}
html.is-native body.lg::before{background:var(--bg,#f4f4f5)}
html.is-native body.is-shooting::before,html.is-native body.is-composing::before{display:none}
html.is-native body:not(.lg){padding-top:env(safe-area-inset-top,0px)}
html.is-native .phead{top:env(safe-area-inset-top,0px)}