/**
 * 共通スタイル (common.css)
 * 全ページ共通のデザインシステム
 *
 * 使用画面（全画面共通）:
 *   - login/index.html: ログインフォーム
 *   - dashboard/index.html: ダッシュボード
 *   - r02_authors.html: 著者マスタ
 *   - r04_items.html: 商品マスタ
 *   - inzei_detail.html: 印税入力
 *   - genkoryo_detail.html: 原稿料入力
 *   - shiharai_detail.html: 支払詳細
 *   - shiharai_search.html: 支払検索
 *   - operation_log.html: 操作ログ
 *   - system_log.html: システムログ
 *
 * ■ デザインルール
 *   - フォント: Meiryo UI → Meiryo → MS PGothic (フォールバック)
 *   - 基調色: blue系 (blue-100背景, blue-200ボーダー, blue-600アクション)
 *   - 入力欄ボーダー: blue-300 (#93c5fd)
 *   - フォーカス: blue-500 ring + yellow-50 背景ハイライト
 *   - セクション見出し: blue-900 + 2px blue-200 下線
 *   - ボタン: rounded-lg, blue-600 → blue-700 hover
 *   - カード: rounded-xl, border-blue-200, shadow-sm
 */

/* ========================================
   1. 基本設定
   ======================================== */

:root,
body {
    font-family: 'Meiryo UI', Meiryo, 'MS PGothic', sans-serif;
}

/* ========================================
   1.5. z-index レイヤー序列（2026-07-27 確認ダイアログ背面表示バグ修正で新設）
   ======================================== */
/*
 * 目的(What): 全画面共通で使う「浮き上がる要素」の重なり順を、個別の思いつき数値ではなく
 *   名前付きティア（100刻み）に固定する。
 * 意味合い(Why/Role): 2026-07-27 ユーザー報告 — 印税入力の「最終支払データ復元」モーダル
 *   (#sales-pattern-modal) 表示中に確認ダイアログ(#confirm-overlay)を開くと、両者が同じ
 *   Tailwind z-50 だったため、DOM挿入順（confirm-overlayはCommonUI.init()で先にmodal-containerへ
 *   注入済み、sales-pattern-modalは後からmodal-containerへappendChildされる）で後勝ちになり、
 *   確認ダイアログが背面に隠れて「実行を押しても反応がない」ように見えた（同一z-indexはCSS上
 *   DOM順で後にある要素が手前になる）。同型の衝突は #restore-modal（genkoryo_detail.html）、
 *   #ymk-tiptap-overlay（メモ編集モーダル）、#ws-edit-request-overlay（編集権リクエスト通知）
 *   でも構造上起こり得た。個別のz-indexを都度1つ上げる対症療法は、次に別のモーダルが増えた時に
 *   同じ事故を再発させるため、「コンテンツモーダル」と「システムダイアログ」を別ティアに分離して
 *   解決する。
 * 接続情報(Where):
 *   - --ymk-z-content-modal を使う要素: inzei_detail.html #sales-pattern-modal /
 *     genkoryo_detail.html #restore-modal / common/js/ymk-tiptap-editor.js #ymk-tiptap-overlay
 *   - --ymk-z-system-dialog を使う要素: common/js/common.js が生成する #modal-overlay
 *     （showModal/showError）/ #confirm-overlay（showConfirm）/ #ws-edit-request-overlay
 *     （編集権リクエストのYes/No）、および r02_authors.html / r04_items.html がハードコードで
 *     持つ同名要素（CommonUI注入分とDOM順が競合しうるため個別に同値へ揃えている）
 *   - --ymk-z-toast は現時点で常設使用中の実装なし（log-ui.css の .ymk-toast は操作ログ画面専用の
 *     独立スタッキングコンテキストで対象外、common/js/inzei-ui.js の showToast() は未使用の
 *     旧実装のため対象外）。将来トーストを常設導入する際はこのティアを使うこと。
 *
 * ティア一覧（値が大きいほど手前。1〜60は今回変更していない既存の実装値）:
 *   1〜30   : ページ内固定要素（sticky thead/tfoot・sticky列・ページヘッダー等。各CSSファイルで個別管理）
 *   40      : サイドバー用オーバーレイ（モバイル時の暗幕）
 *   50      : サジェスト・ミニカレンダー・モバイルサイドバー本体
 *   55      : サジェストに重なる候補パネル
 *   60      : 補足説明吹き出し .ymk-hint-mark（サジェスト系の最前面）
 *   100 (--ymk-z-content-modal) : コンテンツモーダル — 業務データを扱う個別モーダル（前回データ選択・メモ編集等）
 *   200 (--ymk-z-system-dialog) : システムダイアログ — CommonUIの確認/情報ダイアログ、編集権リクエスト通知。
 *                                  常に最前面。新しいコンテンツモーダルを追加してもこのティアより上に出ない。
 *   300 (--ymk-z-toast)         : トースト通知（予約枠。導入時はこのティアを使うこと）
 *
 * 新規モーダルを追加する時のルール:
 *   - 業務データを見せる/選ばせるモーダルは必ず z-[var(--ymk-z-content-modal)] を使う（新規に z-50 を割り当てない）
 *   - showConfirm/showModal はこれより上のティアを通るため呼出側で個別に z-index を意識する必要はない
 *   - 「今回だけ数値を1つ上げる」場当たり変更は禁止。新しいティアが必要な場合はこの一覧に追記してから値を決める
 */
