@charset "utf-8";
/*
  web/pages/shell.css — 全画面の共通の下地（段階5a-1）

  なぜ1本にするか
      画面が4枚（公開ページ・売り場・戻り・中止）あり、書体も色も幅も
      ばらばらだった。公開ページは明朝、決済まわりは system-ui。
      ヘッダーを貼るだけだと、その分裂が5枚目以降にも増えていく。

  どこが配るか
      **前段（web/app.py の /ui/shell.css）**。公開ページは生成サーバから
      中継されてくるが、共通の見た目はアカウント・決済・画面を持つ
      前段の持ち物なので、生成サーバの allowlist は広げない。
      そのぶん、生成サーバを直に開くと見た目が崩れる。公開ページは
      前段越しに見るもの、という区切りがそのまま出る。

  書体について
      明朝で組む（決定 2026-09-22）。ただし**予備を並べること**。
      Hiragino は macOS 専用、Noto Serif JP は既定では入らない。
      Yu Mincho が無い環境だと serif（Times New Roman）まで落ち、
      日本語の字が1つも無いので全部が箱（□）になる（実測）。
      最後の Yu Gothic / Meiryo は明朝が1つも無いときの保険で、
      字面は変わるが読めないよりよい。

      サーバ側で画像に焼く書体は別もの（web/stamp.py）。
      あちらはブラウザの書体を一切見ない。
*/

:root{
  color-scheme: light;

  /* ---- 色 ---------------------------------------------------------- */
  --bg:#f7f5f0;          /* 地 */
  --card:#ffffff;        /* 浮いている面（枠・カード） */
  --sunk:#efece4;        /* 沈んでいる面（入力欄の下地） */
  --ink:#221f1a;         /* 本文 */
  --muted:#726d5d;       /* 補足 */
  --line:#e3ded3;        /* 罫。区切るだけのもの */
  --line-strong:#8e8369; /* 押せるもの・打ち込めるものの枠。下記 */
  --accent:#467655;      /* 主。押せるもの・現在地 */
  --accent-ink:#ffffff;  /* --accent の上に乗る字 */
  --accent-soft:#e7efe9; /* --accent の薄い面 */
  --danger:#a3562f;      /* 失敗・取り消せない操作 */
  --ok:#3a6b4f;

  /* 色は目分量で決めていない。地と面の両方に対して測ってある。
     字は 4.5:1 以上、押せるものの枠は 3:1 以上（WCAG 2.2 AA）。
       補足  4.75 / 5.17    主  4.84 / 5.27    失敗  4.91 / 5.34
       枠    3.44 / 3.75
     --line はただの区切りなので、この基準の対象ではない。
     枠が薄いと「押せるもの」だと分からない。面（#fff）と地（#f7f5f0）は
     1.07 しか違わず、枠を消すとボタンが消える。 */

  /* ---- 書体 -------------------------------------------------------- */
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,
          "Noto Serif JP","MS PMincho","MS Mincho",
          "Yu Gothic",Meiryo,serif;

  /* ---- 寸法 -------------------------------------------------------- */
  --shell:56rem;         /* ヘッダーの幅。本文より広い。下記 */
  --page:34rem;          /* 読み物・売り場の幅 */
  --page-narrow:460px;   /* 公開ページの幅。絵を中央に置くので狭い */
  /* 進み具合のバーの幅。公開ページの「選んだ写真」も同じ幅にする（2026-10-04）。
     **数を2か所に書かない**（片方だけ直すと食い違う）。 */
  --prog-width:340px;
  --r-s:6px;             /* 入力欄 */
  --r-m:12px;            /* 枠・カード */
  --r-pill:999px;        /* ボタン */
}

