/* =========================================================================
   ボキイヌ Web 専用のスタイル
   ここに書いたものは iOS アプリには入らない。
   app/sync-web.sh がアプリ用の www を作るとき、この読み込みを消している。
   幅のメディアクエリだけで守るのは「同じファイルに入っている」状態であり、
   分かれているとは言えないため。

   アプリは電話1台ぶんの縦長。Web は横に広い。
   同じ部品を引き伸ばすのではなく、Web には Web の置き方をする。
   ========================================================================= */

/* =========================================================================
   v2 / 画面の広さに応じた作り
   電話の作法をそのまま広い画面に置くと壊れる。実測すると 1440px のとき
   本文は 520px しか無く、右に 720px の死に地ができ、タブのボタン1つが
   278px あった。下端はマウスでいちばん遠い場所でもある。
   広い画面では左のサイドバーに組み替える。DOM は #nvtab のまま使う。

   セレクタに body を挟んでいるのは、電話用の
   html.v2 body.nvhomeon .wrap{max-width:520px} と同じ強さにするため。
   これを外すと負ける。
   ========================================================================= */

/* v1 の名残の打ち消し。#nav を消したのに余白だけが全幅で残っていた */
html.v2 body .wrap{margin-left:0;}
html.v2 body #ftr{margin-left:0;}
.nvtab-brand{display:none;}

@media(min-width:900px){
  html.v2:not(.lp){--sbw:216px;}

  /* 下のタブバー → 左のサイドバー */
  html.v2:not(.lp) body #nvtab{
    left:0;right:auto;top:0;bottom:0;width:var(--sbw);
    flex-direction:column;align-items:stretch;gap:3px;
    border-top:none;border-right:1px solid var(--bd);
    padding:20px 12px calc(20px + var(--sab,0px));}
  html.v2:not(.lp) body #nvtab .nvtab-brand{
    display:block;padding:4px 14px 18px;font-size:17px;font-weight:900;
    color:var(--navy);letter-spacing:-.02em;line-height:1.2;}
  html.v2:not(.lp) body #nvtab .nvtab-brand small{
    display:block;font-size:10.5px;font-weight:700;color:var(--dim);
    letter-spacing:.14em;margin-top:3px;}

  html.v2:not(.lp) body #nvtab button{
    flex:0 0 auto;flex-direction:row;justify-content:flex-start;
    gap:13px;padding:11px 14px;border-radius:12px;opacity:1;color:var(--tx2);}
  html.v2:not(.lp) body #nvtab button .nvic{width:21px;height:21px;flex:none;}
  /* html.sunset が電話用にラベルを消しているので、display から戻す */
  html.v2:not(.lp) body #nvtab button i{
    display:block;font-size:14px;font-weight:700;letter-spacing:0;color:var(--tx2);}
  html.v2:not(.lp) body #nvtab button:hover{background:var(--lt);}
  html.v2:not(.lp) body #nvtab button.on{background:var(--lt);color:var(--blue);}
  html.v2:not(.lp) body #nvtab button.on i{color:var(--blue);font-weight:800;}
  html.v2:not(.lp) body #nvtab button.on .nvic{color:var(--blue);}

  /* 先生と話している画面では、AIの入口を重ねて出さない。
     同じことをする導線が3つ見えていると、どれを押すか迷う */
  html.v2:not(.lp) body:has(.tc) #wfab .wfab-ai,
  html.v2:not(.lp) body:has(.tc) .wr-ai{display:none;}


  /* 先生タブの入力欄。サイドバーの右に収め、本文と同じ幅で中央に置く */
  html.v2:not(.lp) body .tc-foot{left:var(--sbw);padding-left:34px;padding-right:34px;}
  html.v2:not(.lp) body .tc-foot > *{max-width:640px;width:100%;margin:0 auto;}

  /* 音のオンオフ。サイドバーの一番下に落として、行き先のある項目と分ける */
  html.v2:not(.lp) body #nvtab .nvsnd{
    display:flex;margin-top:auto;padding-top:10px;border-top:1px solid var(--bd);
    display:flex;flex-direction:column;gap:2px;}
  html.v2:not(.lp) body #nvtab .nvsnd button{
    display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
    gap:13px;padding:8px 14px;border-radius:12px;
    background:none;border:none;color:var(--tx2);font-family:inherit;cursor:pointer;}
  html.v2:not(.lp) body #nvtab .nvsnd button:hover{background:var(--lt);}
  html.v2:not(.lp) body #nvtab .nvsnd .nvic{width:19px;height:19px;flex:none;color:var(--dim);}
  html.v2:not(.lp) body #nvtab .nvsnd i{
    flex:1;font-style:normal;font-size:13px;font-weight:700;color:var(--tx2);text-align:left;}
  html.v2:not(.lp) body #nvtab .nvsnd .nvsw{transform:scale(.78);transform-origin:right center;}

  /* 本文。サイドバーの右で、読める幅に収めて中央に置く */
  html.v2:not(.lp) body .wrap{
    margin-left:var(--sbw);margin-right:0;max-width:none;
    padding:30px 34px 60px;}
  html.v2:not(.lp) body.nvhomeon .wrap{
    margin-left:var(--sbw);max-width:none;padding:22px 34px 60px;}
  html.v2:not(.lp) body .wrap>*{
    max-width:820px;margin-left:auto;margin-right:auto;}
  html.v2:not(.lp) body .page.noRail{max-width:820px;}
  html.v2:not(.lp) body #ftr{
    margin-left:var(--sbw);max-width:none;padding:24px 34px 40px;}
  html.v2:not(.lp) body #ftr>*{max-width:820px;margin-left:auto;margin-right:auto;}

  /* 上のHUDは本文と同じ幅で貼りつく。画面いっぱいに伸ばさない */
  html.v2:not(.lp) body .nvbar-top{
    max-width:820px;margin-left:auto;margin-right:auto;top:0;
    padding-top:14px;padding-bottom:10px;}

  /* 電卓と下のバーもサイドバーを避ける */
  html.v2:not(.lp) body .calcbtn{bottom:26px;right:26px;}
  html.v2:not(.lp) body #calc{bottom:88px;}
  html.v2:not(.lp) body #solvebar{left:var(--sbw);bottom:0;}
}

