/* ===========================================================================
   dpg-t-pcnav.css — 区間T4 担当D1（2026-10-28。関所4 Q8・Q9）
   PC の「左に機能（畳める）＋真ん中」の2列。本人だけに見える（dpg-t-pcnav.js が <html data-dpg-pcnav="on"> を付けた時だけ効く）。
   1024px 以上（今の左のメニューの幅）だけ。スマホの下のメニューと iPhone アプリの中（html.is-native）は何も変えない。
   色・角丸は今の左のメニュー（nav-compact.css・mode-switch.css）と同じ値を使う（新しい色は作らない）。nav-compact.css の後に読む。
   2026-10-28 区間T4 直し係A（検査役 小2）: 色はトークン（dpg-pages-a.css の :root の --g-*。値は design/dpg/00-tokens.css の紙の配色と同じ）で書く。
   左のメニューは --g-* を読まないページ（about・mac・company・勉強計画 など）にも出るので、var() の2つ目に同じ値を置く（そのページでも同じ色）。
   影の色は字の色（--g-ink）を薄めた物（color-mix）。区切りの線と QR の枠は、同じ値のトークンが無いので線のトークン --g-line にした（前の #eee5da・#f0e2d0 より少し濃い）。
   =========================================================================== */

/* 足した物は、PC の幅でだけ出す（下のメニューの5つの並びを変えない） */
.dpg-pcnav__menu, .dpg-pcnav__line, .dpg-pcnav__sub, .dpg-pcnav__phone, .dpg-pcnav__store { display: none; }
/* 直し係A（検査役 小3）: ホームの紫のカードの下の「今日の目安の進み＋勉強計画：名前（試験日）」（views.js の buildPcPlanLine）。
   前に右の「今日」の列があった幅（1280px 以上）だけ出す。棒とリンクの見た目は前の列の物（desktop-layout.css）のまま */