@media (prefers-color-scheme:dark){
  :root{
    color-scheme: dark;
    --bg:#15161a;
    --card:#1d1f24;
    --sunk:#191b1f;
    --ink:#eae7e0;
    --muted:#948f85;
    --line:#31343a;
    --line-strong:#707784;
    --accent:#82b48f;
    --accent-ink:#11150f;
    --accent-soft:#1e2a22;
    --danger:#d8845c;
    --ok:#74ab8b;
    /* 暗い方も同じ測り方で
         補足 5.62 / 5.12   主 7.64 / 7.80   失敗 6.35 / 5.79
         枠   4.01 / 3.66 */
  }
}

/* ==================================================== 土台 */
*{ box-sizing:border-box }

/* **これが無いと hidden が効かない。**
   ブラウザ既定の [hidden]{display:none} は作者の指定に負ける。
   display を持つ class（.row や .shell-sheet）に hidden を付けても
   消えず、開いていないはずの一覧が出たままになる（実測）。
   画面側でも hidden は多用しているので、ここで一度だけ押さえる。 */
[hidden]{ display:none !important }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  /* 頁の組み方もここで持つ（5a-2）。画面ごとに body を組むと、
     ヘッダーを差し込んだときに横に並んだり、上に隙間が空いたりする。
     ヘッダーは縁に付き、本文はその下で中央に来る。 */
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
}

/* 本文。幅は画面ごとに変えられるよう --page を上書きできる形にする。 */
main{
  width:100%;
  max-width:var(--page);
  padding:0 16px 60px;
}

/* **これが抜けると日本語が出ない。**
   ブラウザの既定では、ボタンや入力欄は body の書体を継がず
   その OS の UI 書体になる。Windows だと Arial まで落ちて、
   日本語が1字も無いので箱が並ぶ（実測。JS で作ったボタンで出た）。
   1か所で継がせておけば、画面ごとに書き忘れることがない。 */
button, input, select, textarea, optgroup{
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
}

/* 金額と枚数。桁が揃わないと並べたときに読みにくい。 */
.num{ font-variant-numeric:tabular-nums }

a{ color:var(--accent) }
a:hover{ text-decoration:none }

/* キーボードで辿る人のために、どこにいるか分かるようにする。
   マウスで押したときには出さない（:focus ではなく :focus-visible）。 */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}

h1,h2,h3{ font-weight:600; margin:0 0 6px; letter-spacing:.06em }
h1{ font-size:26px; line-height:1.4 }
h2{ font-size:19px }
h3{ font-size:15.5px; letter-spacing:.04em }
p{ margin:0 0 12px }
ul,ol{ margin:0 0 12px; padding-left:1.2em }
li{ margin:0 0 4px }
hr{ border:none; border-top:1px solid var(--line); margin:22px 0 }

/* ==================================================== 部品 */
/* どの画面でも同じ意味で使うものだけを置く。
   画面に1つしか無いものは、その画面の <style> に書く。 */

.muted{ color:var(--muted) }
.small{ font-size:12.5px }
.err{ color:var(--danger) }
.ok{ color:var(--ok) }

/* 横に並べる。ボタンと補足、ボタン2つ、など。
   狭い画面では折り返す（横スクロールを出さない）。 */
.row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }

/* 囲み。売り場の品目・預かりの枠・結果のカード。 */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:14px 16px;
}

/* 押せるもの。既定は控えめで、主たる1つだけ .primary を付ける。
   <button> そのものに当てておく。画面ごとにボタンの見た目を書き直すと、
   4枚が少しずつずれていく（実際そうなっていた）。
   個別に変えたいものは id か class で上書きすれば勝つ。
   <a> をボタンに見せたいときは .btn を付ける。 */
