/* ダッシュボード（紙色と紫＝ホームと同じ調子）。commission-dashboard-20260924。
   構造・id・data-role は dashboard.js / dashboard.html のまま。ここは見た目だけを作る。
   方向の案：依頼者が ChatGPT で選んだ「案B」。数字・日付・本棚名・一言はすべて DOM の文字。 */
:root{
  --bg:#fffcf7;
  --surface:#ffffff;
  --surface-2:#fff3e6;
  --text:#292622;
  --text-2:#65594d;
  --line:#eadccd;
  --line-strong:#e5cdb8;
  --control:#ad8973;
  --accent:#6535b5;
  --accent-ink:#4f22a0;
  --accent-soft:#f3edff;
  --accent-line:#dccdf6;
  --grad:linear-gradient(165deg,#9742f5 0%,#6424ed 48%,#441cf0 100%);
  --blue:#2264ae;
  --coral:#b94720;
  --green:#276846;
  --green-soft:#e8f4e9;
  --danger:#b23336;
  --shadow:0 8px 30px rgb(124 75 30 / 6%);
  --r-sm:10px;--r-md:16px;--r-lg:20px;
  --cal-c:20px;--cal-g:4px;
  --font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 var(--font)}
body[data-site-page="dashboard"]{overflow-x:clip}
button,input,select,textarea{font:inherit;color:inherit}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:9px 18px;border:1px solid var(--control);border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;font-weight:700}
button:hover,.button:hover{background:var(--surface-2)}
button:disabled{opacity:.55;cursor:wait}
button.primary,.button.primary{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 3px 0 #4215a8}
button.primary:hover,.button.primary:hover{filter:brightness(1.06)}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3,p{margin:0}
h1{font-size:34px;line-height:1.3;letter-spacing:.01em;font-weight:800}
h2{font-size:21px;line-height:1.45;font-weight:800}
h3{font-size:17px;font-weight:800}
.muted{color:var(--text-2);font-size:14px}
.eyebrow{font-weight:700;font-size:13px;color:var(--accent);letter-spacing:.06em;margin-bottom:6px}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.dash [hidden]{display:none!important}

/* ============ 全体の組み方（1280 は 2列、760px 未満は 1列）============
   並び（DOM 順）：見出し → 通知 → 今週のまとめ → 本棚 → 一言 → 今日の復習 → 学習の予定 → 折りたたみ3つ → 更新時刻
   ・一言が出る（ログイン中。無料の人も）：本棚｜一言 の横並び、今日の復習は下の横長の帯
   ・一言が出ない（未ログイン・取れないとき）：本棚｜今日の復習（大きく） の横並び
   ・どちらも出ない：本棚が横いっぱい
   ・記録なし：今週のまとめ（はじめの案内）｜学習の予定（はじめの案内） の横並び */
.dash{max-width:1120px;margin:0 auto;padding:30px 24px 56px;display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:20px;row-gap:20px;align-items:start}
.dash>*{grid-column:1/-1;min-width:0}
.dash-heading{margin-bottom:2px}
.dash-heading h1{color:var(--text)}
.dash-heading .muted{font-size:16px;margin-top:6px}
/* ★ v4.css の .notice（お知らせの帯。36px の列を持つ格子）と名前が同じ ★ ここの #notice は文章だけの欄なので、格子・高さ・余白を打ち消す。
   打ち消さないと「学習の予定を保存しました。」が 36px の列に押し込まれ、1行に2文字ずつの縦長の箱になる（2026-10-02 スマホ総点検）。 */
.notice{display:block;min-height:0;margin:0;color:#713411;white-space:pre-line}
.notice:empty{display:none}
.notice:not(:empty){padding:14px 18px;background:#fff0df;border:1px solid var(--line-strong);border-radius:var(--r-sm)}

#dash-shelves{grid-column:1}
/* 右の列（一言・今日の復習）は本棚カードの高さに引き伸ばさない。本棚が複数段になる
   （4・5枚など）と、右の列だけ縦に間延びしていたため（本人指摘）。 */
#dash-insight{grid-column:2}
.dash:has(#dash-insight[hidden]) #dash-review{grid-column:2}
.dash:has(#dash-insight[hidden]):has(#dash-review[hidden]) #dash-shelves{grid-column:1/-1}
#dash-shelves:empty{display:none}
/* 記録なし：はじめの案内を2枚並べる */
/* HTML では「予定」が「今週のまとめ」より先にあるため、列だけ決めると今週のまとめが次の行へ送られ、
   左上と右下に空きが出ていた（本人指摘）。dense で同じ行の左の空きへ詰める。 */
.dash:has(#dash-week>.empty){grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense}
.dash:has(#dash-week>.empty) #dash-week{grid-column:1;align-self:stretch}
.dash:has(#dash-week>.empty) #dash-today{grid-column:2;align-self:stretch}
/* 2026-10-16 周8（初めての人役 トップ3）: 予定がまだ無い（dashboard.js の .dash-noplan）ときは、試験日を入れる予定の案内を先頭に。
   PC は左右を入れ替えて左に（スマホは下の 760px の段で今週のまとめより上に）。見た目の順が読み上げ・Tab の順（DOM の順）とそろう。 */
@media not all and (max-width:760px){
  .dash:has(#dash-week>.empty):has(#dash-today>.dash-noplan) #dash-today{grid-column:1}
  .dash:has(#dash-week>.empty):has(#dash-today>.dash-noplan) #dash-week{grid-column:2}
}

/* 共通のカード */
.dash-card,#dash-shelves,#dash-insight,.dash-fold{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}

/* 見出しの小さな絵（CSS の形だけ。文字ではない） */
#dash-week .section-head h2::before,#dash-shelves .section-head h2::before,#dash-insight::before{content:"";display:inline-block;width:26px;height:26px;margin-right:10px;vertical-align:-5px;background:var(--accent);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
#dash-week .section-head h2::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='10' width='4.2' height='11' rx='2'/%3E%3Crect x='9.9' y='3' width='4.2' height='18' rx='2'/%3E%3Crect x='16.8' y='7' width='4.2' height='14' rx='2'/%3E%3C/svg%3E")}
#dash-shelves .section-head h2::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5.2C4.8 4 8.2 4 11 5.6V20c-2.8-1.5-6.2-1.5-9-.3zM13 5.6C15.8 4 19.2 4 22 5.2v14.5c-2.8-1.2-6.2-1.2-9 .3z'/%3E%3C/svg%3E")}

/* ============ ① 今週のまとめ ＋ 13週のカレンダー ============ */
#dash-week{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 372px;column-gap:20px;align-items:start}
#dash-week>.section-head{grid-column:1;grid-row:1;padding:22px 24px 0;margin:0}
#dash-week>.dash-chips{grid-column:1;grid-row:2;padding:16px 24px 24px}
#dash-week>.dash-calendar{grid-column:2;grid-row:1/3}
/* 左のカード（見出し＋4つの数字）の地 */
#dash-week:has(>.dash-chips)::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:392px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.section-head h2{font-size:22px}

#dash-week .dash-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#dash-week .dash-chip{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;min-height:122px;padding:16px 14px 14px 16px;background:#fdfbff;border:1px solid #efe7f7;border-radius:var(--r-md);font-size:13px;color:var(--text-2);line-height:1.4}
#dash-week .dash-chip::before{content:"";width:30px;height:30px;margin-bottom:6px;background:var(--chip-c,var(--accent));-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
#dash-week .dash-chip__value{font-size:30px;line-height:1.15;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:4px 0 2px;overflow-wrap:anywhere}
#dash-week .dash-chip .muted{font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums}
[data-role="dash-week-time"]{--chip-c:var(--blue);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='8.2'/%3E%3Cpath d='M12 8.6V13l3 2M9.5 2.8h5'/%3E%3C/svg%3E")}
[data-role="dash-week-answers"]{--chip-c:var(--blue);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linejoin='round'%3E%3Cpath d='M2.5 5.5C5.5 4.3 8.8 4.4 12 6.2v13.4c-3.2-1.8-6.5-1.9-9.5-.7zM21.5 5.5c-3-1.2-6.3-1.1-9.5.7v13.4c3.2-1.8 6.5-1.9 9.5-.7z'/%3E%3C/svg%3E")}
[data-role="dash-week-split"]{--chip-c:var(--accent);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 2.8h8.5L19 7.3V21H6z'/%3E%3Cpath d='M14 3v5h5M9 12h7M9 16h7'/%3E%3C/svg%3E")}
[data-role="dash-week-accuracy"]{--chip-c:var(--coral);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='13' r='8.2'/%3E%3Ccircle cx='11' cy='13' r='4.2'/%3E%3Cpath d='M11 13l9-9M16.5 4.2h3.3v3.3'/%3E%3C/svg%3E")}

/* カレンダー：それ自体を右のカードにする。見出し・曜日・凡例は飾り（読み上げは既存の aria-label「13週間の学習カレンダー」） */
.dash-calendar{position:relative;display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,var(--cal-c));grid-auto-columns:var(--cal-c);gap:var(--cal-g);align-content:start;justify-content:start;padding:64px 20px 50px 44px;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='168' viewBox='0 0 14 168'%3E%3Ctext x='0' y='17' font-size='12' font-family='sans-serif' fill='%2365594d'%3E月%3C/text%3E%3Ctext x='0' y='41' font-size='12' font-family='sans-serif' fill='%2365594d'%3E火%3C/text%3E%3Ctext x='0' y='65' font-size='12' font-family='sans-serif' fill='%2365594d'%3E水%3C/text%3E%3Ctext x='0' y='89' font-size='12' font-family='sans-serif' fill='%2365594d'%3E木%3C/text%3E%3Ctext x='0' y='113' font-size='12' font-family='sans-serif' fill='%2365594d'%3E金%3C/text%3E%3Ctext x='0' y='137' font-size='12' font-family='sans-serif' fill='%2365594d'%3E土%3C/text%3E%3Ctext x='0' y='161' font-size='12' font-family='sans-serif' fill='%2365594d'%3E日%3C/text%3E%3C/svg%3E") left 20px top 64px/14px 168px no-repeat;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);min-height:100%}
.dash-calendar__heading{position:absolute;left:20px;top:18px;font-size:18px;font-weight:800;line-height:28px;color:var(--text);margin:0;padding-left:32px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236535b5' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 2.8v4M16 2.8v4'/%3E%3C/svg%3E") left center/24px 24px no-repeat}
.dash-calendar__legend{position:absolute;right:20px;bottom:16px;margin:0;font-size:12px;line-height:16px;color:var(--text-2);white-space:nowrap}
.dash-calendar__legend-label{margin:0 4px}
.dash-calendar__legend-swatches{display:inline-block;width:96px;height:14px;vertical-align:-2px;
  background:
    linear-gradient(#efe9f7,#efe9f7) 0 0/14px 14px no-repeat,
    linear-gradient(#d9c9f5,#d9c9f5) 20px 0/14px 14px no-repeat,
    linear-gradient(#b395ea,#b395ea) 41px 0/14px 14px no-repeat,
    linear-gradient(#8458d6,#8458d6) 62px 0/14px 14px no-repeat,
    linear-gradient(#5b2bb0,#5b2bb0) 83px 0/14px 14px no-repeat}
.dash-calendar__cell{width:var(--cal-c);height:var(--cal-c);border-radius:5px;background:#efe9f7}
.dash-calendar__cell[data-level="1"]{background:#d9c9f5}
.dash-calendar__cell[data-level="2"]{background:#b395ea}
.dash-calendar__cell[data-level="3"]{background:#8458d6}
.dash-calendar__cell[data-level="4"]{background:#5b2bb0}

/* 記録なし：はじめの案内 */
#dash-week:has(>.empty){display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px 24px 28px;min-height:100%;position:relative;overflow:hidden}
#dash-week:has(>.empty)::before{content:none}
#dash-week:has(>.empty)>.section-head{padding:0}
#dash-week>.empty{border:0;background:none;box-shadow:none;padding:18px 170px 0 0;max-width:none}
#dash-week>.empty .eyebrow{font-size:14px}
#dash-week>.empty h2{font-size:24px;line-height:1.45;margin-bottom:10px}
#dash-week>.empty .muted{font-size:15px}
#dash-week>.empty .actions{display:none}
#dash-week:has(>.empty)::after{content:"";position:absolute;right:10px;bottom:0;width:180px;height:184px;background:url("dash/calendar-v2.webp?v=20261019art1") center bottom/contain no-repeat}

.dash:has(#dash-week>.empty) #dash-today .empty-art{display:none}
/* 記録なしのときだけ：解くと何が出るか（静的な HTML。記録が1件でもあれば消える） */
.dash-first{display:none}
.dash:has(#dash-week>.empty) .dash-first{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:14px;align-items:stretch;padding:18px 20px;border-radius:var(--r-lg);background:var(--accent-soft);border:1px solid var(--accent-line)}
.dash-first h2{grid-column:1/-1;font-size:16px;color:var(--accent-ink)}
.dash-first__item{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-md);background:var(--surface);border:1px solid #ece3fa;font-size:14px;line-height:1.55;color:var(--text-2)}
.dash-first__item b{display:block;color:var(--text);font-size:15px}
.dash-first__item::before{content:"";flex:none;width:28px;height:28px;background:var(--accent);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.dash-first__item--week{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='10' width='4.2' height='11' rx='2'/%3E%3Crect x='9.9' y='3' width='4.2' height='18' rx='2'/%3E%3Crect x='16.8' y='7' width='4.2' height='14' rx='2'/%3E%3C/svg%3E")}
.dash-first__item--cal{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 2.8v4M16 2.8v4'/%3E%3C/svg%3E")}
.dash-first__item--shelf{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5.2C4.8 4 8.2 4 11 5.6V20c-2.8-1.5-6.2-1.5-9-.3zM13 5.6C15.8 4 19.2 4 22 5.2v14.5c-2.8-1.2-6.2-1.2-9 .3z'/%3E%3C/svg%3E")}
.dash-first .button{align-self:center;white-space:nowrap}

/* ============ ② いま学んでいる本棚 ============ */
#dash-shelves{padding:20px 20px 20px;margin:0}
#dash-shelves .section-head{margin-bottom:14px;justify-content:flex-start;column-gap:14px}
.dash-section-hint{font-size:13px;color:var(--text-2)}
.dash-shelf-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dash-shelf-list:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
/* 4枚は2×2、5枚は3＋2（最後の段の2枚を伸ばして3列ぶんを均等に埋める）。
   6枚以上は既定の3列（最後が1枚だけ余る配置は今回の対象外）。 */
.dash-shelf-list:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.dash-shelf-list:has(>:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
.dash-shelf-list:has(>:nth-child(5):last-child)>:nth-child(-n+3){grid-column:span 2}
.dash-shelf-list:has(>:nth-child(5):last-child)>:nth-child(n+4){grid-column:span 3}

.dash-shelf-card{--shelf:var(--accent);--cover:url("covers/generic.webp?v=20260924dash1");
  display:grid;grid-template-columns:62px minmax(0,1fr);grid-template-areas:"title title" "cover ring" "week week" "spark spark" "pace pace" "exam exam";
  column-gap:12px;row-gap:10px;align-items:center;padding:16px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--shelf) 4%,#fff);border:1px solid color-mix(in srgb,var(--shelf) 26%,#fff)}
.dash-shelf-card::before{content:"";grid-area:cover;width:62px;aspect-ratio:3/4;border-radius:6px;background:var(--cover) center/cover no-repeat,color-mix(in srgb,var(--shelf) 20%,#fff);box-shadow:3px 3px 0 color-mix(in srgb,var(--shelf) 18%,#fff),0 4px 10px rgb(41 38 34 / 12%)}
.dash-shelf-card>div:not(.dash-ring),.dash-shelf-card .dash-chips{display:contents}
.dash-shelf-card{position:relative}
.dash-shelf-card h3{grid-area:title;padding-right:28px;font-size:18px;line-height:1.4;color:color-mix(in srgb,var(--shelf) 85%,#000);overflow-wrap:anywhere}
.dash-shelf-card .dash-ring{grid-area:ring;justify-self:center}
.dash-shelf-card [data-role="dash-shelf-week"]{grid-area:week}
.dash-shelf-card [data-role="dash-shelf-spark"]{grid-area:spark}
.dash-shelf-card [data-role="dash-shelf-pace"]{grid-area:pace}
.dash-shelf-card [data-role="dash-shelf-exam"]{grid-area:exam}
/* 本棚ごとの色と表紙（ホームの本棚と同じ既定の表紙。data-shelf-id で選ぶ） */
.dash-shelf-card[data-shelf-id="ipa-ip"]{--shelf:#6535b5;--cover:url("covers/ip.webp?v=20260924dash1")}
.dash-shelf-card[data-shelf-id="ipa-fe"]{--shelf:#2264ae;--cover:url("covers/fe.webp?v=20260924dash1")}
.dash-shelf-card[data-shelf-id="ipa-sg"]{--shelf:#16837a;--cover:url("covers/sg.webp?v=20260924dash1")}
.dash-shelf-card[data-shelf-id="ipa-touhan"]{--shelf:#276846;--cover:url("covers/touhan.webp?v=20260924dash1")}
.dash-shelf-card[data-shelf-id="ipa-fp3"]{--shelf:#a8620a;--cover:url("covers/fp3.webp?v=20260924dash1")}
.dash-shelf-card[data-shelf-id="ipa-takken"]{--shelf:#b3226b;--cover:url("covers/takken.webp?v=20261021takken1")} /* 宅建士（2026-10-21 本人が ChatGPT の案B ピンクを選んだ） */
.dash-shelf-card[data-shelf-id="boki3"]{--shelf:#1769b8;--cover:url("covers/boki3.webp?v=20261023boki1")} /* 簿記3級（2026-10-23 本人が ChatGPT の案A 青緑を選んだ） */
.dash-shelf-card[data-shelf-id="boki2"]{--shelf:#2b3f8f;--cover:url("covers/boki2.webp?v=20261023boki2")} /* 簿記2級（2026-10-23 3級の案Aの色違い・藍色） */
.dash-shelf-card[data-shelf-id="nihongo-kyoin"]{--shelf:#c2410c;--cover:url("covers/nihongo-kyoin.webp?v=20261029nihongo1")} /* 日本語教員試験（2026-10-29 本人が ChatGPT の案A オレンジ〜珊瑚色を選んだ） */
.dash-shelf-card[data-shelf-id="az900"]{--shelf:#c0453a;--cover:url("covers/az900.webp?v=20260928az1")}
.dash-shelf-card[data-shelf-id="az104"]{--shelf:#2a3fc0;--cover:url("covers/az104.webp?v=20260929az1")}
.dash-shelf-card[data-shelf-id="az305"]{--shelf:#a12bc4;--cover:url("covers/az305.webp?v=20261002az1")}
.dash-shelf-card[data-shelf-id="lpic101"]{--shelf:#12805c;--cover:url("covers/lpic.webp?v=20261003lpic1")}
.dash-shelf-card[data-shelf-id="lpic102"]{--shelf:#12805c;--cover:url("covers/lpic.webp?v=20261003lpic1")}
.dash-shelf-card[data-shelf-id="lpic201"]{--shelf:#d9540f;--cover:url("covers/lpic2.webp?v=20261003lpic1")}
.dash-shelf-card[data-shelf-id="lpic202"]{--shelf:#d9540f;--cover:url("covers/lpic2.webp?v=20261003lpic1")}
.dash-shelf-card[data-shelf-id="ccna"]{--shelf:#0b6fae;--cover:url("covers/ccna.webp?v=20261009ccna1")}
.dash-shelf-card[data-shelf-id="ccna-sim"]{--shelf:#0b6fae;--cover:url("covers/ccna.webp?v=20261009ccna1")} /* CCNA シミュレーションは CCNA の表紙を使い回す（2026-10-10） */
.dash-shelf-card[data-shelf-id="ccnp-encor"]{--shelf:#0b6fae;--cover:url("covers/ccna.webp?v=20261009ccna1")}
.dash-shelf-card[data-shelf-id="ccnp-enarsi"]{--shelf:#0b6fae;--cover:url("covers/ccna.webp?v=20261009ccna1")} /* CCNP の2試験も CCNA の表紙を使い回す（2026-10-11） */
.dash-shelf-card[data-shelf-id="ccnp-encor-sim"]{--shelf:#0b6fae;--cover:url("covers/ccna.webp?v=20261009ccna1")} /* CCNP ENCOR シミュレーションも CCNA の表紙を使い回す（2026-10-11） */
.dash-shelf-card[data-shelf-id="ccnp-enarsi-sim"]{--shelf:#0b6fae;--cover:url("covers/ccna.webp?v=20261009ccna1")} /* CCNP ENARSI シミュレーションも同じ（2026-10-12） */
.dash-shelf-card[data-shelf-id="english"]{--shelf:#b94720;--cover:url("covers/vocab.webp?v=20260924dash1")}
.dash-shelf-card[data-shelf-id="kyotsu-en"]{--shelf:#1e4fbf;--cover:url("covers/kyotsu-en.webp?v=20261003kyo1")}
.dash-shelf-card[data-shelf-id="default"]{--shelf:#986405;--cover:url("covers/mine.webp?v=20260924dash1")}

/* 進み具合の輪 */
.dash-ring{position:relative;width:96px;height:96px;flex:none}
.dash-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.dash-ring__track{fill:none;stroke:color-mix(in srgb,var(--shelf,var(--accent)) 13%,#fff);stroke-width:11}
.dash-ring__fill{fill:none;stroke:var(--shelf,var(--accent));stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.16,1,.3,1)}
.dash-ring__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center}
.dash-ring__value{font-weight:800;font-size:22px;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.dash-ring__caption{font-size:12px;color:var(--text-2);line-height:1.3}

.dash-shelf-card .dash-chip{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--text-2);background:none;border:0;padding:0;height:auto}
.dash-shelf-card .dash-chip__value{font-size:17px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.dash-shelf-spark{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums;min-height:28px}
.dash-shelf-card .dash-shelf-spark{color:var(--shelf)}
.dash-shelf-spark svg{flex:1 1 auto;max-width:120px;height:28px;overflow:visible}
.dash-shelf-spark>span{color:var(--text-2);white-space:nowrap}
.dash-shelf-card [data-role="dash-shelf-pace"]{display:flex;gap:8px;align-items:flex-start;padding:9px 11px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--shelf) 6%,#fff);border:1px solid color-mix(in srgb,var(--shelf) 12%,#fff);font-size:13px;line-height:1.5;color:var(--text)}
.dash-shelf-card [data-role="dash-shelf-pace"]::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;background:var(--shelf);-webkit-mask:var(--cal) center/contain no-repeat;mask:var(--cal) center/contain no-repeat;--cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 2.8v4M16 2.8v4'/%3E%3C/svg%3E")}
.dash-shelf-card [data-role="dash-shelf-exam"],.dash-shelf-card a.dash-exam-link{display:flex;align-items:center;gap:8px;width:100%;padding:8px 11px;border-radius:var(--r-sm);background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink);font-size:13px;font-weight:700;line-height:1.45;text-decoration:none}
.dash-shelf-card a.dash-exam-link{grid-area:exam}
.dash-shelf-card a.dash-exam-link [data-role="dash-shelf-exam"]{display:contents}
.dash-shelf-card a.dash-exam-link::after{content:"›";margin-left:auto;font-size:18px;line-height:1}
.dash-shelf-card a.dash-exam-link--add{background:none;border-style:dashed;color:var(--text-2);font-weight:600}

/* 1冊だけのとき（使い始め）：横長の1枚 */
.dash-shelf-list:has(>:only-child){grid-template-columns:1fr}
.dash-shelf-list>:only-child{grid-template-columns:80px 110px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"cover ring title title" "cover ring week spark" "cover ring pace exam";column-gap:18px;padding:18px 20px}
.dash-shelf-list>:only-child::before{width:80px}
.dash-shelf-list>:only-child .dash-ring{width:108px;height:108px}

/* ============ ③ ドパガキくんの一言（ログイン中だけ。無料の人も出る。ログインしていない・取れないときは入れ物ごと出さない） ============ */
#dash-insight{position:relative;padding:20px 20px 214px;margin:0;overflow:hidden;background:var(--surface) url("dash/cheer.webp?v=20260924dash1") left 4px bottom -10px/214px auto no-repeat;min-height:100%}
#dash-insight::before{content:"";--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6' r='4'/%3E%3Ccircle cx='6' cy='11' r='4'/%3E%3Ccircle cx='18' cy='11' r='4'/%3E%3Ccircle cx='8.5' cy='17.5' r='4'/%3E%3Ccircle cx='15.5' cy='17.5' r='4'/%3E%3C/svg%3E");background:#a78be0;position:absolute;left:20px;top:21px}
#dash-insight{display:flex;flex-direction:column}
#dash-insight .dash-insight__heading{order:-1;display:block;margin:0 0 14px;font-size:18px;font-weight:800;line-height:28px;padding-left:36px}
#dash-insight .dash-insight__text{position:relative;clear:both;padding:14px 16px;border:1.5px solid var(--accent-line);border-radius:18px;background:#fdfbff;font-size:15px;line-height:1.75;color:var(--text)}
#dash-insight .dash-insight__text::after{content:"";position:absolute;left:52px;bottom:-11px;width:18px;height:18px;background:#fdfbff;border-right:1.5px solid var(--accent-line);border-bottom:1.5px solid var(--accent-line);transform:rotate(45deg) skew(8deg,8deg)}
#dash-insight .dash-insight__text.is-loading{opacity:.55}
/* 口調の3つのチップ。見た目は小さく（高さ30px）、押せる範囲は44pxの高さ・幅（button が44px、中の span が見た目） */
#dash-insight .dash-insight__tones{display:flex;flex-wrap:wrap;gap:2px;margin:-8px 0 0 -4px}
#dash-insight .dash-insight__chip{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:7px 2px;margin:0;border:0;border-radius:999px;background:none;box-shadow:none;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#dash-insight .dash-insight__chip span{display:block;padding:0 13px;border:1.5px solid var(--accent-line);border-radius:999px;background:#fff;font-size:13px;font-weight:700;line-height:27px;color:var(--text-2);white-space:nowrap}
#dash-insight .dash-insight__chip[aria-pressed="true"] span{border-color:var(--accent);background:var(--accent);color:#fff}
#dash-insight .dash-insight__chip:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ============ ④ 今日の復習 ============ */
#dash-review{margin:0}
#dash-review [data-role="dash-review-button"]{width:100%;justify-content:flex-start;gap:18px;min-height:84px;padding:14px 24px;border:1.5px solid var(--accent-line);border-radius:var(--r-lg);background:linear-gradient(110deg,#fff 0%,#fffaf4 60%,#f5efff 100%);color:var(--accent-ink);font-size:26px;font-weight:800;box-shadow:var(--shadow);letter-spacing:.02em}
#dash-review [data-role="dash-review-button"]::before{content:"";flex:none;width:52px;height:52px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5'/%3E%3C/svg%3E") center/24px 24px no-repeat,var(--grad);box-shadow:0 3px 0 #4215a8}
#dash-review [data-role="dash-review-button"]::after{content:"";flex:none;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236535b5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
#dash-review{position:relative}
/* 2026-10-16 区間6（関所F Q4 i）: ボタンの言葉を「今日の復習 N問を解く」にした。折るときは意味の切れ目（今日の復習／N問を解く）だけで折る。 */
#dash-review .dash-review__part{display:inline-block}
/* 2026-10-16 周12（X1 今日の復習の続き）: どの冊の復習かを、ボタンの中の下の段に出す（dashboard.js の reviewBookName）。
   ボタンを折り返しのある横並びにし、冊の名前（.dash-review__book）は「丸い印・字・矢印」の段の下に、ボタンの幅いっぱいの段として置く（order で最後へ）。
   字はボタンの字より小さく、色は墨の薄い方。長い名前は2行まで折り（語の切れ目で。ホームの続きの説明と同じ auto-phrase）、それより長いと … にする（全部は title）。
   狭い形（一言が無いときの右の列・スマホ）は字の欄を残りの幅いっぱいにして（flex:1 1 0）1段目に収め、名前は真ん中に置く。
   PC で一言があるとき（横に長いボタン・右に説明）は、名前を字の左端（丸い印 52px＋間 18px）にそろえ、右の説明（right:26px・長くて約370px）に
   届かない長さで切る（右の余白 400px。max-width で縮めると1段目に並んでしまうので、幅は 100% のまま余白で切る）。 */
#dash-review [data-role="dash-review-button"]{flex-wrap:wrap;row-gap:0}
#dash-review .dash-review__label{min-width:0}
#dash-review .dash-review__book{order:1;flex:0 0 100%;min-width:0;margin-top:2px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:auto-phrase;font-size:14px;font-weight:700;line-height:1.5;letter-spacing:0;color:var(--text-2)}
.dash:has(#dash-insight[hidden]) #dash-review .dash-review__label{flex:1 1 0}
@media(max-width:760px){
  #dash-review .dash-review__label{flex:1 1 0}
}
@media not all and (max-width:760px){
  .dash:not(:has(#dash-insight[hidden])) #dash-review .dash-review__book{padding:0 400px 0 70px;text-align:start}
}
#dash-review [data-role="dash-review-heading"]{display:none}
#dash-review [data-role="dash-review-caption"]{position:absolute;right:26px;top:50%;transform:translateY(-50%);margin:0;font-size:14px;color:var(--text-2);pointer-events:none}
/* 一言が出ないとき（未ログイン・取れないとき）：一言の場所に、今日の復習を大きく置く（有料への誘いは置かない） */
.dash:has(#dash-insight[hidden]) #dash-review{display:flex;flex-direction:column;justify-content:flex-end;padding:20px;min-height:100%;background:var(--surface) url("dash/study.webp?v=20260924dash1") center 118px/196px auto no-repeat;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.dash:has(#dash-insight[hidden]) #dash-review [data-role="dash-review-heading"]{display:block;position:absolute;left:20px;top:20px;margin:0;font-size:18px;font-weight:800;line-height:28px;color:var(--text)}
.dash:has(#dash-insight[hidden]) #dash-review [data-role="dash-review-caption"]{right:20px;left:20px;top:54px;transform:none;margin:0;font-size:14px;line-height:1.6}
.dash:has(#dash-insight[hidden]) #dash-review [data-role="dash-review-button"]{margin-top:300px;min-height:64px;padding:10px 16px;background:var(--grad);color:#fff;border:0;box-shadow:0 3px 0 #4215a8;font-size:22px;gap:14px}
.dash:has(#dash-insight[hidden]) #dash-review [data-role="dash-review-button"]::before{width:40px;height:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236535b5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5'/%3E%3C/svg%3E") center/20px 20px no-repeat;box-shadow:none}
.dash:has(#dash-insight[hidden]) #dash-review [data-role="dash-review-button"]::after{margin-left:auto;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5'/%3E%3C/svg%3E")}

/* ============ （既存）学習の予定：ゴールのカード・はじめの案内 ============ */
#dash-today:empty{display:none}
#dash-today{display:flex;flex-direction:column;gap:16px}
/* ============ 読み込み中の骨組み（2026-10-02 スマホ総点検・CLS 0.42 を消す）============
   dashboard.html の #dash-skel に最初から入れておく（#dash-today の外。予定の無い人は描画後に #dash-today が下へ並び替わるため）。dashboard.js が最初の描画で取り除き、main の aria-busy を外す。
   ・高さは、読み込み後の「今日の目安」のカード（予定1つ）に合わせる。390px で 505〜531px、1280px で 379〜405px（tools/measure-dashboard-cls.mjs で実測）。
   ・描画が終わるまで、骨組みの下に来る折りたたみ3つと更新時刻は出さない。出しておくと、描画で今日のカード・今週のまとめが入った分だけ押し下げられて大きくずれる。 */
.dash-skel{display:flex;flex-direction:column;gap:14px;min-height:400px;padding:24px 28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}
.dash-skel__label{font-size:13px;line-height:1.4;color:var(--text-2)}
.dash-skel__bar,.dash-skel__ring,.dash-skel__chips i{display:block;border-radius:10px;background:linear-gradient(90deg,#f3ebe2 25%,#faf5ef 50%,#f3ebe2 75%) 0 0/200% 100%;animation:dash-skel 1.4s ease-in-out infinite}
.dash-skel__bar--s{width:42%;height:16px}
.dash-skel__bar--num{width:56%;height:64px}
.dash-skel__bar--m{width:84%;height:18px}
.dash-skel__ring{width:120px;height:120px;border-radius:50%;margin:6px 0}
.dash-skel__chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dash-skel__chips i{height:64px;border-radius:12px}
.dash-skel__bar--cta{width:100%;height:56px;border-radius:12px;margin-top:auto}
@keyframes dash-skel{from{background-position:100% 0}to{background-position:-100% 0}}
/* 広い画面（読み込み後は 379〜405px）では、輪と3つの箱を出すと骨組みが 592px になる。min-height（400px）に収める。 */
@media(min-width:761px){.dash-skel__ring,.dash-skel__chips{display:none}}
.dash[aria-busy="true"]>.dash-fold,.dash[aria-busy="true"]>.dash-footer{display:none}
.today.dash-goal-card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 28px;background:var(--surface);box-shadow:var(--shadow)}
/* 右上の「×」（この予定を削除）。見た目は小さい文字の ×（ホバーで 32px の丸）、押せる範囲は 44px 四方（スマホの総点検の 44px 基準に合わせる）。 */
.dash-goal-card .dash-goal-card__del,.dash-shelf-card .dash-goal-card__del{position:absolute;top:0;right:0;z-index:1;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-2);font-size:20px;line-height:1;font-weight:400}
.dash-goal-card .dash-goal-card__del::before,.dash-shelf-card .dash-goal-card__del::before{content:"";position:absolute;inset:6px;z-index:-1;border-radius:50%;background:transparent}
.dash-goal-card .dash-goal-card__del:hover,.dash-shelf-card .dash-goal-card__del:hover{background:transparent;color:var(--text)}
.dash-goal-card .dash-goal-card__del:hover::before,.dash-shelf-card .dash-goal-card__del:hover::before{background:var(--surface-2)}
/* 画面の下に出す「元に戻す」の通知。下のメニュー（スマホ）の上に浮かせる。 */
.dash-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:10001;width:min(440px,calc(100% - 32px));display:flex;align-items:center;gap:8px;padding:6px 8px 6px 16px;border-radius:16px;background:#fff;border:1px solid var(--line-strong);box-shadow:0 8px 24px rgb(41 38 34 / 14%);font-size:15px;font-weight:800;line-height:1.4;color:var(--text)}
.dash-toast[hidden]{display:none}
.dash-toast__text{flex:1;min-width:0;overflow-wrap:anywhere}
.dash-toast .dash-toast__undo{flex:none;min-height:44px;padding:6px 14px;border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);font-weight:800}
@media(max-width:1023.98px){.dash-toast{bottom:calc(var(--dpg-nav-h,58px) + var(--dpg-nav-gap,10px) + 14px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:no-preference){.dash-toast{animation:dash-toast-in .18s ease-out}@keyframes dash-toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}}
/* キャラの丸い絵は右上の「×」（44px 四方・ホバーで 32px の丸）と重ならないよう、角から少し離す（2026-10-03。前は×が絵の角に重なっていた）。 */
.dash-goal-card__badge{position:absolute;top:20px;right:24px;width:96px;height:96px;border-radius:50%;background:var(--accent-soft);overflow:hidden}
.dash-goal-card__pose{display:block;width:100%;height:100%;object-fit:cover}
.today-main{display:flex;align-items:center;gap:24px}
.today-main>div{min-width:0;width:100%}
.today-main .actions{margin-top:18px}
.today h2,.today-main p{overflow-wrap:anywhere}
.dash-goal-card__titlewrap{display:flex;align-items:baseline;gap:0;padding-right:126px}
.dash-goal-card__kicker{font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:.04em;white-space:nowrap;margin-right:4px}
.dash-goal-card__title{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.04em}
.dash-goal-card .today-art{display:none}
.today-message{font-size:20px;font-weight:800;line-height:1.5;margin:4px 0 6px}
.dash-goal-card__meta{font-size:13px;color:var(--text-2);margin-top:2px}
/* 「今日の目安」が主役：日々の目安（今日N問）を最大の数字にする（本人要望・以前の
   「あと45日」より目立たせる）。あと何日・1日何問で間に合うかは下の一文に添える。 */
.dash-today-goal__main{display:flex;align-items:baseline;gap:6px;margin:6px 0 2px}
.dash-today-goal__label{font-size:18px;font-weight:700;color:var(--text-2)}
.dash-today-goal__num{font-size:64px;line-height:1;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.dash-today-goal__unit{font-size:22px;font-weight:700;color:var(--text)}
.dash-today-goal__rest{font-size:16px;font-weight:700;color:var(--coral);margin:0 0 4px}
.dash-today-goal__sub{font-size:14px;color:var(--text-2);margin:0 0 6px}
.dash-goal-card__meter{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:center;margin:14px 0}
.dash-goal-card__meter .dash-ring{width:120px;height:120px}
.dash-goal-card .dash-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dash-goal-card .dash-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid #efe7f7;background:#fdfbff;border-radius:12px;font-size:13px;color:var(--text-2)}
.dash-goal-card .dash-chip__value{font-size:22px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.dash-cta{width:100%;justify-content:space-between;min-height:56px;font-size:18px}
.dash-cta::after{content:"›";font-size:22px;font-weight:400}

.empty{padding:26px 28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);position:relative}
.empty h2{font-size:22px;margin-bottom:10px}
.empty p{margin-bottom:12px}
.empty ol{padding-left:22px;margin:14px 0;color:var(--text-2);font-size:15px}
.empty li{margin-bottom:6px}
.empty .actions{margin-top:18px}
.empty-art{display:block;width:120px;height:120px;max-width:100%;object-fit:contain;float:right;margin:0 0 8px 12px}
/* 記録はあるが予定が無い人：予定の案内は小さく横長に */
.dash:has(#dash-week>.dash-chips) #dash-today>.empty{display:grid;grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"art eb act" "art h act" "art p act";column-gap:20px;align-items:center;padding:18px 24px}
.dash:has(#dash-week>.dash-chips) #dash-today>.empty .empty-art{grid-area:art;width:96px;height:96px;float:none;margin:0}
.dash:has(#dash-week>.dash-chips) #dash-today>.empty .eyebrow{grid-area:eb;margin:0}
.dash:has(#dash-week>.dash-chips) #dash-today>.empty h2{grid-area:h;font-size:19px;margin:0}
.dash:has(#dash-week>.dash-chips) #dash-today>.empty>p:not(.eyebrow){grid-area:p;margin:4px 0 0;font-size:14px;color:var(--text-2)}
.dash:has(#dash-week>.dash-chips) #dash-today>.empty ol{display:none}
.dash:has(#dash-week>.dash-chips) #dash-today>.empty .actions{grid-area:act;margin:0;flex-direction:column;align-items:stretch}

/* 学習の予定の一覧（.dash-fold の中） */
.plan-list-title{display:flex;justify-content:space-between;margin-bottom:16px;font-size:16px}
.plan-choice{display:block;width:100%;text-align:left;border-color:var(--line-strong);background:transparent;margin-bottom:8px;padding:14px;line-height:1.5;font-weight:400}
.plan-choice strong,.plan-choice span{display:block;overflow-wrap:anywhere}
.plan-choice strong{margin:3px 0 8px;font-size:16px}
.plan-choice[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent)}
.plan-choice .muted{font-size:14px}
.plan-choice progress{width:100%;height:5px;display:block;margin-top:12px}
.data-tools button{font-size:14px;width:auto;margin:0 8px 8px 0;padding:8px 14px}
.data-tools p{margin-top:10px}
progress{accent-color:var(--accent);border-radius:99px}
progress::-webkit-progress-bar{background:#efe9f7;border-radius:99px}
progress::-webkit-progress-value{background:var(--accent);border-radius:99px}
progress::-moz-progress-bar{background:var(--accent);border-radius:99px}
.plan-title{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:22px;flex-wrap:wrap}
.plan-title h3{font-size:19px;overflow-wrap:anywhere}
.plan-title .muted{margin-top:6px}
.plan-title .actions{flex-shrink:1;max-width:100%;min-width:0}
.today-explain{font-size:14px;color:var(--text-2)}
.today-explain h2{font-size:15px;margin-bottom:10px;color:var(--text)}
.today-explain p+p{margin-top:6px}
.progress-area{margin-bottom:28px}
.progress-label{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
.progress-area progress{width:100%;height:10px;display:block}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;gap:16px}
.metric{border-right:1px solid var(--line);min-width:0}
.metric:last-child{border:0}
.metric dt{font-size:14px;color:var(--text-2)}
.metric dd{font-size:24px;font-weight:800;margin:2px 0 0}
.metric dd small{font-size:14px;font-weight:400}
.section{margin-bottom:0}
.book-row{padding:19px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px}
.book-row h3{overflow-wrap:anywhere}
.book-row .muted{margin-top:6px}
.book-row .actions{justify-content:flex-end}
.book-row progress{width:100%;max-width:340px;height:6px;display:block;margin-top:10px}
.detail-panel{min-width:0;border-top:2px solid var(--line);padding-top:18px;margin-top:18px}
.detail-panel:first-child{border-top:0;margin-top:0;padding-top:0}
.detail-panel h2{font-size:18px;margin-bottom:12px}
.domain-row{display:flex;justify-content:space-between;gap:14px;margin:14px 0;font-size:14px}
.domain-row span:first-child{overflow-wrap:anywhere}
.domain-row span:last-child{flex-shrink:0}
.check{display:flex;align-items:start;gap:10px;margin:12px 0;font-size:15px}
.check input{margin-top:6px;width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}
.round-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.round-progress strong,.round-progress span{display:block}
.round-progress progress{margin-top:6px;height:5px}
.round-progress>div{min-width:0}
.mock-value{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.mock-ratio{font-size:17px;font-weight:700;color:var(--accent)}
.mock-caution{margin-top:14px}
.mock-row{padding:10px 0;border-bottom:1px solid var(--line)}
.mock-row strong{display:block;font-size:19px}
.mock-row .muted{display:block}
.hint{padding:12px 16px;border-left:3px solid var(--accent);margin:16px 0}
.subtle{font-size:14px!important;padding:5px 10px!important;min-height:44px!important}
.danger{color:var(--danger)}

/* 折りたたみ3節 */
.dash-fold{margin:0;box-shadow:none}
.dash-fold+.dash-fold{margin-top:-8px}
.dash-fold summary{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;font-weight:700;font-size:16px;cursor:pointer;list-style:none;color:var(--text)}
.dash-fold summary::-webkit-details-marker{display:none}
.dash-fold summary .chev{color:var(--accent);font-weight:400;transition:transform .15s}
.dash-fold[open] summary .chev{transform:rotate(180deg)}
/* 閉じている折りたたみの中身は配置から外す（描画はされないが、位置が計算に残って「0件」と「⌄」などが重なって数えられていた）。 */
.dash-fold:not([open])>.dash-fold-body{display:none}
.dash-fold-body{padding:18px 22px 22px;border-top:1px solid var(--line)}
.dash-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:4px;font-size:13px;color:var(--text-2)}
#updated-at{font-variant-numeric:tabular-nums}

/* ダイアログ */
dialog{width:min(650px,calc(100% - 28px));max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border:1px solid var(--line-strong);border-radius:var(--r-md);padding:26px;background:var(--bg);color:var(--text)}
dialog::backdrop{background:rgba(41,38,34,.45)}
.dialog-heading{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-bottom:18px}
.dialog-heading h2{font-size:22px}
dialog label.field{display:block;margin:16px 0;font-weight:600}
dialog label.field>span{display:block;margin-bottom:7px}
dialog input:not([type=checkbox]),dialog select,dialog textarea{width:100%;padding:10px;border:1px solid var(--control);border-radius:8px;background:var(--surface);min-height:46px}
dialog textarea{min-height:90px;resize:vertical}
dialog fieldset{margin:18px 0;border:1px solid var(--line);border-radius:10px;padding:12px 16px}
dialog legend{font-weight:700;padding:0 5px}
dialog details{margin:20px 0}
dialog summary{cursor:pointer;font-weight:700;padding:8px 0}
dialog .notice{font-size:14px}
.weekdays{display:flex;flex-wrap:wrap;gap:12px}
.weekdays .check{margin:0}
/* 下に貼り付く登録ボタンの帯。勉強計画の棚のチェック（.tree-box、z-index:1）がスクロールで下に潜ったとき、ボタンの上に出ないよう上に置く（2026-10-13） */
.form-footer{position:sticky;z-index:2;bottom:-26px;background:var(--bg);border-top:1px solid var(--line);padding:18px 0 8px;margin-top:24px}
.form-error{color:var(--danger);white-space:pre-line}
.form-error:not(:empty){margin:16px 0}
.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.date-presets{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.date-preset{padding:7px 14px;min-height:44px;font-size:14px}
.date-preset[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.date-readout{margin:0 0 4px}
.date-custom summary{font-size:14px}
.shelf-picker{display:flex;flex-direction:column;gap:2px}
/* 使う本棚は全部を並べる。以前は max-height:260px の内側スクロールで、iPhone ではスクロールバーが出ず、
   5行目から先（FP3級・数学A・AZ-900・AZ-104・英単語・自作の棚）が切れて見えなかった。長いときはダイアログ全体がスクロールする。 */
/* iOSアプリ（Capacitor）は画面がステータスバーの下まで広がる。シートの上端が時計・電池の下に隠れないよう安全領域の内側に収める。 */
html.is-native dialog[open]{inset-block-start:env(safe-area-inset-top,0px);inset-block-end:env(safe-area-inset-bottom,0px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px)}
.dash-paid-note{margin:8px 0 0;font-size:14px}
/* アプリ内の購入案内は出さない（購入はブラウザ側。native-shell.css が .dpg-paid などを隠すのと同じ扱い）。 */
html.is-native .dash-paid-note{display:none!important}
/* 本棚→冊の木（勉強の予定ダイアログ）。棚の行 = チェック＋棚名＋「選んだ数/全数冊」。長い名前は折り返す。 */
.shelf-picker [hidden]{display:none!important}
.shelf-field>input[type=search]{margin-bottom:8px}
.shelf-picker .tree-shelf{position:relative;border-top:1px solid var(--line)}
.shelf-picker .tree-shelf:first-child{border-top:0}
.shelf-picker .tree-fold{margin:0}
.shelf-picker .tree-head{display:flex;align-items:center;gap:2px;min-height:48px;padding:0 0 0 44px;list-style:none;cursor:pointer;font-weight:400}
.shelf-picker .tree-head::-webkit-details-marker{display:none}
.shelf-picker .tree-head::after{content:"";flex-shrink:0;width:8px;height:8px;margin:0 10px 4px 6px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .15s}
.shelf-picker .tree-fold[open]>.tree-head::after{margin-bottom:-4px;transform:rotate(-135deg)}
.shelf-picker .tree-box{position:absolute;left:0;top:2px;z-index:1;display:grid;place-items:center;width:44px;height:44px;margin:0;cursor:pointer}
.shelf-picker .tree-box input{width:20px;height:20px;margin:0;accent-color:var(--accent)}
.shelf-picker .tree-name{flex:1 1 0;min-width:0;padding:6px 0;font-size:15px;font-weight:700;line-height:1.45;overflow-wrap:anywhere;text-wrap:balance}
.shelf-picker .tree-count{flex-shrink:0;padding-left:6px;font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.shelf-picker .tree-books{margin:0 0 6px 22px;padding-left:10px;border-left:2px solid var(--line)}
.shelf-picker .tree-books .check,.shelf-picker .tree-missing .check{align-items:flex-start;margin:0;padding:10px 0;min-height:44px;cursor:pointer}
.shelf-picker .tree-books .check input,.shelf-picker .tree-missing .check input{margin-top:3px}
.shelf-picker .tree-books .check span,.shelf-picker .tree-missing .check span{min-width:0;line-height:1.5;overflow-wrap:anywhere}
.shelf-picker .tree-missing{border-top:1px solid var(--line);padding-top:6px}

/* ============ 狭い幅 ============ */
@media(max-width:1060px){
  #dash-week{grid-template-columns:minmax(0,1fr)}
  #dash-week>.dash-calendar{grid-column:1;grid-row:3;margin-top:16px;min-height:0}
  .dash{grid-template-columns:minmax(0,1fr) 300px}
}
@media(max-width:1060px){
  /* 1列にしたときは左のカードの地を見出し＋数字だけに付け直す */
  #dash-week:has(>.dash-chips)::before{content:none}
  #dash-week:has(>.dash-chips)>.section-head,#dash-week>.dash-chips{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
  #dash-week:has(>.dash-chips)>.section-head{border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:none}
  #dash-week>.dash-chips{border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:0 14px 24px -14px rgb(124 75 30 / 12%)}
}
@media(max-width:760px){
  .dash{grid-template-columns:minmax(0,1fr);padding:22px 16px 40px;row-gap:16px}
  .dash>*,#dash-shelves,#dash-insight,.dash:has(#dash-insight[hidden]) #dash-review,.dash:has(#dash-week>.empty) #dash-week,.dash:has(#dash-week>.empty) #dash-today{grid-column:1}
  .dash:has(#dash-week>.empty){grid-template-columns:minmax(0,1fr)}
  h1,.dash-heading h1{font-size:30px}
  .dash-heading .muted{font-size:15px}
  #dash-week>.section-head{padding:18px 16px 0}
  #dash-week>.dash-chips{padding:12px 14px 16px}
  #dash-week .dash-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #dash-week .dash-chip{min-height:0;padding:12px 12px 12px 58px;min-height:96px}
  #dash-week .dash-chip::before{position:absolute;left:14px;top:14px;margin:0}
  #dash-week .dash-chip__value{font-size:26px}
  .dash-calendar{padding:58px 14px 44px 40px;--cal-c:19px;--cal-g:4px}
  .dash-calendar{background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='161' viewBox='0 0 14 161'%3E%3Ctext x='0' y='15' font-size='12' font-family='sans-serif' fill='%2365594d'%3E月%3C/text%3E%3Ctext x='0' y='38' font-size='12' font-family='sans-serif' fill='%2365594d'%3E火%3C/text%3E%3Ctext x='0' y='61' font-size='12' font-family='sans-serif' fill='%2365594d'%3E水%3C/text%3E%3Ctext x='0' y='84' font-size='12' font-family='sans-serif' fill='%2365594d'%3E木%3C/text%3E%3Ctext x='0' y='107' font-size='12' font-family='sans-serif' fill='%2365594d'%3E金%3C/text%3E%3Ctext x='0' y='130' font-size='12' font-family='sans-serif' fill='%2365594d'%3E土%3C/text%3E%3Ctext x='0' y='153' font-size='12' font-family='sans-serif' fill='%2365594d'%3E日%3C/text%3E%3C/svg%3E") left 14px top 58px/14px 161px no-repeat}
  .dash-calendar__heading{left:14px;top:14px}
  .dash-calendar__legend{right:14px;bottom:14px}
  /* スマホ：本棚は横にスワイプ（次の1枚が少し見える） */
  #dash-shelves{padding:18px 0 18px 16px}
  #dash-shelves .section-head{padding-right:16px;row-gap:2px}
  .dash-shelf-list,.dash-shelf-list:has(>:nth-child(2):last-child),.dash-shelf-list:has(>:nth-child(4):last-child),.dash-shelf-list:has(>:nth-child(5):last-child){display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 16px 6px 0;scrollbar-width:none;overscroll-behavior-x:contain}
  .dash-shelf-list:has(>:nth-child(5):last-child)>*{grid-column:auto}
  .dash-shelf-list::-webkit-scrollbar{display:none}
  .dash-shelf-card{flex:0 0 84%;scroll-snap-align:start;grid-template-columns:64px minmax(0,1fr)}
  .dash-shelf-card .dash-ring{justify-self:start;margin-left:14px}
  .dash-shelf-list>:only-child{flex-basis:100%;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"title title" "cover ring" "week week" "spark spark" "pace pace" "exam exam";padding:16px}
  .dash-shelf-list>:only-child::before{width:64px}
  .dash-shelf-list>:only-child .dash-ring{width:96px;height:96px}
  .dash-ring{width:96px;height:96px}
  #dash-insight{padding:18px 18px 30px 150px;min-height:0;background-position:left -4px bottom -10px;background-size:150px auto}
  #dash-insight::before{left:18px;top:19px}
  #dash-insight::after{margin-left:-132px;padding-left:36px}
  #dash-insight .dash-insight__text{margin-bottom:10px}
  #dash-insight .dash-insight__heading{padding-left:0;margin-bottom:12px}
  #dash-insight .dash-insight__chip span{padding:0 7px}
  #dash-insight .dash-insight__text::after{left:-11px;bottom:auto;top:30px;transform:rotate(135deg) skew(8deg,8deg)}
  #dash-review [data-role="dash-review-button"]{min-height:64px;padding:8px 16px;font-size:22px;background:var(--grad);color:#fff;border:0;box-shadow:0 3px 0 #4215a8}
  #dash-review [data-role="dash-review-button"]::before{width:42px;height:42px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236535b5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5'/%3E%3C/svg%3E") center/20px 20px no-repeat;box-shadow:none}
  #dash-review [data-role="dash-review-button"]::after{margin-left:auto;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5'/%3E%3C/svg%3E")}
  #dash-review [data-role="dash-review-caption"]{display:none}
  .dash:has(#dash-insight[hidden]) #dash-review{padding:18px 16px 16px;background-position:right 6px top 10px;background-size:104px auto;min-height:0}
  .dash:has(#dash-insight[hidden]) #dash-review [data-role="dash-review-heading"]{left:16px;top:18px}
  .dash:has(#dash-insight[hidden]) #dash-review [data-role="dash-review-caption"]{display:block;left:16px;right:120px;top:50px}
  .dash:has(#dash-insight[hidden]) #dash-review [data-role="dash-review-button"]{margin-top:96px}
  #dash-week>.empty{padding:12px 0 0}
  #dash-week:has(>.empty){padding:18px 16px 170px}
  #dash-week:has(>.empty)::after{right:50%;margin-right:-80px;width:160px;height:164px}
  .dash:has(#dash-week>.empty) .dash-first{grid-template-columns:1fr;padding:16px;order:1}
  .dash:has(#dash-week>.empty) #dash-today{order:2}
  /* 2026-10-16 周8: 予定がまだ無いときは、予定の案内 → 今週のまとめ → 問題集を選んで解く（DOM の順のまま上へ戻す） */
  .dash:has(#dash-week>.empty):has(#dash-today>.dash-noplan) #dash-today{order:0}
  .dash:has(#dash-week>.empty) .dash-fold,.dash:has(#dash-week>.empty) .dash-footer{order:3}
  .today.dash-goal-card{padding:20px 18px}
  .dash-skel{min-height:520px;padding:20px 18px}
  .dash-goal-card__badge{width:72px;height:72px;top:24px;right:24px}
  .dash-goal-card__titlewrap{padding-right:100px}
  .dash-today-goal__num{font-size:48px}
  .dash-goal-card__meter{grid-template-columns:1fr}
  .dash-goal-card__meter .dash-ring{justify-self:center}
  .empty{padding:20px 18px}
  .empty-art{width:96px;height:96px}
  .dash:has(#dash-week>.dash-chips) #dash-today>.empty{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"art eb" "art h" "p p" "act act";padding:16px;row-gap:4px}
  .dash:has(#dash-week>.dash-chips) #dash-today>.empty .empty-art{width:72px;height:72px}
  .dash:has(#dash-week>.dash-chips) #dash-today>.empty .actions{flex-direction:row;margin-top:10px}
  .two-fields{grid-template-columns:1fr;gap:0}
  dialog{padding:20px}
  .form-footer{bottom:-20px}
  .metrics{grid-template-columns:repeat(2,1fr);gap:12px}
  .book-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* 記録なしのとき、主な操作は「問題集を選んで解く」1つにする（予定づくりは控えめな2番手）
   2026-10-16 周8: 予定がまだ無いとき（.dash-noplan）は逆に「学習の予定を立てる」を主ボタン（紫の塗り）に残す（「問題集を選んで解く」の2番手は dpg-pages-b.css） */
.dash:has(#dash-week>.empty) #dash-today>:not(.dash-noplan) .button.primary,.dash:has(#dash-week>.empty) #dash-today>:not(.dash-noplan) button.primary{background:var(--surface);color:var(--accent-ink);border:1.5px solid var(--accent-line);box-shadow:none}
.dash-shelf-list>:only-child .dash-shelf-spark{justify-content:flex-start;gap:14px}
.dash-shelf-list>:only-child [data-role="dash-shelf-pace"]{justify-self:start}

/* スマホ総点検（2026-10-02）: 文章の折り返しで最後の行に2文字だけ残らないようにし、ダイアログの開閉の見出しも 44px にする。 */
.dash-exam-link{text-wrap:balance}
dialog .field>span,dialog .check span{text-wrap:pretty}
dialog summary{min-height:44px;padding:11px 0;box-sizing:border-box}

/* ============ 学習の予定の「進め方」（解く／理解する／両方）と詳細シート（2026-10-03） ============ */
/* 進め方の3択（ダイアログ）。ラジオ自体は見えなくして、文字の箱を押せる所（44px）にする。 */
.mode-field{margin:18px 0}
.mode-switch{display:flex;gap:8px;flex-wrap:wrap}
.mode-option{position:relative;display:block;margin:0;flex:1 1 0;min-width:96px}
dialog .mode-option input[type=radio]{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.mode-option span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1px solid var(--control);border-radius:12px;background:var(--surface);font-weight:700;font-size:15px}
.mode-option input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.mode-option input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.mode-field .muted{margin:8px 0 0}
/* 大きいカード：予定日の行の右に小さな「詳細」。2本目（理解した数）の帯。 */
.dash-goal-card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dash-goal-card__foot .dash-goal-card__meta{margin:0;min-width:0}
.dash-goal-card .dash-goal-card__detail{flex:none;min-height:44px;padding:4px 14px;border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);font-size:14px;font-weight:800}
.dash-goal-lanes{display:flex;flex-direction:column;gap:6px}
.dash-today-goal--second .dash-today-goal__num{font-size:40px;color:var(--accent-ink)}
.dash-today-goal--second .dash-today-goal__unit{font-size:18px}
.dash-lane-bar{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.dash-lane-bar__label{font-size:14px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dash-lane-bar progress{width:100%;height:8px;display:block}
.dash-lane-bar progress::-webkit-progress-value{background:#b8a0f0}
.dash-lane-bar progress::-moz-progress-bar{background:#b8a0f0}
/* 本棚カード：理解した問題の薄い色の帯（円は本番の進みのまま）。 */
.dash-shelf-card .dash-shelf-understood{grid-area:understood;display:flex;flex-direction:column;gap:4px;min-width:0}
.dash-shelf-understood__label{font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dash-shelf-understood progress{width:100%;height:6px;display:block}
.dash-shelf-understood progress::-webkit-progress-value{background:#b8a0f0}
.dash-shelf-understood progress::-moz-progress-bar{background:#b8a0f0}
.dash-shelf-card--understood{grid-template-areas:"title title" "cover ring" "week week" "spark spark" "understood understood" "pace pace" "exam exam"}
.dash-shelf-list>:only-child.dash-shelf-card--understood{grid-template-areas:"cover ring title title" "cover ring week spark" "cover ring understood understood" "cover ring pace exam"}
@media(max-width:760px){
  .dash-shelf-list>:only-child.dash-shelf-card--understood{grid-template-areas:"title title" "cover ring" "week week" "spark spark" "understood understood" "pace pace" "exam exam"}
  .dash-today-goal--second .dash-today-goal__num{font-size:34px}
}
/* 詳細シート。スマホは下から出るシート、PC（761px〜）は中央のダイアログ。並びは dashboard.js の SHEET_SECTIONS。 */
dialog.plan-sheet{width:min(560px,calc(100% - 28px));max-height:90dvh;padding:0;border-radius:var(--r-lg);background:var(--bg);overflow:hidden}
dialog.plan-sheet[open]{display:flex;flex-direction:column}
.plan-sheet__head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 8px 12px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.plan-sheet__head>div{min-width:0;flex:1 1 auto}
.plan-sheet__brand{display:inline-block;margin:0 0 6px;padding-bottom:4px;font-size:13px;font-weight:800;line-height:1.2;background:linear-gradient(90deg,#ff7a9a,#ffb35c,#ffe066,#7ad88f,#6fc3ff,#9b7bff) left bottom/100% 3px no-repeat}
.plan-sheet__title{font-size:22px;line-height:1.35;overflow-wrap:anywhere}
.plan-sheet__when{display:flex;align-items:center;gap:8px;margin:4px 0 0;font-size:15px;font-weight:700;color:var(--text)}
.plan-sheet__when .plan-icon{flex:none;width:22px;height:22px;color:var(--accent)}
.plan-sheet__days{margin:0 2px;font-size:26px;line-height:1;font-weight:800;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.plan-sheet__pose{flex:none;display:block;width:64px;height:64px;object-fit:contain;border-radius:50%;background:#f3ecff}
.plan-sheet .plan-sheet__close{flex:none;width:44px;height:44px;min-width:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-2);font-size:26px;line-height:1;font-weight:400}
.plan-sheet .plan-sheet__close:hover{background:var(--surface-2);color:var(--text)}
.plan-sheet__body{--tl-purple:#7c4ddb;--tl-blue:#3b9cf5;--tl-coral:#f2685f;--tl-yellow:#f2b01e;--tl-green:#34b866;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 14px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:18px}
/* タイムライン: 節（見出し）の左に色つきの丸、丸から次の丸へ縦の線 */
.plan-sheet__section{position:relative;min-width:0;padding:0 0 0 32px}
.plan-sheet__section[data-tone="purple"]{--tl:var(--tl-purple)}
.plan-sheet__section[data-tone="blue"]{--tl:var(--tl-blue)}
.plan-sheet__section[data-tone="coral"]{--tl:var(--tl-coral)}
.plan-sheet__section[data-tone="yellow"]{--tl:var(--tl-yellow)}
.plan-sheet__section[data-tone="green"]{--tl:var(--tl-green)}
.plan-sheet__section::before{content:"";position:absolute;left:1px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--tl);box-shadow:0 0 0 4px var(--bg),0 0 0 6px color-mix(in srgb,var(--tl) 28%,transparent)}
.plan-sheet__section::after{content:"";position:absolute;left:8px;top:26px;bottom:-14px;width:2px;border-radius:2px;background:linear-gradient(var(--tl),var(--tl-to,var(--tl)))}
.plan-sheet__section:last-child::after{display:none}
.plan-sheet__h{font-size:17px;line-height:1.4;margin:0 0 8px}
.plan-sheet__card{min-width:0;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.plan-sheet__empty{margin:0;font-size:15px;line-height:1.7;color:var(--text-2);overflow-wrap:anywhere}
.plan-sheet__emptybox{display:flex;align-items:center;gap:12px}
.plan-sheet__emptybox>p{flex:1 1 0;min-width:0}
.plan-sheet__pose-big{flex:none;display:block;width:120px;height:120px;object-fit:contain;border-radius:50%;background:#f3ecff}
.plan-sheet__note{margin:8px 0 0;text-wrap:balance}
.plan-icon{display:inline-block;flex:none;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plan-icon .is-fill{fill:currentColor}
.plan-chart__svg{display:block;width:100%;height:auto;max-height:240px}
.plan-chart__grid{stroke:var(--line);stroke-width:1}
.plan-chart__tick,.plan-chart__md{font-size:11px;fill:var(--text-2);font-variant-numeric:tabular-nums}
.plan-chart__solved{fill:#6535b5}
.plan-chart__understood{fill:#8fc4f8}
.plan-chart__none{fill:#efe9f7}
.plan-chart__in{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.plan-chart__in--solved{fill:#fff}
.plan-chart__in--understood{fill:#0f3660}
.plan-chart__total{font-size:12px;font-weight:800;fill:var(--text);font-variant-numeric:tabular-nums}
.plan-chart__wd{font-size:13px;font-weight:700;fill:var(--text)}
.plan-chart__wd.is-today{fill:var(--accent)}
.plan-chart__wd.is-none,.plan-chart__md.is-none{fill:#a89cb8}
.plan-chart__legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0 0;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.plan-chart__key{display:inline-flex;align-items:center;gap:6px}
.plan-chart__swatch{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none}
.plan-chart__swatch--solved{background:#6535b5}
.plan-chart__swatch--understood{background:#8fc4f8}
.plan-goal{display:flex;flex-direction:column;gap:14px}
.plan-goal__row{display:flex;align-items:center;gap:14px}
.plan-goal__ringwrap{position:relative;flex:none;width:76px;height:76px}
.plan-goal__ring{width:100%;height:100%;transform:rotate(-90deg)}
.plan-goal__track{fill:none;stroke:#efe9f7;stroke-width:8}
.plan-goal__fill{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round}
.plan-goal__row[data-lane="understand"] .plan-goal__fill{stroke:#8fc4f8}
.plan-goal__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.plan-goal__center b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.plan-goal__center small{font-size:11px;color:var(--text-2);font-variant-numeric:tabular-nums}
.plan-goal__info{flex:1 1 auto;min-width:0}
.plan-goal__line{margin:0 0 8px;font-size:16px;font-weight:800;overflow-wrap:anywhere}
.plan-goal__info progress{width:100%;height:8px;display:block}
.plan-goal__row[data-lane="understand"] progress::-webkit-progress-value{background:#8fc4f8}
.plan-goal__row[data-lane="understand"] progress::-moz-progress-bar{background:#8fc4f8}
.plan-goal__sub{display:inline-block;max-width:100%;margin:8px 0 0;padding:4px 10px;border-radius:99px;background:#f3ecff;color:var(--accent-ink);font-size:13px;font-weight:700;overflow-wrap:anywhere}
.plan-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.plan-stat{min-width:0;padding:8px 3px 9px;border:1px solid transparent;border-radius:12px;text-align:center}
.plan-stat--purple{background:#f6f1ff;border-color:#e6dbfb;--ic:#8c5ee6}
.plan-stat--coral{background:#fff0ef;border-color:#fbd9d6;--ic:#ec5b52}
.plan-stat--blue{background:#eaf4ff;border-color:#cfe5fb;--ic:#2f8ae6}
.plan-stat--green{background:#eaf8ee;border-color:#cdeed7;--ic:#26a655}
.plan-stat__label{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 0 4px;font-size:11px;line-height:1.25;font-weight:700;color:var(--text-2);white-space:nowrap}
.plan-stat__label .plan-icon{width:18px;height:18px;color:var(--ic)}
.plan-stat__value{margin:0;font-size:20px;line-height:1.2;font-weight:800;color:#2a1860;font-variant-numeric:tabular-nums;white-space:nowrap}
.plan-stat__value small{margin:0 1px;font-size:11px;font-weight:700;color:var(--text-2)}
.plan-sheet__section[data-role="plan-detail-pace"]{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:12px}
.plan-sheet__section[data-role="plan-detail-pace"]>.plan-sheet__h{margin:0}
.plan-pace{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;padding:8px 16px;border:1px solid #e6dbfb;border-radius:12px;background:#f6f1ff}
.plan-pace .plan-icon{width:24px;height:24px;color:var(--accent)}
.plan-pace__value{font-size:26px;line-height:1.2;font-weight:800;color:#2a1860;font-variant-numeric:tabular-nums}
.plan-pace__note{grid-column:1/-1;margin:6px 0 0;font-size:13px}
.plan-domains{display:flex;flex-direction:column;gap:12px}
.plan-domain{display:grid;grid-template-columns:minmax(0,6.5em) minmax(0,1fr) 3.2em;align-items:center;gap:10px}
.plan-domain__name{display:flex;flex-direction:column;min-width:0;line-height:1.3;overflow-wrap:anywhere}
.plan-domain__name b{font-size:14px;font-weight:700}
.plan-domain__name small{font-size:11px;color:var(--text-2)}
.plan-domain progress{width:100%;height:10px;display:block}
.plan-domain__pct{text-align:right;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.plan-domains .plan-sheet__note{margin:0}
@media(max-width:359px){.plan-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  dialog.plan-sheet{width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0}
}
@media(prefers-reduced-motion:no-preference){
  dialog.plan-sheet[open]{animation:plan-sheet-in .22s ease-out}
  @keyframes plan-sheet-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}