:root {
    --ymk-z-content-modal: 100;
    --ymk-z-system-dialog: 200;
    --ymk-z-toast: 300;
}

input[type="radio"] {
    accent-color: #2563eb; /* blue-600 */
}

/* ========================================
   2. スクロールバー
   ======================================== */

/* 全体スクロールバー (PC向け) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* サイドバー内スクロールバー */
.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}
.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

/* ========================================
   3. フォーム要素
   ======================================== */

/* ラベル */
.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #374151; /* gray-700 */
    margin-bottom: 0.25rem;
}

/* 入力欄 */
/* 目的(What): マスタ検索条件パネル内の全入力欄（テキスト .form-input / 一致方法・入力完成度 ymk-combobox /
     日付 ymk-period-combo）の高さ・フォントを .form-input 基準に統一する。
   意味合い(Why): 2026-07-02 ユーザー指摘「名称とコードの高さが他要素と異なりガタガタ」。部品ごとに
     padding/font-size が異なり（form-input=0.5rem/0.95rem、combobox=0.25rem/0.875rem、period-combo=0.25rem/1.125rem）
     行の底辺が揃わなかった。部品のグローバル定義は他画面（処理年月ヘッダー等）が使うため触らず、
     #search-conditions-section スコープでのみ上書きする（r02/r04 両画面が同じ section id を持つ）。
   接続情報(Where): 対象 = r02_authors.html / r04_items.html の #search-conditions-section 配下 /
     基準寸法 = 下の .form-input（@media 内 0.5rem 0.75rem / 0.95rem）/ 部品CSS = ymk-combobox.css・ymk-period-combo.css */
/* 2026-07-02 追補: padding/font-size だけの統一では不足（ユーザー再指摘「フォントも要素サイズもバラバラ」）。
   combobox の font-weight:600、period-combo の font-weight:700 + 等幅フォント + 中央寄せ + JS インライン width が
   残っていたため、太さ・書体・寄せ・幅まで .form-input と同一に強制する。!important は period-combo の
   JS インライン width(ymk-period-combo.js _build) に勝つためだけに使用。 */
#search-conditions-section .ymk-combobox-input,
#search-conditions-section .ymk-period-combo-input {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    font-weight: 400;          /* .form-input と同じ通常ウェイト（combobox 600 / period 700 を打ち消す） */
    font-family: inherit;      /* period-combo の等幅指定を打ち消し、パネル内の書体を統一 */
    text-align: left;          /* period-combo の中央寄せを打ち消す（コード/名称と同じ左寄せ） */
    color: #111827;            /* .form-input と同色 */
    border-radius: 0.375rem;   /* .form-input と同じ角丸 */
}
/* コンボの ▼ ボタン分だけ右 padding を確保（上の一括指定の右 0.75rem を上書き） */
#search-conditions-section .ymk-combobox-input {
    padding-right: 1.75rem;
}
/* 要素幅の統一: テキスト欄は HTML インライン min-width(160〜260px)、コンボ/日付は部品都合の幅でバラバラだった。
   パネル内は一律 200px に揃える（period-combo は JS インライン width に勝つため !important）。 */