button, .btn{
  display:inline-block;
  border:1px solid var(--line-strong);
  background:var(--card);
  color:var(--ink);
  border-radius:var(--r-pill);
  padding:9px 20px;
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
/* <a> をボタンに見せるとき、リンクの下線は要らない。
   画面ごとに消していたので、ここへまとめる。 */
a.btn{ text-decoration:none }
button:hover:not(:disabled), .btn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent) }
button:disabled, .btn:disabled{ opacity:.45; cursor:default }
button.primary, .btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
button.primary:hover:not(:disabled), .btn.primary:hover:not(:disabled){ opacity:.88; color:var(--accent-ink) }
/* 取り消せない操作。押す前に手が止まる色にする。 */
button.danger, .btn.danger{ color:var(--danger); border-color:var(--danger) }
button.danger:hover:not(:disabled), .btn.danger:hover:not(:disabled){ background:var(--danger); color:var(--card) }
/* 字だけのもの（「別の写真で試す」など）。 */
button.plain, .btn.plain{
  border:none; background:none; color:var(--muted);
  padding:4px 2px; text-decoration:underline; text-underline-offset:4px;
}
button.plain:hover:not(:disabled), .btn.plain:hover:not(:disabled){ color:var(--accent) }

input[type=text], input[type=email], input[type=password], textarea, select{
  display:block; width:100%;
  background:var(--card);
  border:1px solid var(--line-strong);
  border-radius:var(--r-s);
  padding:9px 11px;
}
input::placeholder{ color:var(--muted); opacity:1 }
select{ width:auto; cursor:pointer; padding:8px 10px }

/* 入力のひとまとまり（.field・5c-1）は 8d-2 で外した。使っていたのは
   名前の欄だけ（8c-3 で外した）。また要るときは、注意書きをプレース
   ホルダに入れないこと（打ち始めた瞬間に消える）を守って作り直す。 */

/* できあがった絵（5e-1）。
   保存の案内もボタンも置かない（決定 2026-09-22）。
   7c-2 で「画面上での閲覧のみ」と決め、8c-2 で絵の出どころは返ってきた
   data URL だけになった（連番のファイル名を付ける経路はもう無い）。 */
.result img, .result svg, .result canvas{
  width:100%; height:auto; display:block; border-radius:12px;
}
/* 絵の canvas（8e-2）。長押しのメニュー（iOS）と、なぞって選ぶのを止める。
   右クリックとドラッグは画面の側（public.html の guardShot）で止める。 */
