/* /tarot/assets/tarot.css — タロット鑑定アシスタントの見た目の骨組み（共通）。ローカル名 tarot.css。
 *
 * ■ 2026-10-11 デザイン A（夜空と金）/B（白基調・上品）/C（やわらかい）を切り替えられるようにした。
 *   ここは骨組みだけ。色・書体・角の丸みはテーマ別の tarot_theme_A/B/C.css が変数で決める（見本 tarot_mock の
 *   base_session.css / base_report.css を本物のクラス名 tr- に写したもの）。HTML は1つで、
 *     画面: <body data-theme="A|B|C">   鑑定書: <div class="tr-sheet-wrap" data-rtheme="A|B|C">
 *   で切り替える（画面と鑑定書で別のテーマを選べる）。
 * ■ 鑑定画面の文字の大きさ（小・中・大）は <body data-fs="s|m|l"> → --fs-k。カンペと会話だけに効かせる
 *   （ホロスコープの円は大きさを変えない＝崩れる。鑑定書は pt/mm で固定＝印刷に影響させない）。
 * ■ 動きは transform と opacity だけ（width 等を動かすと再レイアウトでカクつく）。片側だけ太い色線は使わない（デザイン点検）。
 */

*{ box-sizing:border-box; }
html{ font-size:16px; -webkit-text-size-adjust:100%; }
body.tr-body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased; }
body[data-fs="s"]{ --fs-k:.86; } body[data-fs="m"]{ --fs-k:1; } body[data-fs="l"]{ --fs-k:1.2; }
a{ color:var(--accent-tx); }
button, input, select, textarea{ font:inherit; }
button{ cursor:pointer; touch-action:manipulation; }
[hidden]{ display:none !important; }

/* ── アプリの帯（全ページ共通） ── */
.tr-head{ background:var(--app-bg); color:var(--app-ink); border-bottom:1px solid var(--app-line); }
.tr-head-in{ max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:22px; min-height:50px; padding:0 20px; flex-wrap:wrap; }
.tr-brand{ font-family:var(--latin); font-size:1.08rem; letter-spacing:.08em; line-height:1.1; white-space:nowrap; color:inherit; text-decoration:none; }
.tr-brand small{ display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.2em; opacity:.7; }
.tr-nav{ display:flex; gap:2px; flex:1; flex-wrap:wrap; }
.tr-nav a{ color:inherit; text-decoration:none; font-size:.86rem; padding:6px 12px; opacity:.75; border-radius:var(--r-btn); }
.tr-nav a:hover{ opacity:1; }
.tr-nav a.is-on{ opacity:1; box-shadow:inset 0 -2px 0 var(--accent); }
.tr-user{ display:flex; gap:12px; align-items:center; font-size:.8rem; opacity:.85; }
.tr-user em{ font-style:normal; color:var(--accent-tx); font-size:.72rem; border:1px solid var(--tag-line); border-radius:var(--r-tag); padding:0 6px; margin-left:4px; }
.tr-logout{ margin:0; display:inline; }
.tr-logout button{ font-size:.8rem; color:inherit; background:none; border:0; padding:0; text-decoration:underline; }
.tr-demo{ background:var(--note-bg); color:var(--ink); text-align:center; font-size:.84rem; padding:6px 12px; border-bottom:1px solid var(--line); }

/* ── 本文（一覧・明細・設定などの周辺画面） ── */
.tr-main{ max-width:1180px; margin:0 auto; padding:18px 20px 60px; }
.tr-wide .tr-main{ max-width:1280px; padding:12px 16px 28px; }
.tr-title{ font-family:var(--serif); font-weight:var(--h-weight); font-size:1.45rem; letter-spacing:.06em; margin:6px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.tr-is-live .tr-title{ display:none; }   /* 鑑定中は帯の見出しを使う */
.tr-sub{ margin:-4px 0 14px; font-size:.86rem; color:var(--muted); }
.tr-foot{ text-align:center; color:var(--muted); font-size:.72rem; letter-spacing:.2em; padding:20px 0 30px; }
.tr-h2{ font-family:var(--serif); font-size:1.1rem; font-weight:var(--h-weight); letter-spacing:.06em; margin:0 0 12px; }
.tr-h2 small{ font-family:var(--sans); font-size:.8rem; color:var(--muted); font-weight:400; }
.tr-h3, .tr-sec-h{ font-size:.78rem; letter-spacing:.16em; font-weight:700; color:var(--accent-tx); margin:0 0 8px; }
.tr-muted{ color:var(--muted); font-size:.88rem; }
.tr-num{ text-align:right; font-variant-numeric:tabular-nums; }
.tr-right{ text-align:right; }
.tr-nowrap{ white-space:nowrap; }
.tr-spacer{ flex:1; }
.tr-link{ font-size:.88rem; }

.tr-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; margin:0 0 16px; box-shadow:var(--shadow); }
.tr-narrow{ max-width:640px; }
.tr-cols{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; }
.tr-col-main, .tr-col-side{ margin:0; }
.tr-row-between{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.tr-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:900px){ .tr-cols, .tr-grid2{ grid-template-columns:1fr; } }