/* さらに広い画面。本文をこれ以上伸ばさず、余白として使う */
@media(min-width:1500px){
  html.v2:not(.lp) body .wrap{padding-left:56px;padding-right:56px;}
}

/* タブレット縦・大きめの電話。まだ下のタブバーだが、本文が広がりすぎる。
   ホーム(nvhomeon)は 520px に締まるのに、それ以外の画面は野放しだった */
@media(min-width:600px) and (max-width:899px){
  html.v2:not(.lp) body .wrap>*{max-width:620px;margin-left:auto;margin-right:auto;}
  html.v2:not(.lp) body .page.noRail{max-width:620px;}
  html.v2:not(.lp) body .nvbar-top{max-width:620px;margin-left:auto;margin-right:auto;}
  html.v2:not(.lp) body #ftr>*{max-width:620px;margin-left:auto;margin-right:auto;}
}

/* 中間(タブレット横・小さいノート)。サイドバーを細くして本文を優先する */
@media(min-width:900px) and (max-width:1100px){
  html.v2:not(.lp){--sbw:180px;}
  html.v2:not(.lp) body #nvtab button i{font-size:13px;}
  html.v2:not(.lp) body .wrap,
  html.v2:not(.lp) body.nvhomeon .wrap{padding-left:22px;padding-right:22px;}
}

/* =========================================================================
   右のレール（全画面共通）
   電話は縦長1台ぶんなので、上から下へ積むしかない。
   横に広い画面では、役割で左右に分けたほうが素直:
     左  その画面の主役 … 上下に流れる
     右  いまの状態     … 常に見えていてよい。縦を食わせない
   右は貼りつくので、下まで見ても「きょう何件やったか」が視界から消えない。

   中身は画面によらず同じにしてある。画面ごとに変えると
   「いつもそこにある」という利点が消えるため。
   ========================================================================= */

/* 1000px 未満では出さない。2段にすると両方が狭くなって、どちらも読めない。
   .page は既定で「本文 + 300px」の2列なので、レールを消すだけだと
   空の列が残って本文が潰れる。列そのものを1本に戻すこと */
/* 既定では出さない。出すのは「広い画面のアプリ側」だけ。
   これをメディアクエリの中に閉じ込めていたため、LP でも 1000px 以上だと
   レールが出てしまっていた */
.pgr{display:none;}
@media(max-width:999px){
  html.v2 body .page{grid-template-columns:minmax(0,1fr);}
}
html.lp body .page{grid-template-columns:minmax(0,1fr)!important;}