#search-conditions-section .form-input,
#search-conditions-section .ymk-combobox {
    width: 200px;
    box-sizing: border-box;
}
#search-conditions-section .ymk-period-combo-input {
    width: 200px !important;
}

.form-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background-color: #fff;
    border: 1px solid #93c5fd; /* blue-300 */
    border-radius: 0.375rem;
    font-size: 16px; /* スマホ自動ズーム防止 */
    color: #111827;
    transition: border-color 0.1s, box-shadow 0.1s;
}
@media (min-width: 1024px) {
    .form-input {
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
    }
}
.form-input:focus {
    outline: none;
    border-color: #3b82f6; /* blue-500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    background-color: #fefce8; /* yellow-50 ハイライト */
}
.form-input:disabled,
.form-input[readonly] {
    background-color: #f3f4f6; /* gray-100 */
    color: #6b7280;
    cursor: not-allowed;
    border-color: #d1d5db;
}

/* テーブルセル入力欄（グリッド用） */
.grid-input {
    width: 100%; height: 100%;
    border: 1px solid #93c5fd;
    background: transparent;
    padding: 0 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    border-radius: 3px;
    transition: border-color 0.1s, box-shadow 0.1s;
}
select.grid-input { border: 1.5px solid #93c5fd; border-radius: 3px; cursor: pointer; appearance: auto; }
.grid-input:disabled, .grid-input[readonly] { color: #6b7280; cursor: default; background: transparent; border: none; }
.grid-input:disabled:focus, .grid-input[readonly]:focus { background: transparent; outline: none; }
.grid-input:not(:disabled):not([readonly]):hover { background: #dbeafe; }
select.grid-input:not(:disabled):hover { background: #dbeafe; }
.grid-input:not(:disabled):not([readonly]):focus { background: #fefce8; outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); z-index: 5; }
select.grid-input:not(:disabled):focus { background: #fefce8; outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }

/* テーブルセル状態 */
.cell-calc .grid-input { background: transparent; border: none; }
.cell-calc .grid-input:not(:disabled):not([readonly]) { border: 1px solid #93c5fd; }
.cell-readonly { color: #6b7280; }
.cell-readonly .grid-input { background: transparent; border: none; }
.cell-disabled .grid-input { color: #94a3b8; background: transparent; border: none; }

/* 必須マーク
   目的(What): 必須項目ラベルの右に「*」を付与し、業務担当者に入力必須を視覚提示する。
   意味合い(Why): モック r02_authors_mock / r04_items_mock 整合（red 不採用、blue-700 採用）。
     CLAUDE.md 承認パレットの red-600 は「必須マーク・エラー表示・削除モードのみ」と幅広いが、
     本プロジェクトでは画面全体の青系統一感（blue-700）を優先する方針にユーザー承認 2026-06-24 採用案B で確定。
     全画面共通定義のため本ファイルの1箇所変更で r02/r04/印税/原稿料/支払詳細など全画面の必須*が青に同期。
   接続情報(Where): 全画面の <label class="form-label required-mark"> / 旧色 #ef4444 (red-500) / 新色 #1d4ed8 (blue-700)。
     ユーザー承認: 採用案B common.css 一括青化 (2026-06-24)。 */
.required-mark::after {
    content: "*";
    color: #1d4ed8;
    margin-left: 0.25rem;
}

/* セクション見出し */
.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e3a8a; /* blue-900 */
    border-bottom: 2px solid #bfdbfe; /* blue-200 */
    padding-bottom: 0.25rem;
    margin-bottom: 0.75rem;
    margin-top: 0.5rem;
}

/* ========================================
   4. テーブル・検索結果
   ======================================== */

.search-result-row,
.book-row {
    cursor: pointer;
    transition: background-color 0.15s;
}
.search-result-row:hover,
.book-row:hover {
    background-color: #eff6ff; /* blue-50 */
}
.search-result-row.selected {
    background-color: #dbeafe; /* blue-100 */
}

/* ========================================
   5. モード切替
   ======================================== */

.mode-radio-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   6. バリデーション
   ======================================== */

.form-input.email-error {
    background-color: #fce4ec !important;
    border-color: #e91e63 !important;
}
.email-error-tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 4px;
    background-color: rgba(233, 30, 99, 0.6);
    color: white;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.email-error-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 12px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(233, 30, 99, 0.6) transparent transparent transparent;
}

/* ========================================
   7. モーダル
   ======================================== */

#modal-overlay {
    transition: opacity 0.3s ease;
}
#modal-content {
    transition: transform 0.3s ease;
}

/* ローディングオーバーレイ */
#loading-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, rgba(239, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0.92) 50%, rgba(239, 246, 255, 0.95) 100%);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 1;
    transition: opacity 0.4s ease-out;
}
#loading-overlay.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}

/* ローディングメッセージ: テキストエリアのスタイリング */
#loading-message {
    position: relative;
    padding: 0.6rem 2rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #3b82f6;
    background: transparent;
    text-align: center;
}
/* アニメーションドット (...) */
#loading-message::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    margin: 0 auto 0.75rem;
    animation: loadingLinePulse 2s ease-in-out infinite;
}

@keyframes loadingLinePulse {
    0%, 100% { opacity: 0.3; width: 40px; }
    50% { opacity: 1; width: 80px; }
}

/* システム標準ローディングアイコン（iframe埋め込み） */
.loading-icon-frame {
    width: 320px;
    height: 320px;
    border: none;
}

/* アプリ本体のフェードイン */
#app {
    opacity: 0;
    transition: opacity 0.4s ease-in;
    height: 100%;
}
#app.visible {
    opacity: 1;
}