/* 入力 */
.tr-field{ display:block; margin:0 0 12px; }
.tr-field > span{ display:block; font-size:.82rem; color:var(--muted); margin-bottom:3px; }
.tr-field input, .tr-field select, .tr-field textarea, .tr-search input, .tr-search select, .tr-manual input, .tr-picker-tools input[type="search"]{
  width:100%; font-size:.95rem; padding:8px 10px; border:1px solid var(--btn-line); border-radius:var(--r-btn); background:var(--input-bg); color:var(--ink); }
.tr-field textarea{ border-radius:var(--r-sm); }
.tr-field input:focus, .tr-field select:focus, .tr-field textarea:focus, .tr-manual input:focus{ outline:2px solid var(--accent); outline-offset:0; }
.tr-check{ display:flex; gap:8px; align-items:flex-start; margin:6px 0; font-size:.92rem; }
.tr-check input{ margin-top:.35em; accent-color:var(--accent); }
.tr-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.tr-form-msg{ min-height:1.2em; font-size:.85rem; margin:8px 0 0; color:var(--muted); }
.tr-form-msg.is-ng{ color:var(--ng); }
.tr-search{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.tr-search input, .tr-search select{ width:auto; max-width:360px; }
.tr-search label{ display:flex; gap:6px; align-items:center; font-size:.86rem; }

.tr-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:0 18px; border-radius:var(--r-btn); font-size:.92rem; letter-spacing:.03em;
  background:var(--btn-bg); color:var(--btn-ink); border:1px solid var(--btn-line); white-space:nowrap; text-decoration:none; line-height:1.3; }
.tr-btn:hover{ border-color:var(--accent); }
.tr-btn:disabled{ opacity:.45; cursor:not-allowed; }
.tr-btn-primary{ background:var(--pri-bg); color:var(--pri-ink); border-color:var(--pri-line); font-weight:600; }
.tr-btn-danger{ background:var(--ng); color:#fff; border-color:var(--ng); }
.tr-btn-sm{ min-height:36px; padding:0 14px; font-size:.85rem; }
.tr-btn-block{ width:100%; min-height:46px; }

.tr-note{ padding:9px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--note-bg); margin:0 0 14px; font-size:.9rem; }
.tr-note-ok{ border-color:var(--ok); }
.tr-note-ng{ border-color:var(--ng); color:var(--ng); }
.tr-err{ color:var(--ng); font-size:.88rem; margin:10px 0 0; }

/* 表 */
.tr-tblwrap{ overflow-x:auto; }
.tr-tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
.tr-tbl th{ text-align:left; font-weight:700; font-size:.76rem; letter-spacing:.08em; color:var(--muted); border-bottom:1px solid var(--accent); padding:6px 8px; white-space:nowrap; }
.tr-tbl td{ border-bottom:1px solid var(--line2); padding:8px; vertical-align:middle; }
.tr-tbl-hover tbody tr:hover td{ background:var(--line2); }
.tr-tbl input[type="text"], .tr-tbl input[type="password"], .tr-tbl input[type="number"], .tr-tbl select{ font-size:.88rem; padding:5px 7px; border:1px solid var(--btn-line);
  border-radius:var(--r-btn); width:100%; min-width:100px; background:var(--input-bg); color:var(--ink); }
.tr-bill-total{ max-width:540px; margin:14px 0 6px auto; }
.tr-bill-total th{ font-weight:400; color:var(--ink); font-size:.88rem; letter-spacing:0; border-bottom:1px solid var(--line2); white-space:normal; }
.tr-bill-sum th, .tr-bill-sum td{ font-weight:700; font-size:1.02rem; border-top:1px solid var(--accent); }

.tr-danger{ margin-top:18px; border-top:1px dashed var(--line); padding-top:12px; }
.tr-danger summary{ cursor:pointer; color:var(--ng); font-size:.88rem; }

