/* ★hidden と書いた物は 必ず消す★（全アプリの決まり・前科あり）
   class の display が hidden 属性を打ち消して ★中身が空の枠だけ★ が出る。
   ここでは #app（ログインが済むまで中身を見せない）が hidden を使っている＝
   ★1行 入れておかないと、皮の側に display が足された日に 中身が露出する★。 */
[hidden] { display: none !important; }

/* app.css — 請求書だけの差分
 * ==============================================================================
 * ★見た目の本体は css/rakunally-ui.css（スイート共通の皮）★
 *   色・角丸・ボタン・カード・入力欄・タブはそちらが唯一の正。ここには書かない。
 *   ここに置くのは ★請求書にしか無い物★ だけ（明細の表・合計欄・紙の下見・列の編集）。
 *
 * ★色は直hex／使ってよいのは共通の皮に書いた13色だけ★
 */

/* 画面の出し入れ */
.screen { display: none; }
.screen.active { display: block; }

/* ── 明細の表 ───────────────────────────────────────────
   ★スマホ幅では表が入り切らない。縮めて潰すのではなく「横に動かす」★
     （2026-08-10 実機幅375pxで、数量・単価・金額の欄が幅ゼロまで潰れていた）
   min-width を入れないと table が入れ物に合わせて縮み、overflow-x が効かない。
   ★列は会社が足せるので、幅は「1列ぶん×本数」で JS が決める★ */
.lines-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lines { border-collapse: collapse; margin-top: 6px; }
.lines th {
  font-size: 11px; color: #333333; font-weight: 400; text-align: left;
  padding: 0 4px 4px; white-space: nowrap;
}
.lines td { padding: 2px 4px 6px; vertical-align: top; }
.lines .finput { padding: 9px 8px; }
.l-name { width: 200px; min-width: 200px; }
.l-sm { width: 84px; min-width: 84px; }
.l-md { width: 120px; min-width: 120px; }
.l-x { width: 40px; min-width: 40px; text-align: center; }
.l-del {
  background: #FFFFFF; border: 1.5px solid #F0D5D0; color: #C0392B; border-radius: 8px;
  width: 32px; height: 36px; cursor: pointer; font-size: 14px; font-family: inherit;
}
.l-del:disabled { opacity: .5; cursor: default; }
/* ★行の並べ替え（▲▼）★ 消して打ち直させないための物。
   端の行では その向きを出さないので、幅は1つぶんでも足りる形にする。 */
.l-ord { width: 34px; min-width: 34px; white-space: nowrap; }
/* ★指で 押せる 大きさ★（2026-09-10 実測 28×22px） */
.l-mv { min-width: 34px; min-height: 34px; }
.l-mv {
  display: block; width: 30px; height: 26px; margin: 0 auto 2px;
  background: #FFFFFF; border: 1px solid #C8ECD8; border-radius: 999px;
  color: #2E7D54; cursor: pointer; font-size: 11px; font-family: inherit; line-height: 1;
}
.l-mv:disabled { opacity: .5; cursor: default; }
.scroll-note {
  display: block; width: 100%; min-width: 180px; font-size: 12px; color: #6E6E6E;
  line-height: 1.7; margin: 4px 0 0;
  white-space: normal; word-break: normal; overflow-wrap: break-word;
}

