/*
 * A6結果カード 印刷専用スタイル
 * 仕様書 v1.0 / 4.6 ・ 設計書 v1.0 / 6章 準拠
 *
 * ■ デザインの出典: 渡邊さん提供の「カードデザイン例.pdf」(はてな展 @西武渋谷店 の診断カルテ)。
 *   移植したデザイン言語は5つ:
 *     ① 濃色ベタ背景のヒーロー+白抜き文字(例は濃紺固定 → うちはタイプカラー5色)
 *     ② 枠の上辺に食い込む白いピル型の見出しタブ
 *     ③ キャラを乗せるスポットライトの三角形(例は黄色固定。うちも黄色固定で
 *        タイプカラーと喧嘩させない)
 *     ④ スコアを特大数字で見せる
 *     ⑤ 5軸のレーダーチャート
 *   例はA4相当で情報量が多いが、うちはA6(面積は約1/4)なので要素を絞っている。
 *
 * ■ 表面(#print-card)と裏面(#print-back)の両方をこのファイルが持ちます。
 *   裏面は 2026-08-24 に外注から**自社での刷りだめ**に変わり、mockup/ から移設しました。
 *   切り替えは body.printing-back(スタッフメニューの「カード裏面を印刷」)。
 *   ファイル末尾の「裏面」ブロックを参照。
 * ■ 表面QRは置きません(裏面の会社サイトQRと重複するため。その面積をレーダーに充当)。
 * ■ ルビは印刷時も残します(家で読み返すため)。
 * ■ プリンターは EPSON EP-885AW(2026-07-31 確定。A6縦対応・AirPrint対応)。
 *   A6はフロントトレイ給紙です。実際の余白・欠けは実機の試し刷りで @page margin を
 *   微調整すること(EP-885AW はフチなし非対応サイズだと約3mmの余白が入るため要確認)。
 *   ヒーローのベタ塗りは用紙の端まで伸ばしているので、フチなし不可の場合は
 *   --pc-bleed を余白ぶん増やして塗り足しを作ること。
 */

/*
 * ■ 版面は 105 × 148mm。**A6(105×148)と同じ数字ですが、意味は別物です**
 *   (紙のサイズではなく、縦横比を決めるための版面。2026-08-18 実機で判明)
 *
 *   🔴 **2026-08-28: 146mm → 148mm に上げた(実機で検証中)。**
 *     渡邊さんの「もう少しだけ縦を伸ばせないか」への対応。紙の上で +1.7mm
 *     (125.1mm → 126.9mm)。**実測の改ページ下限 148.2mm の直前**で、余裕は約1mm。
 *     ⚠ **ヘッドレスでは検証できない**(@page を無視するのは iOS だけの挙動で、
 *       手元のPDFは何mmでも必ず1ページになる)。**実機のプレビューで枚数を見ること。**
 *     🔴 **2ページになったら 146mm に戻す。** 戻し方は下の「戻し方」を参照。
 *
 *   iPad から刷るときは **Chrome for iOS** を使う。Safari は消せないヘッダ/フッタ
 *   (URL・日時・1/1ページ)を必ず付けるため使えない。ホーム画面に追加した
 *   standalone でも付いた(2026-08-18 実機確認)。
 *
 *   その Chrome は **@page の size も margin も無視する**。代わりに
 *   **レイアウトの幅を用紙の印刷可能領域の幅に合わせて縮小し、縦横比は保つ**。
 *   iOS が選べる用紙サイズは実質「ポストカード(100×148)」だけ。
 *
 *   🔴 **紙に出る大きさは「版面の縦横比」だけで決まる**(2026-08-26 に整理)。
 *     印刷幅は常に印刷可能領域の幅(実測 約90mm)なので、
 *       **紙の上の高さ = 90mm × (版面の縦 / 版面の横)**
 *     版面を何mmで書こうと、比が同じなら紙に出る絵は同じ。**縦だけ伸ばすと比が変わり、
 *     紙の上でも背が高くなって印刷可能領域からはみ出す = 2ページ目が出る。**
 *
 *   ■ 実測でわかった限界(2026-08-26)
 *     ・162mm(1:1.543)→ 2ページ。158mm(1:1.505)→ **フッターだけ2ページ目**に落ちた
 *     ・PDFで測ると、改ページは版面の 148.2〜152.5mm のあいだ
 *       = 印刷可能な高さは版面換算で**約150mm、紙の上で約128mm**
 *     → まず **146mm(1:1.39)= 紙の上で約125mm** に決めた(上限に対して数mmの余裕)。
 *     → 2026-08-28 に **148mm(1:1.410)= 紙の上で約126.9mm** へ。余裕は約1mmに減った。
 *
 *   ■ 🔴 戻し方(2ページになった場合)
 *     `148mm` → `146mm` を **4箇所**(@page / html,body / #print-card / #print-back)。
 *       sed -i 's/105mm 148mm/105mm 146mm/; s/height: 148mm;/height: 146mm;/' app/css/print.css
 *     ⚠ そのあと `index.html` の app-version と `sw.js` の CACHE_NAME を**もう一段上げる**こと。
 *       同じ版番号で中身だけ戻すと、iPad が古いキャッシュを掴んだままになる。
 *     ⚠ 中身は 146mm 用に詰めたまま触っていないので、**版面の数字を戻すだけで元に戻る**。
 *
 *   ⚠ **推定を信じすぎないこと。** 「印刷可能領域は約90×142mm」という見積もりから
 *     162mm を出したが、実際は 20mm 近く狭かった。**必ず試し刷りで確かめる。**
 *   ⚠ **縦を縮めたぶん、中身も詰めてある**(2026-08-26)。版面だけ縮めると
 *     `#print-card` は overflow:hidden なので**フッターが切り落とされる**。
 *     詰めたのは余白と枠の高さだけで、**文字の大きさは1つも下げていない**
 *     (紙の上で 0.86 倍になるため、字を小さくすると即にじむ)。
 *   ⚠ ポストカードの下には 20mm ほど白が残る。これは**印刷可能領域の外**なので
 *     版面をどう調整しても埋められない。埋めたければフチなし印刷の可否から確認すること。
 *
 *   ⚠ **ここの mm は紙の上では約 0.86 倍になる。** 「2.1mm の文字」は紙では約 1.8mm。
 *     文字の大きさを判断するときは必ずこの係数を掛けること。**実機で「あるある」が
 *     にじんだ原因はこれ**で、カード側の不具合ではなかった。
 *   ⚠ **縦を伸ばしすぎると2ページ目が出て紙が2枚出る。** 下に余白が残るほうが実害が
 *     はるかに小さい。**迷ったら縮める側に倒すこと。**
 *   ⚠ 高さを変えるときは **この @page / html,body / #print-card / #print-back の
 *     4箇所を必ず揃える**(@page は var() が使えないので1箇所にまとめられない)。
 *     裏面(#print-back)を忘れると**表と裏で刷られる大きさが変わる**。
 *     揃っているかは app/test/cardback.test.js が見張っている。
 */
