/* 見た目の決め（案 C「霧のガラス」。2026-09-22。doc/UI刷新案_20260922.html で選定）:
   深い青の奥行きの上にすりガラスの面を重ねる。角 14px、影は青みを帯びる。主ボタンは青のグラデーション。
   シート（青＝項目名、黄＝入力範囲）の色は変えない。動きは利用者の操作に応えるものだけ（末尾の「動き」）。 */
:root {
  --deep: #0f2a5a; --mid: #2c4f9c; --text: #14213d; --muted: #5a6b8c; --rule: rgba(20, 50, 120, 0.14);
  --glass: rgba(255, 255, 255, 0.78); --glass-strong: rgba(255, 255, 255, 0.92);
  --accent: #2456d6; --accent-2: #1a9bd7;
  --shadow: 0 18px 40px rgba(20, 50, 120, 0.18), 0 2px 6px rgba(20, 50, 120, 0.10);
  --header: linear-gradient(100deg, #0f2a5a 0%, #2c4f9c 70%, #3b6fd1 100%);
  --page: radial-gradient(1200px 600px at 12% -10%, #dbe7fb 0%, transparent 60%),
          radial-gradient(900px 500px at 100% 0%, #e7f0ff 0%, transparent 55%),
          linear-gradient(180deg, #f3f6fc 0%, #e9eef8 100%);
}
* { box-sizing: border-box; }
/* display 指定を持つ要素（.gate-overlay 等）でも hidden 属性を必ず効かせる */
[hidden] { display: none !important; }
body {
  font-family: "Yu Gothic UI", "Meiryo", "Hiragino Sans", sans-serif;
  margin: 0; color: var(--text); background: var(--page); background-attachment: fixed; min-height: 100vh;
}
/* 表示言語が中国語のときは中国語の書体（日本語の書体だと漢字の字形が日本風になる） */
body:lang(zh-Hans) {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Yu Gothic UI", sans-serif;
}
/* 表示言語のセレクト（ログイン画面と「ブックを開いて対象を選択」タブの上） */
.lang-bar { display: flex; justify-content: flex-end; margin: 0 0 10px; font-size: 13px; color: #26415e; }
.lang-bar select { margin-left: 6px; padding: 4px 8px; font-size: 13px; font-family: inherit; }
/* 表示言語の行の左: ブラウザーの拡大（Ctrl と ＋）の案内（2026-10-04） */
.lang-bar .zoom-hint { margin-right: auto; color: var(--muted); }

.app-header {
  background: var(--header); color: #fff; padding: 10px 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 10px 30px rgba(15, 42, 90, 0.25);
}
.app-header h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: 0.02em; }

.lamp { font-size: 15px; line-height: 1; }
.lamp-unknown { color: #b8c4d4; }
.lamp-ok { color: #6fe08a; }
.lamp-ng { color: #ff7a6e; }

.header-side { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }
.btn-logout {
  border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: #fff;
  border-radius: 999px; padding: 6px 14px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.btn-logout:hover { background: rgba(255, 255, 255, 0.18); }

.health-status {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  font-size: 13px;
  min-width: 0;
  max-width: 560px;
}
.health-status-title { font-size: 12px; opacity: 0.8; margin: 0; white-space: nowrap; }
.health-status-line { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#health-state-text { font-weight: bold; }
/* 停止中の案内は 1 行に収める（幅が足りないときだけ省略記号。帯自体は折り返して 2 段になる） */
#health-note { font-size: 11px; color: #ffd9a0; margin: 0; max-width: 380px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#health-note:empty { display: none; }
/* 「アカウント情報」の吹き出し（ログイン中の利用者番号）。マウスを重ねるかフォーカスで出す */
.account-wrap { position: relative; display: inline-flex; }
.header-tip {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 20; min-width: 190px; padding: 8px 12px 9px;
  background: var(--glass-strong); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 12px;
  box-shadow: var(--shadow); backdrop-filter: blur(14px); font-size: 11px; line-height: 1.4; white-space: nowrap; text-align: left;
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease;
}
.header-tip::before {  /* 吹き出しの三角 */
  content: ""; position: absolute; top: -6px; right: 22px; width: 10px; height: 10px;
  background: var(--glass-strong); border-left: 1px solid rgba(255, 255, 255, 0.8); border-top: 1px solid rgba(255, 255, 255, 0.8);
  transform: rotate(45deg);
}
.header-tip-label { display: block; color: var(--muted); }
.header-tip-number { display: block; margin-top: 2px; font-family: Consolas, "Cascadia Mono", monospace; font-size: 15px; font-weight: bold; letter-spacing: 0.04em; color: var(--deep); }
.account-wrap:hover .header-tip, #btn-account:focus-visible + .header-tip { opacity: 1; transform: none; }

/* 本体は幅 860px で中央寄せ。操作ガイドを開いているときだけ左に 300px の列を足す
   （data-guide は guide.js が付ける: open / collapsed / off） */
main {
  display: grid; grid-template-columns: minmax(0, 860px); justify-content: center;
  column-gap: 20px; align-items: start; padding: 16px;
}
main[data-guide="open"] { grid-template-columns: 300px minmax(0, 860px); }
.main-content { min-width: 0; }  /* 幅広の表が列を押し広げないように */

.card {
  background: var(--glass); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 20px 24px; margin-bottom: 16px;
  scroll-margin-top: 12px;  /* 自動スクロールの着地位置に余白を持たせる */
}
.range-controls .line-input { width: 60px; padding: 3px 6px; }
.card h2 { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.card h3 { margin: 12px 0 6px; font-size: 14px; }

.banner { border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.banner-warn { background: #fff8e1; border: 1px solid #f0c36d; color: #7a5b00; }
.banner-error { background: #fdecea; border: 1px solid #f5c6cb; color: #a12622; }
.banner-info { background: #e8f4ec; border: 1px solid #79b791; color: #145c3a; }

.dropzone {
  border: 2px dashed rgba(44, 79, 156, 0.35); border-radius: 14px; padding: 28px;
  text-align: center; color: var(--muted); cursor: pointer; background: rgba(255, 255, 255, 0.5);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.dropzone.dragover { background: rgba(255, 255, 255, 0.85); border-color: var(--accent); }
.dropzone .sub { font-size: 12px; color: #7d93a8; }

#file-list { list-style: none; padding: 0; margin: 10px 0 0; }
#file-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; border-bottom: 1px solid #eef1f4; font-size: 14px;
}
#file-list .size { color: #888; font-size: 12px; margin-left: 8px; }
#file-list button { border: none; background: none; color: #c0392b; cursor: pointer; }

.controls { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.btn {
  border: none; border-radius: 10px; padding: 10px 20px; font-size: 14px;
  cursor: pointer; font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff; box-shadow: 0 8px 18px rgba(36, 86, 214, 0.28); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(120deg, #1d49bd 0%, #178bc2 100%); transform: translateY(-1px); box-shadow: 0 12px 22px rgba(36, 86, 214, 0.32); }
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 10px rgba(36, 86, 214, 0.25); }
.btn-secondary { background: rgba(255, 255, 255, 0.9); color: var(--deep); border: 1px solid var(--rule); }
.btn-secondary:hover:not(:disabled) { background: #fff; }
.btn-small { padding: 3px 10px; font-size: 12px; }
.btn-danger { background: #fdecea; color: #a12622; border: 1px solid #e3a29e; }
/* 次の段階へ進むボタン（「入力受付開始へ」）: 青のボタンが並ぶ中で見分けが付くよう緑にする（2026-10-05 の見直し） */
.btn-go { background: linear-gradient(120deg, #1f9d55 0%, #2bb673 100%); color: #fff; box-shadow: 0 8px 18px rgba(31, 157, 85, 0.28); font-weight: 600; }
.btn-go:hover:not(:disabled) { background: linear-gradient(120deg, #19864a 0%, #239f63 100%); transform: translateY(-1px); box-shadow: 0 12px 22px rgba(31, 157, 85, 0.32); }
.btn-go:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 10px rgba(31, 157, 85, 0.25); }
.btn-danger:hover:not(:disabled) { background: #f9d7d3; }

.spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px;
  border: 2px solid #cfdcf2; border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.9s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress-bar-outer {
  margin-top: 10px; height: 10px; background: rgba(20, 50, 120, 0.10); border-radius: 999px; overflow: hidden;
}
.progress-bar-inner {
  height: 100%; width: 0; border-radius: 999px; transition: width 0.3s;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 40%, #7fd0ff 50%, var(--accent-2) 60%, var(--accent) 100%);
  background-size: 200% 100%; animation: shimmer 2.4s linear infinite;  /* 送信中に光の筋が流れる */
}

.data-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.data-table th, .data-table td {
  border: 1px solid #dfe3e8; padding: 5px 9px; text-align: left;
}
.data-table th { background: #eef2fa; }
.data-table td.num { text-align: right; }

pre {
  background: #f6f8fa; border: 1px solid #e3e7eb; border-radius: 6px;
  padding: 10px; font-size: 12px; overflow-x: auto; max-height: 320px;
}
.note { font-size: 13px; color: var(--muted); }
.sub { font-size: 13px; color: #7286a8; }  /* 2026-10-04: 小さい画面での読みやすさのため 12→13px */
.sub-list { margin: 6px 0 12px; padding-left: 1.5em; }
.sub-list li { margin: 3px 0; }

/* ===== アクセスキーゲート ===== */
.gate-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(800px 500px at 30% 20%, rgba(90, 140, 230, 0.55), transparent 70%),
              radial-gradient(700px 500px at 75% 80%, rgba(26, 155, 215, 0.45), transparent 70%),
              rgba(15, 42, 90, 0.72);
  display: flex; align-items: center; justify-content: center;
}
.gate-card { width: min(400px, calc(100vw - 32px)); margin: 0; background: var(--glass-strong); }
/* ログアウト完了画面: 元の画面を完全に隠す（背景を不透明に・最前面） */
.gate-overlay.opaque { background: var(--page); z-index: 110; }
#gate-form { display: flex; gap: 10px; margin: 12px 0; }
#gate-key { flex: 1; padding: 9px 12px; border: 1px solid #c7d3ea; border-radius: 10px; font-size: 14px; }
#gate-error { margin: 0; }
/* 利用者認証のログイン画面（設計書 19.1、to-Human 5.1） */
.login-card { width: min(480px, calc(100vw - 32px)); padding: 30px 34px; border-radius: 18px; }
.login-card h2, .register-card h2 { font-size: 22px; }
.login-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 8px; align-items: flex-start; }  /* 一言の分だけ隣のボタンが伸びないように */
.login-actions .btn { flex: 1 1 200px; padding: 12px 16px; }
/* ボタンとその下の一言の組（「はじめて利用する」＋「登録は 1 分ほど」）。組ごと 1 列分の幅を取り、中のボタンは幅いっぱい */
.login-actions .login-action { flex: 1 1 200px; display: flex; flex-direction: column; min-width: 0; }
.login-actions .login-action .btn { flex: none; width: 100%; }
.login-actions .login-action .sub { margin: 6px 0 0; text-align: center; }  /* ボタンの文字と同じく中央に（2026-10-16） */
.totp-login-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.totp-login-form input { flex: 1 1 140px; padding: 9px 12px; border: 1px solid #c7d3ea; border-radius: 10px; font-size: 14px; font-family: inherit; }
.login-links { font-size: 13px; margin: 10px 0 0; }
#login-error { margin: 12px 0 0; }
.login-busy { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
/* 初回登録と回復（設計書 19.1、to-Human 5.2） */
.register-card { width: min(560px, calc(100vw - 32px)); padding: 30px 34px; border-radius: 18px; }
.method-card { border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: rgba(255, 255, 255, 0.6); }
.method-card .btn { width: 100%; padding: 10px 14px; }
.method-card .sub { margin: 8px 0 6px; }
.method-field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #26415e; }
.method-field input { flex: 1; padding: 7px 12px; border: 1px solid #c7d3ea; border-radius: 10px; font-size: 14px; font-family: inherit; }
#totp-qr { display: block; width: 220px; height: 220px; margin: 8px auto; }
.manual-key { display: block; font-family: Consolas, "Courier New", monospace; font-size: 15px; letter-spacing: 0.08em; word-break: break-all; background: rgba(20, 50, 120, 0.06); border-radius: 10px; padding: 8px 10px; margin: 4px 0 10px; }
.done-list { margin: 8px 0; }
.done-list dt { font-size: 12px; color: #778; margin-top: 8px; }
.done-list dd { margin: 2px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.code-value { font-family: Consolas, "Cascadia Mono", "Courier New", monospace; font-size: 22px; letter-spacing: 0.06em; color: var(--deep); }
.recovery-code { user-select: all; }
.saved-check { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 14px; }
.recovery-form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.recovery-form input { padding: 9px 12px; border: 1px solid #c7d3ea; border-radius: 10px; font-size: 15px; font-family: Consolas, "Courier New", monospace; letter-spacing: 0.04em; }
.recovery-form input#recovery-user-number { font-family: inherit; letter-spacing: normal; }
/* 期限前の予告（header と main の間。内容に重ねない） */
.expiry-notice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 16px 0; }
.expiry-notice.banner-info { }
.expiry-notice span { flex: 1 1 320px; }
.reauth-controls { justify-content: flex-end; margin-top: 8px; }
#reauth-dialog { z-index: 105; }
/* 再ログインのダイアログ（105）の「ログアウト」から開く確認は、その上に出す */
#logout-overlay { z-index: 106; }
/* アカウント画面（設計書 19.1） */
.header-buttons { display: flex; gap: 6px; }
.account-list dd { font-size: 16px; }
.passkey-list { list-style: none; padding: 0; margin: 4px 0 8px; }
.passkey-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid #eef1f5; font-size: 13px; }
.passkey-list .passkey-name { font-weight: bold; cursor: pointer; }
.passkey-list .passkey-name:hover { text-decoration: underline; }
.passkey-list .passkey-meta { color: #778; flex: 1 1 200px; }
.passkey-list input { padding: 3px 8px; border: 1px solid #c7d3ea; border-radius: 8px; font-size: 13px; font-family: inherit; }
.account-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; font-size: 14px; }
.account-foot { justify-content: space-between; margin-top: 12px; }
.recovery-shown { border: 1px solid #f0c36d; background: #fff8e1; border-radius: 12px; padding: 8px 12px; margin: 8px 0; }
details summary { cursor: pointer; font-size: 13px; color: var(--mid); margin: 8px 0 4px; }

/* ===== タブ ===== */
.tab-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.tab {
  border: 1px solid transparent; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55); color: var(--muted); padding: 9px 20px; font-size: 14px;
  cursor: pointer; font-family: inherit;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
/* 表示中のタブは body の data-route で決める（初期値はサーバが埋め込む）
   1=既定形式ブック（経路 1） 2=ブックを開いて対象を選択（経路 2） 3=分析開始（経路 2 の送信） */
body[data-route="1"] #tab-route1,
body[data-route="2"] #tab-route2,
body[data-route="3"] #tab-route3 { background: #fff; font-weight: 600; color: var(--deep); box-shadow: var(--shadow); }
#route1-panel, #route2-panel, #route3-panel { display: none; }
body[data-route="1"] #route1-panel,
body[data-route="2"] #route2-panel,
body[data-route="3"] #route3-panel { display: block; }
/* 進捗・プレビュー・結果は経路 1 と「分析開始」タブの下に出す。表を選ぶタブでは出さない */
body[data-route="2"] #job-panel { display: none; }
/* 正式機能では経路 1（既定書式ブックの直接送信）を使わない */
body[data-app-mode="ingate"] #tab-route1 { display: none; }

/* 「分析開始」タブの送信対象一覧 */
#send-summary .data-table { margin-bottom: 8px; }
#send-summary td.unregistered { color: #a12622; }

/* ===== シートビューア（web_No2 流用） ===== */
.book-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.book-tab {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px; background: rgba(255, 255, 255, 0.7);
  padding: 5px 10px 5px 14px; font-size: 13px; cursor: pointer;
  font-family: inherit; color: var(--deep);
}
.book-tab.active { background: var(--deep); border-color: var(--deep); color: #fff; font-weight: bold; }
.book-tab .close { padding: 0 2px; line-height: 1; opacity: 0.7; }
.book-tab .close:hover { opacity: 1; }
.mapping-book-heading {
  margin: 18px 0 8px; font-size: 14px; font-weight: bold; color: var(--deep);
  border-left: 4px solid var(--accent-2); padding-left: 8px;
}
.mapping-book-heading:first-child { margin-top: 0; }

.sheet-tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.sheet-tab {
  border: 1px solid transparent; border-radius: 999px; background: rgba(255, 255, 255, 0.6);
  padding: 5px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.sheet-tab.active { background: #fff; font-weight: bold; box-shadow: var(--shadow); }

.viewer-container {
  overflow: auto; max-height: 480px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; box-shadow: var(--shadow);
}
.excel-table { border-collapse: collapse; table-layout: fixed; }
.excel-table th {
  background: #eef2fa; border: 1px solid #d9e1f0; font-size: 11px; color: #555;
  padding: 2px 6px; min-width: 34px; position: sticky; z-index: 2;
  font-weight: normal; text-align: center;
}
.excel-table thead th { top: 0; }
.excel-table tbody th { left: 0; }
.excel-table td {
  border: 1px solid #e2e6ea; padding: 2px 6px; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px; cursor: cell; user-select: none;
}
.excel-table td.sel-header {
  background-color: #1E90FF !important; color: #fff !important;
}
.excel-table td.sel-data {
  background-color: #FFFF99 !important; color: #000 !important;
}
.excel-table td.sel-tentative { outline: 2px solid #1a73e8; outline-offset: -2px; }
/* 入力範囲をドラッグしている途中の仮表示 */
.excel-table td.sel-range-drag {
  background-color: #FFFF99 !important; outline: 2px solid #c2620a; outline-offset: -2px;
}

/* 操作モード（青: 項目名を指定 / 黄: 入力範囲を指定） */
.mode-bar { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; flex-wrap: wrap; }
.btn-mode {
  border: 2px solid transparent; border-radius: 999px; padding: 7px 16px;
  font-size: 13px; font-weight: bold; cursor: pointer; font-family: inherit; opacity: 0.5;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.btn-mode.active { opacity: 1; border-color: var(--deep); box-shadow: var(--shadow); }
.btn-mode:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-mode-header { background: #1E90FF; color: #fff; }
.btn-mode-range { background: #FFFF99; color: #222; }
.viewer-container.range-mode td { cursor: crosshair; }
/* 登録済みの表のヘッダー（確定）と、確認中のデータ範囲プレビュー */
.excel-table td.sel-fixed { outline: 2px solid #0b3d91; outline-offset: -2px; }
.excel-table td.sel-preview { outline: 2px dashed #c2620a; outline-offset: -2px; }
/* 除外した行（横型では列）: 表の外のセルと見分けられるようグレーの縞にする */
.excel-table td.sel-excluded {
  background: repeating-linear-gradient(45deg, #d9dde2 0 6px, #f2f4f6 6px 12px) !important;
  color: #666 !important;
}
/* 一覧の「シートで見る」で表全体をしばらく強調する */
.excel-table td.sel-flash { outline: 3px solid #1a73e8; outline-offset: -3px; }

/* ===== 作業画面（画面全体を覆う。ゲートや確認ダイアログより下、pick バナーより下） =====
   左: 操作ガイド（開いている間だけ #guide-panel を移す）／中央: シートと操作ボタン（常設）／
   右: 登録した表の一覧（開いている間だけ #mapping-body を移す） */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: linear-gradient(180deg, #eef3fb 0%, #e6ecf7 100%); display: flex; flex-direction: column;
}
.sheet-overlay-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--header); color: #fff; padding: 10px 20px;
}
.sheet-overlay-title { font-weight: bold; font-size: 15px; }
.sheet-overlay-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
/* 表示倍率は操作ボタンの行（「この表を追加」の右）に置く */
.zoom-tools { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 13px; color: var(--muted); }
.zoom-tools #zoom-label { min-width: 44px; text-align: center; }
/* シート全体のプレビュー: 作業画面（z-index 90）の上、確認ダイアログ（100）の下 */
.sheet-preview {
  position: fixed; inset: 0; z-index: 95; padding: 24px;
  background: rgba(15, 42, 90, 0.6); display: flex; flex-direction: column;
}
.sheet-preview-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--header); color: #fff; padding: 8px 16px; border-radius: 14px 14px 0 0;
}
.sheet-preview-legend { font-size: 12px; opacity: 0.9; margin-top: 2px; }
.sheet-preview-body {
  flex: 1; min-height: 0; overflow: auto; background: #fff; padding: 12px; border-radius: 0 0 14px 14px;
}
.sheet-preview-body .excel-table { pointer-events: none; }
/* 既定（ガイドを畳んでいる）: 左上にガイドの 1 行、その下に中央の列、右に一覧 */
.sheet-overlay-body {
  flex: 1; min-height: 0; display: grid; column-gap: 14px; row-gap: 8px; padding: 8px 16px 12px;
  grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto minmax(0, 1fr);
}
.workspace-guide-slot { grid-column: 1; grid-row: 1; min-height: 0; overflow: auto; }
.workspace-center {
  grid-column: 1; grid-row: 2; min-height: 0; display: flex; flex-direction: column; overflow: auto;
}
.table-panel {
  grid-column: 2; grid-row: 1 / 3; min-height: 0; overflow: auto;
  background: var(--glass); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 14px;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
/* ガイドを開いているときは左に 300px の列 */
.sheet-overlay[data-guide="open"] .sheet-overlay-body {
  grid-template-columns: 300px minmax(0, 1fr) 440px; grid-template-rows: minmax(0, 1fr);
}
.sheet-overlay[data-guide="open"] .workspace-guide-slot { grid-column: 1; grid-row: 1; }
.sheet-overlay[data-guide="open"] .workspace-center { grid-column: 2; grid-row: 1; }
.sheet-overlay[data-guide="open"] .table-panel { grid-column: 3; grid-row: 1; }
.sheet-overlay[data-guide="off"] .workspace-guide-slot { display: none; }
.workspace-center > .tabs-row, .workspace-center > .book-tabs, .workspace-center > .sheet-tabs, .workspace-center > .mode-bar,
.workspace-center > .workspace-actions, .workspace-center > .banner { flex: none; }
/* タブの段（左に「ファイル →」「シート →」の見出し）。見出しの幅をそろえてタブの位置を合わせる */
.workspace-center > .tabs-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tabs-row .book-tabs, .tabs-row .sheet-tabs { margin-bottom: 0; min-width: 0; }
.tabs-label { flex: none; min-width: 5.5em; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.workspace-center > .mode-bar { margin: 2px 0 6px; }
.workspace-actions { margin: 0 0 6px; }
.workspace-center > .viewer-container { flex: 1; min-height: 240px; max-height: none; }
/* 作業画面の中の操作ガイド（ページ側の main[data-guide] の規則はここには効かないので同じものを置く） */
.sheet-overlay .guide-panel { position: static; max-height: none; margin: 0; }
.sheet-overlay[data-guide="collapsed"] .guide-body { display: none; }
.sheet-overlay[data-guide="open"] #guide-head-step { display: none; }
/* 右の列: 登録した表の一覧 */
.table-panel-head {
  position: sticky; top: 0; z-index: 1; background: rgba(255, 255, 255, 0.9);
  padding: 10px 12px 6px; border-bottom: 1px solid var(--rule);
}
.table-panel-title { font-weight: bold; color: var(--deep); font-size: 14px; }
.table-panel-help summary { font-size: 12px; margin: 4px 0 0; }
.table-panel-help .sub-list { margin: 4px 0 6px; }
.table-panel-body { padding: 10px 12px; flex: 1; }
.table-panel-body .mapping-table { padding: 8px 10px; margin-bottom: 12px; }
.table-panel-foot {
  position: sticky; bottom: 0; background: rgba(255, 255, 255, 0.9); border-top: 1px solid var(--rule);
  padding: 8px 12px; margin: 0; flex-wrap: wrap;
}
/* 一覧の項目名と型: 幅 440px では 4 列が入らないので 1 項目を 2 行にする
   （1 行目: 位置と項目名、2 行目: 型と生成列名）。ページの 3. では 4 列のまま */
.table-panel .mapping-cols { display: block; }
.table-panel .mapping-cols thead { display: none; }
.table-panel .mapping-cols tbody { display: block; }
.table-panel .mapping-cols tbody tr {
  display: grid; grid-template-columns: 2.6em 9em minmax(0, 1fr); gap: 3px 6px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid #eef1f4;
}
.table-panel .mapping-cols td { display: block; border: none; padding: 0; min-width: 0; }
.table-panel .mapping-cols td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: bold; color: #555; }
.table-panel .mapping-cols td:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
.table-panel .mapping-cols td:nth-child(2) input { width: 100%; }
.table-panel .mapping-cols td:nth-child(3) { grid-column: 2; grid-row: 2; width: auto; }
.table-panel .mapping-cols td:nth-child(4) { grid-column: 3; grid-row: 2; overflow-wrap: anywhere; font-size: 12px; }
/* 一覧のまとまり（作業画面ではブック＋シートごと。表示中のシートだけ開く） */
.mapping-group { margin-bottom: 8px; }
.mapping-group-head {
  display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; font-weight: bold;
  color: var(--deep); border-left: 4px solid var(--accent-2); padding-left: 8px;
}
.mapping-group-head .btn { margin-left: auto; }
.mapping-group.collapsed .mapping-group-body { display: none; }
.mapping-table.focus { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ページの 3. の「使い方」（閉じた details。2026-10-04 に固定の説明文を畳んだ） */
.mapping-help-details { margin: 0 0 10px; }
.mapping-help-details .sub-list { margin: 4px 0 6px; }
/* ページの 2.: 作業画面を開くボタンと状況の 1 行 */
#workspace-status { margin-left: 4px; }
/* 幅が足りないときはガイドを開いていても中央の列の上に置く。さらに狭ければ一覧をシートの下へ */
@media (max-width: 1599px) {
  .sheet-overlay[data-guide="open"] .sheet-overlay-body {
    grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto minmax(0, 1fr);
  }
  .sheet-overlay[data-guide="open"] .workspace-guide-slot { grid-column: 1; grid-row: 1; max-height: 40vh; }
  .sheet-overlay[data-guide="open"] .workspace-center { grid-column: 1; grid-row: 2; }
  .sheet-overlay[data-guide="open"] .table-panel { grid-column: 2; grid-row: 1 / 3; }
  /* シートの上に置くときは吹き出しだけにして、シートの高さを残す */
  .sheet-overlay[data-guide="open"] .guide-steps, .sheet-overlay[data-guide="open"] .guide-progress { display: none; }
}
@media (max-width: 1199px) {
  .sheet-overlay .sheet-overlay-body, .sheet-overlay[data-guide="open"] .sheet-overlay-body {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) minmax(160px, 34vh);
  }
  .sheet-overlay[data-guide="open"] .workspace-guide-slot { max-height: 30vh; }
  .sheet-overlay .workspace-guide-slot, .sheet-overlay[data-guide="open"] .workspace-guide-slot { grid-column: 1; grid-row: 1; }
  .sheet-overlay .workspace-center, .sheet-overlay[data-guide="open"] .workspace-center { grid-column: 1; grid-row: 2; }
  .sheet-overlay .table-panel, .sheet-overlay[data-guide="open"] .table-panel { grid-column: 1; grid-row: 3; }
}

input.input-error { background: #fdecea; border: 1px solid #c0392b; }
/* 1 セル表の向きを選ぶバナーと、推定中の表示 */
.direction-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
#add-progress { display: inline-flex; align-items: center; gap: 6px; color: var(--deep); }

/* ===== マッピングパネル ===== */
.mapping-table { margin-bottom: 16px; border: 1px solid var(--rule); border-radius: 12px; padding: 10px 14px; scroll-margin-top: 12px; background: rgba(255, 255, 255, 0.6); }
.mapping-table-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mapping-table-buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mapping-table-error { margin: 6px 0 8px; padding: 8px 12px; font-size: 12px; }
.cols-details summary { margin: 4px 0; }
.table-panel .mapping-table-head { flex-wrap: wrap; gap: 6px; }
.mapping-table h4 { margin: 0; font-size: 14px; }
.mapping-table .range-controls { display: flex; gap: 14px; align-items: center; font-size: 13px; margin-bottom: 8px; flex-wrap: wrap; }
.mapping-table input[type="number"] { width: 80px; padding: 3px 6px; }
.mapping-table input[type="text"] { padding: 3px 6px; }
.mapping-table select { padding: 3px 4px; }
.mapping-cols { border-collapse: collapse; width: 100%; font-size: 13px; }
.mapping-cols th, .mapping-cols td { border: 1px solid #dfe3e8; padding: 4px 8px; }
.mapping-cols th { background: #eef2fa; font-size: 12px; }
/* 型の列は表示名（文字列・数値・日付。多国語化で長くなる想定）が収まる幅を確保する */
.mapping-cols .col-type { width: 9em; }
.mapping-cols .col-type select { width: 100%; min-width: 8em; white-space: nowrap; }
.colname-ok { color: #1b7f37; font-family: monospace; }
.colname-ng { color: #c0392b; font-family: monospace; }

/* ===== 操作ガイド（画面左の余白。キャラクターの吹き出し。2026-10-04） =====
   既定で左の列に、キャラクターの絵と吹き出し（現在ステップ。OK で畳む）、「案内を止める」で閉じた 1 行（タブの上）。
   進み具合、ステップ一覧を出す。絵は本体アプリの AI のアバターと同じ（static/img/impress-booya.png） */
.guide-panel {
  position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto;
  background: var(--glass); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 14px;
  box-shadow: var(--shadow); padding: 12px 14px; font-size: 13px;
}
/* 折りたたみ時はタブの上に 1 行のバーとして置く */
main:not([data-guide="open"]) .guide-panel { position: static; max-height: none; margin-bottom: 14px; }
main[data-guide="collapsed"] .guide-body { display: none; }
main[data-guide="open"] #guide-head-step { display: none; }
main[data-guide="off"] .guide-panel { display: none; }
.guide-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.guide-title { font-weight: bold; color: var(--deep); }
.guide-head-step { flex: 1; color: var(--muted); }
.guide-head .btn { margin-left: auto; }
/* キャラクターと吹き出し: 本体アプリのチャットと同じく、小さな絵（2rem）を左に、吹き出しを右に（三角は絵を指す） */
.guide-mascot { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; margin: 10px 0 8px; }
.guide-mascot-img { width: 2rem; height: 2rem; object-fit: contain; display: block; flex: none; margin-top: 2px; }
.guide-mascot-side { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex: 1; min-width: 0; }
.guide-mascot-side > .btn { align-self: flex-start; }
/* 「入力受付開始へ進む」: 列の幅いっぱいの緑の主ボタンと、その上の一言 */
.guide-go { display: flex; flex-direction: column; gap: 4px; }
.guide-go-lead { font-size: 12px; color: var(--muted); }
.guide-go .btn { width: 100%; }
.guide-bubble {
  position: relative; background: #fff; border: 1px solid var(--rule); border-radius: 14px;
  padding: 10px 12px; box-shadow: var(--shadow); line-height: 1.6;
}
.guide-bubble::before {  /* 吹き出しの三角（左向き。絵を指す） */
  content: ""; position: absolute; top: 12px; left: -7px; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transform: rotate(45deg);
}
.guide-current-title { font-weight: bold; margin-bottom: 4px; color: var(--deep); }
.guide-bubble-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.guide-progress { margin: 6px 0; }
.guide-steps { list-style: none; padding: 0; margin: 4px 0 0; }
.guide-steps li { position: relative; padding: 3px 0 3px 26px; color: #667; }
.guide-steps li::before {
  content: attr(data-mark); position: absolute; left: 0; width: 20px; text-align: center;
}
.guide-steps li.done { color: #1b7f37; }
.guide-steps li.current { color: var(--deep); font-weight: bold; }
/* ログイン・登録・回復・再ログインの画面の案内: カードの横（狭い幅では下）に絵と吹き出し。縦は各行の中で中央 */
.gate-overlay.with-guide { flex-wrap: wrap; align-items: stretch; gap: 20px; padding: 16px; overflow-y: auto; }
.gate-overlay.with-guide > .card, .gate-overlay.with-guide > .auth-guide { margin: auto 0; }
.auth-guide { width: 280px; flex: none; font-size: 13px; color: var(--text); }
/* 次に操作する場所の強調（outline なので .btn-mode.active の box-shadow と共存する） */
/* 2026-10-16: 青いボタンの上でも見分けられるよう、太い琥珀色の枠を速く点滅させる（利用者の指示「もっと目立つように」） */
.guide-target {
  outline: 3px solid rgba(245, 158, 11, 0.9); outline-offset: 3px; border-radius: 12px;
  animation: guide-pulse 1.1s ease-in-out infinite;
}
@keyframes guide-pulse {
  0%, 100% { outline-color: rgba(245, 158, 11, 0.15); }
  50% { outline-color: rgba(245, 158, 11, 1); }
}
@media (prefers-reduced-motion: reduce) { .guide-target { animation: none; } }
/* 2 列（300 + 20 + 860 + 余白）が入らない幅では、開いていてもタブの上に置く */
@media (max-width: 1239px) {
  main[data-guide="open"] { grid-template-columns: minmax(0, 860px); }
  main[data-guide="open"] .guide-panel { position: static; max-height: none; margin-bottom: 14px; }
}

/* ===== 動き（案 C。利用者の操作に応えるものだけ。prefers-reduced-motion では止める） ===== */
/* ログインなどの覆いと中のカード: ぼかしが晴れながら少し拡大して現れる（hidden が外れるたびに 1 回） */
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
.gate-overlay:not([hidden]) { animation: overlay-in 0.2s ease-out; }
.gate-overlay:not([hidden]) > .card { animation: card-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* 期限前の予告の帯: 上から滑り込む */
@keyframes banner-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.expiry-notice:not([hidden]) { animation: banner-in 0.25s ease-out; }
/* 送信の進み具合: 光の筋が流れる（.progress-bar-inner） */
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* 起動確認中の点: ゆっくり明滅 */
@keyframes lamp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.lamp-unknown { animation: lamp-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== 2026-10-02 の実機確認で見つかった直し（doc/テスト中に見つかった要修正一覧_20261001.md） ===== */
/* #3 ワンタイムパスワードの設定画面: QR の上に手順を出す */
.totp-steps { margin: 6px 0 4px; padding-left: 1.5em; font-size: 13px; color: #26415e; line-height: 1.6; }
.totp-steps li { margin: 4px 0; }
#totp-time-note { margin: 2px 0 6px; }
/* #1 完了画面の保管チェック: コピー・ダウンロード・印刷のどれかを行うまで無効 */
.saved-check input:disabled + span { color: #99a6bd; }
#register-saved-hint { margin: -6px 0 10px; }
/* #7 「アカウント情報」の吹き出しの「（管理者）」 */
.header-tip-admin { display: block; margin-top: 2px; font-size: 12px; color: var(--mid); }
/* #2 印刷: 利用者番号とリカバリーコードだけを紙に出す（本体アプリの完了画面と同じ方式） */
.print-only { display: none; }
@media print {
  body > *:not(#print-credentials) { display: none !important; }
  #print-credentials { display: block; padding: 24px; color: #000; background: #fff; }
  #print-credentials h1 { font-size: 18px; margin: 0 0 16px; }
  #print-credentials p { margin: 8px 0; font-size: 14px; }
  #print-credentials .code-value { font-size: 22px; letter-spacing: 0.06em; color: #000; }
  #print-credentials .note { color: #333; margin-top: 16px; }
}
/* #14 完了画面・再発行のコードの右の 3 つのボタンはまとめて折り返す */
.code-actions { display: inline-flex; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }

/* ===== 2026-10-15 の UI 見直し（doc/UI改善_文言と次の操作_検討案_20261015.md の番号で示す） ===== */
/* C: 畳む説明（クリックで展開）。右の列の「登録した表の微調整方法」と同じ見た目 */
details.more { margin: 4px 0 6px; }
details.more > summary { font-size: 13px; color: var(--mid); margin: 0; }
details.more > p, details.more > .sub { margin: 4px 0 2px 1em; }
details.more > .manual-key { margin-left: 1em; }
/* D: 閉じているときの 1 行は「次の操作」のラベルと、番号つきの濃い太字 */
.guide-head-label { display: none; background: var(--deep); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
main[data-guide="collapsed"] .guide-head-label, .sheet-overlay[data-guide="collapsed"] .guide-head-label { display: inline-block; }
main[data-guide="collapsed"] .guide-title, .sheet-overlay[data-guide="collapsed"] .guide-title { display: none; }
.guide-head-step { color: var(--deep); font-weight: 600; font-size: 14px; }
/* D: 作業画面で閉じているときは、操作ボタンの行の直前（モードボタンの上）に置く（viewer.js placeGuidePanel） */
.workspace-center > .workspace-guide-slot-inline { flex: none; }
.workspace-center > .workspace-guide-slot-inline:not(:empty) { margin: 2px 0 8px; }
.workspace-center > details.more { flex: none; margin: -2px 0 6px; }
/* 番号 29: 登録画面の題の横の区分 */
.register-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kind-badge { font-size: 12px; color: var(--mid); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 10px; background: rgba(255, 255, 255, 0.7); }
/* 番号 20: 正式機能では「変換プレビュー」を出さない（UI 確認用の裏機能にだけ残す） */
body[data-app-mode="ingate"] #btn-preview2 { display: none; }
/* G-2: 右の列の空表示の絵と 3 行の説明（2026-10-15。青ボタンの左の凡例 G-1 は 2026-10-16 に利用者の指示で外した） */
.table-panel-intro svg { display: block; border-radius: 3px; flex: none; }
.table-panel-intro { display: flex; gap: 12px; align-items: center; margin: 4px 0 12px; }
.table-panel-intro-text { list-style: none; margin: 0; padding: 0; line-height: 1.7; }

/* ===== A-1: 余白（2026-10-15 の決定。文言は変えない）。本文の行間 1.7、段落・箇条書き・カードの内側を広げる ===== */
body { line-height: 1.7; }
.excel-table td, .excel-table th { line-height: 1.3; }  /* シートの表は行の高さを保つ */
.card { padding: 24px 28px; }
.card h2 { margin-bottom: 14px; }
p.sub, p.note { margin: 10px 0; }
.sub-list li { margin: 7px 0; }
.table-panel-body { padding: 12px 14px; }
.table-panel .mapping-table { padding: 10px 12px; }
.banner { padding: 14px 18px; }
.totp-steps li { margin: 6px 0; }
.method-card { padding: 14px 16px; margin: 12px 0; }
.done-list dt { margin-top: 10px; }
.guide-bubble { line-height: 1.7; }

/* ===== 本体アプリ iSEARCHER のロゴ（2026-10-16 の指示）: ヘッダーの下の左の余白。案内の列（または本文）の左に
   ロゴ＋余白の分（約 260px）が空くときだけ出す。作業画面やログインの覆いはこの上に重なる ===== */
.site-logo {
  position: absolute; left: 24px; top: 76px; width: 200px; height: auto; display: none;
  border-radius: 14px; box-shadow: var(--shadow);
}
/* 左の余白 = (幅 − 本文の幅) / 2。ロゴ 200px＋左右の余白 40px が入る幅から出す（案内あり: 本文 1180px、なし: 860px） */
@media (min-width: 1660px) { main[data-guide="open"] ~ .site-logo { display: block; } }
@media (min-width: 1360px) { main[data-guide="collapsed"] ~ .site-logo, main[data-guide="off"] ~ .site-logo { display: block; } }
@media print { .site-logo { display: none !important; } }

/* ページの 1. の下: 開いているファイルの一覧と「取り消す」（2026-10-16） */
.open-files { list-style: none; margin: 8px 0 0; padding: 0; }
.open-files li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border-bottom: 1px solid #eef1f4; font-size: 14px;
}
.open-files .open-file-name { min-width: 0; overflow-wrap: anywhere; }