/* ── 合計 ─────────────────────────────────────────────── */
.tot { margin-top: 12px; border-top: 1px solid #D4EAE0; padding-top: 10px; }
.tot-r { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
.tot-l { color: #333333; white-space: nowrap; }
.tot-v { font-family: 'DM Mono', ui-monospace, monospace; white-space: nowrap; }
.tot-g {
  font-size: 17px; font-weight: 700; color: #333333;
  border-top: 1px solid #D4EAE0; margin-top: 6px; padding-top: 8px;
}

/* ── 一覧の1行の中身 ─────────────────────────────────── */
.iv-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.iv-no { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; color: #6E6E6E; white-space: nowrap; }
.iv-name { font-size: 14px; font-weight: 700; color: #2E7D54; min-width: 0; overflow-wrap: break-word; }
.iv-sub {
  display: block; width: 100%; font-size: 12px; color: #6E6E6E;
  line-height: 1.7; margin-top: 2px;
  white-space: normal; word-break: normal; overflow-wrap: break-word;
}
.iv-amt { font-family: 'DM Mono', ui-monospace, monospace; font-size: 15px; font-weight: 700; color: #2E7D54; }

/* ★2026-09-08 司さん「取引先のところに 確認や修正と削除のボタン作って
   押したらPDFが見えたり修正できたりでええやろ」★
   ＝行そのものを 押す（どこへ行くか 分からない）のを やめて、
     1通ぶんを ★1枚の カード★にし、下に ★何が起きるか 書いた ボタン★を 並べる。
   ★ボタンは 裸で 並べない＝flex+gap の 箱に 入れる★（全アプリ 共通の 決まり）。 */
.iv-card { padding: 12px 14px 10px; margin-bottom: 10px; }
.iv-btns { margin-top: 10px; gap: 8px; flex-wrap: wrap; }
/* ★どのボタンも 指で 押せる 大きさ★（44px＝Apple の 目安） */
.iv-btns > button { flex: 1 1 auto; min-width: 0; white-space: nowrap; min-height: 44px; }
/* ★確認で 出す 紙★＝入力画面の 下見と 同じ 見た目 */
#lv-card .pv-wrap { margin-top: 10px; }

/* ── 入金の1行（★1回＝1行。上書きしない＝分割払いの履歴が残る★）─────
   ★flex の子に文を直接置くと、狭い端末で1文字ずつ縦に割れる（前科あり）★
     ＝日付・金額の並びと、備考の文を別の箱に分け、文の側に最低幅を持たせる。
   消すボタンは明細と同じ .l-del を使い回す（新しい部品を作らない）。 */
.pay-row {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px;
  border: 1px solid #D4EAE0; border-radius: 12px;
  padding: 8px 10px; margin-bottom: 8px; background: #FFFFFF;
}
.pay-main { flex: 1 1 180px; min-width: 180px; }
.pay-l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pay-d { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; color: #555555; white-space: nowrap; }
.pay-v { font-family: 'DM Mono', ui-monospace, monospace; font-size: 15px; font-weight: 700; color: #2E7D54; white-space: nowrap; }
.pay-w { font-size: 11px; color: #6E6E6E; white-space: nowrap; }
.pay-memo {
  display: block; width: 100%; min-width: 150px; font-size: 12px; color: #6E6E6E;
  line-height: 1.7; margin-top: 2px;
  white-space: normal; word-break: normal; overflow-wrap: break-word;
}
/* 「残り全部」「半分」＝金額を打たずに入れる近道（当たりは指の幅を確保する） */
.pay-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* ★指で押す物なので、mini の既定（高さ約23px）より当たりを大きくする（実測40px）★ */
.pay-quick .mini { padding: 11px 12px; font-size: 12px; }

/* ── 列の編集（★ボタンだけの行なので折り返して潰さない★）───── */
.col-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  border: 1px solid #D4EAE0; border-radius: 12px;
  padding: 8px 10px; margin-bottom: 8px; background: #FFFFFF;
}
/* ★列の名前は flex の子だが、幅を先に確保して縦帯にしない★ */
.col-name {
  flex: 1 1 120px; min-width: 120px; font-size: 13px; font-weight: 700; color: #333333;
  white-space: normal; word-break: normal; overflow-wrap: break-word;
}
.col-w {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; color: #555555;
  min-width: 34px; text-align: right; white-space: nowrap;
}
.col-role { font-size: 11px; color: #6E6E6E; white-space: nowrap; }
.col-gap { flex: 0 0 6px; }

/* ── 紙の下見 ─────────────────────────────────────────
   ★紙はA4の幅（約190mm）で組んである。スマホの幅にそのまま入れると右が切れて
     「金額が見えない下見」になる（2026-08-10 実機幅375pxで実際に切れていた）。
     だから ★紙は縮めず、まるごと縮小して全体を見せる★（transform: scale）。
     入れ物の高さは JS が縮小後の高さに合わせる（下に大きな余白を作らない）。
   ★既定は block。隠すのは HTML 側の style="display:none" で行う
     （CSSで none にすると、JSが style.display='' に戻した時に「消えたまま」になる）。 */
.pv-wrap {
  display: block; overflow: hidden; border: 1px solid #D4EAE0; border-radius: 14px;
  background: #FFFFFF; margin-top: 10px;
}
.pv { display: block; border: 0; background: #FFFFFF; transform-origin: top left; }

/* 保存する名前の小窓の添え書き */
.ov-ext { font-size: 12px; color: #6E6E6E; margin-top: 4px; }

/* 角印の下見 */
.seal-row { margin: 4px 0 10px; }
.seal-pv {
  display: block; width: 72px; height: 72px; object-fit: contain;
  border: 1px solid #D4EAE0; border-radius: 10px; background: #FFFFFF; padding: 4px;
}

/* ── 番号（ふだんは読むだけ・「変える」で直せる）──────────── */
.no-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; }
.no-v {
  flex: 1 1 120px; min-width: 120px;
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 14px; color: #333333;
  white-space: normal; word-break: normal; overflow-wrap: break-word;
}

/* ── 当てた印（前回から入れた値だと分かるようにする）──────── */
.guess-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #F0FAF4; border: 1px solid #C8ECD8; color: #333333;
  font-size: 11px; font-weight: 400; white-space: nowrap;
}
/* 前回の中身の読み合わせ（★flexの子に文を直接置かない＝表で組む★） */
.guess-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.guess-t th {
  width: 34%; min-width: 90px; text-align: left; font-weight: 400; color: #555555;
  padding: 5px 8px 5px 0; vertical-align: top; white-space: nowrap;
}
.guess-t td {
  padding: 5px 0; color: #333333; font-weight: 700; vertical-align: top;
  white-space: normal; word-break: normal; overflow-wrap: break-word;
}

/* ── 差し引く（控除）＝明細の外・税込から引く ─────────────────
   ★flex の子に文を直接置かない★（1文字ずつ縦に割れる事故を作らない）＝
   名前と金額は入力欄なので折り返しの心配は無いが、行そのものは折り返す。 */
.ded-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.ded-n { flex: 1 1 150px; min-width: 150px; }
.ded-a { flex: 0 1 110px; min-width: 110px; text-align: right; }

/* ── お振込先＝1口座ずつ 分けて 打つ ─────────────────────────
   ★裸で 並べない★＝口座 1つを 1つの 囲いに する（どこまでが 1口座か 見て分かる）。
   ★消すボタンは 明細と 同じ .l-del を 使い回す★（新しい 部品を 作らない）。 */
.bank-c {
  border: 1px solid #C8ECD8; border-radius: 10px; padding: 10px 10px 2px;
  margin-bottom: 8px; background: #FFFFFF;
}
.bank-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.bank-t { font-size: 11px; font-weight: 700; color: #333333; }
/* ★スマホでも 2列のまま★＝.frow2 は 480px以下で 1列に なるので
   5つの 欄が 縦に 積み上がって ★1口座で 画面 1枚★に なる（実測で そうなった）。
   ★子は min-width:0★＝中身より 細くならず 隣を 外へ 押し出す事故を 作らない。 */
.bank-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bank-2 > * { min-width: 0; }

/* ── ブラウザ任せの ファイルの欄を 見せない ─────────────────────
   ★display:none に しない★＝見張り（scripts/webkit-size.mjs）は
     「隠れた物も 開いて 測る」ので、★開いた とたん 英語の ボタンが 出て
     375px で 3px はみ出した★（2026-09-10 CI で 実測・手元は 0px＝字の 太さの 違い）。
   ⇒ ★1px の 透明★に する。開かれても 大きくならず、字も 出ない。
     押すのは 隣の 日本語の ボタンから（input.click()）。 */
.file-kakusu {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none;
}

/* ── 紙を 見る（かぶせ）────────────────────────────────
   ★代行請求と 同じ形★（司さん 2026-09-10「同じように やれや」）
     Exally-test/daikou-seikyu.html の .modal-ov / .modal / .modal-hd（CSS 2633-2675）。
   ・下から 出る／中だけ 転がる（max-height 88vh）
   ・頭の「閉じる」は ★貼り付いて 消えない★
   ・暗い所を 押しても 閉じる（JS 側）
   ・広い画面（560px以上）では 真ん中に 出す
   ★色は 代行請求と 同じ rgba(20,36,61,.45)★＝こちらで 勝手に 決めない。 */
.lv-ov {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 36, 61, .45);
  align-items: flex-end; justify-content: center;
}
.lv-ov.open { display: flex; }
.lv-modal {
  background: #FFFFFF; width: 100%; max-width: 520px;
  border-radius: 18px 18px 0 0; max-height: 88vh; overflow-y: auto;
  padding: 14px 14px 24px;
}
@media (min-width: 560px) {
  .lv-ov { align-items: center; }
  .lv-modal { border-radius: 18px; }
}
/* ★文を flex の 子に 直接 置かない★（1文字ずつ 縦に 割れる 事故を 作らない） */
.lv-top {
  position: sticky; top: 0; z-index: 5; background: #FFFFFF;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 0 10px; margin-bottom: 4px;
}

/* ★出したが まだ 渡していない★（2026-09-10）
   ★色そのものが 意味★＝注意の 色（.warn と 同じ #92500A）を 使う。 */
.iv-mada { color: #92500A; font-weight: 700; }

/* ── 今の紙（1行）───────────────────────────────────
   ★入力画面の .tpl-strip と 同じ 形★＝新しい 見た目を 作らない。
   ★文を flex の 子に 直接 置かない★（1文字ずつ 縦に 割れる 事故を 作らない）。 */
.tpl-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tpl-now-k { font-size: 11px; font-weight: 700; color: #333333; }
.tpl-now-v {
  flex: 1 1 140px; min-width: 0; font-size: 13px; font-weight: 700; color: #333333;
  white-space: normal; word-break: normal; overflow-wrap: break-word;
}

/* ── 判子の 撮り方（3つ）─────────────────────────────────
   ★文を flex/grid の 子に 直接 置かない★（1文字ずつ 縦に 割れる 事故を 作らない）
   ＝ふつうの 箇条書きに する。 */
.seal-tips { margin: 6px 0 10px; padding-left: 18px; }
.seal-tips li {
  font-size: 12px; color: #333333; line-height: 1.7; margin-bottom: 4px;
  white-space: normal; word-break: normal; overflow-wrap: break-word;
}

/* 明細の「消費税」は ★出る物（読むだけ）★＝打てる欄と見た目で分ける */
.l-ro {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 13px; color: #555555;
  text-align: right; padding-top: 13px; white-space: nowrap;
}
/* 紙には出さないが 入力には要る列（税率）の印 */
.l-only {
  display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 999px;
  background: #F0FAF4; border: 1px solid #C8ECD8; color: #333333; font-size: 9.5px; font-weight: 400;
}

/* 注意書きは1件1行（何件 出ても読める） */
.msg-l { display: block; }
.msg-l + .msg-l { margin-top: 4px; }

/* ── 狭い幅では 明細の1行を「2段の札」にする ─────────────────────
   ★実測（2026-08-15・幅375）★ 表のままだと「品名・内容」と「数量」までしか見えず、
   ★一番 見たい金額が 横に動かさないと読めなかった★。
   だから狭い時は 表をやめて ★上＝品名／下＝数量×単価＝金額★ の札にする。
   ★広い画面では今までどおり表のまま横に動かせる★（下の @media の外は触っていない）。
   見出し(thead)が消えるので、欄の名前は ::before で1つずつ添える。 */
@media (max-width: 480px) {
  .lines-scroll { overflow-x: visible; }
  .lines, .lines tbody, .lines tr, .lines td { display: block; width: auto; min-width: 0; }
  .lines thead { display: none; }
  .lines tr {
    position: relative;
    border: 1px solid #D4EAE0; border-radius: 12px; background: #FFFFFF;
    padding: 8px 10px 8px; margin-bottom: 8px;
  }
  .lines td { padding: 0 0 6px; }
  /* 欄の名前（表の見出しの代わり）。★文なので block＋折り返し可★ */
  .lines td::before {
    content: attr(data-label);
    display: block; font-size: 11px; color: #6E6E6E; margin-bottom: 2px;
    white-space: normal; word-break: normal; overflow-wrap: break-word;
  }
  /* # は札の右上に小さく（1行ぶんの場所を取らせない） */
  .lines td.l-c-index {
    position: absolute; top: 8px; right: 74px; padding: 0;
    font-size: 11px; color: #6E6E6E;
  }
  .lines td.l-c-index::before { display: none; }
  /* 上の段＝品名（幅いっぱい） */
  .lines td.l-c-name { padding-right: 78px; }
  /* 下の段＝数量 × 単価 ＝ 金額 を横に3つ（★折り返す★） */
  .lines td.l-c-qty, .lines td.l-c-unit, .lines td.l-c-price,
  .lines td.l-c-amount, .lines td.l-c-rate, .lines td.l-c-tax {
    display: inline-block; vertical-align: top; width: 48%; padding-right: 6px;
  }
  .lines td.l-c-amount, .lines td.l-c-tax { text-align: right; }
  /* ★欄の名前は どの欄も「上・左」にそろえる★
     （消費税だけ右に寄っていて、値が左に浮いて見えた＝2026-08-15 指示役の指摘） */
  .lines td.l-c-amount::before, .lines td.l-c-tax::before { text-align: left; }
  .lines td.l-c-amount .finput { text-align: right; font-weight: 700; }
  .lines td.l-ro { padding-top: 0; }
  /* 並べ替えと消すは 札の右上に寄せる */
  .lines td.l-ord, .lines td.l-x:last-child {
    position: absolute; top: 6px; padding: 0; width: auto; text-align: right;
  }
  /* ★★2026-09-10 消す×と 並べ替え▼を 離した★★
     ★実測★ × は 右6〜38px（幅32）／▼ は 右40〜68px（幅28）＝★すき間 2px★。
       手袋・濡れた指の 接触面は 10〜15mm（38〜57px）＝★狙って 外す方が 難しい★。
       しかも 消すのに 確認が 無い＝並べ替えの つもりで 行が 消え、打ち直しに なる。
     ⇒ ★間を 18px 空ける★（40 → 56）。 */
  .lines td.l-ord { right: 56px; }
  .lines td.l-x:last-child { right: 6px; }
  .lines td.l-ord::before, .lines td.l-x::before { display: none; }
  .l-mv { width: 28px; height: 22px; margin-bottom: 1px; }
}

/* 数量×単価から出た金額は、打った字と見分けが付くように薄く出す（打てば その字が勝つ） */
.l-calc::placeholder { color: #6E6E6E; opacity: 1; }

/* ★字の右にも必ず余白★（司さん 2026-08-16「右が見切れている／余白が無い」）
   日本語は行いっぱいまで折り返すので、箱の内側ぴったりで終わると
   ★右端に貼り付いて見える★（実測 2026-08-16：残り 1〜2px の文が複数あった）。
   ★ここ1か所で全画面ぶん決める★＝画面ごとに padding を書き足さない。
   ※色ではなく余白なので #hex の決まりとは別。CSS変数は使わない（exally系の決まり）。 */
.card .hint,
.card .why,
.card .flabel,
.card .card-h,
.card .tot,
.more-s { padding-right: 10px; }
/* ★2026-08-28 ここに在った `.card.more > *:not(summary){padding-right:10px}` は 消しました★
   ★理由★ これは ★皮の穴を こちらで塞いでいた継ぎ当て★でした。
     皮（css/rakunally-ui.css）の `.more{padding:0}` が `.card` の padding:14px を消していて、
     その穴を ここで 10px だけ 埋め戻していた＝★同じ物を2か所で別々に持っていた★。
   ★皮の側を 14px に直した★ので、ここに残すと ★右だけ 10px＝左右がずれる★
     （実測 2026-08-28 WebKit 390px：左31px／右27px）。
   ⇒ ★余白の持ち主は 皮ひとつ★。scripts/webkit-size.mjs が 毎回 左右を数えます。 */
/* 箱の外に出ている説明（カードの外の hint）も同じだけ内側へ */
.main > .hint, .main > .why { padding-right: 10px; }

/* 畳んだ設定の中の小見出し（カードの見出しと同じ位置・少し小さく） */
.sub-h { font-size: 13px; font-weight: 700; color: #333333; margin: 14px 0 6px; padding-right: 10px; }
.sub-h:first-of-type { margin-top: 8px; }

/* ★その場で相手を作る口★（司さん 2026-08-17「Rakually は別アプリ」）
   ＝取引先が0社の時だけ 出す。1行に「会社名」と「作る」を並べる。
   ★flex の箱に長い字を入れると 1文字ずつ縦に割れる★前科があるので、
     入力側は min-width:0 で縮ませ、ボタン側は縮ませない（実測して決める）。 */
.pt-new { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding-right: 10px; }
/* ★置き字が読み切れる幅を残す★（375pxで実測：入力欄158px／「会社名を入れてください」に要る幅175px＝切れていた）
   ＝入りきらない時は ★ボタンを下へ折り返す★（字を削らない） */
.pt-new .finput { flex: 1 1 200px; min-width: 0; }
.pt-new .btn-primary { flex: 0 0 auto; white-space: nowrap; }

/* ★自社の情報（読むだけ）★ 何が紙に刷られるかを その場で見せる。
   ★本文は薄い黒★（色は押せる物と選ばれている物だけ）。 */
.ov-row { display: flex; gap: 10px; align-items: baseline; padding: 4px 10px 4px 0; }
.ov-k { flex: 0 0 auto; min-width: 9.5em; color: #555555; font-size: 13px; }
/* ★色は足さない★＝本文の色は皮から受け継ぐ（勝手に色を足すと3アプリでバラける）。
   ★break-all は使わない★＝日本語が1文字ずつ縦に割れる（前科）。
   長い登録番号（T＋13桁）だけは どこでも切れないと はみ出すので anywhere にする
   ＝★入りきらない時だけ★ 切る（ふつうの日本語は今までどおり文節で折り返す）。 */
.ov-v { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ov-none { color: #6E6E6E; }

/* ═══ ★取引先を1問ずつ聞く★（司さん 2026-08-16「聞いてあげる。埋めさせない。」）═══
   ・★本文に色を足さない★＝読ませる字の色は 皮（rakunally-ui.css）から受け継ぐ。
     ここで #333 などを書くと ★3アプリでバラける★（前科）。色は ★押せる物と選ばれている物だけ★。
   ・囲い・地の色も ★皮に在る物だけ★を使う（勝手な緑を増やさない）
   ・★入力欄は16px★（iOSが勝手に拡大しない大きさ）
   ・★flex の箱で1文字ずつ縦に割れる前科★があるので、縮む側に min-width:0 を必ず置く */
.pask { margin-top: 10px; color: #333333; }   /* ★読ませる字は薄い黒★（この画面の既定は緑なので必ず書く） */
.pask-prog { font-size: 13px; padding: 8px 10px; background: #F0FAF4; border-radius: 8px; color: #333333; }
.pask-prog b { color: #333333; }   /* ★進み具合は読む字★（押せる物ではない） */
.pask-q { margin-top: 10px; padding: 12px 10px; border: 1px solid #D4EAE0; border-radius: 10px; }
.pask-qt { font-size: 16px; font-weight: 700; line-height: 1.5; color: #333333; }
.pask-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: #333333; }
.pask-guess { margin-top: 8px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: #333333; }
/* ★聞く形のボタンの色は 自分で決めない★（司さん 2026-08-29「なぜボタンに色をつけない？統一感は？」）
   ★実測で 3つ ずれていた★（WebKit 390px・値で数えた）
     ・選ぶボタン … 字 #333333 ＝★色なし★（アプリの「ほか」は #2E7D54）
     ・押す物の緑 … #2E7D54（アプリの「本命」は ★#3D9E72★）＝★緑が2種類 混ざっていた★
     ・枠         … #D4EAE0 1px（アプリは #C8ECD8 1.5px）
   ⇒ ★色は 画面のボタン（.btn-primary / .btn-ghost）に 任せる★＝
     HTML側で その class を一緒に付ける（css/rakunally-ui.css が唯一の持ち主）。
   ★ここに残すのは 形と大きさだけ★（丸み・並び・押す的の高さ）。★色は1行も書かない★。
   ★見張り★ seikyu/tests/pask-color.test.mjs が 実際に描いて 値で突き合わせる。 */
.pask-why { flex: 0 0 auto; border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.pask-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pask-o { min-height: 40px; padding: 8px 14px; border-radius: 10px; font-size: 15px; }
/* ★選んだ物は 本命の色★。★btn-ghost と btn-primary を 同時に付けてはいけない★
   （皮では .btn-ghost が 後に書いてあるので ★後勝ちで 白のまま★になる＝2026-08-29 実測で踏んだ）。
   ⇒ HTML側で ★どちらか片方だけ★を付ける。ここは 太さだけ（色は 1行も書かない）。 */
.pask-o.on { font-weight: 700; }
.pask-q .finput { margin-top: 10px; font-size: 16px; }
.pask-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pask-c { border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.pask-row, .pask-n { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.pask-n .finput { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.pask-ok { flex: 0 0 auto; min-height: 40px; padding: 8px 18px; border-radius: 10px; font-size: 15px; }
.pask-skip { flex: 0 0 auto; min-height: 40px; padding: 8px 14px; border-radius: 10px; font-size: 14px; }
.pask-fin { margin: 10px 0 0; font-size: 14px; color: #333333; }
.pask-done { margin-top: 12px; }
.pask-done-h { font-size: 13px; margin-bottom: 6px; color: #333333; }
.pask-d {
  display: block; width: 100%; text-align: left; margin-bottom: 6px; cursor: pointer;
  border: 1px solid #E8F6EE; border-radius: 8px; background: #FFFFFF; padding: 8px 10px; color: #333333;
}
.pask-d-k { display: block; font-size: 12px; color: #333333; }
.pask-d-v { display: block; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; color: #333333; }
.pask-d-r { display: block; font-size: 12px; margin-top: 2px; line-height: 1.7; color: #333333; }
.pask-note { font-size: 12px; color: #333333; }

/* ぜんぶ見る（畳んである）。★消していない★＝ここで直せる */
.pt-all { margin-top: 12px; border-top: 1px solid #E8F6EE; padding-top: 8px; }
.pt-all > summary { cursor: pointer; font-size: 14px; color: #2E7D54; font-weight: 700; padding: 4px 0; }
.hint.bad-t { color: #C0392B; }

/* ★見出しの横の 小さい注記★（2026-09-02 実測＝この class に CSS が 1行も 無く、
   ★「消費税の一言空なら 出しません」と 字が くっついて 出ていた★・2か所とも）。
   ★色は :root の変数か 決めた薄い黒★／★字は 12px★（他の注記と 同じ形）。 */
.hint2 { margin-left: 8px; font-size: 12px; font-weight: 400; color: #333333; }

/* ★知らせの出口は1つ★（alert は使わない） */
.pask-note-box {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.pask-note-in {
  background: #FFFFFF; border-radius: 12px; padding: 16px; max-width: 420px; width: 100%;
  max-height: 80vh; overflow: auto;
}
.pask-note-in h3 { margin: 0 0 8px; font-size: 16px; color: #333333; }
.pask-note-in > div { font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; color: #333333; }
.pask-note-in .btn-primary { margin-top: 14px; width: 100%; }

/* ── ★どの紙で出しますか★（司さん 2026-08-24「見本も一緒に見せる」） ──────────
   ★見本は 本物の紙をそのまま小さくして出す★（作り物の絵を置かない）。
   決めたら 1行に畳み、★[変える]で いつでも戻って続きから★。 */
/* ★2枚を並べる★＝スマホでも 2つとも見える（スクロールしないと2枚目に気づけない を無くす） */
.tpl-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tpl-pick {
  text-align: left; cursor: pointer; min-width: 0;
  background: #fff; border: 1.5px solid #D4EAE0; border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; font: inherit;
}
.tpl-pick.on { border-color: #2E7D54; box-shadow: 0 0 0 2px rgba(46,125,84,.14); }
/* ★見本の枠は A4縦と同じ形★（210:297）。
   ★2026-08-26 司さんの指摘★…前は 298×190 の ★横長の枠★ で、
   中のA4縦の紙が ★下から80px はみ出して切れていた★＝★紙が横になって見えた★。
   ⇒ 枠を紙と同じ形にし、紙は ★枠の幅ぴったり★に縮める（縮尺は JS が幅から測って決める）。 */
.tpl-shot {
  width: 100%; aspect-ratio: 210 / 297; border: 1px solid #D4EAE0; border-radius: 8px;
  overflow: hidden; background: #fff; position: relative;
}
/* ★見本の中身は 指を 吸わない★（2026-09-05 本物のマウスで 実測して 見つけた）
   ＝iframe は 中の 紙が 押されたと 受け取って ★親の ボタンまで 届かない★。
     札の 真ん中（＝ふつう ここを 押す）が 丸ごと 死んでいて、
     ★様式を 押しても 何も 変わらない★状態だった（投げイベントでは 出ない穴）。
   大きい下見(.set-pv-f)には 前から pointer-events:none が 付いていた＝こちらだけ 抜けていた。 */
.tpl-shot iframe { border: 0; position: absolute; top: 0; left: 0; transform-origin: 0 0; overflow: hidden; pointer-events: none; }
.tpl-nm { font-size: 13px; font-weight: 700; color: #333333; }
.tpl-note { font-size: 12px; color: #555555; line-height: 1.7; }
.tpl-strip { display: flex; align-items: center; gap: 10px; }
/* ★ボタンの字を 途中で 折らない★（2026-09-05 絵を 開いて 見つけた＝「設定で変え／る」）
   ＝押す物の 字が 割れると ★別のボタンに 見える★。名前の方を 折り返させる。 */
.tpl-strip .mini { white-space: nowrap; flex: 0 0 auto; }
.tpl-strip-k { font-size: 11px; color: #6E6E6E; letter-spacing: .06em; }
.tpl-strip-v { font-size: 13px; font-weight: 700; color: #333333; flex: 1 1 auto; }

/* ★選ばれている物の ✓★（代行請求と同じ見せ方・2026-08-26 司さん「他のアプリも参考にしろ」）
   枠の色だけだと どれが選ばれているか 一目で分からない。 */
.tpl-pick { position: relative; }
.tpl-badge {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  width: 20px; height: 20px; border-radius: 50%;
  background: #3D9E72; color: #FFFFFF; font-size: 12px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}
.tpl-pick.on .tpl-badge { display: flex; }
.tpl-pick.on { box-shadow: 0 0 0 1.5px #2E7D54 inset; }

/* ── ★集計★（月ごと・取引先ごとに いくら請求／入金／残り）────────────
   司さん 2026-08-30「競合が当たり前にしてる事は こちらも当たり前にしてな」
   ＝請求書ソフトは どこも 集計を持っている。うちだけ 無かった。
   ★注意書き/数字を flex の子に 文のまま置かない★（狭い端末で1文字ずつ縦に割れる前科）
     ＝1つ1つを 箱（.rep-c）に入れて、箱ごと 折り返させる。 */
.rep-sum {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline;
  margin: 2px 0 10px;
}
.rep-c { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.rep-l { font-size: 12px; color: #6E6E6E; }
.rep-v { font-family: 'DM Mono', ui-monospace, monospace; font-size: 15px; font-weight: 700; color: #2E7D54; }
.rep-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px;
  padding: 8px 0; border-bottom: 1px solid #E8F6EE;
}
.rep-row:last-child { border-bottom: 0; }
.rep-n { font-size: 14px; color: #333333; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rep-a { font-family: 'DM Mono', ui-monospace, monospace; font-size: 14px; font-weight: 700; color: #333333; text-align: right; }
.rep-k { font-family: inherit; font-size: 12px; font-weight: 400; color: #6E6E6E; display: block; }
.fil-row { margin: 4px 0 8px; }

/* ── ★毎月の請求（今月まだの相手）★────────────────────────────────
   司さん 2026-08-30「競合が当たり前にしてる事は こちらも当たり前にしてな」
   ＝Misoca も freee も 定期請求を持っている。うちは 勝手に作らず「まだですよ」と言う。
   ★注意書きを flex の子に 文のまま置かない★（狭い端末で1文字ずつ縦に割れる前科） */
.rec-card { border: 1px solid #D4EAE0; background: #F0FAF4; }
.rec-h { font-size: 14px; color: #333333; line-height: 1.7; margin: 0 0 8px; }
.rec-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 10px; padding: 8px 0; border-top: 1px solid #E8F6EE;
}
.rec-n { font-size: 14px; color: #333333; min-width: 60%; }
.rec-k { display: block; font-size: 12px; color: #6E6E6E; line-height: 1.7; }

/* ── ★探す★（相手・請求日・金額）────────────────────────────────
   国税庁 電子帳簿保存法の検索要件と同じ形（年月日・金額・取引先／範囲／組み合わせ）。
   ★入力を 横に並べる時は 箱にして 折り返させる★（狭い端末で 潰れない） */
.q-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.q-row .finput { flex: 1 1 0; min-width: 0; }
.q-t { font-size: 13px; color: #6E6E6E; flex: 0 0 auto; }

/* ── ★印の場所の下見★（司さん 2026-08-30「ハンコの位置は変えれるようにしてる？」）
   ＝紙を出さないと分からない、を作らない。自社の4行と 印だけを 紙と同じ並びで出す。 */
.seal-demo {
  margin-top: 10px; padding: 10px 12px; border: 1px solid #D4EAE0; background: #FFFFFF;
  border-radius: 8px; overflow: hidden;
}
.seal-demo .sd-in { position: relative; text-align: right; }
.seal-demo .sd-name { position: relative; font-size: 13px; font-weight: 700; color: #333333; line-height: 1.45; }
.seal-demo .sd-sub { font-size: 11px; color: #6E6E6E; line-height: 1.45; }
.seal-demo .sd-seal { position: absolute; transform: translateY(-50%); opacity: .95; object-fit: contain; }

/* ── ★印の場所を 紙の上で 決める★（司さん 2026-08-31「場所は自由に変えれんのか？」）
   ＝決まった置き方を選ばせるのをやめ、★本物の紙の絵の上で つまんで動かす★形にした。 */
.seal-stage {
  position: relative; width: 100%; aspect-ratio: 210 / 297; max-width: 300px;
  margin: 8px auto; border: 1px solid #D4EAE0; background: #FFFFFF; overflow: hidden;
  touch-action: none;                 /* 指で動かす時に 画面ごと スクロールしない */
}
.seal-paper { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.seal-drag {
  position: absolute; cursor: grab; opacity: .95; object-fit: contain;
  outline: 1px dashed #3D9E72; outline-offset: 1px;
}
.seal-drag:active { cursor: grabbing; }


/* ── ★設定の先頭の 紙の下見★（司さん 2026-08-31「見せてあげて 変えて見せな分からん」）
   触った物が すぐ 紙に出る＝説明の字を 読ませない。 */
.set-pv-card { position: sticky; top: 0; z-index: 5; }
/* ★畳める帯★（司さん 2026-09-05「設定もこの画面が邪魔でスクロールしてもまったく見れんし」）
   ＝下見は 539px・スマホの 見える所は 約544px。貼り付いたままだと ★下の設定に 届かない★。
   ★スマホは 畳んだ状態で 始める★（js/seikyu-app.js が 幅で 決める）。 */
.set-pv-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px;
}
.set-pv-h .card-h { margin: 0; }
.set-pv-h .mini { white-space: nowrap; flex: 0 0 auto; }
.set-pv-card.tojiru #set-pv-body { display: none; }
/* ★飛んだ先の 見出しが 帯の 下に 隠れない★（2026-09-05 実測で 5枚が 頭0pxだった）
   ＝貼り付く帯（74px）の ぶんだけ 手前で 止める。 */
#scr-set .card { scroll-margin-top: 84px; }
#scr-set .set-pv-card { scroll-margin-top: 0; }
.set-pv {
  width: 100%; aspect-ratio: 210 / 297; max-width: 300px; margin: 4px auto 0;
  border: 1px solid #D4EAE0; background: #FFFFFF; overflow: hidden;
}
.set-pv-f { width: 100%; height: 100%; border: 0; pointer-events: none; }


/* ── ★請求 / 集計★（司さん 2026-08-31「代行のように 請求書／集計を作って 見せ方も一緒に」）
   月と相手を選ぶ → その紙が すぐ出る → PDF／印刷／Excel。 */
.bill-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.bill-pick .finput { flex: 1 1 140px; min-width: 0; }
.bill-pv {
  width: 100%; aspect-ratio: 210 / 297; background: #FFFFFF;
  border: 1px solid #D4EAE0; overflow: hidden;
}
.bill-pv-f { width: 100%; height: 100%; border: 0; pointer-events: none; }


/* ── ★自社のExcelを そのまま使う★（司さん 2026-08-31「ユーザーが自社のテンプレ持ってくる機能は？」）
   読んだ中身を そのまま 表で見せる＝★当てた場所を 人が 目で確かめられる★ */
.book-grid { overflow-x: auto; margin: 8px 0; }
.book-grid table { border-collapse: collapse; font-size: 11px; }
.book-grid th, .book-grid td {
  border: 1px solid #E8F6EE; padding: 2px 5px; white-space: nowrap;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; color: #333333;
}
.book-grid th { background: #F0FAF4; color: #6E6E6E; font-weight: 400; }
.book-grid td.hit { background: #E4F1EA; font-weight: 700; }
.book-slot { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid #E8F6EE; }
.book-slot:last-child { border-bottom: 0; }
.book-slot .bs-l { font-size: 13px; color: #333333; min-width: 8em; }
.book-slot .bs-v { font-size: 12px; color: #6E6E6E; }
.book-slot .bs-no { color: #92500A; }

/* ★元のファイルに マスが無い所★＝ここには 書けない（薄い斜線で そう見せる） */
.book-grid td.none { background: repeating-linear-gradient(45deg, #FFFFFF, #FFFFFF 4px, #F0FAF4 4px, #F0FAF4 8px); }


/* ★選んである札が 絵で 分かる★（指示役 2026-09-02 の保留＝
   「3つの札が 全部 同じ見た目＝押した後に これが効いている が 見えない」）。
   ★見た目は 既に在る 様式の札（.tpl-pick.on）と 同じ 緑の縁を 借りる★＝新しい見た目を 作らない。
   ★名前を .pask-* にしない★＝聞く形のCSSは ★色を1行も 持たない★決まり
   （`seikyu/tests/pask-color.test.mjs` ⑤／色の持ち主は 皮 .btn-primary / .btn-ghost）。
   ⇒ ここは「選ばれている」という ★状態の印★なので 皮では表せず、様式の札と 同じ形にする。 */
.chip-on { box-shadow: 0 0 0 1.5px #2E7D54 inset; font-weight: 700; }

/* ★口座の札は 1口座＝1行（1つの箱）★（指示役 2026-09-02 差し戻し＝
   「3つの口座が 1つの塊に 見える／どこまでが1つの口座か 読めない」）。
   ★横に並べない★＝折り返しても 次の口座と 混ざらない。★375px でも 見る★
   （`seikyu/tests/ask-look-webkit.mjs` が 3幅で 実測）。
   ★文を flex の箱に 入れない★（1文字ずつ 縦に割れる前科3回）＝
   チェックは 左に 置き、字は そのまま 折り返す（padding で 段差を作る）。 */
.pbank { display: block; position: relative; padding: 8px 10px 8px 32px; margin: 0 0 6px;
  border: 1px solid #E8F6EE; border-radius: 10px; font-size: 13px; line-height: 1.7; color: #333333; }
.pbank > input[type="checkbox"] { position: absolute; left: 9px; top: 10px; width: 16px; height: 16px; margin: 0; }
.pbank:last-child { margin-bottom: 0; }

/* ★見出しの横の 小さい注記★（2026-09-02 実測＝この class に CSS が 1行も 無く、
   ★「消費税の一言空なら 出しません」と 字が くっついて 出ていた★・2か所とも）。 */
.hint2 { margin-left: 8px; font-size: 12px; font-weight: 400; color: #333333; }