@page {
  size: 105mm 148mm;
  margin: 0;
}

@media print {

  /* 画面要素をすべて隠し、カードだけを刷る */
  body > *:not(#print-card):not(#print-back) { display: none !important; }

  /*
   * 表面 / 裏面の切り替え(2026-08-24)。
   *
   * 🔴 **既定は必ず表面**にしてある。裏面はスタッフが body.printing-back を付けた
   *   ときだけ出る。逆(既定が裏面)にすると、フラグが外れ損ねた瞬間に**来場者の
   *   カードが裏面で刷られる**という取り返しのつかない失敗になる。
   *   同じ理由で main.js の doPrint() は印刷の直前に必ずこのクラスを外している
   *   (フラグの外し忘れから自分で回復する。2026-08-03 の連打バグと同じ考え方で、
   *    「解除に失敗したら壊れる」形にしない)。
   *
   * ⚠ 単独のIDセレクタ(0,1,0)より body.printing-back 付き(0,2,1)のほうが
   *   詳細度が高いので、!important どうしでも後者が勝つ。記述順には依存しない。
   */
  #print-back { display: none !important; }
  body.printing-back #print-card { display: none !important; }
  body.printing-back #print-back { display: flex !important; }

  html, body {
    width: 105mm;
    height: 148mm;   /* @page と揃える(上のコメント参照) */
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: visible;
  }

  #print-card {
    --pc-ink: #2B2440;          /* 本文の墨 */
    --pc-sub: #5C5470;          /* 補助テキスト */
    --pc-spot: #F7C95C;         /* スポットライトの黄(全タイプ共通) */
    /*
     * 左右の塗り足し。フチなし印刷ができない機種で塗り足しを取りたいときに増やす。
     *
     * ⚠ 「PDFプレビューでカード右端に白い線が出る」件(2026-08-03 渡邊さん指摘)は
     *   これでは直らない。原因はカード側ではなく Chrome のPDF書き出しにある:
     *   Chrome は @page で指定した 105mm より数値上わずかに大きいページ
     *   (実測 105.156mm)を作り、その差分(約0.09mm)を塗らないまま残す。
     *   ページ外なので、塗り足しを 4mm にしても @page を 105.4mm にしても
     *   同じ幅の未塗装列が残ることを実測で確認済み。
     *   幅は300dpiで1画素=0.085mm。インクのにじみより小さく、印刷物には出ない。
     *   プレビュー画像を共有するときは、この1画素列を落としてから渡すこと
     *   (ハーネス側で処理済み)。
     *   実機の試し刷りで**本当に**紙の端に白が出た場合だけ、この値を上げる。
     */
    --pc-bleed: 0mm;

    display: flex !important;
    flex-direction: column;
    width: calc(105mm + var(--pc-bleed) * 2);
    margin-left: calc(var(--pc-bleed) * -1);
    height: 148mm;   /* @page と揃える(上のコメント参照) */
    overflow: hidden;
    background: #fff;
    color: var(--pc-ink);
    font-weight: 700;
    /* 背景色をプリンターに出させる(未対応機では白地になるが内容は読める) */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── ① ヒーロー: タイプカラーのベタ塗り ───────────────── */
  /*
   * 46mm → 39mm に詰めた(2026-08-05)。下の事業紹介の帯のぶん。
   * ⚠ キャラ(スポットライト33mm・イラスト27mm)は縮めていない。詰めたのは
   *   **空いていた紫の余白**で、①職業名の行を外した ②見出しタブを絶対配置にして
   *   ヒーロー左上の空白に重ねた(それまではタブが1行ぶんの高さを占めていた)。
   */
  /*
   * 38mm → 40mm(2026-08-18)→ **37.5mm(2026-08-26)**。
   * 2ページ目が出たため版面を 158 → 146mm に縮め、そのぶん中身も詰めた。
   * ⚠ **これ以上伸ばしてはいけない。** キャッチとタイプ名は下端に寄せてあるので、
   *   伸ばすと**左上に青いベタの空白が増えるだけ**になる(42mmで実際にそうなった)。
   *   キャラを大きくしたいときは .pc-spot 側で取ること。
   * ⚠ 縮めるときは .pc-hero-inner と .pc-spot の高さも一緒に下げること
   *   (スポットライトが枠から食み出すと三角が切れる)。
   */
  .pc-hero {
    position: relative;
    height: 37.5mm;
    flex-shrink: 0;
    padding: 2.6mm 5mm 1.2mm;
    background: var(--type-color, #1E5FBF);
    color: #fff;
    overflow: hidden;
  }

  /*
   * ② 枠上辺に食い込む白いピル見出し
   * ⚠ 絶対配置にしている(2026-08-05)。フローに置くと1行ぶんの高さを取るが、
   *   ヒーローの左上は**もともと空白**なので、そこに重ねればヒーローを詰められる。
   *   キャッチ・タイプ名は 33mm の枠の下端に寄っているので重ならない。
   */
  .pc-tab {
    position: absolute;
    top: 3mm;
    left: 5mm;
    display: inline-block;
    background: #fff;
    color: var(--type-color, #1E5FBF);
    font-size: 2.5mm;
    line-height: 1;
    padding: 1.3mm 3mm;
    border-radius: 99mm;
    letter-spacing: .04em;
  }

  /* タブを絶対配置にしたので、ヒーローの内側の高さ=スポットライトの高さで足りる */
  .pc-hero-inner {
    display: flex;
    align-items: flex-end;
    gap: 1.5mm;
    height: 33.5mm;
  }

  .pc-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1mm;
    flex: 1;
    min-width: 0;
    padding-bottom: 1mm;
  }

  /*
   * キャッチ → 名前 の順。
   * ⚠ 職種(旧 .pc-job)はここには置かない。2026-08-05 に削除した。
   *   すぐ下の「むいている おしごと」枠が同じ職業名を見出し付きで出すため、
   *   **同じ文字列が3mm離れて2回出ていた**(index.html のコメント参照)。
   */
  /*
   * ⚠ **2.6mm から上げてはいけない(2026-08-18 に 2.8mm を試して戻した)。**
   *   ヒーローのテキスト幅は 95 - スポット34 - gap1.5 = 59.5mm。dx のキャッチが
   *   22文字あるので 2.6mm なら 57.2mm で1行に収まるが、2.8mm では 61.6mm で
   *   2行に折れ、**「リー / ダー」とカタカナ語が割れる**。
   *   'ー' は行頭禁則なので line-break: strict でも直らない(行末には置けるため)。
   *   キャッチの文字数上限は scoring.test.js が見張っている。
   */
  .pc-catch { font-size: 2.6mm; line-height: 1.45; opacity: .95; line-break: strict; }
  .pc-name  { font-size: 7.6mm; line-height: 1.14; letter-spacing: -.01em; white-space: nowrap; }
  .pc-name--long  { font-size: 6.5mm; }
  .pc-name--xlong { font-size: 5.6mm; letter-spacing: -.03em; }

  /* ③ スポットライトの三角にキャラを乗せる */
  .pc-spot {
    position: relative;
    /* ⚠ 34mm より広げるとヒーローのテキスト幅が減って dx のキャッチが2行に折れる */
    width: 34mm;
    height: 31.5mm;
    flex-shrink: 0;
  }
  .pc-spot-tri {
    position: absolute;
    inset: 0;
    background: var(--pc-spot);
    /* 上を細く下を広く=スポットライト。例のPDFと同じ形 */
    clip-path: polygon(50% 0%, 100% 88%, 88% 100%, 12% 100%, 0% 88%);
  }
  .pc-visual {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: end center;
    padding-bottom: 2mm;
  }
  /* 27mm → 28.5mm(2026-08-18)。紙の上では約 0.86 倍なので実効 23mm → 24.5mm */
  .pc-visual .char-img--card  { width: 27mm; height: 27mm; object-fit: contain; }
  .pc-visual .char-emoji--card { font-size: 20.5mm; line-height: 1; }

  /*
   * ⚠ ルビの扱い(2026-08-04 渡邊さん指摘「ルビがあることで少し中心からずれて見える」)。
   *   ルビは行の上に付くので、**ルビのある行だけ行高が増えて行間が不均等になる**。
   *   さらに上下中央寄せの枠では、上に食われたぶん**文字が下に寄って見える**。
   *   対策は2つで、①rt の行高を1に固定して余分に広がらせない
   *   ②ルビが載る文字列の行高を 1.55 以上にして、**ルビを行の中に収める**
   *   (画面側も同じ考えで .q-text 等に行高2.05を入れている。設計書5.1)。
   */
  #print-card rt { line-height: 1; }

  /* ── 中段の共通ボックス(白地+タイプカラーの細枠+ピル見出し) ── */
  .pc-box {
    position: relative;
    border: .35mm solid var(--type-color, #1E5FBF);
    border-radius: 2.4mm;
    padding: 3.4mm 2.6mm 2.2mm;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .pc-boxlabel {
    position: absolute;
    top: -1.7mm;
    left: 2.4mm;
    background: var(--type-color, #1E5FBF);
    color: #fff;
    font-size: 2.3mm;
    line-height: 1;
    padding: 1mm 2.2mm;
    border-radius: 99mm;
    white-space: nowrap;
  }

  .pc-row {
    display: flex;
    gap: 2mm;
    /*
     * 上の余白は 2.6 → 3.8mm(2026-08-18)。版面を縦に伸ばしたぶんの余りが
     * 事業紹介の帯の上(margin-top:auto の受け皿)に1箇所だけ溜まって
     * **そこだけ隙間が広く見えた**ので、枠と枠の間へ均等に配り直した。
     */
    padding: 2.4mm 4mm 0;
    flex-shrink: 0;
  }
  /*
   * 45mm → 41mm(2026-08-05)。下の事業紹介の帯に縦を回すため。レーダーは34→32mm。
   * ⚠ 高さは**いちばん縦を使うタイプ(sys)で決めている**。sys だけ jobCard が2行に
   *   なるので、1行のタイプに合わせて詰めると sys でフッターが紙の外に出る。
   *   カードを触ったら**5タイプ全部を刷って確認すること**(1タイプだけ見ると気づけない)。
   */
  /* 41mm → 46mm(2026-08-18)。あるあるの字を大きくしたぶんの行数を吸収する */
  .pc-row--power { height: 44mm; }

  /*
   * ⑤ レーダーチャート + ④ 特大数字(エンジニアパワー枠)
   *
   * 特大%は 2026-08-03 に「ひっさつわざ」枠から移してきた。%はパワーの値なので
   * レーダーと同じ枠に置くのが正しい(渡邊さん指摘)。
   * 枠を広げたぶん「ひっさつわざ」枠は狭くなるが、あちらは名前と説明だけなので収まる。
   */
  /*
   * 枠幅の配分。pc-row の内寸97mm から gap 2mm を引いた95mmを分ける。
   *   **パワー 38mm / あるある 57mm**(flex:1 で残りを取る)
   *
   * ⚠ 2026-08-18 に 44 → 38mm へ**狭めた**。狙いは隣の「あるある」を 51 → 57mm に
   *   広げること。あるあるは紙の上で 43mm しかなく、2.1mm 指定の文字が 1.8mm に
   *   なってにじんでいた(実機で確認)。**幅を作らないと字を大きくできない**。
   * ⚠ レーダーは 32mm なので、左右の padding 1.6mm を含めて 35.2mm が下限。
   *   38mm はその上の最小限。これ以上狭めるとレーダーが枠線に触る。
   * ⚠ 狭めたことで注記(.pc-power-cap)は2行に折れる。折れて構わない前提で
   *   枠の縦に余裕を持たせてある。
   */
  .pc-box--power {
    width: 38mm;
    flex-shrink: 0;
    /* 下は注記が枠線に寄りすぎないよう少し多めに取る */
    padding: 3.4mm 1.6mm 2.2mm;
    gap: 1mm;
    justify-content: center;
  }
  .pc-radar { flex-shrink: 0; display: grid; place-items: center; color: var(--pc-ink); }
  /* 実寸で固定する(親の高さに依存させると letterbox して小さく出るため) */
  /* あるあるが横で縦を使うので、以前(30mm)より大きくできる */
  .pc-radar .radar { width: 32mm; height: 32mm; }

  /*
   * overflow:hidden は使わない。枠の上辺に載せているピル見出し(.pc-boxlabel)は
   * 枠の外にはみ出す設計なので、切り取られて「ひっさつわざ」の上半分が欠ける
   * (2026-08-03 渡邊さん指摘)。はみ出し対策は .pc-waza-name--long の字送りで行う。
   */
  /*
   * ひっさつわざ。2026-08-04 に**全幅の単独枠**にした。
   * ⚠ justify-content: center を使わない。ルビが上に付くぶん文字が下に寄って見えるため。
   *   上寄せにして、枠の余白は padding で対称に取る。
   */
  .pc-box--waza {
    margin: 2.4mm 4mm 0;
    padding: 3.0mm 2.6mm 1.9mm;
    gap: .8mm;
    flex-shrink: 0;
  }
  /*
   * line-break: strict は禁則処理のため。既定だと「ときめきデザインフラ / ッシュ」のように
   * 行頭に小さい「ッ」が落ちる。印刷して持ち帰るものなので、ここは崩さない。
   */
  .pc-waza-name {
    font-size: 4.4mm;
    line-height: 1.22;
    color: var(--type-color, #1E5FBF);
    line-break: strict;
  }
  /*
   * わざ名は1行に収める。文字数に応じた字送りの段階は main.js が付け替える。
   * **全幅にしたので内寸が 45.8mm → 91.8mm** になり、字を大きくできた。
   *   10文字×4.4mm=44mm / 14文字×4.2mm=58.8mm / 18文字×3.8mm=68.4mm(いずれも91.8mm以内)
   * ⚠ 以前は45.8mmだったため15文字以上で2.6mmまで落とす必要があり、
   *   1タイプだけ字が小さくなって浮いていた。全幅にしてその問題も消えた。
   */
  .pc-waza-name--long  { font-size: 4.2mm; }
  .pc-waza-name--xlong { font-size: 3.8mm; }
  /*
   * わざの説明。内寸45.8mm に対し 2.3mm × 19文字 = 43.7mm で1行に収まる。
   * ⚠ 2.4mm だと 19文字が45.6mmで内寸ぎりぎりになり、ルビや字送りの誤差で2行に折れて
   *   **最後の1文字だけが次の行に落ちる**(「…みちび / く」。2026-08-04に実機出力で発見)。
   *   この文言は空白が無いので keep-all では直せない。字送りで収めること。
   */
  /* 全幅(内寸91.8mm)になったので、19文字でも 2.7mm で余裕をもって1行に収まる */
  .pc-waza-desc { font-size: 2.7mm; line-height: 1.55; color: var(--pc-sub); line-break: strict; }

  /*
   * むいているおしごと(2026-08-04)。
   *
   * ⚠ **最初は「ひっさつわざ」枠の中に破線で区切って入れていたが、渡邊さんの指摘で
   *   独立した枠にした。** 枠の上辺にピル見出しが載る作りなので、同じ枠に入れると
   *   **見出しの内容だと読まれる**。破線では足りない。見出しを分けるなら枠も分けること。
   *
   * ⚠ ヒーローの直下に置く。ヒーロー最後の行が職業名(.pc-job)なので
   *   **名前 → 説明 が一続きに読める**。結果画面と同じ並び。
   *
   * 横幅は他の枠と同じ内寸(105 - 4×2 - 2.6×2 = 91.8mm)。1行あたり約43文字入るので、
   * jobCard(44〜53文字)は2行に収まる。
   */
  .pc-box--job {
    margin: 2.4mm 4mm 0;
    padding: 2.9mm 2.6mm 1.4mm;
    gap: .4mm;
    flex-shrink: 0;
  }
  .pc-jobline-name {
    display: block;
    font-size: 2.8mm;
    line-height: 1.2;
    font-weight: 800;
    color: var(--type-color, #1E5FBF);
  }
  .pc-jobline-desc {
    display: block;
    /* 2.05 → 2.35mm(2026-08-18)。紙の上で 1.76mm しかなく、カードで最小だった */
    font-size: 2.35mm;
    line-height: 1.38;
    color: var(--pc-sub);
    /*
     * ⚠ ここだけ word-break: keep-all を使う(空白でしか改行させない)。
     *   既定だと「つくる しご / と。」のように**単語の途中で割れる**(実際に出た)。
     *   文言は「お店の レジや 会社の しくみを つくる しごと。」のように
     *   文節ごとに空白を入れて書いてあるので、空白でだけ折れば自然な位置で切れる。
     *
     * ⚠ **わざ名(.pc-waza-name)には使ってはいけない。** あちらは
     *   「ぜんいんしゅうごう!ととのえコンパス」のように空白の無い長い連なりなので、
     *   keep-all にすると1語扱いになって枠からはみ出す(2026-08-03に踏んだ)。
     *   ここが安全なのは **空白なしの最長連が短い**ことが前提で、
     *   その前提は scoring.test.js が見張っている。
     */
    word-break: keep-all;
  }

  /*
   * レーダーの下の注記。特大%の代わりに「どのくらいそのタイプだったか」を言葉で伝える。
   * 数字ではなく言葉にしてあるのは、%だと「点数が低い」と読まれてしまうため。
   *
   * ⚠ 2026-08-18 に枠を 44 → 38mm へ狭めたので**2〜3行に折れる**(内寸 32.8mm)。
   *   折れて構わない。text-wrap: balance で行の長さをそろえている。
   */
  .pc-power-cap {
    font-size: 2.1mm;
    line-height: 1.35;
    color: var(--pc-sub);
    text-align: center;
    text-wrap: balance;
    /*
     * ⚠ keep-all が必要。既定だと枠が狭いせいで
     *   「5つのしつもんのう / ち 5こが…」のように**語の途中で割れる**(実際に出た)。
     *   文言は文節ごとに空白が入っているので、空白でだけ折れば自然な位置で切れる。
     *   空白なしの最長連は「5つのしつもんのうち」11文字=約23mmで内寸32.8mmに収まる。
     */
    word-break: keep-all;
  }

  /* 中段B: あるある+なかよし/凸凹 */
  .pc-box--traits {
    flex: 1;
    min-width: 0;
    gap: 1.2mm;
    padding: 3.4mm 2.6mm 2.2mm;
    /* overflow:hidden にすると枠上辺に載るピル見出しが切れるので使わない */
  }
  /* 横並びで枠が狭くなったので字を落とす。ルビが行に収まる行高にする */
  .pc-line { font-size: 2.3mm; line-height: 1.6; }

  .pc-aruaru { list-style: none; margin: 0; padding: 0; display: flex;
               flex-direction: column; gap: 1.8mm; }
  /*
   * 行頭の丸は **絶対配置にしない**(2026-08-03 渡邊さん指摘)。
   * `position: absolute; top: 1mm` で置いていたが、**ルビの有無で行の高さが変わる**ため
   * ルビ付きの行だけ本文が下がり、丸と文字の中心がズレていた。
   * インライン要素として文中に置き `vertical-align: middle` で本文に揃える。
   * こうすると基準が本文のベースラインになるので、ルビが付いても一緒に動いてズレない。
   * ぶら下げは text-indent(負)+ padding-left で作る。
   */
  /*
   * 枠を 51 → 57mm に広げたぶんを**字の大きさに使う**(2026-08-18)。
   *   内寸 57 - 2.6×2 = 51.8mm、ぶら下げ 3.8mm を引いて 48mm。
   *   あるあるの最長は19文字なので 2.5mm × 19 = 47.5mm でぎりぎり1行に収まる。
   *
   * ⚠ **紙の上では約 0.86 倍**なので、2.5mm 指定は紙で約 2.14mm。
   *   以前の 2.1mm 指定は紙で 1.8mm しかなく、普通紙でにじんでいた。
   * ⚠ 行高は 1.6 のまま。ルビを行の中に収めて行間を不均等にしないため。
   */
  .pc-aruaru li {
    padding-left: 3.8mm;
    text-indent: -3.8mm;
    font-size: 2.5mm;
    line-height: 1.6;
  }
  /* タイプカラーの丸。絵文字だとプリンターで色が転ぶため図形で描く */
  .pc-aruaru li::before {
    content: '';
    display: inline-block;
    width: 2.2mm;
    height: 2.2mm;
    margin-right: 1.5mm;
    border-radius: 50%;
    background: var(--type-color, #1E5FBF);
    vertical-align: middle;
    text-indent: 0;
  }

  .pc-pair {
    display: flex;
    flex-direction: column;
    gap: .5mm;
    margin-top: auto;
    border-top: .25mm dashed rgba(43, 36, 64, .28);
    padding-top: 1.2mm;
  }
  /*
   * ⚠ **flex にすること。** インライン組みだと、ラベルの右のテキストが折れたときに
   *   **次の行がラベルの下(枠の左端)から始まる**。support の
   *   「凸凹コンビ なし! だれとでもうまくやれる」で最後の「る」が枠の左に落ちていた
   *   (2026-08-04に実機出力で発見)。flex ならテキストは自分の列の中で折れるので、
   *   2行になってもラベルの右に揃う。
   */
  .pc-pair .pc-line {
    display: flex;
    align-items: baseline;
    gap: 1.2mm;
    /*
     * 2.15 → 2.4mm(2026-08-18)。紙の上で 1.84mm しかなかったため。
     * ⚠ **これ以上上げてはいけない。** 使える幅は 内寸51.8 - ラベル13.8 - gap1.2 = 36.8mm。
     *   いちばん長いのは support の「なし! だれとでもうまくやれる」15文字(main.js の
     *   固定文言)で 2.4mm × 15 = 36mm。上げると2行に折れる。
     */
    font-size: 2.4mm;
    line-height: 1.6;
    color: var(--pc-sub);
  }
  /* 見出し語をタイプカラーの小さなラベルにする(絵文字の代替。例のPDFと同じ組み) */
  .pc-pair .pc-line b {
    display: inline-block;
    flex-shrink: 0;
    min-width: 13.8mm;
    padding: .3mm 1.2mm;
    border-radius: .8mm;
    background: var(--type-tint, #E8F0FB);
    color: var(--type-color, #1E5FBF);
    font-size: 2.3mm;
    text-align: center;
  }

  /* ── アゼットの事業紹介の帯 + フッター ───────────────── */
  /*
   * 2026-08-05 新設。社内レビュー「アゼットの事業をはっきり明記したい」への対応。
   *
   * ⚠ `margin-top: auto` で**カードの最下部に貼り付ける**。上の枠の高さが文言で
   *   多少変わっても、余りはこの帯の上に集まって帯の位置は動かない。
   * ⚠ 左右は塗り足しぶんまで伸ばす(ヒーローと同じ扱い)。紙の端まで地色を届かせる。
   * ⚠ ベタ塗りではなく tint(薄地)。ヒーローに続く2つ目のベタ塗りは縞に見えるうえ、
   *   1枚あたりのインクが増える(EP-885AW のインク消費は未実測のため増やさない)。
   */
  .pc-bizband {
    flex-shrink: 0;
    margin-top: auto;
    padding: 1.6mm calc(4mm + var(--pc-bleed)) 1.2mm;
    background: var(--type-tint, #E8F0FB);
    border-top: .35mm solid var(--type-color, #1E5FBF);
  }
  /* 見出し。他の枠の .pc-boxlabel と同じ見え方に揃える(枠が無いので絶対配置にしない) */
  .pc-bizlabel {
    display: inline-block;
    background: var(--type-color, #1E5FBF);
    color: #fff;
    font-size: 2.3mm;
    line-height: 1;
    padding: 1mm 2.2mm;
    border-radius: 99mm;
    white-space: nowrap;
  }
  /*
   * 「アゼットでは、…しています。」
   * ⚠ この文言には空白が無いので **keep-all を付けてはいけない**(1行扱いで溢れる)。
   * ⚠ 色は --pc-sub(グレー)にしない。「はっきり明記」が指摘の主旨なので墨で出す。
   */
  .pc-biz {
    display: block;
    margin-top: .7mm;
    font-size: 2.3mm;
    line-height: 1.5;
    color: var(--pc-ink);
  }
  /*
   * 5事業の一覧。自分のタイプの事業だけタイプカラーのベタで強調する。
   * ⚠ 並びは TYPE_ORDER(レーダーの5軸と同じ)。見比べれば対応が分かる。
   * ⚠ 折り返しは許す(flex-wrap)。事業名が伸びても溢れずに2行になるだけにしておく。
   *   ただし2行になると帯が伸びて上の枠を押すので、長さは scoring.test.js が見張っている。
   */
  .pc-bizlist {
    list-style: none;
    margin: .9mm 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1mm;
  }
  /*
   * 🔴 行高は 1.55 以上にする(2026-08-05 渡邊さん指摘
   *   「ルビのない事業が少し上にずれている」)。
   *
   *   ⚠ **ルビのある/ない事業が混在する**のがこの枠の特徴(AIサービス・ITサポートにはルビが無い)。
   *     行高が足りないと**ルビが行の外にはみ出して、ルビのあるチップだけ背が高くなる**。
   *     チップは flex で同じ高さに引き伸ばされるため、**ルビの無いチップは
   *     引き伸ばされた箱の上端に文字が残り、上にずれて見える**。
   *   ⚠ 直し方は「ルビの無いものだけ下げる」ではなく **行高を上げてルビを行の中に収める**こと。
   *     そうすれば5つとも同じ行ボックスになり、**文字の位置が自動でそろう**
   *     (ルビの有無で場合分けしなくてよい)。このファイルの他の枠
   *     (.pc-aruaru li / .pc-line = 1.6)と同じ考え方で、ここだけ 1.5 で例外になっていた。
   */
  .pc-bizlist li {
    padding: .5mm 1.5mm;
    border-radius: .9mm;
    background: #fff;
    border: .2mm solid rgba(43, 36, 64, .18);
    font-size: 2.05mm;
    line-height: 1.7;
    color: var(--pc-sub);
    white-space: nowrap;
  }
  .pc-bizlist li.is-mine {
    background: var(--type-color, #1E5FBF);
    border-color: var(--type-color, #1E5FBF);
    color: #fff;
  }
  .pc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2mm;
    border-top: .3mm solid rgba(43, 36, 64, .22);
    margin-top: .9mm;
    padding-top: .8mm;
    font-size: 2.3mm;
    color: var(--pc-sub);
  }
  .pc-logo  { height: 4.2mm; width: auto; flex-shrink: 0; }
  .pc-company { flex-shrink: 0; margin-left: -.8mm; }
  .pc-count { color: var(--type-color, #1E5FBF); }
  .pc-event { flex-shrink: 0; }

  /* 印刷でもルビを維持する。行間は画面より詰めて1枚に収める */
  #print-card rt { font-size: .5em; }

  /* 改ページさせない(必ず1枚に収める) */
  #print-card, #print-card * { break-inside: avoid; page-break-inside: avoid; }

  /* ══ 裏面ここから ═══════════════════════════════════════════════════
   *
   * カード裏面(全タイプ共通)。2026-08-24 に mockup/カード裏面_発注用_v2.html から移設。
   *
   * 🔴 **高さは表面と同じ 146mm でなければならない。**
   *   iOSの印刷はページの**縦横比だけ**を見て用紙の印刷可能領域に合わせて縮小する。
   *   移設前の裏面は 148mm(1:1.41)のままで、表面(1:1.54)と並べると幅90mmのとき
   *   高さが 138.9mm 対 126.9mm = **12mmずれていた**。刷り比べる前に気づけない類の
   *   ずれなので、app/test/cardback.test.js が @page / html,body / #print-card /
   *   #print-back の4箇所の一致を検査している。
   *
   * 🔴 **ここの mm も紙の上では約 0.86 倍になる**(表面と同じ)。
   *   移設のときに小さい文字を軒並み上げてあるのはこのため。移設前の値のままだと
   *     2.3mm → 紙の上 1.98mm、URL行の 1.9mm → 1.63mm
   *   で、実機で「あるある」がにじんだ 1.8mm を下回る。**下限は指定 2.4mm**
   *   (紙の上 2.06mm)とし、テストで守っている。
   *   ⚠ 小さくしたくなったら**字を縮めるのではなく文言を削ること**。
   *
   * ⚠ URL行(www.azet.jp/?utm_source=…)は**削除した**。紙の上で 1.63mm にしかならず
   *   誰も読めないうえ、下の会社概要に Web: www.azet.jp があって重複していた。
   *   QRの中身は tools/make_qr.py が唯一の出どころ。
   */

  #print-back {
    --pb-brand: #12408A;        /* アゼットのブランドブルー(ロゴのAマーク濃色側) */
    --pb-brand-light: #4FA3E3;
    --pb-ink: #23293D;
    /*
     * ⚠ 2026-08-28 に #5C6478 から濃く変更。QR脇の注記・会社概要・フッターは
     *   2.6〜2.7mm / font-weight 400 で、中間グレーだと実機の印刷で読めなかった。
     *   font-weight を上げる手は使えない(Hiragino Maru Gothic ProN は W4 のみで、
     *   iOS では 500 も 400 と同じ字面になる)。濃さは色でしか稼げない。
     */
    --pb-sub: #2B3245;
    --pb-line: rgba(18, 64, 138, .22);

    flex-direction: column;
    width: 105mm;
    height: 148mm;   /* @page と揃える(上の🔴参照) */
    overflow: hidden;
    background: #fff;
    color: var(--pb-ink);
    font-weight: 700;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── ヘッダー: ブランドブルーのベタ(表面のヒーローと対になる) ── */
  .pb-head {
    background: var(--pb-brand);
    color: #fff;
    padding: 7mm 6mm 6mm;
    text-align: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  /* タペストリー案①のリングモチーフ(左上・右下)を小さく再現 */
  .pb-ring {
    position: absolute;
    border: 1.6mm solid rgba(255, 255, 255, .16);
    border-radius: 50%;
  }
  .pb-ring--tl { width: 30mm; height: 30mm; top: -13mm; left: -10mm; }
  .pb-ring--br { width: 24mm; height: 24mm; bottom: -12mm; right: -7mm; }

  /* Aマークは濃紺ヘッダーの上に置くため白に転ばせる(モノクロ運用) */
  .pb-logo { display: block; margin: 0 auto; height: 11mm; width: auto; filter: brightness(0) invert(1); }
  .pb-company { display: block; margin-top: 2.2mm; font-size: 4.4mm; letter-spacing: .04em; }
  .pb-tag { display: block; margin-top: 2.6mm; font-size: 3.5mm; letter-spacing: .06em; }

  /* ── QR(会社サイト・1種のみ) ─────────────────── */
  .pb-qr {
    margin: 6mm 6mm 0;
    border: .4mm solid var(--pb-line);
    border-radius: 2.6mm;
    padding: 4.5mm 4mm 3.5mm;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4mm;
    flex-shrink: 0;
  }
  .pb-qr-label {
    position: absolute;
    top: -1.9mm;
    left: 3mm;
    background: var(--pb-brand);
    color: #fff;
    font-size: 2.6mm;
    line-height: 1;
    padding: 1.1mm 2.4mm;
    border-radius: 99mm;
    white-space: nowrap;
  }
  /*
   * QRは30mm(紙の上で約25.8mm)。300dpiで約305画素あり、実機の印刷出力からの
   * 復号は 27mm 時点で余裕2倍を確認済み(2026-08-03)。
   * ⚠ image-rendering: pixelated はモジュールの境界をぼかさないために必須。
   */
  .pb-qr-img { width: 28mm; height: 28mm; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
  .pb-qr-text { min-width: 0; }
  .pb-qr-lead { display: block; font-size: 3.4mm; line-height: 1.6; color: var(--pb-brand); }
  /*
   * ⚠ 行高 1.75。表面は 1.55 だが、ここは **3行ぜんぶにルビが載る**ので足りない
   *   (2026-08-24 の出力で「見」のルビが上の行に触った)。
   *   2.6mm の文字 + ルビ .5em = 3.9mm に対し 1.55 では行箱が 4.03mm しかなく、
   *   ルビが行の中にぎりぎり収まらない。QR枠には縦の余裕があるので行高で逃がす。
   */
  .pb-qr-note { display: block; margin-top: 1.8mm; font-size: 2.6mm; line-height: 1.95; color: var(--pb-sub); font-weight: 400; }

  /* ── 会社概要 ───────────────────────────── */
  .pb-about {
    margin: 6mm 6mm 0;
    border: .4mm solid var(--pb-line);
    border-radius: 2.6mm;
    padding: 4.5mm 3.6mm 3mm;
    position: relative;
    flex: 1;
    min-height: 0;
  }
  .pb-about-label {
    position: absolute;
    top: -1.9mm;
    left: 3mm;
    background: var(--pb-brand);
    color: #fff;
    font-size: 2.6mm;
    line-height: 1;
    padding: 1.1mm 2.4mm;
    border-radius: 99mm;
  }
  .pb-name { display: block; font-size: 4.2mm; color: var(--pb-brand); }
  .pb-biz { display: block; margin-top: 2.4mm; font-size: 2.7mm; line-height: 1.75; color: var(--pb-sub); font-weight: 400; }
  .pb-dl {
    margin: 3.4mm 0 0;
    display: grid;
    grid-template-columns: 17mm 1fr;
    row-gap: 1.8mm;
    font-size: 2.6mm;
    line-height: 1.5;
  }
  .pb-dl dt { color: var(--pb-brand); }
  .pb-dl dd { margin: 0; color: var(--pb-sub); font-weight: 400; }

  /* ── フッター ───────────────────────────── */
  .pb-foot {
    padding: 3mm 6mm 4mm;
    text-align: center;
    font-size: 2.6mm;
    line-height: 1.5;
    color: var(--pb-sub);
    font-weight: 400;
    flex-shrink: 0;
  }
  .pb-foot b { color: var(--pb-brand); font-weight: 700; }

  /*
   * 印刷でもルビを維持する(表面と同じ)。
   * ⚠ rt の行高を 1 に固定するのを忘れないこと。既定のままだとルビの行だけ行箱が
   *   余分に伸び、**ルビのある行とない行で行間が不揃いになる**(2026-08-04 の教訓)。
   */
  #print-back rt { font-size: .5em; line-height: 1; }

  /* 改ページさせない(必ず1枚に収める) */
  #print-back, #print-back * { break-inside: avoid; page-break-inside: avoid; }
  /* ══ 裏面ここまで ═══════════════════════════════════════════════════ */
}