/* 本のページめくりローディングアニメーション（小サイズ版 — インラインローダー用） */
.book-loader {
    position: relative;
    width: 40px;
    height: 30px;
    transform: rotateX(50deg) rotateZ(-10deg) rotateY(10deg);
    transform-style: preserve-3d;
}
.book-loader .page-left {
    position: absolute; top: 0; left: 0;
    width: 20px; height: 30px;
    background: #e2e8f0; border: 1px solid #6b7c93;
    border-right: none; border-radius: 3px 0 0 3px;
}
.book-loader .page-right {
    position: absolute; top: 0; left: 20px;
    width: 20px; height: 30px;
    background: #fff; border: 1px solid #6b7c93;
    border-left: none; border-radius: 0 3px 3px 0;
}
.book-loader .page-flip {
    position: absolute; top: 0; left: 20px;
    width: 20px; height: 30px;
    background: #fff; border: 1px solid #6b7c93;
    border-left: 1px solid #4a5568;
    border-radius: 0 3px 3px 0;
    transform-origin: left; z-index: 10;
    animation: book-flip 1.8s infinite linear;
}
.book-loader .page-flip:nth-child(3) { animation-delay: 0s; }
.book-loader .page-flip:nth-child(4) { animation-delay: 0.6s; }
.book-loader .page-flip:nth-child(5) { animation-delay: 1.2s; }