/* 設定画面のテーマの選択肢（見本の色を小さく見せる） */
.tr-theme-pick{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 12px; }
.tr-theme-pick label{ display:block; border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; cursor:pointer; background:var(--panel); }
.tr-theme-pick label:has(input:checked){ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.tr-theme-pick input{ accent-color:var(--accent); }
.tr-swatch{ display:flex; gap:4px; margin-top:6px; }
.tr-swatch i{ width:22px; height:14px; border-radius:2px; border:1px solid rgba(0,0,0,.12); }
.tr-logo-now{ width:64px; height:64px; object-fit:contain; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; vertical-align:middle; }
@media (max-width:640px){ .tr-theme-pick{ grid-template-columns:1fr; } }

/* ログイン・初回設定 */
.tr-login-body{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--app-bg); }
.tr-login-card{ width:100%; max-width:380px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:var(--r); padding:28px 28px 22px; box-shadow:0 18px 50px rgba(0,0,0,.18); }
.tr-setup-card{ max-width:560px; }
.tr-login-brand{ text-align:center; font-family:var(--latin); font-size:1.5rem; letter-spacing:.1em; margin:0 0 20px; color:var(--accent-tx); }
.tr-login-brand small{ display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; color:var(--muted); }
.tr-login-mark{ display:none; }
.tr-login-sub{ text-align:center; margin:14px 0 0; }
.tr-token{ background:var(--note-bg); border:1px dashed var(--accent); border-radius:var(--r-sm); padding:12px 14px; margin:12px 0; }
.tr-token code{ display:block; word-break:break-all; font-size:.95rem; background:var(--input-bg); padding:8px; border:1px solid var(--line); user-select:all; }

/* ══ 鑑定画面（見本 session.html の骨組み）══ */
.tr-consent{ border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 14px 6px; margin:4px 0 12px; }
.tr-consent legend{ font-size:.85rem; color:var(--accent-tx); padding:0 6px; }

/* 上の帯: 誰の鑑定・マイク・文字の大きさ・操作／聞き取り中の文字・使用量。貼り付いて常に見える */
.tr-bar{ position:sticky; top:0; z-index:5; display:grid; grid-template-columns:auto 1fr auto auto; grid-template-areas:"who mic fs acts" "interim interim interim usage" "notes notes notes notes";
  gap:8px 18px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; margin-bottom:14px; box-shadow:var(--shadow); }
