:root {
  --dark: #58595b;
  --black: #231f20;
  --line: #3a3a3a;
  --hatch: linear-gradient(90deg, #8a8a8a 50%, #c4c4c4 50%) 0 0 / 0.7mm 100%;
  --mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --gothic: "Yu Gothic", "YuGothic", "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  background: #e8e8e8;
  font-family: var(--gothic);
  color: var(--black);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---------- ツールバー ---------- */
#toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 12px;
  background: #333; color: #fff; font-size: 14px;
}
#toolbar select, #toolbar button { font-size: 14px; padding: 4px 10px; }
#toolbar .primary { background: #c33; color: #fff; border: none; border-radius: 3px; }
#toolbar .hint { font-size: 12px; color: #ccc; }
#toolbar .zoom { display: inline-flex; align-items: center; gap: 4px; }
#toolbar .mode { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid #777; border-radius: 3px; cursor: pointer; }
.manual-mode #toolbar .mode { background: #e67e22; border-color: #e67e22; }
#zoomLabel { display: inline-block; width: 3.5em; text-align: center; }

/* ---------- 表示領域（拡大・移動） ---------- */
#viewport { flex: 1; position: relative; overflow: hidden; cursor: grab; touch-action: none; }
#viewport.panning { cursor: grabbing; }
/* ドラッグ移動時にシートの文字が選択されないようにする（入力欄の中は選択可） */
#viewport { -webkit-user-select: none; user-select: none; }
#viewport .f { -webkit-user-select: text; user-select: text; }
#viewport .sheet { position: absolute; top: 0; left: 0; margin: 0; transform-origin: 0 0; }

/* ---------- シート ---------- */
.sheet {
  position: relative;
  width: 364mm; height: 257mm;
  margin: 16px auto;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  font-size: 2.4mm;
  line-height: 1.2;
}
.page { position: absolute; top: 0; width: 182mm; height: 257mm; }
.page.left { left: 0; }
.page.right { left: 182mm; }
.abs { position: absolute; }

/* ---------- 入力欄 ---------- */
.f {
  width: 100%; height: 100%;
  border: none; outline: none; padding: 0 0.6mm;
  background: transparent;
  font: inherit; font-size: 2.9mm; color: #000;
}
textarea.f { resize: none; overflow: hidden; line-height: 1.25; padding-top: 0.4mm; font-size: 2.5mm; }
.f.num { text-align: center; font-size: 3.6mm; }
/* 入力できる欄は水色 */
.f { background: #e8f1ff; }
.f:hover { background: #d9e8ff; }
.f:focus { background: #c9deff; box-shadow: inset 0 0 0 0.25mm #4a86e8; }
/* 自動計算欄：通常は読み取り専用（色なし）。手動上書きモードでは薄い橙。上書き中は濃い橙＋「手動」バッジ */
.f.calc[readonly] { background: transparent; cursor: default; box-shadow: none; }
.manual-mode .f.calc { background: #fff1e0; }
.manual-mode .f.calc:hover { background: #ffe6c7; }
.manual-mode .f.calc:focus { background: #ffdcb0; box-shadow: inset 0 0 0 0.25mm #e67e22; }
.f.calc.ov, .manual-mode .f.calc.ov { background: #ffd09a; color: #a33f00; font-weight: bold; box-shadow: inset 0 0 0 0.35mm #e67e22; }
.ov-ui { display: none; position: absolute; top: 0.4mm; left: 0.4mm; right: 0.4mm; justify-content: space-between; align-items: center; pointer-events: none; z-index: 1; }
.f.calc.ov + .ov-ui { display: flex; }
.ov-badge { background: #e67e22; color: #fff; font-size: 1.6mm; line-height: 1; padding: 0.25mm 0.5mm; border-radius: 0.6mm; font-weight: bold; }
.ov-reset { pointer-events: auto; width: 2.8mm; height: 2.8mm; padding: 0; border: none; border-radius: 50%; background: #a33f00; color: #fff; font-size: 2mm; line-height: 2.8mm; cursor: pointer; }
.ov-reset:hover { background: #d35400; }

/* ---------- 汎用ボックス ---------- */
.box { border: 0.35mm solid var(--line); background: #fff; }
.grid { display: grid; }
.cell {
  position: relative; min-width: 0;
  border-right: 0.2mm solid var(--line);
  border-bottom: 0.2mm solid var(--line);
  display: flex; align-items: center;
}
.hd {
  background: var(--dark); color: #fff;
  font-family: var(--mincho); font-weight: bold; font-size: 2.9mm;
  justify-content: center; text-align: center;
  border-color: #fff;
}
.lbl-cell { padding-top: 0; }
.lbl-cell > .f { padding-top: 2.4mm; }
.sl { z-index: 1; }
.sl { position: absolute; top: 0.4mm; left: 0.6mm; font-size: 1.9mm; color: #333; pointer-events: none; }
.dash { border-bottom-style: dashed; }
.small { font-size: 2mm; font-weight: normal; font-family: var(--mincho); }
.tiny { font-size: 1.7mm; margin-left: 0.6mm; }
.sec-label { font-weight: bold; font-size: 2.8mm; }
.sec-label .normal { font-weight: normal; font-size: 2.4mm; }

/* 上下中央揃えの複数行欄：textarea を内容の高さに縮め、色はセル側に付ける */
.vc { background: #e8f1ff; cursor: text; }
.vc:hover { background: #d9e8ff; }
.vc:focus-within { background: #c9deff; box-shadow: inset 0 0 0 0.25mm #4a86e8; }
.vc > .f { height: auto; max-height: 100%; padding-top: 0; background: transparent !important; box-shadow: none !important; }

/* ---------- 選択トグル ---------- */
.tg { cursor: pointer; padding: 0 0.4mm; border: 0.25mm solid transparent; border-radius: 50%; background: #e8f1ff; }
.tg.on { border-color: #000; }
.tg:hover { background: #c9deff; }

/* ---------- タイトル ---------- */
.title { display: flex; border: 0.6mm solid var(--black); }
.logo { background: var(--black); color: #fff; width: 36mm; display: flex; flex-direction: column; justify-content: center; padding-left: 9mm; font-family: var(--mincho); font-weight: bold; line-height: 1; }
.logo-sub { font-size: 2.4mm; }
.logo-main { font-size: 5.2mm; letter-spacing: 0.3mm; }
.title-text { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--mincho); font-weight: 900; font-size: 6mm; }

/* ---------- 世界干渉LV ---------- */
.lvcircle {
  z-index: 2; border-radius: 50%; overflow: hidden;
  border: 0.4mm solid var(--dark);
  background: linear-gradient(var(--dark) 0 47%, #fff 47%);
  display: flex; flex-direction: column; align-items: center;
}
.lv-label { color: #fff; font-family: var(--mincho); font-weight: bold; font-size: 1.8mm; text-align: center; line-height: 1.05; height: 47%; padding-top: 0.8mm; }
.lvcircle .f { height: 53%; width: 80%; padding: 0; }

/* ---------- 画像 ---------- */
.portrait { border: 0.4mm solid var(--dark); border-radius: 2.5mm; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.portrait img { max-width: 100%; max-height: 100%; object-fit: contain; }
.portrait img:not([src]) { display: none; }
.portrait-hint { color: #aaa; font-size: 2.4mm; }
.portrait img[src] ~ .portrait-hint { display: none; }
.portrait-clear { position: absolute; top: 1mm; right: 1mm; display: none; cursor: pointer; }
.portrait img[src] ~ .portrait-clear { display: block; }

/* ---------- 種族 ---------- */
.race { flex-direction: column; align-items: stretch; }
.race .f { flex: 1; }
.atype { border-top: 0.2mm dashed var(--line); font-size: 1.9mm; padding: 0.3mm 0.6mm; text-align: right; white-space: nowrap; }

/* ---------- 称号 ---------- */
.titles { display: flex; flex-direction: column; }
.titles-head { display: grid; grid-template-columns: 1fr 9mm; height: 4.8mm; }
.titles-head .hd { display: flex; align-items: center; border-right: 0.2mm solid #fff; }
.lineage { width: 13mm; height: 3.4mm; border-radius: 0.8mm; font-size: 2.3mm; margin: 0 0.3mm; }
.title-row { flex: 1; display: grid; grid-template-columns: 1fr 9mm; border-bottom: 0.2mm dashed var(--line); }
.title-row:last-child { border-bottom: none; }
.title-row > div { position: relative; display: flex; align-items: center; }
.title-row > div:first-child { border-right: 0.2mm solid var(--line); }

/* ---------- パーソナリティ ---------- */
.personality .cell:nth-child(n) { border-right: none; }
.personality .hd { border-right: 0.2mm solid var(--line); }
.vert { writing-mode: vertical-rl; font-size: 2.6mm; letter-spacing: 0.2mm; }
.emotion { padding-left: 0.8mm; font-size: 3mm; }

/* ---------- 使用霊力 ---------- */
.spirit { background: #6d6e70; border-radius: 2mm; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2mm; color: #d6d6d6; }
.spirit-text { writing-mode: vertical-rl; font-family: var(--gothic); font-weight: 900; font-size: 9mm; letter-spacing: 1mm; }
.die { font-size: 9mm; line-height: 1; }

/* ---------- 能力値 ---------- */
.vlabel { writing-mode: vertical-rl; font-weight: bold; font-size: 2.6mm; width: 4mm; display: flex; align-items: center; justify-content: center; }
.stat-tbl { display: grid; border: 0.35mm solid var(--line); background: #fff; overflow: hidden; }
.stat-tbl.thick { border-width: 0.6mm; }
.stat-tbl > div { border-right: 0.2mm solid var(--line); position: relative; min-width: 0; }
.th { font-family: var(--mincho); font-weight: bold; font-size: 3mm; text-align: center; border-bottom: 0.2mm solid var(--line); height: 3.4mm; line-height: 3.4mm; }
.th.hb { background: var(--black); color: #fff; }
.th.hw { background: #fff; color: var(--black); }
.th.hh { background: var(--hatch); color: #fff; text-shadow: 0 0 0.4mm #000; }
.sub-note { font-size: 1.9mm; text-align: center; display: block; }
.mod-note { position: absolute; top: 0.3mm; left: 0; right: 0; font-size: 1.9mm; text-align: center; pointer-events: none; }
.ops { display: grid; padding: 0 0.35mm; font-weight: bold; text-align: center; font-size: 3mm; line-height: 3mm; }
.stat-val .f.num, .stat-val .calc { font-size: 5mm; }

/* ---------- 装備 ---------- */
.eq { width: 100%; border-collapse: collapse; table-layout: fixed; border: 0.35mm solid var(--line); background: #fff; }
.eq td, .eq th { border: 0.2mm solid var(--line); padding: 0; position: relative; }
.eq th { font-family: var(--mincho); font-weight: bold; font-size: 3mm; height: 3.5mm; }
.eq th.hb { background: var(--black); color: #fff; }
.eq th.hh { background: var(--hatch); color: #fff; text-shadow: 0 0 0.4mm #000; }
.eq .name-cell { display: flex; align-items: center; height: 100%; }
.eq .name-cell .sl { position: static; flex: none; padding: 0 0.6mm; width: 9mm; }
.eq .parts { flex: none; font-size: 1.8mm; line-height: 1.1; padding-right: 1mm; text-align: right; }
.eq tr.dashb td { border-bottom-style: dashed; }
.eq tr.sep td { height: 1.3mm; background: #b5b5b5; }
.eq .detail { font-size: 2.2mm; line-height: 1.25; padding: 0.3mm 0.6mm; }
.eq .detail .line { display: flex; align-items: center; white-space: nowrap; height: 2.7mm; }
.eq .detail .f { height: 2.7mm; font-size: 2.3mm; }
.eq .detail .w-shape { width: 16mm; }
.eq .detail .w-mid { width: 11mm; }

/* ---------- 凡例 ---------- */
.legend { font-size: 2.4mm; display: flex; flex-direction: column; gap: 1.3mm; }
.legend > div { display: flex; align-items: center; }
.sw { display: inline-block; width: 12mm; height: 3.2mm; border: 0.3mm solid var(--black); }
.sw.hb { background: var(--black); }
.sw.hw { background: #fff; }
.sw.hh { background: var(--hatch); }

/* ---------- 移動 ---------- */
.move .hd { font-size: 2.6mm; }
.move .mv { justify-content: flex-end; padding-right: 2mm; font-size: 2.8mm; }

.move .mv [data-calc] { flex: 1; min-width: 0; font-size: 3.4mm; }

/* ---------- タレント ---------- */
.tl { width: 100%; border-collapse: collapse; table-layout: fixed; border: 0.35mm solid var(--line); }
.tl th { background: var(--dark); color: #fff; font-family: var(--mincho); font-weight: bold; font-size: 2.9mm; height: 3.5mm; border-left: 0.2mm solid #fff; padding: 0; }
.tl td { height: 6.25mm; border-left: 0.2mm solid var(--line); border-bottom: 0.2mm dashed var(--line); padding: 0; position: relative; }
.tl tr.solid td { border-bottom: 0.3mm solid var(--line); }
.tl .fixed { text-align: center; font-size: 2.6mm; }
.tl .fixed-effect { font-size: 1.95mm; line-height: 1.2; padding: 0 0.5mm; }
.tl .name-cell { display: flex; align-items: center; height: 100%; }
.tl .mark { flex: none; width: 3mm; padding-left: 0.6mm; font-size: 2.1mm; }
.tl .f.c { text-align: center; font-size: 2.6mm; }
.tl textarea.f { font-size: 2.1mm; }

/* ---------- パスワード画面 ---------- */
#gate { display: none; }
.locked body > :not(#gate) { display: none !important; }
.locked #gate { display: flex; position: fixed; inset: 0; align-items: center; justify-content: center; background: #333; }
.gate-box { background: #fff; padding: 24px 28px; border-radius: 6px; display: flex; flex-direction: column; gap: 10px; width: 300px; font-size: 14px; }
.gate-title { font-family: var(--mincho); font-weight: bold; font-size: 18px; }
.gate-box input { font-size: 16px; padding: 6px 8px; }
.gate-box button { font-size: 14px; padding: 6px; background: #c33; color: #fff; border: none; border-radius: 3px; cursor: pointer; }
.gate-error { color: #c33; min-height: 1.2em; font-size: 13px; }

/* ---------- 印刷 ---------- */
@page { size: 364mm 257mm; margin: 0; }
@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  body { display: block; }
  #viewport { overflow: visible; }
  #viewport .sheet { position: relative; margin: 0; box-shadow: none; transform: none !important; }
  .f, .f:hover, .f:focus, .f.calc, .f.calc.ov, .tg, .tg:hover { background: transparent !important; box-shadow: none !important; }
  .lineage { background: #fff !important; }
  .vc { background: transparent !important; box-shadow: none !important; }
  .f.calc.ov { color: #000; font-weight: normal; }
  .portrait { cursor: default; }
}

/* ---------- 微調整 ---------- */
.hd { white-space: nowrap; letter-spacing: -0.1mm; }
.grid .hd { font-size: 2.6mm; }
.logo { width: 30mm; padding-left: 6mm; }
.title-text { font-size: 5.4mm; white-space: nowrap; }
.atype { font-size: 1.7mm; }
.sub-note { font-size: 1.45mm; white-space: nowrap; letter-spacing: -0.03mm; }
.move .mv.first { justify-content: center; }
.tl th { white-space: nowrap; letter-spacing: -0.2mm; font-size: 2.6mm; }
.tl td > .f, .tl td > .name-cell { position: absolute; inset: 0; height: auto; }
.tl td:last-child, .tl th:last-child { border-right: 0.35mm solid var(--line); }
.eq td.detail { border-top-style: dashed; }
.eq td > .f { position: absolute; inset: 0; height: auto; }
@media print {
  html, body { height: 257mm; overflow: hidden; }
}