@charset "UTF-8";
/*
 * パスワード生成板（QWERTY配列の置き換え表）の見た目。
 *
 * ★js/board.js と対になる共有ファイル（コピーではない実体）。
 *     ・ワンタイムパスノート  https://pass.tkn.jp/
 *     ・パスワード生成板      https://pass.tkn.jp/board/
 *
 * ホスト側のページで次のCSS変数を定義しておくこと：
 *   --primary / --text / --sub / --card / --bg / --line
 * また .fld / .fld-label / .note / .btn / .btn-sm / .btn-primary / .row-btns / .mono
 * のスタイルはホスト側にある前提（両サービスとも同じ名前で持っている）。
 */

/* ── パスワード生成板（QWERTY配列の置き換え表） ── */
.board {
    --bgap: 4px;
    --bkw: calc((100% - (var(--bgap) * 10)) / 11);  /* 最長の行(11キー)を基準に全行で同じ大きさにする */
    display: flex;
    flex-direction: column;
    gap: var(--bgap);
    margin: 10px 0 4px;
}
.board-row { display: flex; gap: var(--bgap); }
/* 実物のキーボードのように行ごとに少しずらす */
.board-row.r3 { margin-left: calc((var(--bkw) + var(--bgap)) * 0.5); }
.board-row.r4 { margin-left: calc((var(--bkw) + var(--bgap)) * 1); }

.bkey {
    position: relative;
    flex: 0 0 auto;
    width: var(--bkw);
    /* --bkw は % を含むので height に使うと「親の高さ」基準になってしまう。
       縦横比で指定して、幅から高さを決めさせる。 */
    aspect-ratio: 1 / 1.25;
    padding: 1px 0 0 3px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    /* 本物のキーキャップのように、入力する字を左上・置き換え後の字を右下に離して置く。
       斜めにずらすことで、狭い端末でも両方を大きめに出せる。 */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.bkey:active { background: var(--bg); }
.bkey-in  { font-size: .9rem; font-weight: bold; line-height: 1.1; }
/* 置き換え後の文字はキーの右下に小さく（アナログのパスワードカードと同じ読み方） */
.bkey-out {
    /* アンダースコアなどベースラインより下に伸びる字が切れないよう下に余白を取る */
    position: absolute; right: 3px; bottom: 2px;
    font-size: .82rem; line-height: 1; font-weight: bold;
    color: var(--primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.bkey-fn { background: var(--bg); }
/* 入力欄とアイコンボタンを1行に並べる（変換前＝右にクリア、変換後＝左にコピー・右に表示切替） */
.bfield { display: flex; align-items: center; gap: 8px; }
.bfield input { flex: 1 1 auto; min-width: 0; }
.bicon {
    flex: 0 0 auto;
    width: 44px; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
}
.bicon svg { width: 20px; height: 20px; }
.bicon:active { background: var(--bg); }
/* マスクを外しているあいだは目立たせる（今は見えている、と分かるように） */
.bicon-on { border-color: var(--primary); color: var(--primary); }

/* .fld input の font-family:inherit に負けないよう詳細度を合わせる */
.fld input.mono, .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .02em;
}

/* ── 確認ポップアップ（board.js が自前で出す） ──
   ワンタイムパスノートでは、この盤自体がモーダル(z-index:100)の中に出ているので、
   その上に重なるように z-index を高くしてある。 */
.pb-modal-back {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(0, 0, 0, .5);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; overflow-y: auto;
}
.pb-modal {
    background: var(--card); color: var(--text);
    border-radius: 12px; width: 100%; max-width: 420px; padding: 18px;
    max-height: 92vh; overflow-y: auto;
}
.pb-modal-t { font-size: 1.05rem; margin: 0 0 10px; }
.pb-modal-p { margin: 0 0 10px; font-size: .95rem; }
.pb-modal-warn {
    margin: 0; font-size: .95rem;
    background: var(--warn-bg, #fff6f5);
    border: 1px solid var(--warn-line, #f0c8c2);
    color: var(--warn-text, #a3352a);
    border-radius: 8px; padding: 10px 12px;
}
.pb-modal-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.pb-modal-foot .btn { flex: 1 1 auto; }

.pb-offscreen { position: fixed; left: -9999px; top: 0; }

/* 印刷（生成板だけを1枚に出す）。
   画面をそのまま刷ると入力欄やボタンまで出てしまうので、
   印刷用の画像を body 直下に置き、印刷のときだけそれだけを見せる。 */
.pb-print { display: none; }
@media print {
    body > *:not(.pb-print) { display: none !important; }
    .pb-print { display: block !important; }
    .pb-print img { display: block; width: 100%; max-width: 180mm; margin: 0 auto; }
    @page { margin: 12mm; }
}