.tr-who{ grid-area:who; display:flex; align-items:baseline; gap:10px; min-width:0; }
.tr-who h1{ margin:0; font-family:var(--serif); font-weight:var(--h-weight); font-size:1.3rem; letter-spacing:.04em; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tr-theme-tag{ font-size:.78rem; padding:1px 10px; border:1px solid var(--tag-line); background:var(--tag-bg); color:var(--tag-ink); border-radius:var(--r-tag); white-space:nowrap; }
.tr-mic-wrap{ grid-area:mic; display:flex; align-items:center; gap:12px; min-width:0; }
.tr-mic{ display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 18px; border-radius:var(--r-btn); font-size:.95rem; font-weight:600;
  background:var(--btn-bg); color:var(--btn-ink); border:1px solid var(--btn-line); white-space:nowrap; }
.tr-mic.is-on{ background:var(--mic-bg); color:var(--mic-ink); border-color:var(--mic-line); }
.tr-dot{ width:11px; height:11px; border-radius:50%; background:var(--muted); }
.tr-mic.is-on .tr-dot{ background:var(--rec); box-shadow:0 0 0 4px var(--rec-halo); }
.tr-meter{ width:120px; height:8px; border-radius:4px; background:var(--meter-bg); overflow:hidden; flex:0 0 auto; }
.tr-meter i{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left center; background:var(--meter); opacity:.5; transition:transform .08s linear, opacity .2s; }
.tr-mic-state{ font-size:.85rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tr-mic.is-on ~ .tr-mic-state{ color:var(--rec-tx); font-weight:600; }
.tr-mic-state.is-ng{ color:var(--ng); font-weight:600; white-space:normal; }
.tr-fs{ grid-area:fs; display:inline-flex; align-items:center; gap:4px; }
.tr-fs-lb{ font-size:.72rem; letter-spacing:.12em; color:var(--muted); margin-right:2px; }
.tr-fs-btn{ min-width:34px; height:34px; padding:0 6px; font-size:.85rem; border:1px solid var(--btn-line); background:var(--btn-bg); color:var(--btn-ink); border-radius:var(--r-btn); }
.tr-fs-btn[aria-pressed="true"]{ background:var(--pri-bg); color:var(--pri-ink); border-color:var(--pri-line); font-weight:700; }
.tr-acts{ grid-area:acts; display:flex; gap:8px; }
.tr-interim-row{ grid-area:interim; display:flex; align-items:baseline; gap:12px; min-width:0; border-top:1px solid var(--line); padding-top:8px; }
.tr-lbl{ flex:0 0 auto; font-size:.72rem; letter-spacing:.14em; color:var(--accent-tx); font-weight:700; }
.tr-interim{ font-size:calc(1.05rem * var(--fs-k, 1)); color:var(--interim-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1.5em; }
.tr-interim:empty::before{ content:"（話すとここに文字が出ます）"; color:var(--muted); font-size:.85rem; }
.tr-usage{ grid-area:usage; font-size:.75rem; color:var(--muted); white-space:nowrap; border-top:1px solid var(--line); padding-top:8px; font-variant-numeric:tabular-nums; text-align:right; }
.tr-notes{ grid-area:notes; display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline; }
.tr-notes:not(:has(:not([hidden]):not(:empty))){ display:none; }
.tr-mic-note{ margin:0; font-size:.84rem; color:var(--ink); }
.tr-mic-warn{ color:var(--ng); }
.tr-save-state{ font-size:.78rem; color:var(--muted); margin-left:auto; }

/* 本体: 左にホロスコープと会話、右にカンペ（タブレット横）。狭いとカンペ→ホロスコープ→会話の縦並び */
.tr-live-grid{ display:grid; grid-template-columns:minmax(0,500px) minmax(0,1fr); grid-template-areas:"wheel kanpe" "talk kanpe"; gap:16px; align-items:start; }

/* カンペ: お客様の前で横目で読む＝大きく・濃く。文字の大きさは --fs-k で3段階 */
.tr-kanpe{ grid-area:kanpe; position:sticky; top:160px; background:var(--k-bg); color:var(--k-ink); border:1px solid var(--k-line); border-radius:var(--r); padding:16px 22px 18px; box-shadow:var(--shadow); }
.tr-k-head{ display:flex; justify-content:space-between; align-items:baseline; }
.tr-k-title, .tr-k-label{ font-size:.76rem; letter-spacing:.16em; font-weight:700; color:var(--accent-tx); margin:0 0 6px; }
.tr-k-time{ font-size:.75rem; color:var(--k-muted); font-variant-numeric:tabular-nums; }
.tr-k-empty{ margin:6px 0 0; color:var(--k-muted); font-size:calc(.95rem * var(--fs-k, 1)); }
.tr-hint-demo{ display:inline-block; font-size:.72rem; color:var(--tag-ink); border:1px solid var(--tag-line); border-radius:var(--r-tag); padding:0 6px; margin-left:8px; }
.tr-say{ list-style:none; margin:4px 0 0; padding:0; }
.tr-say li{ font-family:var(--k-font); font-weight:var(--k-weight); font-size:calc(1.62rem * var(--fs-k, 1)); line-height:1.55; letter-spacing:.01em; padding:8px 0; color:var(--k-ink); }
.tr-say li + li{ border-top:1px solid var(--k-sep); }
.tr-k-sub{ margin-top:12px; padding-top:12px; border-top:1px solid var(--k-sep); }
.tr-ask{ margin:0; padding:0; list-style:none; font-size:calc(1.22rem * var(--fs-k, 1)); line-height:1.6; color:var(--k-ink2); font-weight:500; }
.tr-points{ list-style:none; margin:0; padding:0; }
.tr-points li{ display:grid; grid-template-columns:5.6em 1fr; gap:10px; padding:5px 0; font-size:calc(1rem * var(--fs-k, 1)); line-height:1.6; }
.tr-points li + li{ border-top:1px dotted var(--k-sep); }
.tr-pt-pos{ font-weight:700; color:var(--k-ink); line-height:1.35; padding-top:.15em; }
.tr-pt-pos small{ display:block; font-size:.68em; font-weight:400; color:var(--k-muted); letter-spacing:0; }
.tr-pt-tx{ color:var(--k-ink2); }
.tr-pt-tx b{ font-weight:700; margin-right:.5em; color:var(--k-ink); }
.tr-caution{ margin-top:12px; padding:8px 12px; border:1px solid var(--ng); border-radius:var(--r-sm); color:var(--ng); font-size:calc(.95rem * var(--fs-k, 1)); }
.tr-hint-err{ color:var(--ng); font-size:.85rem; margin:8px 0 0; }
#tr-hint-hist:not(:empty){ margin-top:16px; padding-top:10px; border-top:1px solid var(--k-sep); }
.tr-hint-old{ display:flex; gap:12px; font-size:calc(.84rem * var(--fs-k, 1)); line-height:1.55; color:var(--old-ink); padding:4px 0; }
.tr-hint-old time{ flex:0 0 auto; font-variant-numeric:tabular-nums; }
.tr-ai-chips{ margin-bottom:10px; }
.tr-ai-chip{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.88rem; margin:0 0 6px; }

/* ホロスコープ 13 枚。位置は tarot.js（半径 39%・1 が左、反時計回り）。円の大きさは文字の大きさで変えない */
.tr-wheel-col{ grid-area:wheel; }
.tr-wheel{ position:relative; width:100%; aspect-ratio:1/1; border-radius:50%; background:var(--wheel-bg); }
.tr-chart{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.tr-chart circle{ fill:none; stroke:var(--chart-line); stroke-width:.3; }
.tr-chart .c-outer{ stroke-width:.45; }
.tr-chart .c-spoke{ stroke:var(--chart-spoke); stroke-width:.25; }
/* 枠 10.5%: 左右の端で縦に並ぶ 1・2／6・7 などが重ならない大きさ（縦の間隔 19.5% > 枠の高さ 18.1%） */
.tr-slot{ position:absolute; transform:translate(-50%,-50%); width:10.5%; aspect-ratio:.58; }
.tr-slot.is-center{ width:14.5%; }
.tr-slot-main{ position:absolute; inset:0; width:100%; height:100%; padding:0; overflow:hidden; border-radius:var(--r-card); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:1px dashed var(--slot-line); background:var(--slot-bg); color:var(--slot-ink); }
.tr-slot-no{ font-family:var(--latin); font-size:clamp(.85rem,1.7vw,1.15rem); line-height:1; color:var(--slot-no); font-weight:600; }
.tr-slot.is-center .tr-slot-no{ font-family:var(--serif); font-size:clamp(.7rem,1.3vw,.9rem); }
.tr-slot-lb{ font-size:clamp(.5rem,.85vw,.63rem); line-height:1.25; text-align:center; padding:0 3px; opacity:.85; }
.tr-slot-add{ margin-top:3px; font-size:clamp(.5rem,.85vw,.66rem); font-weight:700; color:var(--slot-add); border:1px solid var(--slot-add-line); border-radius:var(--r-tag); padding:0 6px; white-space:nowrap; }
.tr-slot.is-filled .tr-slot-main{ border:1px solid var(--card-line); background:#111; box-shadow:var(--card-shadow); }
.tr-slot-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tr-slot.is-rev .tr-slot-img{ transform:rotate(180deg); }
.tr-slot.is-filled .tr-slot-no{ position:absolute; top:3px; left:3px; min-width:1.5em; padding:2px 3px; font-size:clamp(.6rem,1.1vw,.78rem); text-align:center;
  background:var(--chip-bg); color:var(--chip-ink); border-radius:var(--r-chip); }
.tr-slot-name{ position:absolute; left:0; right:0; bottom:0; padding:2px 1px 3px; background:var(--name-bg); color:var(--name-ink); font-size:clamp(.52rem,.88vw,.68rem); line-height:1.25; text-align:center; }
.tr-slot-name em{ display:block; font-style:normal; font-weight:700; color:var(--rev); }
/* 差替はカードの内側の右上（外にはみ出すと隣の枠の下に隠れる） */
.tr-slot-swap{ position:absolute; top:3px; right:3px; z-index:2; height:22px; min-width:0; padding:0 4px; font-size:.6rem; font-weight:700;
  background:var(--swap-bg); color:var(--swap-ink); border:1px solid var(--swap-line); border-radius:13px; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.tr-wheel-help{ margin:10px 4px 0; font-size:.8rem; line-height:1.6; color:var(--muted); text-align:center; }
.tr-wheel-help b{ color:var(--ink); font-weight:600; }

/* 会話（文字の大きさは --fs-k） */
.tr-talk-col{ grid-area:talk; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:12px 16px 14px; box-shadow:var(--shadow); }
.tr-lines{ list-style:none; margin:0 0 10px; padding:0; max-height:280px; overflow-y:auto; }
.tr-lines li{ display:flex; gap:12px; padding:5px 0; font-size:calc(.92rem * var(--fs-k, 1)); line-height:1.55; border-bottom:1px solid var(--line2); }
.tr-lines time{ flex:0 0 auto; font-size:.72rem; color:var(--muted); padding-top:.25em; font-variant-numeric:tabular-nums; }
.tr-manual{ display:flex; gap:8px; }
.tr-manual input{ flex:1; min-width:0; height:38px; }
.tr-manual .tr-btn{ flex:0 0 auto; }

/* カード選び・トースト */
.tr-picker{ width:min(920px,94vw); max-height:88vh; border:1px solid var(--line); border-radius:var(--r); padding:0; background:var(--panel); color:var(--ink); }
.tr-picker::backdrop{ background:rgba(10,8,20,.55); }
.tr-picker-in{ padding:14px 16px; }
.tr-picker-tools{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 10px; }
.tr-picker-tools input[type="search"]{ max-width:280px; }
.tr-picker-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px; max-height:62vh; overflow-y:auto; padding:2px; }
.tr-picker-group{ grid-column:1 / -1; font-family:var(--serif); color:var(--accent-tx); border-bottom:1px solid var(--line); margin-top:6px; }
.tr-pick{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.72rem; line-height:1.25; padding:4px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--input-bg); color:var(--ink); }
.tr-pick img{ width:100%; aspect-ratio:.58; object-fit:cover; background:var(--line2); border-radius:var(--r-card); }
.tr-pick:hover, .tr-pick.is-on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.tr-toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:30; display:flex; gap:12px; align-items:center; max-width:94vw;
  background:var(--panel); color:var(--ink); border:1px solid var(--accent); border-radius:var(--r); padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.25); }

/* タブレット縦〜小さめの画面 */
@media (max-width:980px){
  .tr-bar{ grid-template-columns:1fr auto; grid-template-areas:"who acts" "mic fs" "interim interim" "usage usage" "notes notes"; }
  .tr-usage{ border-top:0; padding-top:0; text-align:left; }
  .tr-live-grid{ grid-template-columns:1fr; grid-template-areas:"kanpe" "wheel" "talk"; }
  .tr-kanpe{ position:static; }
  .tr-wheel-col{ max-width:560px; width:100%; margin:0 auto; }
}

/* スマホ縦: 「今すぐカンペ」「終了して鑑定書へ」は下に固定（片手で押せる）。マイクと聞き取り中の文字は上に貼り付く */
@media (max-width:640px){
  .tr-head-in{ min-height:44px; padding:0 14px; gap:10px; }
  /* 他のページへの行き先とログアウトはスマホでも要る（隠すと一覧・明細・設定へ行けない）。帯は2段にし、行き先は横に流す */
  .tr-nav{ order:3; flex:1 0 100%; flex-wrap:nowrap; overflow-x:auto; margin:0 -14px; padding:0 8px; -webkit-overflow-scrolling:touch; }
  .tr-nav a{ white-space:nowrap; padding:6px 9px; }
  .tr-user{ margin-left:auto; }
  .tr-user > span{ display:none; }
  .tr-main{ padding:12px 12px 40px; }
  .tr-wide .tr-main{ padding:8px 10px 96px; }
  .tr-bar{ grid-template-columns:1fr; grid-template-areas:"who" "mic" "fs" "interim" "usage" "notes"; gap:7px; padding:10px 12px; border-radius:var(--r-sm); }
  .tr-who h1{ font-size:1.12rem; }
  .tr-mic-wrap{ gap:10px; }
  .tr-mic{ height:40px; padding:0 14px; }
  .tr-meter{ flex:1; width:auto; }
  .tr-interim{ white-space:normal; }
  .tr-usage{ font-size:.7rem; white-space:normal; }
  .tr-acts{ position:fixed; left:0; right:0; bottom:0; z-index:10; padding:10px 10px calc(10px + env(safe-area-inset-bottom)); background:var(--dock-bg); border-top:1px solid var(--line); box-shadow:0 -6px 16px rgba(0,0,0,.12); }
  .tr-acts .tr-btn{ flex:1; height:48px; font-size:.95rem; }
  .tr-live-grid{ gap:12px; }
  .tr-kanpe{ padding:14px 16px; border-radius:var(--r-sm); }
  .tr-say li{ font-size:calc(1.38rem * var(--fs-k, 1)); }
  .tr-ask{ font-size:calc(1.1rem * var(--fs-k, 1)); }
  .tr-points li{ grid-template-columns:1fr; gap:0; }
  .tr-pt-pos small{ display:inline; margin-left:6px; }
  .tr-talk-col{ border-radius:var(--r-sm); }
  /* 小さい枠では名前の帯・ハウス名は読めないので出さない（番号と絵で見分ける） */
  .tr-slot-lb, .tr-slot-name{ display:none; }
  .tr-slot.is-rev .tr-slot-main::after{ content:"逆"; position:absolute; right:2px; top:2px; font-size:.6rem; font-weight:700; line-height:1; padding:2px 3px; background:var(--chip-bg); color:var(--rev-chip); border-radius:var(--r-chip); }
  .tr-slot-add{ font-size:.58rem; padding:0 3px; border:0; }
  /* スマホは枠が小さいので、差替を下端の帯にする（番号は左上・逆は右上） */
  .tr-slot-swap{ top:auto; bottom:0; left:0; right:0; width:100%; height:20px; padding:0; font-size:.6rem; border-radius:0 0 var(--r-card) var(--r-card); box-shadow:none; }
  .tr-toast{ bottom:84px; }
}

/* ══ 鑑定書（見本 report.html の骨組み）══
   印刷の寸法は mm、文字は em（基準は .tr-sheet の font-size＝tarot.js の fit が 8.4pt から 7pt まで縮める）。
   em は見本の pt を 8.4pt で割った値（入れ子の中は親の pt で割る）。 */
.tr-report-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; font-size:.9rem; }
.tr-sheet-wrap{ background:var(--desk); padding:24px 0; border-radius:var(--r-sm); overflow-x:auto; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.tr-page{ width:210mm; height:297mm; padding:12mm; margin:0 auto; background:var(--paper); box-shadow:0 10px 36px rgba(0,0,0,.18); }
.tr-sheet{ height:271mm; overflow:hidden; display:flex; flex-direction:column; color:var(--p-ink); font-family:var(--p-sans); font-size:8.4pt; line-height:1.5; }
.tr-sheet [contenteditable="true"]{ outline:none; border-radius:1px; }
.tr-sheet [contenteditable="true"]:hover{ background:rgba(255,220,120,.18); }
.tr-sheet [contenteditable="true"]:focus{ background:rgba(255,220,120,.28); box-shadow:0 0 0 1px var(--p-accent); }
.tr-sh-read.is-long{ box-shadow:inset 0 -2px 0 rgba(200,80,60,.55); }   /* 読みが目安の字数を超えた（画面だけ。印刷では消える） */

.tr-sh-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:8mm; }
.tr-sh-kicker{ font-family:var(--p-latin); font-size:.952em; letter-spacing:.24em; text-transform:uppercase; color:var(--p-accent); }
.tr-sh-kicker span{ font-family:var(--p-sans); text-transform:none; letter-spacing:.14em; font-size:.85em; margin-left:3mm; opacity:.85; }
.tr-sh-title{ margin:.6mm 0 0; font-family:var(--p-serif); font-size:1.845em; line-height:1.3; letter-spacing:.05em; }
.tr-sh-meta{ margin:0; display:grid; gap:.6mm; font-size:.952em; white-space:nowrap; }
.tr-sh-meta div{ display:flex; gap:3mm; justify-content:flex-end; }
.tr-sh-meta dt{ color:var(--p-muted); letter-spacing:.1em; }
.tr-sh-meta dd{ margin:0; font-weight:600; min-width:24mm; }
.tr-guest-name{ display:inline-block; min-width:5em; }
.tr-guest-name:empty::before{ content:attr(data-placeholder); color:var(--p-muted); font-weight:400; }

.tr-sh-sec{ margin-top:2.3mm; }
.tr-sh-sec p{ margin:0; }
.tr-sh-h{ display:flex; align-items:baseline; gap:2.5mm; margin:0 0 1.3mm; font-family:var(--p-serif); font-size:1.143em; font-weight:600; letter-spacing:.14em; color:var(--p-head); }
.tr-sh-h small{ font-family:var(--p-sans); font-size:.729em; font-weight:400; letter-spacing:.06em; color:var(--p-muted); }
.tr-sh-consult p{ font-size:1.048em; line-height:1.55; }

/* 13 枚: 中央を先頭に横長で、1〜12 は左列 1〜6・右列 7〜12（縦に読む） */
.tr-sh-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(6,auto); grid-auto-flow:column; column-gap:6mm; }
.tr-sh-card{ display:flex; gap:2.6mm; padding:1mm 0; border-bottom:.3pt solid var(--p-line); break-inside:avoid; }
.tr-sh-card.is-center{ padding:1.5mm 3mm; margin-bottom:1mm; border:.5pt solid var(--p-center-line); background:var(--p-center-bg); border-radius:var(--p-r); }
.tr-sh-thumb{ flex:0 0 9.2mm; height:15.8mm; overflow:hidden; background:var(--p-thumb-bg); border:.3pt solid var(--p-line); border-radius:var(--p-r-thumb); }
.tr-sh-card.is-center .tr-sh-thumb{ flex-basis:9.8mm; height:16.8mm; }
.tr-sh-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tr-sh-thumb.is-rev img{ transform:rotate(180deg); }
.tr-sh-cardtx{ flex:1; min-width:0; }
.tr-sh-line{ display:flex; align-items:baseline; gap:2mm; line-height:1.35; }
.tr-sh-no{ flex:0 0 auto; font-family:var(--p-latin); font-size:1.071em; color:var(--p-accent); font-weight:600; min-width:3.2mm; }
.tr-sh-card.is-center .tr-sh-no{ font-family:var(--p-serif); font-size:.952em; }
.tr-sh-name{ font-family:var(--p-serif); font-size:1.095em; font-weight:600; color:var(--p-head); white-space:nowrap; }
.tr-sh-none{ color:var(--p-muted); font-weight:400; }
.tr-sh-pos{ margin-left:auto; font-size:.786em; color:var(--p-muted); letter-spacing:.02em; white-space:nowrap; }
.tr-tag{ font-family:var(--p-sans); font-size:.685em; font-weight:400; margin-left:2mm; padding:0 1.3mm; vertical-align:1pt; border:.4pt solid; border-radius:var(--p-r-tag); letter-spacing:.06em; }
.tr-tag-up{ color:var(--p-up); }
.tr-tag-rev{ color:var(--p-rev); }
.tr-sh-read{ margin:.2mm 0 0 !important; font-size:.952em; line-height:1.4; }
.tr-sh-card.is-center .tr-sh-read{ font-size:1.024em; }