.dpg-pcplan { display: none; }
@media (min-width: 1280px) {
  html:not(.is-native)[data-dpg-pcnav="on"] .dpg-pcplan { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--g-s2, 16px); margin: calc(-1 * var(--g-s1, 8px)) 0 0; }
  html:not(.is-native)[data-dpg-pcnav="on"] .dpg-pcplan__label { font-size: var(--g-fs-small, 14px); font-weight: 700; color: var(--g-ink-2, #65594d); }
  html:not(.is-native)[data-dpg-pcnav="on"] .dpg-pcplan__bar { flex: 0 0 160px; }
  html:not(.is-native)[data-dpg-pcnav="on"] .dpg-pcplan__link:focus-visible { outline: 3px solid var(--g-accent, #6535b5); outline-offset: 2px; }
}

@media (min-width: 1024px) {
  html:not(.is-native)[data-dpg-pcnav="on"] { --dpg-appnav-wide: 240px; }

  /* 左上の「≡」と名前ボタン（顔とアプリ名）を1行に */
  html:not(.is-native)[data-dpg-pcnav="on"] .appnav--quiz .appnav__switch { display: flex; align-items: center; gap: 2px; }
  html:not(.is-native)[data-dpg-pcnav="on"] .appnav--quiz .appnav__switch .switcher { flex: 1 1 auto; min-width: 0; gap: 4px; padding-right: 2px; }
  html:not(.is-native)[data-dpg-pcnav="on"] .dpg-pcnav__menu {
    display: grid; place-items: center; flex: none; position: relative; box-sizing: border-box;
    width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--g-ink-2, #65594d); cursor: pointer;
  }
  html:not(.is-native)[data-dpg-pcnav="on"] .dpg-pcnav__menu svg { width: 22px; height: 22px; }
  html:not(.is-native)[data-dpg-pcnav="on"] .dpg-pcnav__menu:hover { background: var(--g-accent-soft, #f3edff); color: var(--g-accent, #6535b5); }
  html:not(.is-native)[data-dpg-pcnav="on"] .dpg-pcnav__menu:focus-visible { outline: 3px solid var(--g-accent, #6535b5); outline-offset: 3px; }
  /* 下の「メニューを畳む」は同じ働きの「≡」が上にあるので見た目だけ隠す（data-role は残る） */
  html:not(.is-native)[data-dpg-pcnav="on"] .appnav--quiz > .appnav__fold { display: none; }

  /* 行き先5つはスマホの下のナビと同じ順（今の PC は問題集を先頭へ回していた＝mode-switch.css の order） */
  html:not(.is-native)[data-dpg-pcnav="on"] .appnav--quiz .appnav__item--main { order: 0; }

  /* 細い線と、勉強ログ・できること・設定 */
  html:not(.is-native)[data-dpg-pcnav="on"] .dpg-pcnav__line { display: block; flex: none; width: auto; height: 0; margin: 8px 6px; border: 0; border-top: 1px solid var(--g-line, #e5cdb8); }
  html:not(.is-native)[data-dpg-pcnav="on"] .appnav--quiz .dpg-pcnav__sub { display: flex; }
  html:not(.is-native)[data-dpg-pcnav="on"] .appnav--quiz .dpg-pcnav__sub svg { width: 22px; height: 22px; flex: none; }

  /* iPhone アプリ（今のリンク・今の QR の絵）。96px の白い箱＋「iPhone アプリ」＋「App Store で見る ›」 */
  html:not(.is-native)[data-dpg-pcnav="on"] .appnav--quiz .appnav__app { gap: 6px; padding: 12px 10px 10px; }
  html:not(.is-native)[data-dpg-pcnav="on"] .appnav--quiz .appnav__app-qr { order: -1; width: 84px; height: 84px; padding: 6px; border: 1px solid var(--g-line, #e5cdb8); }
  html:not(.is-native)[data-dpg-pcnav="on"] .appnav--quiz .appnav__app-head { align-self: center; justify-content: center; }
  /* 直し係A（検査役 小3）: QR の下の一言「Web の記録はアプリでも続きから」は今の左のメニューと同じく出す（高さ 640px 未満は今と同じく隠す＝nav-compact.css） */
  html:not(.is-native)[data-dpg-pcnav="on"] .appnav--quiz .appnav__app-icon { display: none; }
  html:not(.is-native)[data-dpg-pcnav="on"] .appnav--quiz .dpg-pcnav__store { display: block; font-size: 14px; font-weight: 800; line-height: 1.4; color: var(--g-accent, #6535b5); }
  /* ホームとマイページだけ（dpg-t-pcnav.js の data-dpg-pcnav-qr）。出題中・ほかのページは出さない */
  html:not(.is-native)[data-dpg-pcnav="on"]:not([data-dpg-pcnav-qr="on"]) .appnav--quiz :is(.appnav__app, .dpg-pcnav__phone) { display: none !important; }
  /* 広い時は、行き先の後の空きを取って QR を下の端へ（今の形と同じ） */
  html:not(.is-native)[data-dpg-pcnav="on"] .appnav--quiz .appnav__app { margin: auto 0 0; }

  /* ---- 畳んだ時（64px）: 絵だけ。名前は読み上げと、指を置いた時の札（今の nav-compact.css の札と同じ） ---- */
  /* 押す所を 44px にする（今の畳んだ形は左右 10px の余白で 43px だった） */
  html:not(.is-native)[data-dpg-pcnav="on"][data-appnav="icons"] .appnav--quiz { padding-left: 9px; padding-right: 9px; }
  html:not(.is-native)[data-dpg-pcnav="on"][data-appnav="icons"] .appnav--quiz .appnav__switch { flex-direction: column; align-items: flex-start; gap: 4px; }
  html:not(.is-native)[data-dpg-pcnav="on"][data-appnav="icons"] .appnav--quiz .dpg-pcnav__sub { justify-content: flex-start; gap: 0; padding: 0 11px; font-size: 0; line-height: 0; letter-spacing: 0; }
  html:not(.is-native)[data-dpg-pcnav="on"][data-appnav="icons"] .dpg-pcnav__menu svg { transform: none; }
  html:not(.is-native)[data-dpg-pcnav="on"][data-appnav="icons"] .dpg-pcnav__menu:is(:hover, :focus-visible)[data-tip]::after,
  html:not(.is-native)[data-dpg-pcnav="on"][data-appnav="icons"] .appnav--quiz .dpg-pcnav__phone:is(:hover, :focus-visible)[data-tip]::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 18px); top: 50%; transform: translateY(-50%); z-index: 40;
    padding: 6px 10px; border-radius: 8px; background: var(--g-ink, #292622); color: var(--g-surface, #ffffff);
    font-size: 14px; font-weight: 800; line-height: 1.3; letter-spacing: 0; white-space: nowrap; pointer-events: none;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--g-ink, #292622) 12%, transparent);
  }
  /* スマホの絵1つ。押すと QR（今のリンク）を右に出す */
  html:not(.is-native)[data-dpg-pcnav="on"][data-appnav="icons"] .appnav--quiz .dpg-pcnav__phone {
    display: flex; justify-content: flex-start; gap: 0; margin-top: auto; padding: 0 11px; border: 0; background: none; font: inherit; font-size: 0; line-height: 0; cursor: pointer;
  }
  html:not(.is-native)[data-dpg-pcnav="on"][data-appnav="icons"] .appnav--quiz .dpg-pcnav__phone svg { width: 22px; height: 22px; flex: none; }
  html:not(.is-native)[data-dpg-pcnav="on"][data-appnav="icons"] .appnav--quiz .dpg-pcnav__phone[aria-expanded="true"] { background: var(--g-accent-soft, #f3edff); color: var(--g-accent, #6535b5); }
  html:not(.is-native)[data-dpg-pcnav="on"][data-appnav="icons"] .appnav--quiz .appnav__app { display: none; }
  html:not(.is-native)[data-dpg-pcnav="on"][data-appnav="icons"] .appnav--quiz[data-qr-open] .appnav__app {
    display: flex; position: absolute; left: calc(100% + 12px); bottom: 12px; z-index: 40; width: 168px; margin: 0; padding: 12px 10px 10px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--g-ink, #292622) 16%, transparent);
  }
  html:not(.is-native)[data-dpg-pcnav="on"][data-appnav="icons"] .appnav--quiz[data-qr-open] :is(.appnav__app-name, .appnav__app-qr, .appnav__app-note, .dpg-pcnav__store) { display: block; position: static; box-shadow: none; }
  html:not(.is-native)[data-dpg-pcnav="on"][data-appnav="icons"] .appnav--quiz .appnav__app-qr { border: 1px solid var(--g-line, #e5cdb8); }
}

/* 高さが低い PC（640px 未満）は、今と同じく QR の絵を指を置いた時だけにする（nav-compact.css の決まり）。その時も「App Store で見る ›」は出す */
@media (min-width: 1024px) and (max-height: 639.98px) {
  html:not(.is-native)[data-dpg-pcnav="on"] .appnav--quiz .dpg-pcnav__line { margin: 4px 6px; }
}