/* 本のページめくりローディングアニメーション（大サイズ版） */
.book-loader-lg {
    position: relative;
    width: 80px;
    height: 60px;
    transform: rotateX(50deg) rotateZ(-10deg) rotateY(10deg);
    transform-style: preserve-3d;
}
.book-loader-lg .page-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 60px;
    background: #e2e8f0;
    border: 2px solid #6b7c93;
    border-right: none;
    border-radius: 4px 0 0 4px;
}
.book-loader-lg .page-right {
    position: absolute;
    top: 0;
    left: 40px;
    width: 40px;
    height: 60px;
    background: #fff;
    border: 2px solid #6b7c93;
    border-left: none;
    border-radius: 0 4px 4px 0;
}
.book-loader-lg .page-flip {
    position: absolute;
    top: 0;
    left: 40px;
    width: 40px;
    height: 60px;
    background: #fff;
    border: 2px solid #6b7c93;
    border-left: 2px solid #4a5568;
    border-radius: 0 4px 4px 0;
    transform-origin: left;
    z-index: 10;
    animation: book-flip 1.8s infinite linear;
}
.book-loader-lg .page-flip:nth-child(3) { animation-delay: 0s; }
.book-loader-lg .page-flip:nth-child(4) { animation-delay: 0.6s; }
.book-loader-lg .page-flip:nth-child(5) { animation-delay: 1.2s; }
@keyframes book-flip {
    0% { transform: rotateY(0deg); z-index: 5; background-color: #fff; }
    15% { z-index: 10; }
    50% { background-color: #cbd5e0; }
    100% { transform: rotateY(-180deg); z-index: 5; background-color: #a0aec0; }
}

/* Wave C-2: log機能スナップショット表示の差分着色（yellow-50、CLAUDE.md L137 拡張済用途） */
.diff-changed-cell {
  background: #fefce8;
}

/* ========================================================================
 * 3寄せルール: 数値=右 / 固定長コード=中央 / 文字列=左(デフォルト)
 * 目的(What): 全画面で text-align を項目性質で統一する
 * 意味合い(Why): 業務担当者が「桁を縦に揃えて読む(数値)」「識別子を一目で照合(コード)」
 *                「自然読み(文字列)」できる視認性を保証する
 * 接続情報(Where): CLAUDE.md UI実装ルール「厳守: text-align 3寄せルール」/ Serena「デザインシステム_共通CSSルール」
 *                  例外: td.uv-cd-parent/child (統合ビュー行階層、2026-06-13 inzei-input.css)
 * ======================================================================== */

/* セル(td/th) */
.ymk-cell-num   { text-align: right;  font-variant-numeric: tabular-nums; }
.ymk-cell-code  { text-align: center; font-family: 'Consolas','Monaco',monospace; }
.ymk-cell-text  { text-align: left; }

/* フォーム入力(input/select) */
.ymk-input-num  { text-align: right;  font-variant-numeric: tabular-nums; }
.ymk-input-code { text-align: center; font-family: 'Consolas','Monaco',monospace; letter-spacing: 0.05em; }
.ymk-input-text { text-align: left; }

/* ヘッダー(th)に列の寄せを明示する補助クラス */
.ymk-th-num   { text-align: right; }
.ymk-th-code  { text-align: center; }
.ymk-th-text  { text-align: left; }

/* 目的(What): 縦並びフォーム(タブ内詳細編集)では .ymk-input-code を左寄せに上書き
   意味合い(Why): 2026-06-25 ユーザー指示 — 縦並びフォームで input 値が中央寄せだと、桁数固定コードが
                  フィールド毎に視覚的位置がズレ「ガタガタして美しくない」。テーブル(横並び)では桁揃え重視で中央寄せ維持、
                  フォーム縦並びでは左揃えで縦のラインを揃える。数値(ymk-input-num)は右寄せ維持(桁揃えのため)。
   接続情報(Where): .tab-pane 配下の input (r02/r04/印税入力/支払詳細等の詳細編集タブ全画面に共通適用)
                    CLAUDE.md「3寄せルール」のフォーム例外規定として本ルールが優先 */
.tab-pane .form-input.ymk-input-code { text-align: left; }

/* 目的: 閉じたアコーディオンの下辺角丸を保証（summary がカード最下辺になる時） */
/* 意味合い: section(rounded-xl) はコンボのドロップダウンクリップ回避で overflow-hidden を外しているため、summary の rounded-t-xl だけでは閉時に下2隅が直角に残り border-b の区切り線も最下辺に露出する */
/* 接続情報: r02_authors.html #search-conditions-section / #master-edit-section、r04_items.html 同構造の details>summary に適用。0.75rem = Tailwind rounded-xl と同値 */
details:not([open]) > summary {
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  border-bottom-color: transparent;
}

/* 目的(What): アコーディオン(details/summary)を開いた瞬間に中身をフェード+スライドインさせる
   意味合い(Why): 2026-07-07 ユーザー指示「開閉時のオシャレな効果」。当初 height:auto トランジション
     (::details-content + interpolate-size)で試したが、#search-results-section 配下は数千行のテーブルを
     含むため height の値計算(レイアウト)が毎フレーム走り「反応が遅い/カクカク」という実機報告で撤回。
     本方式は height に一切触れず、ネイティブ details の瞬時開閉はそのまま(レイアウトコスト0)にして、
     中身のブロックに opacity+transform だけの CSS アニメーションを重ねる。この2プロパティはコンポジタ層
     だけで完結し行数に関係なく軽量(GPU合成のみ、レイアウト/ペイント再計算なし)。
     [open] 属性が付与された瞬間にアニメーションが自然に再生される(CSSアニメーションの仕様上、
     セレクタが新規マッチした要素で animation-name 付与時に自動的に頭から再生される)。
     閉じる時は詳細編集のフォームが一瞬で消えないと「中身が消える」旧事故(2026-06-26)の再発になるため、
     close 側はアニメーションを付けず native の瞬時非表示のまま(open 側のみで十分「オシャレ」の要件を満たす)。
   接続情報(Where): r02_authors.html / r04_items.html の #search-conditions-section, #search-results-section,
     #master-edit-section 配下の details 全て(共通 SSoT のため両画面に反映) */
/* 目的(What): 検索条件/一覧/詳細編集の3アコーディオンだけに開閉フェード+回転シェブロンを付与する
   意味合い(Why): 2026-07-07 ユーザー指示「開閉時のオシャレな効果」。当初 `details` 全称セレクタで実装したところ、
     サイドバーメニュー(マスタ管理/印税/ログ管理、common.js L157 で同じ details/summary 構造を採用)にまで
     矢印が付いてしまう意図しない範囲拡大が発生(実機確認で発覚、CLAUDE.md ユーザー指定範囲厳守違反)。
     対象を絞る際、検索条件の <details> は id 無し(親 #search-conditions-section にのみ id 付与)と実機確認で判明したため、
     `#search-conditions-section > details` の親子セレクタで指定する(HTML側にid追加は不要、CSSのみで対応)。
     height:auto トランジションは数千行テーブルで「カクカク」と実機報告済のため不採用、
     opacity+transform(rotate/translateY)のみのコンポジタ層アニメーションで行数に関係なく軽量に保つ。
     シェブロンは summary 自身の ::after ではなく、先頭子要素 span(タイトルアイコン+文言)の ::before に付ける。
     summary は justify-between の2要素(タイトルspan/右端ボタン)構成のため、summary::after を追加すると
     3要素目として割り込み、タイトルが中央寄りにずれるレイアウト崩壊が実機確認で発覚(2026-07-07)。
     span 内部の ::before ならタイトルspan自身の内側フローに収まり、外側2要素レイアウトに影響しない。
   接続情報(Where): r02_authors.html / r04_items.html 共通の3アコーディオン(共通 SSoT のため両画面に反映) */
#search-conditions-section > details > summary,
#search-results-details > summary,
#master-edit-details > summary {
  transition: background-color 0.15s ease;
}
#search-conditions-section > details > summary > span:first-child::before,
#search-results-details > summary > span:first-child::before,
#master-edit-details > summary > span:first-child::before {
  content: '▶';
  margin-right: 0.5rem;
  font-size: 0.65em;
  color: #60a5fa; /* blue-400: 承認済パレット内 */
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
#search-conditions-section > details[open] > summary > span:first-child::before,
#search-results-details[open] > summary > span:first-child::before,
#master-edit-details[open] > summary > span:first-child::before {
  transform: rotate(90deg);
}
#search-conditions-section > details[open] > *:not(summary),
#search-results-details[open] > *:not(summary),
#master-edit-details[open] > *:not(summary) {
  animation: ymk-accordion-fade-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ymk-accordion-fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================================================
 * 補足説明アイコン (ⓘ) + カーソル合わせで出る吹き出し ＝ 全画面共通部品
 *
 * 目的(What): 任意の項目名・見出し・ラベルの右に ⓘ を置き、マウスカーソルを合わせると
 *             その項目の補足説明を吹き出しで表示する。JS 不要、CSS だけで完結する。
 *
 * 意味合い(Why): 2026-07-26 ユーザー指示「今後同じような用途で使うシステム共通仕様とする」。
 *                画面ごとに独自のツールチップを実装させないための唯一の受け皿。
 *                初出は著者マスタの入力ルール注記だが用途はそれに限らない
 *                (計算式の説明・業務ルールの補足・値の由来など、本文に書くと冗長になるものを畳む)。
 *
 * 使い方:
 *   <label ...>項目名<span class="ymk-hint-mark" data-hint="1行目&#10;2行目"></span></label>
 *   - span の中身は必ず空にする。アイコンは background-image、吹き出しは ::after が描く
 *   - 文面は data-hint 属性。改行は &#10;。white-space:pre なので明示した位置だけで改行し折り返さない
 *     (幅は最長行に自動で合う。幅を数値で決め打ちしないこと)
 *   - <label> の中に置いてよい (hover のみで pointer-events:none のためフォーカス転送を起こさない)。
 *     ただしクリックを伴う要素を label 内に足すのは別問題なので混同しないこと
 *
 * 制約 (既知・使う前に確認すること):
 *   - 吹き出しは要素の「上」に固定で出る (bottom:100%)。画面上端付近の要素に付けると見切れる
 *   - 横位置は left:0 固定。画面右端付近の要素に付けると右へはみ出す
 *   - タッチ操作では hover が無いため表示されない。必須情報を吹き出しだけに置かないこと
 *   - data URI 内では currentColor が効かないため、アイコン色は直値 (%231d4ed8 = blue-700)
 *
 * 接続情報(Where): 初出の使用箇所 = r02_authors/r02_authors.html の各 <label> 内
 *                  (#author-name / #zip-code / #address-1 / #address-2 / #payee-name)。
 *                  仕様の記録 = Serena メモリ「デザインシステム_共通CSSルール」。
 *                  色は承認済パレット内のみ (アイコン blue-700 / 吹き出し blue-900 の 80% 透過 + white)。
 * ======================================================================== */
/* マーク本体はインライン SVG（data URI）で描く。
   2026-07-26 変更: 当初は文字 ㊟ を span の中身に入れていたが、丸囲み文字は字形がフォント依存で、
   本システムの :root フォント（Meiryo UI → Meiryo → MS PGothic → sans-serif）では環境により
   丸が落ちたり字形がばらついたりする。Unicode には ⓘ(U+24D8) / ℹ(U+2139) も存在するが同じ問題を持つ。
   SVG なら全環境で同一の見た目になり、サイズも rem で固定できる（ユーザー指示 2026-07-26）。
   span の中身は空にし、アイコンは background-image、吹き出しは ::after が担う（役割が分かれるので競合しない）。
   色は blue-700 #1d4ed8（承認済みパレット内。data URI 内では currentColor が効かないため直値で持つ）。 */
/* #ymk-header-scroll — ヘッダーの横スクロール領域（タイトル右端から画面右端まで）
 * 目的(What): ドラッグでスクロールできることをカーソル形状で示す。
 * 意味合い(Why/Role): ユーザー指示 2026-07-29「ヘッダーをドラッグでスクロールしない」への対応の一部。
 *   JS 側（common/js/common.js CommonUI.init）で DragScroll を配線したが、見た目の手がかりが無いと
 *   掴めることに気づけない。ヘッダーは高さが狭くスクロールバーが出ないため、なおさら手がかりが要る。
 *   ドラッグ中の grabbing への切替は DragScroll が inline style で行うので、ここでは既定の grab だけを持たせる。
 *   内部のボタン・リンク（.ymk-step-action 等は cursor:pointer を自前で持つ）は子要素側の指定が優先されるため、
 *   押せる要素の上では pointer のままになる。
 * 接続情報(Where): 要素の生成元 = common/js/common.js getHeaderHTML（stepperContainerId 分岐）。
 *   ドラッグ配線 = 同ファイル CommonUI.init / 実体 = common/js/drag-scroll.js。 */
#ymk-header-scroll {
    cursor: grab;
    /* 目的(What): スクロールしきった位置で、最後のステップ（⑤銀行データ出力）の右に 24px の余白を残す。
     * 意味合い(Why/Role): ユーザー指示 2026-07-30。2026-07-29 の実測で支払詳細はスクロール端まで送っても
     *   ⑤の right=1256（ビューポート1280 / ヘッダーの px-4 ぶん 16px + 端数だけの余裕）で、画面の縁に貼り付いて
     *   「見えてはいるが見落としやすい」状態だった。overflow 要素の padding-right はスクロール可能領域
     *   （scrollWidth）に含まれるため、末尾まで送ったときだけ効く余白として機能する（内容が収まっている画面では
     *   はみ出しが増えないので無影響＝印税入力のように hiddenPx が小さい画面の見た目は変わらない）。
     * 接続情報(Where): 要素の生成元 = common/js/common.js getHeaderHTML（stepperContainerId 分岐）。
     *   影響範囲 = ステッパーを持つ4画面（印税入力 / 原稿料入力 / 支払入力 / 支払詳細）。 */
    padding-right: 24px;
}

/* .ymk-icon-btn / .ymk-icon-btn-label — アイコンのみボタンのホバーラベル
 * 目的(What): 文字ラベルを持たないアイコンボタンにホバーした時、その操作名を白いカードで表示する。
 * 意味合い(Why/Role): ユーザー指示 2026-07-29「戻るボタンがじゃま（ホバーにするとか）」。ヘッダーの横幅を
 *   ステッパーへ譲るため文字ラベルを常時表示から外したが、アイコンだけでは操作内容が伝わらないので
 *   ホバーで補う。ブラウザネイティブの title 属性は ymk-stepper.js で廃止済みの方式なので使わず、
 *   同ファイルの .ymk-step-disabled-card と同じカード方式に揃える（見た目の一貫性）。
 *   色は white / gray-300 / gray-700 と影の rgba のみで、承認済みパレット外の色は使わない。
 * 接続情報(Where): クラス付与元 = common/js/shiharai-input.js の headerLeadingContent（戻るボタン）。
 *   置き場所の制約: 本カードは position:absolute で親の外へはみ出すため、親に overflow-x-auto が
 *   掛かっている領域（common.js getHeaderHTML のタイトル右側スクロール領域）の中では切り取られる。
 *   必ず headerLeadingContent 側（スクロール対象外）に置くこと。 */
.ymk-icon-btn {
    position: relative;
}
.ymk-icon-btn-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    margin-top: 6px;
    z-index: 20;
    background: #ffffff;
    border: 1px solid #d1d5db;  /* gray-300 */
    color: #374151;             /* gray-700 */
    border-radius: 9px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.14s ease;
}
.ymk-icon-btn:hover .ymk-icon-btn-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.ymk-hint-mark {
  position: relative;
  display: inline-block;
  margin-left: 0.2rem;
  width: 0.95rem;
  height: 0.95rem;
  vertical-align: -0.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d4ed8' stroke-width='1.4'%3E%3Ccircle cx='8' cy='8' r='6.6'/%3E%3Cpath d='M8 7.4v4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.8' r='0.95' fill='%231d4ed8' stroke='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: help;
}
.ymk-hint-mark::after {
  content: attr(data-hint);
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 6px;
  z-index: 60; /* サジェストリスト(z-50)より前面 */
  min-width: 17rem;
  padding: 6px 10px;
  /* blue-900 を 80% で透過（2026-07-26 ユーザー指示。初回 0.92 → 実機を見て 0.8 に調整）。
     ベタ塗りだと吹き出しが板のように浮いて背後の入力欄を完全に隠すため、下が透けるようにして
     「一時的に重なっている表示」だと分かるようにする。
     （既存の focus リング rgba(59,130,246,0.2) と同じく、承認済みパレット色に alpha を付ける形）。 */
  background: rgba(30, 58, 138, 0.8); /* blue-900 #1e3a8a */
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: normal;
  line-height: 1.55;
  text-align: left;
  /* pre-line ではなく pre を使う（2026-07-26 ユーザー指示「折り返さないように幅を調整」）。
     pre-line は data-hint の &#10; を改行として解釈するが、ボックス幅（min-width 17rem）を超えると
     勝手に折り返すため、書いた文面と表示される行が食い違っていた（郵便番号・住所1・住所2 で発生）。
     pre なら明示した &#10; だけで改行し、それ以外は折り返さない。absolute 要素は shrink-to-fit なので
     幅は最長行に自動で合う（＝幅を数値で決め打ちする必要がない）。 */
  white-space: pre;
  border-radius: 0.375rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.ymk-hint-mark:hover::after {
  opacity: 1;
  visibility: visible;
}