.tr-sh-overall p{ font-family:var(--p-serif); font-size:1.071em; line-height:1.58; }
.tr-sh-2col{ display:grid; grid-template-columns:1.25fr 1fr; gap:7mm; align-items:end; }
/* アドバイス3つは横に並べる（縦に積むより低くなる） */
.tr-sh-advice{ margin:0; padding-left:4mm; display:grid; grid-template-columns:repeat(3,1fr); column-gap:8mm; font-size:1em; line-height:1.5; }
.tr-sh-advice li{ padding-left:.5mm; }
.tr-sh-advice li::marker{ font-family:var(--p-latin); color:var(--p-accent); font-weight:600; }
.tr-sh-2col p{ font-size:1.024em; line-height:1.6; }
.tr-sh-closing{ margin:0 0 .4mm !important; text-align:right; font-family:var(--p-serif); font-size:1.119em !important; color:var(--p-head); }

/* フッター: 店名・ロゴ・連絡先・QR（占い師ごと・どれも任意・空なら出さない）＋免責 */
.tr-sh-foot{ margin-top:auto; padding-top:2.5mm; }
.tr-shop{ display:flex; align-items:center; gap:4mm; padding:2mm 0; border-top:.5pt solid var(--p-line2); }
.tr-shop-logo{ flex:0 0 auto; width:13mm; height:13mm; display:flex; align-items:center; justify-content:center; }
.tr-shop-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.tr-shop-qr{ flex:0 0 auto; width:14mm; height:14mm; margin-left:auto; }
.tr-shop-qr img{ width:100%; height:100%; display:block; image-rendering:pixelated; }
.tr-shop-tx{ display:flex; flex-direction:column; gap:.3mm; font-size:.905em; color:var(--p-muted); min-width:0; }
.tr-shop-tx b{ font-family:var(--p-serif); font-size:1.316em; color:var(--p-head); font-weight:600; letter-spacing:.06em; }
.tr-disclaimer{ margin:1.5mm 0 0; text-align:center; font-size:.81em; color:var(--p-muted); letter-spacing:.04em; }

@page{ size:A4; margin:12mm; }
@media print{
  html, body.tr-body{ background:#fff; }
  .tr-head, .tr-demo, .tr-foot, .tr-title, .tr-noprint, .tr-sub, .tr-report-tools{ display:none !important; }
  .tr-main{ padding:0; max-width:none; }
  .tr-sheet-wrap{ background:none; padding:0; overflow:visible; border-radius:0; }
  .tr-page{ width:auto; height:auto; padding:0; margin:0; box-shadow:none; background:none; }
  .tr-sheet [contenteditable="true"]:hover, .tr-sheet [contenteditable="true"]:focus{ background:none; box-shadow:none; }
  .tr-sh-read.is-long{ box-shadow:none; }
  .tr-guest-name:empty::before{ content:""; }
}