@media(min-width:1000px){
  html.v2:not(.lp) body .wrap>*{max-width:1000px;}
  html.v2:not(.lp) body .page{
    display:grid;grid-template-columns:minmax(0,1fr) 336px;
    column-gap:30px;align-items:start;max-width:1000px;}
  html.v2:not(.lp) body .page.noRail{grid-template-columns:minmax(0,1fr);}
  /* 本文の頭に合わせる。top を決め打ちしていたので、画面の頭とずれていた。
     画面より高くなったときだけレールの中でスクロールさせる */
  html.v2:not(.lp) body .pgr{
    display:block;position:sticky;top:24px;
    max-height:calc(100dvh - 48px);overflow-y:auto;
    scrollbar-width:thin;}
  html.v2:not(.lp) body .pgr::-webkit-scrollbar{width:6px;}
  html.v2:not(.lp) body .pgr::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px;}

  .wrail{display:flex;flex-direction:column;gap:12px;}
  .wr-card{display:block;width:100%;text-align:left;font-family:inherit;
    background:var(--card);border:2px solid var(--bd);border-radius:14px;
    padding:14px 16px;color:var(--navy);}
  button.wr-card{cursor:pointer;}
  button.wr-card:hover{border-color:var(--blue);}
  button.wr-card:active{transform:translateY(1px);}
  .wr-h{display:block;font-size:11px;font-weight:800;color:var(--tx2);
    letter-spacing:.04em;margin-bottom:5px;}
  .wr-big{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;}
  .wr-big b{font-size:27px;font-weight:900;letter-spacing:-.02em;line-height:1.1;}
  .wr-big b.ok{color:var(--ok);} .wr-big b.ng{color:var(--blue);}
  .wr-big s{text-decoration:none;font-size:12.5px;color:var(--tx2);font-weight:700;}
  .wr-big u{text-decoration:none;font-size:12px;color:var(--tx2);font-weight:700;}
  .wr-sub{display:block;font-size:11px;color:var(--dim);margin-top:6px;line-height:1.6;}

  /* きょうの進み */
  .wr-track{display:block;height:7px;border-radius:99px;background:var(--lt);
    overflow:hidden;margin-top:9px;}
  .wr-track i{display:block;height:100%;background:var(--blue);border-radius:99px;}

  /* 見通し。合格ラインの位置に印を立てる */
  .wr-gauge{display:block;position:relative;height:7px;border-radius:99px;
    background:var(--lt);overflow:visible;margin-top:9px;}
  .wr-gauge i{display:block;height:100%;border-radius:99px;background:var(--blue);}
  .wr-gauge i.ok{background:var(--ok);}
  .wr-gauge em{position:absolute;top:-3px;width:2px;height:13px;
    background:var(--navy);border-radius:1px;}

  /* メダル */
  .wr-medal{display:flex;align-items:center;gap:11px;}
  .wr-medal .bic{width:30px;height:30px;flex:none;}
  .wr-mt{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .wr-mt b{font-size:12.5px;font-weight:800;}
  .wr-mt i{font-style:normal;font-size:10.5px;color:var(--dim);}

  /* 相棒 */
  .wr-dog{display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:12px 0 9px;}
  .wr-dog canvas{image-rendering:pixelated;width:72px!important;height:72px!important;}
  .wr-dogn{font-style:normal;font-size:11px;font-weight:800;color:var(--tx2);}

  /* ホームは電話のアプリシェル(画面高に固定＋内部スクロール)。
     Web ではページごと流す。上の帯はレールと役割が重なるので出さない */
  html.v2:not(.lp) body .nvhome2{height:auto;}
  html.v2:not(.lp) body .nvhome2>.nvstick,
  html.v2:not(.lp) body .nvhome2>.nvsep{display:none;}
  html.v2:not(.lp) body .nvhome2>.nvscroll{overflow:visible;flex:none;padding-top:4px;}
  /* 相棒はレールに居る。道の中の1匹は電話用なので消す */
  html.v2:not(.lp) body .nvtl>.nvdog2{display:none;}
  html.v2:not(.lp) body.nvhomeon .wrap{max-width:none;}

  /* 上に戻るボタンは、サイドバーを避ける */
  html.v2:not(.lp) body .nvtop{right:auto;left:calc(var(--sbw) + 18px);bottom:22px;}
}

/* -------------------------------------------------------------------------
   HUD をレールの上へ
   電話では本文の上に横一杯で置いている。これは「状態」であって
   その画面の主役ではない。広い画面では状態どうしを右にまとめ、
   本文の上を空けて進む道を主役にする。
   ------------------------------------------------------------------------- */
@media(min-width:1000px){
  /* 本文側の HUD は出さない。レールに移した */
  html.v2:not(.lp) body .nvbar-top,
  html.v2:not(.lp) body .nvhome2>.nvbar{display:none!important;}

  .wr-hud{padding:2px 2px 6px;}
  .wr-hud .nvbar{position:static;background:none;box-shadow:none;
    padding:0;margin:0;gap:10px;display:flex;align-items:center;flex-wrap:wrap;}
  /* レベルの帯は幅を食うので、狭い欄では1行使わせる */
  .wr-hud .nvbar .lvp{flex:1 1 100%;order:-1;margin-bottom:2px;}
  .wr-hud .nvbar .nvsp{display:none;}
}

/* 本文の頭。HUD が抜けたぶん、道の始まりが画面の上端に貼りついていた */
@media(min-width:1000px){
  html.v2:not(.lp) body .nvhome2>.nvscroll{padding-top:14px;}
  html.v2:not(.lp) body .pgc>.nvhub{padding-top:6px;}
}

/* -------------------------------------------------------------------------
   レールのカード（Duolingo の寸法に合わせる）
   向こうは 2px の枠だけで塗りは無し、角丸16px、内側20px、カード間16px。
   見出し18px太字 / 本文14.5px・行間1.6 / アイコン56px / ボタン46px高。
   こちらは字が小さすぎて情報量だけ多かったので、そこに寄せる。
   ------------------------------------------------------------------------- */