.result canvas{
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
/* 「コレクションに保存しました」の添え書き（.saved・5e-3）は 8d-2 で
   外した（8c-2 からしまっていない）。 */
/* 生成ごとの確認のチェック欄（8e-1）。「写真を選ぶ」のすぐ上。
   ログインの窓の同意欄（.shell-login .agree）と同じ組み方にする。 */
.gen-confirm{ max-width:360px; margin:0 auto 14px; text-align:left }
.gen-confirm label{ display:flex; align-items:flex-start; gap:8px;
                    font-size:12.5px; line-height:1.6; cursor:pointer }
/* 入力欄の下余白がチェック欄にも掛かると、字と縦がずれる。 */
.gen-confirm input{ margin:3px 0 0; width:auto; flex:none }

/* ぼかしの下の添え書き（8b-2）。何をすれば見られるかを字で言う。
   絵に焼いた字は読み上げで届かないので、同じことを字でも書く。
   ほかの添え書きより長いので、行の間を少し空ける。 */
.result .blurred-note{ margin-top:10px; line-height:1.7; letter-spacing:0 }

/* 進捗（5d-1）。バーと、見出し・補足の2行。
   段ごとに2行持つのは設計書 第3節の決まり。待ち時間の長い段で
   情報量を増やせるようにするため。 */
.prog{ max-width:var(--prog-width); margin:0 auto; text-align:center }
.prog-rail{
  height:3px; background:var(--sunk); border-radius:2px; overflow:hidden;
  margin:0 0 12px;
}
.prog-bar{
  height:100%; width:0; background:var(--accent);
  transition:width .35s ease;
}
.prog-head{ font-size:14px; letter-spacing:.06em; margin:0 0 4px }
.prog-note{ font-size:12px; color:var(--muted); margin:0; line-height:1.7;
            min-height:1.7em }
/* 止まったとき（5d-5）。バーをそこで止め、色で知らせる。
   色だけでは伝わらないので、見出しの字も変わる。 */
.prog-bar.bad{ background:var(--danger) }
.prog-head.bad{ color:var(--danger) }
.prog-act{ margin-top:12px }

/* 経過の秒数。桁が動くので幅を揺らさない。 */
.prog-sec{ font-variant-numeric:tabular-nums; color:var(--muted) }
/* 動きを減らす設定の人には、バーを飛ばして進める（下の @media で止まる）。 */

/* 補足の帯。理由や注意をひとまとまりで出す。 */
.note{
  border-left:3px solid var(--line);
  background:var(--card);
  border-radius:0 var(--r-s) var(--r-s) 0;
  padding:11px 14px;
  font-size:13.5px;
}
.note.warn{ border-left-color:var(--danger) }
.note :last-child{ margin-bottom:0 }

/* ==================================================== 骨組み（5a-2） */
/* 組み立てるのは /ui/shell.js。ここは見た目だけ。 */

.shell{
  width:100%;
  border-bottom:1px solid var(--line);
  background:var(--bg);
  margin-bottom:26px;
}
/* ヘッダーは本文より広く取る。本文と同じ幅だと、サイト名と案内6つで
   必ずあふれ、広い画面でも「…」に畳まれてしまう。「…」は狭い画面の
   ためのものなので、それでは意味が逆になる。 */
.shell-in{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 16px;            /* 狭い画面で字が縁に付かないための余白 */
}

/* 1段目。右端にログイン。 */
.shell-r1{
  display:flex; justify-content:flex-end; align-items:center;
  min-height:34px; gap:10px; font-size:13px;
}
/* 2段目。左にサイト名、右に案内。 */
.shell-r2{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; padding-bottom:10px;
}
.shell-name{
  font-size:17px; font-weight:600; letter-spacing:.06em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.shell-name:hover{ color:var(--accent) }

.shell-nav{
  display:flex; gap:14px; align-items:baseline;
  font-size:13px; white-space:nowrap;
  /* サイト名が空のときも右に寄せる。space-between 任せだと、
     名前が入るまでのあいだ案内が左端に来てしまう。 */
  margin-left:auto;
}
.shell-link{ color:var(--muted); text-decoration:none }
.shell-link:hover{ color:var(--accent) }
/* いまどこに居るか。色だけでは伝わらないので、下線でも示す。
   読み上げには aria-current が伝える（shell.js）。 */
.shell-link[aria-current="page"]{
  color:var(--ink);
  border-bottom:2px solid var(--accent);
  padding-bottom:2px;
}
/* まだ無い頁。押せるが「準備中」と分かる。
   薄さだけでは色の見えない人に伝わらないので、字でも書く。
   横に並べているときは場所を食うので隠し、読み上げにだけ残す。 */
.shell-link.soon{ opacity:.75 }
.shell-soon{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.shell-sheet .shell-soon{
  position:static; width:auto; height:auto; overflow:visible;
  clip-path:none; font-size:12px; color:var(--muted); margin-left:4px;
}

/* 狭いとき。案内を「…」にまとめる（決定 2026-09-22）。
   畳むかどうかは shell.js が実際にあふれたかを測って決める。
   画素で決め打ちすると、サイト名を長くしたときに破綻する。 */
.shell-r2.folded .shell-nav{ display:none }
.shell-more{
  padding:2px 12px; font-size:15px; line-height:1.4;
  border-radius:var(--r-s); flex:none;
}
.shell-sheet{
  max-width:var(--shell); margin:0 auto; padding:6px 16px 12px;
  display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--line);
}
/* 縦に並べたときは、字の幅だけに収める。伸ばすと、いま居る頁の
   下線が横いっぱいに走って、区切り線のように見える。 */
.shell-sheet .shell-link{ font-size:14px; align-self:flex-start }

/* 1段目のログイン（5a-4）。 */
.shell-account{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                justify-content:flex-end }
.shell-account button{ font-size:13px; padding:4px 12px }
/* メールアドレスは長い。狭い画面で折り返すと1段目が2行になるので、
   入るところまでにして省略する。全部は title で読める。 */
/* 5f-5 でアカウントの頁への入口になった。押せることが分かるように
   下線を付ける。ただの字のままだと、誰も押さない。 */
.acct-mail{ color:var(--muted); max-width:min(46vw, 230px);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
            text-decoration:underline; text-underline-offset:3px;
            text-decoration-color:var(--line-strong) }
.acct-mail:hover{ color:var(--accent); text-decoration-color:var(--accent) }
.acct-credits{ color:var(--ink); text-decoration:none; white-space:nowrap }
.acct-credits:hover{ color:var(--accent) }

/* ログインの窓。ヘッダーの中に出す。 */
.shell-login{
  max-width:var(--shell); margin:0 auto; padding:12px 16px 16px;
  border-top:1px solid var(--line);
}
.shell-login input{ margin-bottom:8px; font-size:14px; max-width:340px }
.shell-login .row{ max-width:340px }
.shell-login .row button{ flex:1; font-size:13px; padding:6px 12px }
.shell-login .msg{ font-size:12.5px; margin:8px 0 0; line-height:1.7;
                   color:var(--muted); max-width:340px }

/* 利用規約への同意（7c-3）。印と字は同じ行、行き先はその下。 */
.shell-login .agree{ max-width:340px; margin:2px 0 10px }
.shell-login .agree label{ display:flex; align-items:flex-start; gap:8px;
                           font-size:12.5px; line-height:1.6; cursor:pointer }
/* 入力欄の下余白（8px）がチェック欄にも掛かると、字と縦がずれる。 */
.shell-login .agree input{ margin:2px 0 0; width:auto; flex:none }
.shell-login .agree .links{ margin:4px 0 0 24px; font-size:12px }

/* 本文へ飛ばす道。ふだんは見えず、焦点が当たったときだけ出る。 */
.shell-skip{
  position:absolute; left:-9999px;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--r-s);
  padding:8px 14px; z-index:10;
}
.shell-skip:focus{ left:16px; top:8px; position:fixed }

footer{ color:var(--muted); font-size:11.5px; line-height:1.9 }

/* ==================================================== 窓（5b-2） */
/* <dialog> を使う。焦点の閉じ込め・Esc・後ろを触らせないことを
   ブラウザがやってくれるので、自分で組むより確実になる。
   自前で組むと、必ずどこかで焦点が外へ逃げる。 */
dialog{
  border:1px solid var(--line-strong);
  border-radius:var(--r-m);
  background:var(--card);
  color:var(--ink);
  padding:22px 24px;
  max-width:min(30rem, calc(100vw - 32px));
  /* 中身は読み物なので必ず左揃え。公開ページは .wrap が中央寄せなので、
     指定しないとそれが窓の中まで効いて、箇条書きが真ん中で揺れる。 */
  text-align:left;
  box-shadow:0 8px 40px rgba(0,0,0,.18);
}
dialog::backdrop{ background:rgba(0,0,0,.45) }
dialog h2{ font-size:18px; margin:0 0 12px }
dialog .row{ margin-top:20px; justify-content:flex-end }
/* 狭い画面では縦に積む。横に並べると字が潰れる。 */
@media (max-width:380px){
  dialog .row{ flex-direction:column-reverse; align-items:stretch }
  dialog .row button{ width:100% }
}

/* ==================================================== 法務への導線（5h）
   **配る HTML に字として入っている**（web/app.py の legal_html）。
   案内（2段目）は shell.js が組むので、JavaScript が動かなければ
   存在しない。法務の頁は JS を切っていても辿れる必要がある。

   main の中に置くので、幅はその画面の本文に合う（売り場は 34rem）。 */
.legal{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  margin:28px 0 0; padding:14px 0 0;
  border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.9;
}
.legal a{ color:var(--muted); text-underline-offset:3px }
.legal a:hover{ color:var(--accent) }

/* 動きを減らす設定の人には動かさない。 */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
}