/* dpg-pages-a.css — ほかのページを見た目の決まり（T3 案1）にそろえる（2026-10-15 Cowork 周2）。dpg-guide.css のトークンを使う（このファイルでは :root にトークンを写して持つ）。
   読むページ: ranking.html・stories.html・story.html・account.html（それぞれの <head> の最後）。index.html と、触らないページ（規約など）は読まない。
   共通の CSS（site-shell.css・cloud-ui.css・screens.css など）は変えず、ここで上書きする。!important は使わない（詳細度は body[data-site-page] と id で上げる）。
   決まり: クリームの地と紫／紫の塗りは1画面に1つ・2番手は白地に紫の枠・3番手は文字リンク／線なしの白いカードと影／
          文字は 40・22・17・14px（14px 未満なし）／余白は 8 の倍数／押す物は 44px 以上／赤と緑は正誤だけ／虹の線はヘッダーの下の1本だけ。
   ページ固有の絵（ランキングの漫画の字・王冠・ドパガキくん、合格体験記の方眼・ポラロイド・ステッカー）は見出しの1か所にだけ残す。 */
:root{
  /* ↓ dpg-guide.css の :root と同じ値（写し） */
  --g-fs-hero:40px; --g-fs-title:22px; --g-fs-body:17px; --g-fs-small:14px;
  --g-s1:8px; --g-s2:16px; --g-s3:24px; --g-s4:32px; --g-s5:40px;
  --g-card-shadow:0 1px 2px rgb(44 33 30 / 6%),0 6px 20px rgb(113 66 13 / 7%);
  --g-card-shadow-lift:0 2px 4px rgb(44 33 30 / 8%),0 12px 28px rgb(113 66 13 / 10%);
  --g-radius:16px; --g-radius-btn:14px;
  --g-hit:48px; --g-btn-h:52px;
  --g-primary-fill:linear-gradient(165deg,#9742f5 0%,#6424ed 48%,#441cf0 100%);
  --g-primary-border:#6125d2;
  --g-primary-shadow:0 3px 0 #4215a8,0 6px 12px #6d33d322;
  /* ↓ 色。theme-dpg.css の紙のテーマ（:root[data-quiz-theme="paper"]）と同じ値。これらのページの CSS の --accent などとぶつからないよう --g- を付けて持つ。
     dpg-guide.css の --g-outline:var(--accent) / --g-outline-bg:var(--surface) は、ここでは同じ値の --g-accent / --g-surface を指す。 */
  --g-paper:#fffcf7; --g-surface:#ffffff; --g-surface-2:#fff3e6; --g-ink:#292622; --g-ink-2:#65594d;
  --g-line:#e5cdb8; --g-control:#ad8973; --g-accent:#6535b5; --g-accent-soft:#f3edff;
  --g-outline:var(--g-accent); --g-outline-bg:var(--g-surface);
  /* 中身の幅（PC で細い列にも、間延びにもしない） */
  --g-content:880px;
  /* ↓ 色の約束（2026-10-18 区間11 LOOK。提案 D3・P9）。ここが元。ほかのファイル（dpg-stories.css・dpg-explore.css）は名前と値をそのまま写して持つ。
     紫 --g-primary … 問題集の中の操作（解く・はじめる・次へ）。今の紫の主ボタン（--g-primary-fill の真ん中の色）。
     金 --g-world   … 外の世界（勉強計画・探索・ランキング・合格体験記）の主ボタンの地。字は藍 --g-world-ink（いちばん濃い #E2A300 の上でも 6.1:1）。
                     形（高さ・角・1画面に1つ）は紫の主ボタンと同じ決まり。絵柄（ドット絵の枠・すりガラスなど）は世界ごとのまま。
     金の字 --g-gold-text … 「自分が取った物」（合格・今日の目安の達成・今月の段）を字や印で書く時の濃い金（クリームの地で 5.3:1 以上）。
                     それ以外（日付・ラベル・残りの数など）に金の字を使わない。
     赤 --g-miss    … 間違いだけ（誤答・失敗の知らせ）。地図の屋根や道など、字と印でない飾りの朱・赤はそのままでよい。 */
  --g-primary:#6424ed;
  --g-world:#F2B705; --g-world-hi:#FFD95A; --g-world-lo:#E2A300; --g-world-edge:#B8860B; --g-world-ink:#1F2A5C;
  --g-world-fill:linear-gradient(180deg,#FFD95A 0%,#F2B705 52%,#E2A300 100%);
  --g-world-shadow:0 3px 0 #9A7A16,0 6px 12px rgb(184 134 11 / 22%);
  --g-gold-text:#7A5A00;
  --g-miss:#b23336;
}

/* ランキング（ranking.html）の段は 2026-10-17 夜2 に dpg-rank.css へ移した（新しい部品は drk- の名前。古い id の規則が当たらないように消した）。
   2026-10-16 にこの段へ足された iOS アプリの時刻の下の帯の色（html.is-native body[data-site-page="ranking"]{--page:…}）も dpg-rank.css へ移した（本文の地の色にそろえる。tools/qa-native-top.mjs） */

/* =====================================================================
   合格体験記（stories.html・story.html）: 2026-10-17 夜2 S1 で assets/dpg-stories.css（案5）へ移した（この段は消した）。
   本流で足した直し（見出しの text-wrap: balance・iOS アプリの --page）は dpg-stories.css の中にある。
   ===================================================================== */

/* =====================================================================
   マイページ（account.html。問題集から開いたとき＝<html> に data-account-context="log" が無いとき）。
   見出しは「マイページ」と一言のリード → いま使える入口（メニュー）→ ログインするとできること → ログインのカード → リンク → Mac 版。
   紫の塗りは「ログイン」の1つ（PC で Mac 版のダウンロードも塗りだったので、白地に紫の枠に）。中身の幅は 720px の1列。
   勉強ログから開いたとき（data-account-context="log"）は account-context.css の見た目のまま（ここでは触らない）。
   ===================================================================== */
html:not([data-account-context="log"]) body[data-site-page="account"]{background:var(--g-paper)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr{
  --scr-bg:var(--g-paper);--scr-surface:var(--g-surface);--scr-surface-2:var(--g-surface-2);--scr-text:var(--g-ink);--scr-muted:var(--g-ink-2);
  --scr-line:var(--g-line);--scr-accent:var(--g-accent);--scr-accent-soft:var(--g-accent-soft);--scr-shadow:var(--g-card-shadow);
  max-width:calc(720px + 2 * var(--g-s3));grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "panel" "foot";column-gap:0;row-gap:var(--g-s3);padding:var(--g-s4) var(--g-s3) var(--g-s5)}
/* 見出し: 言葉は左、ドパガキくんは右に小さく */
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__hero{min-height:0;padding:0 136px 0 0}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .dpg-scr__art{position:absolute;right:0;top:-8px;width:120px;margin:0}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .cloud-eyebrow{margin:0 0 var(--g-s1);font-size:var(--g-fs-small)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr h1{margin:0 0 var(--g-s1);font-size:var(--g-fs-title);font-weight:800;line-height:1.4;letter-spacing:0}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__lead{margin:0;color:var(--g-ink-2);font-size:var(--g-fs-body);line-height:1.7}
/* カード: 線なしの白い面と影。見出しは 22px */
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__panel{gap:var(--g-s2)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr section.dpg-scr__card{padding:var(--g-s3);border:0;border-radius:var(--g-radius);background:var(--g-surface);box-shadow:var(--g-card-shadow)}
html:not([data-account-context="log"]) body[data-site-page="account"] :is(#cloud-login-panel,#cloud-signed-in-panel,#cloud-sync-panel,#account-rank-onboarding,#cloud-identities-panel,#account-plus){border:0}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__card>h2{margin:0 0 var(--g-s2);font-size:var(--g-fs-title);font-weight:800}
/* メニュー: 設定の画面と同じ、線で区切った行（文字は墨、矢印は紫） */
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__hub{gap:0}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__hub li+li{border-top:1px solid var(--g-line)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__hub a,
html:not([data-account-context="log"]) body[data-site-page="account"] .cloud-main .dpg-scr__hub a{column-gap:var(--g-s1);min-height:64px;padding:var(--g-s1) 0;border:0;border-radius:0;background:transparent;color:var(--g-ink);font-size:var(--g-fs-body);font-weight:800}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__hub a:hover{background:transparent;color:var(--g-accent)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__hub small{color:var(--g-ink-2);font-size:var(--g-fs-small);font-weight:400}
/* ログインするとできること（3枚）: ログインのカードのすぐ上。線なしの白い面と影 */
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__perks{margin:var(--g-s1) 0 0;gap:var(--g-s1)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__perks li{padding:var(--g-s2) var(--g-s1);border:0;border-radius:var(--g-radius);background:var(--g-surface);box-shadow:var(--g-card-shadow);color:var(--g-ink);font-size:var(--g-fs-small)}
/* 押す物: ログインの塗り（1番手）以外は白地に紫の枠（2番手）。文字のリンクは 44px の高さ */
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .cloud-button:not(.primary):not(.dpg-scr__apple):not(.dpg-scr__line):not(.dpg-scr__google):not(.dpg-scr__azure),
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .dpg-scr__mac .cloud-button.primary{border:1px solid var(--g-outline);background:var(--g-outline-bg);color:var(--g-outline);box-shadow:inset 0 0 0 1px var(--g-outline);filter:none}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .dpg-scr__mac .cloud-button.primary:hover{background:var(--g-accent-soft)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .cloud-button{min-height:var(--g-btn-h);border-radius:var(--g-radius-btn);font-size:var(--g-fs-body)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .cloud-button.primary{border:1px solid var(--g-primary-border);background:var(--g-primary-fill);box-shadow:var(--g-primary-shadow)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .dpg-scr__mac .cloud-button.primary{box-shadow:inset 0 0 0 1px var(--g-outline)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .cloud-field{font-size:var(--g-fs-body)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .cloud-field input{border:1px solid var(--g-control)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr :is(.cloud-note,.dpg-login-agree,.dpg-scr__or){font-size:var(--g-fs-small)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__links{gap:0 var(--g-s3);font-size:var(--g-fs-small)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--g-accent)}
/* Mac 版（PC だけ出る）: リンクの下の小さなカード。ボタンは2番手 */
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr section.dpg-scr__mac{margin:0;max-width:none}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__mac>h2{font-size:var(--g-fs-body)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__mac>p,
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__mac-more{font-size:var(--g-fs-small)}
/* 公開前の注意: 黄色の線の枠 → 線なしのクリームの面 */
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .cloud-caution{padding:var(--g-s3);border:0;border-radius:var(--g-radius);background:var(--g-surface-2)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .cloud-caution h2{font-size:var(--g-fs-body)}
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .cloud-caution p{font-size:var(--g-fs-small)}
@media (max-width:900px){
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr{padding:var(--g-s3) var(--g-s2) var(--g-s5);row-gap:var(--g-s3)}
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__hero{padding-right:104px}
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .dpg-scr__art{width:96px;right:-8px}
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr section.dpg-scr__card{padding:var(--g-s3) var(--g-s2)}
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__perks{margin-right:0}
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__perks li{font-size:var(--g-fs-small)}
}
/* 2026-10-19 区間16 FIX5（本人「メニューの『できること』のところが文字が途切れていたり、ちょっときれてる」）:
   「ログインするとできること」の3枚は、幅が狭いと「別の端末で｜も」「ランキング｜に」「合格体験記｜を」と1字だけの行ができ、
   拡大した幅（187px＝200%）では1字ずつ縦に並んでいた。語のまとまりで折る（auto-phrase。Chrome・Edge）うえで、
   〜351px は札の左右の余白を 4px にして3枚のまま（335px まで「ランキングに」が1行に入る。352px 以上は今のままで入る）、〜334px は1列にして絵を左・字を右の1行に
   （<br> を出さない）、〜259px は1列のまま絵を上・字を真ん中にする。字の大きさ（14px）・絵・札の地と影は同じ。
   マイページの見出し（〜259px）: 右の絵の分の余白（104px）で1〜2字ずつ折れていたので、余白をなくし、絵は一言の下の右に小さく置く。 */
html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__perks li{word-break:auto-phrase;overflow-wrap:anywhere}
@media (max-width:351.98px){
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__perks li{padding-left:4px;padding-right:4px}
}
@media (max-width:334.98px){
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__perks{grid-template-columns:minmax(0,1fr)}
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__perks li{flex-direction:row;gap:var(--g-s2);padding:var(--g-s1) var(--g-s2);text-align:left}
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__perks li::before{flex:none}
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__perks br{display:none}
}
@media (max-width:259.98px){
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__perks li{flex-direction:column;gap:var(--g-s1);padding:var(--g-s2) var(--g-s1);text-align:center}
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr__hero{padding-right:0}
  html:not([data-account-context="log"]) body[data-site-page="account"] .dpg-scr .dpg-scr__art{position:static;width:72px;margin:var(--g-s1) 0 0 auto}
}

/* 動きを減らす設定では、このファイルが当てる見た目の変化（hover の明るさなど）も動かさない */
@media (prefers-reduced-motion:reduce){
  body:is([data-site-page="ranking"],[data-site-page="stories"],[data-site-page="account"]) *{transition:none;animation:none}
}