@media(min-width:1000px){
  .wrail{display:flex;flex-direction:column;gap:16px;}
  .wr-card{display:block;width:100%;text-align:left;font-family:inherit;
    background:var(--card);border:2px solid var(--bd);border-radius:16px;
    padding:18px 20px;color:var(--navy);}
  button.wr-card{cursor:pointer;}
  button.wr-card:hover{border-color:var(--blue);}
  button.wr-card:active{transform:translateY(1px);}

  /* ── 固定：きょう ── */
  .wr-day{padding:0;overflow:hidden;}
  .wr-dayhead{display:block;width:100%;text-align:left;border:none;background:none;
    font-family:inherit;cursor:pointer;padding:18px 20px 14px;color:inherit;}
  .wr-dayhead:hover{background:var(--lt);}
  .wr-h{display:block;font-size:12.5px;font-weight:700;color:var(--tx2);
    letter-spacing:.02em;margin-bottom:8px;}
  .wr-pt{display:flex;align-items:baseline;gap:7px;}
  .wr-pt b{font-size:30px;font-weight:900;color:var(--dim);line-height:1;}
  .wr-pt em{font-style:normal;font-size:16px;color:var(--dim);}
  .wr-pt u{text-decoration:none;font-size:34px;font-weight:900;color:var(--blue);line-height:1;}
  .wr-pt s{text-decoration:none;font-size:14px;font-weight:800;color:var(--navy);}

  .wr-fore{padding:14px 20px;border-top:2px solid var(--bd);}
  .wr-fh{display:block;font-size:12px;font-weight:700;color:var(--tx2);margin-bottom:5px;}
  .wr-fn{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
  .wr-fn b{font-size:28px;font-weight:900;line-height:1;}
  .wr-fn b.ok{color:var(--ok);} .wr-fn b.ng{color:var(--blue);}
  .wr-fn u{text-decoration:none;font-size:13px;font-weight:800;}
  .wr-fn s{text-decoration:none;font-size:12px;color:var(--tx2);margin-left:4px;}
  .wr-gauge{display:block;position:relative;height:8px;border-radius:99px;
    background:var(--lt);margin-top:10px;}
  .wr-gauge i{display:block;height:100%;border-radius:99px;background:var(--blue);}
  .wr-gauge i.ok{background:var(--ok);}
  .wr-gauge em{position:absolute;top:-3px;width:2px;height:14px;
    background:var(--navy);border-radius:1px;}

  .wr-prog{padding:13px 20px 16px;border-top:2px solid var(--bd);}
  .wr-track{display:block;height:8px;border-radius:99px;background:var(--lt);overflow:hidden;}
  .wr-track i{display:block;height:100%;background:var(--blue);border-radius:99px;}
  .wr-psub{display:block;font-size:12px;color:var(--tx2);margin-top:8px;font-weight:700;}

  /* ── 節目：アカウント（Duolingo と同じく緑と青のボタンを積む） ── */
  .wr-acct h3{font-size:18px;font-weight:900;letter-spacing:-.01em;margin:0 0 8px;
    line-height:1.4;}
  .wr-acct p{font-size:14px;line-height:1.65;color:var(--tx2);margin:0 0 16px;}
  .wr-acct p b{color:var(--navy);}
  .wr-b{display:block;width:100%;height:46px;border:none;border-radius:12px;
    font-family:inherit;font-size:14.5px;font-weight:900;cursor:pointer;
    letter-spacing:.02em;}
  /* 作るが主、ログインが副。緑と青を並べると、どちらが主か分からなかった */
  .wr-b.go{background:var(--blue);color:#fff;margin-bottom:9px;}
  .wr-b.sub{background:var(--card);color:var(--navy);
    box-shadow:inset 0 0 0 2px var(--bd);}
  .wr-b:active{transform:translateY(1px);}

  /* ── 節目：1行のカード（アイコン + 見出し + 説明） ── */
  .wr-step{display:flex;align-items:center;gap:15px;}
  .wr-ic{flex:none;width:44px;height:44px;display:flex;align-items:center;
    justify-content:center;color:var(--blue);}
  .wr-ic .nvic{width:30px;height:30px;}
  .wr-ic .bic{width:38px;height:38px;}
  .wr-tx{display:flex;flex-direction:column;gap:4px;min-width:0;}
  .wr-tx b{font-size:15px;font-weight:900;line-height:1.4;}
  .wr-tx i{font-style:normal;font-size:12.5px;line-height:1.6;color:var(--tx2);}

  /* ── 相棒 ── */
  .wr-dog{display:flex;flex-direction:column;align-items:center;gap:5px;padding:16px 0 12px;}
  .wr-dog canvas{image-rendering:pixelated;width:84px!important;height:84px!important;}
  .wr-dogn{font-style:normal;font-size:12px;font-weight:800;color:var(--tx2);}

  /* ── フッター ── */
  .wr-foot{padding:2px 2px 0;}
  .wr-foot p{font-size:11px;line-height:1.8;color:var(--dim);margin:0 0 10px;}
  .wr-foot nav{display:flex;flex-direction:column;gap:6px;}
  .wr-foot a{font-size:11.5px;color:var(--tx2);text-decoration:none;cursor:pointer;}
  .wr-foot a:hover{color:var(--blue);text-decoration:underline;}
  html.v2:not(.lp) body #ftr{display:none;}
}

/* -------------------------------------------------------------------------
   直したもの（実測して判明）
   ・サイドバーの項目：アイコンに margin:0 auto が効いていて左右 43.5px ずつ
     開き、ラベルが右端に押されていた（電話で中央寄せするための指定）
   ・上の帯：336px に収まらず2行に折り返していた。電話と同じ1行にする
   ------------------------------------------------------------------------- */
@media(min-width:1000px){
  /* アイコンの中央寄せを解く。横並びでは左に詰める */
  html.v2:not(.lp) body #nvtab button .nvic{margin:0;}

  /* 上の帯は1行。折り返さない */
  .wr-hud .nvbar{flex-wrap:nowrap;gap:8px;}
  .wr-hud .nvbar .lvp{flex:0 1 auto;order:0;margin-bottom:0;min-width:0;}
  .wr-hud .nvbar .lvp u{width:44px;flex:none;}
  .wr-hud .nvbar .nvsp{display:block;flex:1;min-width:0;}
  .wr-hud .nvbar .nvstk,
  .wr-hud .nvbar .nvgift,
  .wr-hud .nvbar .nvprem{flex:none;}

  /* ── きょうのカード。電話と同じ左右の並び ── */
  .wr-day{padding:0;overflow:hidden;}
  .wr-plan{display:flex;align-items:center;gap:11px;width:100%;
    border:none;background:none;font-family:inherit;cursor:pointer;
    padding:15px 15px 14px;color:inherit;text-align:left;}
  .wr-plan:hover{background:var(--lt);}
  .wr-plan .np-l{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0;}
  .wr-plan .np-l i{font-style:normal;font-size:10.5px;color:var(--tx2);
    letter-spacing:-.02em;white-space:nowrap;}
  .wr-plan .np-ln{display:flex;align-items:baseline;gap:4px;}
  .wr-plan .np-ln b{font-size:21px;font-weight:900;color:var(--dim);line-height:1;}
  .wr-plan .np-ln em{font-style:normal;font-size:12px;color:var(--dim);}
  .wr-plan .np-ln u{text-decoration:none;font-size:26px;font-weight:900;
    color:var(--blue);line-height:1;}
  .wr-plan .np-ln s{text-decoration:none;font-size:11.5px;font-weight:800;color:var(--navy);}
  .wr-plan .np-div{width:2px;align-self:stretch;background:var(--bd);flex:none;}
  .wr-plan .np-r{display:flex;flex-direction:column;gap:3px;flex:none;
    align-items:flex-end;text-align:right;}
  .wr-plan .np-r i{font-style:normal;font-size:10px;color:var(--tx2);white-space:nowrap;}
  .wr-plan .np-rn{display:flex;align-items:baseline;gap:3px;}
  .wr-plan .np-rn b{font-size:22px;font-weight:900;line-height:1;}
  .wr-plan .np-rn b.ok{color:var(--ok);} .wr-plan .np-rn b.ng{color:var(--blue);}
  .wr-plan .np-rn u{text-decoration:none;font-size:11px;font-weight:800;}
  .wr-plan .np-r s{text-decoration:none;font-size:10px;color:var(--gold-ink,#8A6300);}
  .wr-plan .np-r.none b{font-size:16px;}
  .wr-plan .ch{width:15px;height:15px;color:var(--dim);flex:none;}

  /* メダルの帯 */
  .wr-npb{padding:0 15px 14px;border-top:2px solid var(--bd);padding-top:12px;}
  .wr-npb .npb-bar{display:flex;align-items:center;gap:2px;height:18px;}
  .wr-npb .npb-lg{margin-top:8px;}
  .wr-npb .npb-goal{font-size:10.5px;}

  /* ── プラスの案内（Duolingo の SUPER カードに寄せる） ── */
  .wr-plus{position:relative;background:var(--navy);border-color:var(--navy);
    overflow:hidden;}
  .wr-badge{display:inline-flex;align-items:center;gap:5px;
    background:linear-gradient(100deg,#6FD9F7,#C78BF0 45%,#FFA867);
    color:#141414;font-size:11.5px;font-weight:900;letter-spacing:.06em;
    padding:4px 10px;border-radius:6px;margin-bottom:11px;}
  .wr-badge .bic{width:15px;height:15px;}
  .wr-plus h3{font-size:18px;font-weight:900;color:#fff;margin:0 0 8px;line-height:1.4;}
  .wr-plus p{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.68);
    margin:0 0 15px;max-width:200px;}
  .wr-b.plus{background:var(--blue);color:#fff;}
  .wr-plusdog{position:absolute;right:10px;top:44px;pointer-events:none;opacity:.95;}
  .wr-plusdog canvas{image-rendering:pixelated;width:64px!important;height:64px!important;}
}

/* ===========================================================
   Web だけの直し(2026-09-04 本人の指示)
   「webとiosを混ぜないでほしい」。ここから下は、電話の作りが
   そのまま広い画面に出てしまっていたところを、Web 用に置き直す。
   =========================================================== */

/* ホームの見出し。アプリは HUD が頭にあるが、Web は HUD がレールにある */
.web-hd{display:none;}
@media(min-width:1000px){
  html.v2:not(.lp) body .web-hd{display:flex;flex-direction:column;gap:3px;
    margin:0 0 14px;}
  html.v2:not(.lp) body .web-hd b{font-size:26px;font-weight:900;color:var(--navy);
    letter-spacing:-.03em;}
  html.v2:not(.lp) body .web-hd i{font-style:normal;font-size:12px;font-weight:600;color:var(--dim);}
}

/* 仕訳の入力。電話は縦幅がないので勘定科目の下に金額を置いていたが、
   Web は横に置ける。1行に「勘定科目 / 金額」を並べる */
@media(min-width:700px){
  html.v2 body .jrow{flex-direction:row;align-items:stretch;}
  html.v2 body .jrow select,html.v2 body .acctbtn{flex:1.5;width:auto;min-width:0;font-size:13.5px;}
  html.v2 body .jrow input[data-j]{flex:1;width:auto;min-width:0;font-size:14.5px;
    border-left:1.5px solid var(--bd);border-top:none;text-align:right;}
}

/* 解いている間。もとは電話でしか v2 の作りが動かず、Web には v1 の
   戦闘バー(犬と経験値の帯)が残っていた。進みのバーも残り時間も無く、
   その帯が見出しを隠していた。Web でも同じヘッダーを出す。 */
@media(min-width:1000px){
  /* 左のサイドバーは Web の骨組みなので、解答中も残す。
     電話のタブバーとは役目が違う(消すと帰り道がなくなる) */
  html.v2:not(.lp) body.solving #nvtab{display:flex;}
  html.v2:not(.lp) body.solving #nvsolvehead{left:216px;}
  /* 中身は本文の列に合わせる。全幅に伸ばすと、進みのバーだけが長くなる */
  /* 中身は本文の列(820px)に合わせて中央に置く。
     はじめ左右に伸縮する詰め物で中央寄せにしたが、詰め物がバーの幅を
     食って、進みのバーだけが妙に短くなっていた。列の幅は .wrap>* と同じ
     1000px（820px は 1000px 未満のときの値で、ここでは使われない）。
     余白で列に合わせて、バーは残りいっぱいに伸ばす */
  /* 位置が fixed なので % は自分の幅ではなく画面幅で解かれる。
     サイドバーぶんを引いてから列に合わせる */
  html.v2:not(.lp) body.solving #nvsolvehead{
    padding-left:max(16px,calc((100vw - var(--sbw,216px) - 1000px) / 2));
    padding-right:max(16px,calc((100vw - var(--sbw,216px) - 1000px) / 2));}
  /* ヘッダーの実寸ぶんだけ本文を下げる。web.css 側で .wrap の padding を
     上書きしているせいで、app.css の「頭に64px空ける」が効かず、
     問題文の見出しがヘッダーの下に潜っていた */
  html.v2:not(.lp) body.solving .wrap{padding-top:76px;padding-bottom:40px;}
}
/* 下の固定バーを消すのも、電卓を右の枠へ逃がすのも 1000px から。
   700〜999px で「バーだけ消して電卓は浮いたまま」になり、電卓が
   宙に浮いて見えていた。この幅では電話と同じ作りのままにする */
@media(min-width:1000px){
  /* 下の固定バーは出さない。採点ボタンは本文の中にある */
  html.v2:not(.lp) body.solving #solvebar{display:none;}
  html.v2:not(.lp) body.solving .wrap{padding-top:76px;padding-bottom:40px;}
}

/* ローディング。電話の縦長を前提にしていたので、広い画面では
   ヒントの札が左端に伸びきっていた。中央に寄せて幅を決める */
@media(min-width:700px){
  html.v2:not(.lp) body #nvload .nvload-core{gap:18px;}
  html.v2:not(.lp) body #nvload .nvload-tipw{display:flex;justify-content:center;
    padding-bottom:48px;}
  html.v2:not(.lp) body #nvload .nvload-tip{width:100%;max-width:460px;}
}

/* ===== 下から出るシートは Web では出さない =====
   電話は親指が下にあるので下から出すのが正しいが、広い画面では
   全幅の帯が下に貼り付いて、画面ごとに作りが変わって見える
   （2026-09-05 本人の指示「webでは禁止。デザインがブレる」）。
   中央のモーダルに揃える。中身の作りには手を触れない。 */
@media(min-width:700px){
  html.v2:not(.lp) body #onbhold,
  html.v2:not(.lp) body #pickm,
  html.v2:not(.lp) body #nvmenu,
  html.v2:not(.lp) body #pmh,
  html.v2:not(.lp) body #nshq,
  html.v2:not(.lp) body #acct-sheet,
  html.v2:not(.lp) body #planwhy,
  html.v2:not(.lp) body .fb-ovl,
  html.v2:not(.lp) body #acct-ovl{
    align-items:center;justify-content:center;padding:24px;}

  html.v2:not(.lp) body #onbhold .ob-hold,
  html.v2:not(.lp) body #pickm .pickm-box,
  html.v2:not(.lp) body #nvmenu .nvm-box,
  html.v2:not(.lp) body #pmh .pmh-box,
  html.v2:not(.lp) body #nshq .nshq-box,
  html.v2:not(.lp) body #acct-sheet .as-box,
  html.v2:not(.lp) body #planwhy .pw-box,
  html.v2:not(.lp) body .fb-ovl .fb-card,
  html.v2:not(.lp) body #acct-box{
    width:100%;max-width:460px;border-radius:20px;
    max-height:86dvh;overflow-y:auto;
    padding-bottom:24px;
    box-shadow:0 18px 50px rgba(20,22,26,.28);}

  /* 下に貼り付く前提で入れていた縁と、掴む取っ手は要らない */
  html.v2:not(.lp) body #planwhy .pw-box{border-bottom:3px solid var(--navy);}
  html.v2:not(.lp) body #nshq .nshq-box{border:3px solid var(--navy);}
  html.v2:not(.lp) body #acct-box{border:3px solid var(--navy);}
  html.v2:not(.lp) body #onbhold .ob-hold,
  html.v2:not(.lp) body #nvmenu .nvm-box,
  html.v2:not(.lp) body #acct-sheet .as-box,
  html.v2:not(.lp) body #pickm .pickm-box{border:3px solid var(--navy);}
  html.v2:not(.lp) body #planwhy .pw-grip,
  html.v2:not(.lp) body #nshq .nq-grip,
  html.v2:not(.lp) body #pickm .pickm-grip,
  html.v2:not(.lp) body #acct-box::before{display:none;}
}

/* AIの入口カード */
@media(min-width:1000px){
  .wr-ai{display:flex;align-items:center;gap:13px;}
  .wr-ai .wr-ic{flex:none;width:38px;height:38px;border-radius:12px;background:var(--blue-tint);}
  .wr-ai .wr-ic .nvic{width:20px;height:20px;color:var(--blue);}
  .wr-ai .wr-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  .wr-ai .wr-tx b{font-size:14px;font-weight:800;}
  .wr-ai .wr-tx i{font-style:normal;font-size:11px;font-weight:600;color:var(--dim);}
  .wr-ai .wr-ar{flex:none;width:17px;height:17px;color:var(--dim);}
}

/* AIの相談。電話は全画面でよいが、Web は右に寄せて開いたまま使えるようにする。
   本文を左へ寄せて、パネルと重ならないようにする（かぶせない） */
@media(min-width:1000px){
  html.v2:not(.lp) body{--aiw:400px;}
  html.v2:not(.lp) body.askon #ask-ovl{
    left:auto;right:0;top:0;bottom:0;width:var(--aiw);
    border-left:2px solid var(--bd);box-shadow:-14px 0 40px rgba(20,22,26,.10);}
  html.v2:not(.lp) body.askon{overflow:auto;}
  html.v2:not(.lp) body.askon .wrap{margin-right:var(--aiw);}
  html.v2:not(.lp) body.askon #nvsolvehead{right:var(--aiw);}
  html.v2:not(.lp) body.askon #ftr{margin-right:var(--aiw);}
  html.v2:not(.lp) body.askon .calcbtn{right:calc(var(--aiw) + var(--calcr,20px));}
  html.v2:not(.lp) body.askon #calc{right:calc(var(--aiw) + var(--calcr,20px));}
}

/* 右下の道具と、右の1枠。
   電卓は位置を電話の下バーの実寸(--sbh)から決めていたが、Web ではその
   下バーを出していないので --sbh が 0 になり、ボタンと本体が別の高さに
   置かれ、右端もそろっていなかった。そのうえ解答欄の上に浮いていて、
   貸方の金額欄をちょうど覆っていた（打ち込む先が見えない）。
   Web では右に1枠つくって、電卓と AI がそこを分け合う。 */
#wfab{display:none;}
/* 音のオンオフはサイドバーの部品。狭い画面では #nvtab が下タブバーになるので、
   markup が入っていても出さない(タブの中に紛れ込む) */
#nvtab .nvsnd{display:none;}
/* 会話画面では下が入力欄で埋まる。フッターは入力欄とタブバーの隙間から
   覗くだけになるので、幅によらず出さない */
html.v2:not(.lp) body:has(.tc) #ftr{display:none;}
@media(min-width:1000px){
  /* 電話用の丸ボタンは出さない。入口は右下のスタックに寄せる */
  html.v2:not(.lp) body .calcbtn,
  html.v2:not(.lp) body.solving .calcbtn,
  html.v2:not(.lp) body.exam .calcbtn{display:none!important;}

  html.v2:not(.lp) body #wfab{display:flex;flex-direction:column;gap:10px;
    position:fixed;right:20px;bottom:22px;z-index:9994;}
  html.v2:not(.lp) body.askon #wfab,
  html.v2:not(.lp) body.calcon #wfab{right:calc(var(--aiw) + 20px);}
  .wfab-b{width:58px;height:58px;border-radius:18px;border:2px solid var(--bd);
    background:var(--card);color:var(--navy);font-family:inherit;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    box-shadow:0 6px 18px rgba(20,22,26,.12);}
  .wfab-b .nvic{width:20px;height:20px;color:currentColor;}
  .wfab-b i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.02em;}
  .wfab-b:hover{border-color:var(--blue);color:var(--blue);}
  .wfab-b.on{background:var(--navy);border-color:var(--navy);color:var(--card);}
  .wfab-b:active{transform:translateY(1px);}
  /* 電卓は解いているあいだだけ。読むだけの画面に出しても押すことがない
     （電話の .calcbtn と同じ扱い） */
  .wfab-b[data-k="calc"]{display:none;}
  html.v2:not(.lp) body.solving .wfab-b[data-k="calc"],
  html.v2:not(.lp) body.exam .wfab-b[data-k="calc"]{display:flex;}

  /* AI は「先生にきく」丸ボタン(bokiinu2.pen CMP)。
     電話と同じ絵にする。電卓の四角より一回り大きくして、こちらを主にする */
  .wfab-ai{position:relative;width:64px;height:64px;border-radius:32px;
    border:3px solid var(--navy);overflow:visible;gap:0;}
  .wfab-ai:hover{border-color:var(--navy);}
  .wfab-ai.on{background:var(--card);border-color:var(--navy);}
  .wfab-d{line-height:0;display:flex;align-items:center;justify-content:center;
    width:52px;height:52px;overflow:hidden;}
  .wfab-d canvas{image-rendering:pixelated;}
  .wfab-c{position:absolute;left:-4px;top:-4px;width:26px;height:26px;border-radius:13px;
    background:var(--blue);border:2.5px solid var(--card);
    display:flex;align-items:center;justify-content:center;}
  .wfab-c .nvic{width:14px;height:14px;color:#FFFFFF;}
  .wfab-n{position:absolute;right:-4px;top:-4px;min-width:26px;height:26px;border-radius:13px;
    background:var(--gold);border:2.5px solid var(--card);
    display:flex;align-items:center;justify-content:center;
    font-style:normal;font-size:11px;font-weight:700;color:#3A2A00;padding:0 4px;}
  .wfab-n[hidden]{display:none;}
  .wfab-ai.off{opacity:.5;}
  .wfab-ai.off .wfab-n{background:var(--bd);color:var(--dim);}
  /* 開いているあいだは、閉じるボタンだと分かるように枠を青くする */
  .wfab-ai.on .wfab-c{background:var(--navy);}

  /* 開いているあいだは本文を左へ寄せる。かぶせない */
  html.v2:not(.lp) body.calcon .wrap{margin-right:var(--aiw);}
  html.v2:not(.lp) body.calcon #nvsolvehead{right:var(--aiw);}
  html.v2:not(.lp) body.calcon #ftr{margin-right:var(--aiw);}
  /* 電卓は枠の上のほうに置く。縦に伸ばすと目盛りだけが間延びする */
  html.v2:not(.lp) body #calc,
  html.v2:not(.lp) body.solving #calc,
  html.v2:not(.lp) body.exam #calc{
    right:calc((var(--aiw) - 240px) / 2);left:auto;
    top:calc(var(--hdrh,56px) + 34px);bottom:auto;}
  html.v2:not(.lp) body.solving #calc{top:90px;}
}

/* オンボーディング。全画面のまま、広い画面では中央の1列にする */
@media(min-width:700px){
  html.v2:not(.lp) body #onb{padding-left:0;padding-right:0;align-items:center;}
  html.v2:not(.lp) body #onb>*{width:100%;max-width:520px;padding-left:20px;padding-right:20px;
    box-sizing:border-box;}
  html.v2:not(.lp) body #onb .ob-body{flex:1;}
}