/* 570テーマ: 黄 #FFFF00系 + 白。骨格は docs/ の Proself スクリーンショット準拠 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 14px;
  color: #333;
  background: #fff;
}

/* --- 上部バー (黄・パンくず) Proself準拠 --- */
.topbar {
  display: flex;
  align-items: center;
  height: 70px;
  background: #00FF00;
  padding: 0 12px 0 8px;
  gap: 14px;
}
.topbar .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 168px;
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
}
.topbar .logo img { height: 60px; }
.topbar .logo .logo-text {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  font-size: 24px;
  color: #00FF00;
  margin-left: -5px;
}
.topbar .breadcrumb {
  flex: 1;
  padding: 5px 14px;
  color: #00FF00;
  font-size: 15px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar .breadcrumb a { color: #00FF00; text-decoration: none; }
.topbar .breadcrumb a:hover { text-decoration: underline; }
.topbar .user { white-space: nowrap; margin-left: auto; }
.topbar .user-btn,
.footer .user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  padding: 6px 4px;
}
.topbar .user-btn .caret { font-size: 10px; }
.footer .user-btn .caret { font-size: 10px; }
.footer .user-btn { color: #666; font-weight: normal; }   /* 非アクティブタブと同じ */
.topbar .user-menu { left: auto; right: 0; min-width: 210px; }
/* 下帯のユーザーメニュー: 帯の左に置き、上方向に開く */
.footer .user { white-space: nowrap; margin-right: auto; }
.footer .user-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; min-width: 210px; }
.user-menu-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

/* --- レイアウト --- */
/* 上帯は廃止 (2026-07-09)。下帯はサイドバー幅のみなのでレイアウトは全高 */
.layout { display: flex; height: 100%; }

/* --- 左サイドバー (黄) --- */
.sidebar {
  width: 180px;
  background: #00FF00;
  padding: 0 0 60px;   /* 下帯(48px)に最後の項目が隠れないよう空ける */
  flex-shrink: 0;
  overflow: auto;
}
/* ロゴ: サイドバー(黄帯)最上部。上下左右20px空けて幅いっぱいに表示 */
.sidebar .side-logo { display: block; padding: 20px; }
.sidebar .side-logo img { display: block; width: 100%; height: auto; }
.sidebar .nav-item {
  display: block;
  padding: 0 12px;
  line-height: 34px;
  color: #333;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar .nav-item.active {
  border-left: 5px solid #2CC62C;
  padding-left: 7px;
}
.sidebar .nav-item:hover { background: #A0FFA0; }
.sidebar-add {
  display: block;
  margin: 12px 16px 0;
  padding: 6px 10px;
  border: 1px dashed #999;
  background: none;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  width: calc(100% - 32px);
}
.sidebar-add:hover { background: #A0FFA0; }
.sidebar .nav-more {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0 12px;
  line-height: 34px;
  border: none;
  border-top: 1px solid #00F200;
  background: none;
  color: #666;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
.sidebar .nav-more:hover { background: #A0FFA0; }
.settings-msg { color: #c0392b; font-size: 13px; margin: 4px 0 0; }
.settings-msg:empty { display: none; }
#set-favorites .fav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 4px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
}
#set-favorites .fav-row.dragging { opacity: .4; }
#set-favorites .fav-handle { cursor: grab; color: #aaa; font-weight: bold; user-select: none; }
#set-favorites .fav-name { font-size: 14px; }

/* --- コンテンツ (白) --- */
.content { flex: 1; overflow: auto; background: #fff; }
.content.drag-over { outline: 3px dashed #00FF00; outline-offset: -6px; background: #F0FFF0; }

/* 校正 (ライト版): 下書き一覧テーブルの下に、ドロップエリアを残り高さいっぱいに敷く */
.content.kousei-mode { display: flex; flex-direction: column; }
#kousei-drop {
  flex: 1; margin: 16px; border: 2px dashed #4AD94A; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #F7FFF7; color: #1F8A1F; cursor: pointer; text-align: center;
}
#kousei-drop:hover { background: #EBFFEB; border-color: #00FF00; }
.content.kousei-mode.drag-over #kousei-drop { background: #D6FFD6; border-color: #00FF00; }
.kousei-drop-ico { font-size: 44px; line-height: 1; }
.kousei-drop-title { font-size: 16px; font-weight: bold; margin-top: 10px; }
.kousei-drop-sub { font-size: 13px; margin-top: 4px; color: #3FA93F; }

/* 校正: 下書き一覧 (ファイル一覧と同じ table.list に描画。行クリックで詳細へ) */
table.list tr.krow { cursor: pointer; }
.kd-cost { color: #1F8A1F; font-size: 12px; white-space: nowrap; }
.kd-share { color: #1565c0; font-size: 12px; white-space: nowrap; }
.pd-invite { background: #eef4fb; border: 1px solid #90caf9; color: #1565c0; }
.pd-invite:hover { background: #e1effb; }
.pd-shared-tag { font-size: 12px; color: #1565c0; background: #e3f2fd;
  border: 1px solid #90caf9; border-radius: 10px; padding: 4px 12px; align-self: center; }
.ks-members { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; max-height: 320px; overflow: auto; }
.ks-member { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.ks-all-row { margin-bottom: 8px; }
.ks-members.ks-disabled { opacity: 0.45; pointer-events: none; }

/* タブ (常時同じ場所に表示) */
.tabs {
  display: flex;
  gap: 0;
  padding: 10px 12px 0;
  border-bottom: 1px solid #e0e0e0;
}
.tabs .tab {
  border: 1px solid #e0e0e0;
  border-bottom: none;
  background: #f7f7f7;
  color: #666;
  padding: 8px 24px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  margin-right: 4px;
  min-width: 140px;       /* 文字数が違ってもタブ幅を全ページ共通に */
  text-align: center;
}
.tabs .tab.active {
  background: #fff;
  color: #333;
  font-weight: bold;
  border-color: #00FF00;   /* タブ枠だけは白地で見える金色のまま */
  border-bottom: 2px solid #fff;
  margin-bottom: -1px;
}

/* ツールバー */
.toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
}
.toolbar-spacer { flex: 1 1 auto; }
.share-mark { font-size: 13px; margin-left: 3px; cursor: pointer; }
.share-mark:hover { filter: brightness(1.1); transform: scale(1.15); }
.share-link-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px;
  padding: 8px 12px;
  background: #D0FFD0;
  border: 1px solid #00F200;
  border-radius: 6px;
}
.share-link-bar .share-link-label { font-size: 13px; color: #006B00; font-weight: bold; }
.share-link-bar input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid #6AD86A;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
}
.share-link-bar button {
  border: 1px solid #6AD86A;
  background: #fff;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.share-link-bar button:hover { background: #E6FFE6; }
.toolbar button {
  border: none;
  background: none;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
  color: #333;
}
.toolbar button:hover { background: #f0f0f0; }
.toolbar button:disabled { color: #bbb; cursor: default; background: none; }
.toolbar button .ico { margin-right: 4px; }
.toolbar .mode-select {
  margin-left: auto;
  font-size: 13px;
  color: #555;
}
.toolbar select { padding: 3px 6px; font-size: 13px; }

/* 一覧テーブル */
table.list { width: 100%; border-collapse: collapse; }
table.list th {
  text-align: left;
  font-weight: bold;
  color: #333;
  background: #f8f8f8;
  border-bottom: 1px solid #e0e0e0;
  padding: 8px 10px;
  font-size: 14px;
}
table.list td {
  padding: 11px 10px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}
table.list tr.row:hover { background: #E6FFE6; }
table.list tr.selected { background: #B0FFB0; }
table.list tr.date-band td {
  background: #A8FFA8;
  border-top: 1px solid #00F200;
  border-bottom: 1px solid #00F200;
  padding: 5px 12px;
  font-weight: bold;
  font-size: 13px;
  color: #006B00;
}
table.list tr.up-row { cursor: pointer; color: #555; }
table.list tr.up-row:hover { background: #E6FFE6; }
table.list .col-check { width: 32px; }
/* 名前より右 (サイズ・更新時間・種類・付加情報・確認済み) はヘッダー・データともセンター揃え */
table.list .col-size { width: 90px; text-align: center; color: #666; }
table.list .col-date { width: 180px; color: #666; white-space: nowrap; text-align: center; }
table.list .col-info { width: 150px; text-align: center; }
table.list .col-type { width: 110px; color: #666; font-size: 13px; text-align: center; }
table.list .col-confirm { text-align: center; }
.folder-link { font-size: 12px; color: #795548; text-decoration: none; margin-left: 6px; }
.folder-link:hover { text-decoration: underline; }
.member-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
#group-name { width: 100%; padding: 6px 8px; margin-bottom: 6px; font-size: 14px; }
.item-name { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.item-name .ico { font-size: 16px; }
.item-name a { color: #1565c0; text-decoration: none; }
.item-name a:hover { text-decoration: underline; }
.up-row td { color: #555; cursor: pointer; }

/* 付加情報バッジ */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}
.badge-pending { background: #eeeeee; color: #555; }
.badge-running { background: #e3f2fd; color: #1565c0; }
.badge-done    { background: #e8f5e9; color: #2e7d32; }   /* 価格表照合: 控えめ(緑) */
.badge-tax     { background: #eef2f6; color: #607d8b; }   /* 税検算済: 弱め(灰青) */
.badge-web     { background: #e1f0fb; color: #1565c0; }   /* WEB照合済: 控えめ(水色) */
.badge-none    { background: #fff3e0; color: #e65100; }   /* 照合無し: 目立たせる(琥珀) */
.badge-warn    { background: #ffebee; color: #c62828; font-weight: bold; }  /* 要確認: 目立つ(赤) */

/* メッセージ */
.notice {
  margin: 8px 12px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  display: none;
}
.notice.error { background: #ffebee; color: #c62828; display: block; }
.notice.ok { background: #e8f5e9; color: #2e7d32; display: block; }

/* --- 確認列 --- */
table.list .col-confirm { width: 120px; }
.confirm-btn {
  border: 1px solid #bbb;
  background: #fff;
  border-radius: 3px;
  padding: 2px 10px;
  font-size: 12px;
  color: #444;
  cursor: pointer;
  margin-right: 6px;
}
.confirm-btn:hover { background: #e8f5e9; }
.confirm-btn.confirmed { background: #e8f5e9; border-color: #7cb342; color: #2e7d32; }
.confirm-names { font-size: 12px; color: #2e7d32; }

/* ファイル一覧: 日付帯は折りたたみ操作可 */
table.list tr.date-band td { cursor: pointer; }
.band-caret { display: inline-block; width: 1em; color: #00B500; }

/* 校正原稿一覧: 案件フォルダ帯 + 校正フォルダの入れ子 */
table.list tr.anken-band td {
  background: #A8FFA8;
  border-top: 1px solid #00F200;
  border-bottom: 1px solid #00F200;
  padding: 6px 12px;
  font-size: 14px;
  color: #006B00;
  cursor: pointer;
}
table.list tr.anken-band .anken-date { float: right; font-weight: normal; font-size: 12px; color: #1F8A1F; }
table.list tr.proof-sub .proof-indent { padding-left: 18px; }
.chip {
  display: inline-block; font-size: 11px; line-height: 1.5;
  padding: 0 7px; border-radius: 10px; vertical-align: middle;
}
.chip-proof { background: #E7F3E7; color: #2e7d32; border: 1px solid #b6dbb6; }
.chip-store { background: #eee; color: #666; border: 1px solid #ddd; }
.doc-tag {
  display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 3px;
  background: #EEF3FA; color: #33608a; border: 1px solid #cfe0f0;
}

/* アップロード: 案件/校正フォルダ選択 */
.modal-hint {
  background: #E6FFE6; border: 1px solid #00F200; border-radius: 4px;
  padding: 7px 10px; font-size: 12.5px; color: #006B00; margin-bottom: 10px;
}
#upload-folder-section select, #upload-folder-section input[type=text] {
  width: 100%; box-sizing: border-box; margin-bottom: 6px;
}
#up-proof-new-wrap label { display: block; font-size: 13px; color: #444; margin-top: 2px; }

/* フォルダ一覧: 位置行 (一つ上へ矢印 + パン屑) */
table.list tr.browse-nav td { background: #FCFCFC; border-bottom: 1px solid #eee; padding: 6px 10px; }
.browse-nav .up-arrow { text-decoration: none; font-size: 15px; color: #555; }
.browse-nav .up-arrow:hover { color: #000; }
.browse-crumbs { font-size: 13px; color: #666; }
.browse-crumbs a { color: #795548; text-decoration: none; }
.browse-crumbs a:hover { text-decoration: underline; }
.browse-crumbs .crumb-sep { color: #bbb; margin: 0 2px; }

/* ファイル操作プルダウン (Proself風) */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 140px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
  border-radius: 4px;
  padding: 4px 0;
}
.dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}
.dropdown-menu button:hover { background: #E6FFE6; }
#dest-folder { width: 100%; padding: 6px 8px; font-size: 14px; }

/* --- 校正ツリー --- */
#tree-section {
  margin: 8px 12px;
  border: 1px solid #82FF82;
  background: #F2FFF2;
  border-radius: 6px;
  padding: 8px 14px;
}
.tree-title { font-size: 13px; font-weight: bold; color: #795548; margin-bottom: 6px; }
.tree-doc { padding: 4px 0; font-size: 13px; }
.tree-doc-name { font-weight: bold; margin-right: 8px; }
.tree-base { color: #999; font-size: 12px; margin-right: 8px; }
.tree-chain { }
.tree-node {
  display: inline-block;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
  margin: 2px 0;
}
.tree-node:hover { border-color: #00FF00; background: #E6FFE6; }
.tree-arrow { color: #bbb; margin: 0 4px; }
.tree-redline { padding: 4px 0; font-size: 13px; color: #b71c1c; }

/* 校正チェーン (提出↔戻し): 上段=提出 / 下段=戻し。戻しは提出の境目に中央寄せ */
.chain { display: grid; align-items: start; row-gap: 22px; column-gap: 10px; }
.chain-empty { padding: 10px 4px; font-size: 13px; }
.chain-node {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  position: relative;
}
.chain-sub { align-self: start; }
.chain-ret { justify-self: center; max-width: 92%; }
/* 提出 →(↘) 戻し →(↗) 次の提出 の流れを斜め矢印で示す */
.chain-ret::before,
.chain-ret::after {
  position: absolute;
  top: -20px;
  font-size: 17px;
  font-weight: bold;
  color: #d98c8c;
  line-height: 1;
}
.chain-ret.has-prev::before { content: "↘"; left: 33.33%; transform: translateX(-50%); }
.chain-ret.has-next::after  { content: "↗"; left: 66.66%; transform: translateX(-50%); }
.chain-node:hover { border-color: #00FF00; background: #E6FFE6; }
.chain-node.active { border-color: #00FF00; background: #E1FFE1; box-shadow: 0 0 0 2px #00FF0055; }
.chain-sub { border-left: 3px solid #00FF00; }
.chain-ret { border-left: 3px solid #e57373; background: #fffafa; }
.chain-node-head { font-weight: bold; color: #444; margin-bottom: 4px; }
.chain-ico { margin-right: 4px; }
.chain-series { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.series-chip {
  display: block; width: 100%; max-width: 240px; padding: 1px 7px; background: #f6f6f6;
  border: 1px solid #e2e2e2; border-radius: 10px; font-size: 12px;
  box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.series-chip .ver { color: #795548; font-weight: bold; }
.chain-date { color: #999; font-size: 11px; margin-top: 5px; }
.chain-ret-info { color: #b71c1c; font-size: 12px; }

#chain-detail { margin-top: 12px; }
#chain-detail:empty { margin-top: 0; }
.detail-head { font-size: 13px; font-weight: bold; color: #795548; margin-bottom: 6px; }
.detail-series { display: flex; flex-wrap: wrap; gap: 10px; }
.series-card {
  flex: 1 1 220px; min-width: 220px; max-width: 320px;
  border: 1px solid #e2e2e2; border-radius: 6px; overflow: hidden; background: #fff;
}
.series-card-head {
  padding: 6px 10px; background: #E6FFE6; border-bottom: 1px solid #eee;
  font-weight: bold; font-size: 13px;
}
.series-card-head .ver { color: #795548; margin-left: 4px; }
.detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; font-size: 13px; border-top: 1px solid #f2f2f2;
  text-decoration: none; color: #333;
}
.detail-row:first-child { border-top: none; }
.detail-open { cursor: pointer; }
.detail-open:hover { background: #E6FFE6; }
.detail-go { color: #04B204; font-size: 12px; }
.detail-stub { color: #aaa; }
.detail-note { font-size: 11px; color: #bbb; border: 1px solid #eee; border-radius: 8px; padding: 0 6px; }

/* 提出詳細画面: 上=タブ / 下=左デザイン・右結果。タブは一覧(.tabs/.tab)をそのまま流用 */
#proof-detail-section { padding: 0 0 40px; }   /* 水平余白は各行が12pxで持ち、タブ下線を全幅に */

.pd-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 12px 2px; margin-bottom: 12px; }
.pd-back { color: #555; text-decoration: none; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; }
.pd-back .ico { font-size: 16px; }
.pd-back:hover { color: #333; }
.pd-title { font-size: 15px; font-weight: bold; }
.pd-title .ver { color: #795548; margin-left: 4px; }
.pd-dl { margin-left: auto; font-size: 13px; color: #04B204; text-decoration: none; }

/* 校正ドラフト: 本人だけ表示のタグ + 下部アクションバー */
.pd-draft-tag { font-size: 12px; color: #1F8A1F; background: #D6FFD6;
  border: 1px solid #7AEC7A; border-radius: 10px; padding: 2px 10px; }
/* 破棄/保存: タブ行の右端 (価格照合の右) に配置 */
.pd-tab-actions { margin-left: auto; display: flex; gap: 8px; align-items: center;
  padding-bottom: 6px; }
.pd-tab-actions button { height: 32px; line-height: 30px; padding: 0 16px; box-sizing: border-box;
  border-radius: 6px; cursor: pointer; font-size: 13px; }
.pd-saved-tag { font-size: 12px; color: #2e7d32; background: #e8f5e9;
  border: 1px solid #a5d6a7; border-radius: 6px; padding: 0 12px; align-self: center;
  height: 32px; line-height: 30px; box-sizing: border-box; white-space: nowrap; }
.pd-discard { background: #fff; border: 1px solid #ccc; color: #666; }
.pd-discard:hover { background: #f7f7f7; }
.pd-save { background: #C4FFC4; border: 1px solid #00FF00; color: #333; }
.pd-save:hover { background: #A0FFA0; }
.pd-save:disabled { opacity: .6; cursor: default; }

/* テキスト化の進捗バー */
.pd-progress { padding: 22px 6px; }
.pd-progress-label { font-size: 14px; color: #1F8A1F; margin-bottom: 10px; font-weight: bold; }
.pd-progress-track { height: 14px; background: #D0F0D0; border-radius: 7px; overflow: hidden; }
.pd-progress-fill { height: 100%; background: #00FF00; border-radius: 7px;
  transition: width .5s ease; min-width: 6px; }
.pd-progress-note { font-size: 12px; margin-top: 10px; }
.pd-progress-count { font-size: 13px; color: #1F8A1F; margin-top: 8px; font-weight: bold; }

/* テキスト化の待機ペイン (確認モーダルをキャンセル後) */
.pd-idle { padding: 20px 6px; }
.pd-idle-msg { font-size: 13px; color: #555; margin-bottom: 6px; }
.pd-idle-est { font-size: 12px; margin-bottom: 12px; }

/* テキスト化 実行確認モーダルの予想表示 */
.ke-hint { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 12px; }
.ke-est { background: #F0FFF0; border: 1px solid #A8F0A8; border-radius: 6px; padding: 10px 14px; }
.ke-est-row { display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; }
.ke-est-row + .ke-est-row { border-top: 1px dashed #9EEA9E; }
.ke-est-k { font-size: 13px; color: #1F8A1F; }
.ke-est-v { font-size: 16px; font-weight: bold; color: #b26a00; }
.ke-note { font-size: 11px; color: #999; margin-top: 10px; }

/* トークン使用状況ページ */
.tk-wrap { max-width: 720px; margin: 26px auto; padding: 0 16px; }
.tk-warn { background: #fff3e0; border: 1px solid #ffb74d; color: #e65100;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 18px; }
.tk-summary { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-remain { font-size: 40px; font-weight: bold; color: #2e7d32; line-height: 1; }
.tk-remain.over { color: #c62828; }
.tk-unit { font-size: 16px; color: #555; }
.tk-of { color: #666; font-size: 14px; margin-left: 8px; }
.tk-bar-track { height: 20px; background: #D0F0D0; border-radius: 10px; overflow: hidden; }
.tk-bar-fill { height: 100%; background: #00FF00; border-radius: 10px;
  transition: width .5s ease; min-width: 4px; }
.tk-bar-fill.over { background: #e57373; }
.tk-add { margin: 16px 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-add button { padding: 8px 14px; border-radius: 6px; border: 1px solid #ccc;
  background: #fafafa; color: #999; cursor: not-allowed; }
.tk-h { margin: 28px 0 12px; font-size: 15px; }
.tk-users { display: flex; flex-direction: column; gap: 12px; }
.tk-user-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.tk-user-name { color: #333; }
.tk-user-jpy { color: #666; }
.tk-user-track { height: 12px; background: #f2f2f2; border-radius: 6px; overflow: hidden; }
.tk-user-fill { height: 100%; background: #3AB93A; border-radius: 6px; }
.pd-dl:hover { text-decoration: underline; }

.pd-split { display: grid; grid-template-columns: minmax(0, 1.7fr) 10px minmax(0, 1fr);
  gap: 8px; align-items: start; padding: 0 12px; }
/* 左右の境界線 = ドラッグハンドル (中央に1本線を描く) */
.pd-splitbar { align-self: stretch; cursor: col-resize; display: flex; justify-content: center; }
.pd-splitbar::before { content: ""; width: 1px; background: #eee; }
.pd-splitbar:hover::before, .pd-split.dragging .pd-splitbar::before { width: 3px; background: #00FF00; }
.pd-split.dragging { user-select: none; }
.pd-split.dragging iframe { pointer-events: none; }
.pd-side-title { font-size: 14px; font-weight: bold; color: #795548;
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.pd-count { background: #00FF00; color: #333; border-radius: 10px; padding: 0 8px; font-size: 12px; }
.pd-empty { padding: 10px; font-size: 13px; }
.pd-right { min-height: 300px; }

/* 左: デザイン (版画像プレビューのみ・枠なし) */
.pd-image { display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
.pd-image img { max-width: 100%; height: auto; display: block; cursor: zoom-in; }
.pd-image { width: 100%; }
.pd-pdf { width: 100%; height: 78vh; border: 1px solid #eee; border-radius: 4px; }
.pd-magnifier {
  position: fixed; width: 300px;
  border: 2px solid #00FF00; border-radius: 6px; overflow: hidden;
  box-shadow: 0 3px 14px rgba(0,0,0,0.28); background: #fff;
  pointer-events: none; z-index: 9999;
}
.pd-mag-bar { height: 24px; line-height: 24px; padding: 0 8px; background: #fff;
  border-top: 1px solid #eee; font-size: 11px; color: #666; white-space: nowrap; }
.pd-mag-view { width: 300px; height: 200px; background-repeat: no-repeat; background-color: #fff; }
/* 拡大鏡のトグル操作バー (画像の上) */
.pd-mag-ctrl { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 2px 8px; }
.pd-mag-ico { font-size: 15px; line-height: 1; }
.pd-mag-switch { position: relative; width: 38px; height: 20px; border-radius: 10px;
  border: 1px solid #ccc; background: #e0e0e0; cursor: pointer; padding: 0; flex: none;
  transition: background .15s, border-color .15s; }
.pd-mag-switch .knob { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.pd-mag-switch.on { background: #C4FFC4; border-color: #00FF00; }
.pd-mag-switch.on .knob { left: 19px; }
.pd-noimg { color: #aaa; text-align: center; font-size: 13px; line-height: 1.7;
  border: 1px solid #e2e2e2; border-radius: 6px; background: #fafafa; padding: 70px 20px; width: 100%; }

/* 右(復元テキスト): Lv2 markdown リッチ表示 */
.pd-md { font-size: 13px; line-height: 1.75; color: #333; max-height: 620px; overflow: auto; }
.pd-md .md-h { color: #795548; margin: 12px 0 4px; line-height: 1.4; }
.pd-md .md-h1 { font-size: 17px; }
.pd-md .md-h2 { font-size: 15px; }
.pd-md .md-h3 { font-size: 14px; }
.pd-md .md-h4 { font-size: 13px; color: #8d6e63; }
.pd-md .md-h1:first-child, .pd-md .md-h2:first-child { margin-top: 0; }
.pd-md .md-p { margin: 4px 0; }
.pd-md .md-ul { margin: 4px 0 8px; padding-left: 20px; }
.pd-md .md-ul li { margin: 2px 0; }
.pd-md hr { border: none; border-top: 1px solid #eee; margin: 10px 0; }
.pd-md strong { font-weight: 700; }   /* 色なし: 色は警告系(赤=判読不能/青=出所なし)専用 */
/* 判読不能: 読めなかった箇所。赤字+薄い赤地で目立たせる */
.pd-md .md-unread { color: #d32f2f; font-weight: 700; background: #ffe5e5; padding: 0 3px; border-radius: 3px; }
.pd-md .md-unsourced { color: #1565c0; font-weight: 700; background: #e7f0fb; padding: 0 3px; border-radius: 3px; }
/* 要素抽出タブ上部の確認アラート (赤字/青字がある時だけ) */
.pd-check-alert { font-size: 12px; color: #b26a00; background: #E1FFE1; border: 1px solid #B0F0B0;
  border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; }

/* 素読み実行ボタン */
.pd-run { margin-top: 8px; padding: 8px 18px; background: #C4FFC4; border: 1px solid #00FF00;
  border-radius: 6px; font-size: 14px; font-weight: bold; color: #333; cursor: pointer; }
.pd-run:hover { background: #A0FFA0; }
.pd-rerun { margin-left: auto; padding: 2px 10px; background: #f7f7f7; border: 1px solid #e0e0e0;
  border-radius: 6px; font-size: 12px; color: #666; cursor: pointer; }
.pd-rerun:hover { background: #f0f0f0; }

/* 右(文字校正): 素読み */
.pd-finding { display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid #eee; border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; background: #fff; }
.pd-finding.sev-high { border-color: #f0b4b4; background: #fff6f6; }
.pd-sev { flex: 0 0 auto; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: #eee; color: #666; }
.pd-finding.sev-high .pd-sev { background: #ffebee; color: #c62828; }
.pd-finding-body { font-size: 13px; }
.pd-issue { color: #555; margin-top: 2px; }
.pd-sug { color: #2e7d32; }

/* 右(入稿チェック): プリフライト。指摘行は素読みの .pd-finding を流用し、重さ3段の色だけ足す */
.pd-finding.sev-warn { border-color: #B0F0B0; background: #F3FFF3; }
.pd-finding.sev-warn .pd-sev { background: #E1FFE1; color: #b26a00; }
.pd-finding.sev-info { border-color: #cfe3f5; background: #f7fbff; }
.pd-finding.sev-info .pd-sev { background: #e3f2fd; color: #1565c0; }
.pf-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.pf-chip { font-size: 12px; font-weight: bold; padding: 1px 10px; border-radius: 10px; }
.pf-chip.pf-err { background: #ffebee; color: #c62828; border: 1px solid #f0b4b4; }
.pf-chip.pf-warn { background: #E1FFE1; color: #b26a00; border: 1px solid #B0F0B0; }
.pf-chip.pf-inf { background: #e3f2fd; color: #1565c0; border: 1px solid #cfe3f5; }
.pf-chip.pf-zero { background: #f5f5f5; color: #aaa; border: 1px solid #e5e5e5; font-weight: normal; }
.pf-when { margin-left: auto; font-size: 11px; color: #999; }
.pf-head .pd-rerun { margin-left: 0; margin-top: 0; }
.pf-meta { font-size: 12px; color: #777; margin-bottom: 8px; }
.pf-clean { color: #2e7d32; font-size: 13px; padding: 10px; background: #f3faf3;
  border: 1px solid #cde8cd; border-radius: 6px; }
.pf-note { font-size: 12px; color: #888; margin-top: 4px; }

.pd-ref-url { font-size: 12px; color: #777; margin-bottom: 8px; }
.pd-ref-url a { color: #1565c0; text-decoration: none; }
.pd-ref-url a:hover { text-decoration: underline; }
.pd-webrun { margin-left: 8px; padding: 3px 12px; background: #C4FFC4; border: 1px solid #00FF00;
  border-radius: 6px; font-size: 12px; font-weight: bold; color: #333; cursor: pointer; }
.pd-webrun:hover { background: #A0FFA0; }
.pd-webrun:disabled { background: #B0F0B0; border-color: #B0F0B0; cursor: default; }

/* 右(価格照合): 正誤表 */
.pd-price { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-price th, .pd-price td { border: 1px solid #eee; padding: 6px 9px; text-align: left; vertical-align: top; }
.pd-price thead th { background: #E6FFE6; color: #795548; white-space: nowrap; }
.pd-price .pd-note { color: #777; font-size: 12px; }
.pd-addprice { display: inline-block; margin-top: 6px; padding: 3px 10px; font-size: 12px;
  background: #fff; color: #795548; border: 1px solid #00FF00; border-radius: 4px; cursor: pointer;
  white-space: nowrap; }
.pd-addprice:hover { background: #E6FFE6; }
.pd-addprice:disabled { color: #bbb; border-color: #eee; cursor: default; background: #fafafa; }

@media (max-width: 900px) {
  .pd-split { grid-template-columns: 1fr; }
  .pd-right { border-left: none; padding-left: 0; border-top: 1px solid #eee; padding-top: 14px; }
}
@media (max-width: 560px) { .pd-compare { grid-template-columns: 1fr; } }

/* 統一価格表: 校正チェーンと同じ本文領域に、黄色枠のExcel風グリッド */
#pricetable-section { padding: 6px 12px 40px; }
.pt-title { font-size: 13px; font-weight: bold; color: #795548;
  margin-bottom: 8px; display: flex; align-items: center; }
.toolbar-back { color: #555; text-decoration: none; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; }
.toolbar-back .ico { font-size: 16px; }
.toolbar-back:hover { color: #333; }
.pt-msg { margin-left: 12px; font-size: 13px; color: #2e7d32; font-weight: normal; }
.pt-msg.pt-err { color: #c62828; }
.pt-url-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; max-width: 860px; }
.pt-url-label { font-size: 13px; color: #795548; white-space: nowrap; padding-top: 6px; }
.pt-url-hint { font-size: 11px; color: #aaa; font-weight: normal; }
.pt-url-in { flex: 1; padding: 7px 10px; border: 1px solid #e0e0e0; border-radius: 6px;
  font-size: 13px; font-family: inherit; box-sizing: border-box; resize: vertical; }
.pt-url-in:focus { outline: 2px solid #00FF00; outline-offset: -2px; }
.pt-frame { border: 2px solid #00FF00; border-radius: 6px; overflow: auto; max-width: 860px; }
.pt-grid { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
.pt-grid th, .pt-grid td { border: 1px solid #ececec; padding: 0; }
.pt-grid thead th { background: #E6FFE6; color: #795548; font-weight: bold;
  padding: 6px 8px; text-align: left; border-color: #B0F0B0; }
.pt-grid .pt-idx { width: 34px; text-align: center; color: #aaa; background: #fafafa; }
.pt-grid td.pt-idx { font-size: 12px; padding: 0 4px; }
.pt-grid .pt-narrow { width: 90px; }
.pt-grid .pt-num { width: 96px; }
.pt-grid .pt-date { width: 92px; text-align: center; }
.pt-grid td.pt-date { font-size: 12px; color: #888; padding: 0 4px; white-space: nowrap; }
.pt-grid .pt-src { width: 66px; text-align: center; }
.pt-grid td.pt-src { padding: 0 4px; }
.src-web { font-size: 11px; font-weight: bold; color: #1565c0; background: #e3f0fb;
  border-radius: 3px; padding: 1px 6px; }
.src-man { font-size: 11px; color: #777; background: #f0f0f0; border-radius: 3px; padding: 1px 6px; }
.pt-grid .pt-del { width: 34px; text-align: center; }
.pt-in { width: 100%; border: none; padding: 6px 8px; font-size: 13px; background: transparent;
  box-sizing: border-box; font-family: inherit; }
.pt-in:focus { outline: 2px solid #00FF00; outline-offset: -2px; background: #F0FFF0; }
.pt-num.pt-in { text-align: right; }
.pt-delbtn { border: none; background: none; color: #c0392b; cursor: pointer; font-size: 13px; padding: 4px; }
.pt-delbtn:hover { color: #e74c3c; }
.pt-actions { display: flex; gap: 10px; margin-top: 12px; max-width: 860px; }
.pt-add { padding: 7px 16px; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px;
  font-size: 13px; cursor: pointer; }
.pt-add:hover { background: #f7f7f7; }
.pt-save { padding: 7px 22px; background: #C4FFC4; border: 1px solid #00FF00; border-radius: 6px;
  font-size: 14px; font-weight: bold; color: #333; cursor: pointer; margin-left: auto; }
.pt-save:hover { background: #A0FFA0; }
.pt-fetched { margin-left: 12px; font-size: 12px; color: #999; font-weight: normal; }
.pt-fetch { padding: 7px 14px; background: #fff; border: 1px solid #00FF00; border-radius: 6px;
  font-size: 13px; color: #795548; cursor: pointer; white-space: nowrap; }
.pt-fetch:hover { background: #E6FFE6; }
.pt-fetch:disabled { color: #bbb; border-color: #eee; cursor: default; }
/* 取得中のプログレスバー (N/M 進捗) */
.pt-progress { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; max-width: 860px; }
.pt-progress-track { flex: 1; height: 8px; background: #C4F4C4; border-radius: 4px; overflow: hidden; }
.pt-progress-bar-fill { height: 100%; width: 0; background: #00FF00; border-radius: 4px; transition: width .3s; }
.pt-progress-txt { font-size: 12px; color: #795548; white-space: nowrap; }
/* 価格照合タブ: 価格表の取得日時・古さ */
.pd-fresh { font-size: 12px; color: #777; margin-bottom: 8px; }
.pd-fresh.pd-stale { color: #b26a00; background: #E1FFE1; border: 1px solid #B0F0B0;
  border-radius: 6px; padding: 6px 10px; }
.pd-fresh a { color: #1565c0; text-decoration: none; }
.pd-fresh a:hover { text-decoration: underline; }

/* --- アップロードモーダル --- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal {
  background: #fff;
  border-radius: 8px;
  width: 560px;
  max-width: 92vw;
  max-height: 84vh;
  overflow: auto;
  padding: 20px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.modal-title { font-size: 16px; font-weight: bold; margin-bottom: 12px; color: #2e7d32; }
.modal-section { margin: 12px 0; }
.modal-label { font-size: 12px; color: #888; margin-bottom: 4px; }
.modal-section label { display: block; padding: 4px 0; font-size: 14px; cursor: pointer; }
.modal-section label.disabled { color: #bbb; cursor: default; }
.modal-files { border-bottom: 1px solid #eee; padding-bottom: 8px; }
.modal-file-row { padding: 4px 0; font-size: 13px; }
.modal-filename { margin-right: 6px; }
.modal-file-row input.doc-input { width: 220px; padding: 3px 6px; }
.modal-file-row select { padding: 3px 6px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-actions button {
  padding: 8px 18px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.modal-actions button.primary { background: #C4FFC4; border-color: #00FF00; font-weight: bold; }
.modal-actions button.primary:hover { background: #A0FFA0; }

/* --- 校正結果画面 (全画面プレビュー) --- */
.proof-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 0;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
}
.proof-header .vtabs { border-bottom: none; margin-bottom: 0; flex: 1; }
.proof-header .proof-status { margin: 0; white-space: nowrap; }
.marker-toggle { font-size: 13px; color: #555; white-space: nowrap; }
#btn-drawer {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 6px;
}
#btn-drawer:hover { background: #E6FFE6; }
.drawer-count { color: #c62828; font-weight: bold; }

.proof-stage {
  height: calc(100% - 52px - 49px);
  overflow: auto;
  background: #eceff1;
  padding: 24px 0 60px;
}
.page-wrap {
  position: relative;
  margin: 0 auto 24px;
  width: fit-content;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  background: #fff;
  line-height: 0;
}
.page-media { display: block; max-width: calc(100vw - 48px); }
img.page-media { width: min(1400px, calc(100vw - 48px)); }

/* 変更マーカー */
.marker {
  position: absolute;
  border: 2px solid;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}
.markers-off .marker { display: none; }
.marker-applied    { border-color: #2e7d32; background: rgba(46,125,50,.14); }
.marker-new_change { border-color: #f9a825; background: rgba(249,168,37,.18); }
.marker-reverted   { border-color: #c62828; background: rgba(198,40,40,.20); }
.marker:hover { box-shadow: 0 0 0 3px rgba(0,0,0,.15); }

/* マーカーの吹き出し */
.marker-pop {
  position: fixed;
  z-index: 40;
  max-width: 420px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.7;
}
.pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pop-now { font-size: 14px; font-weight: bold; margin-bottom: 8px; word-break: break-all; }
.pop-row { display: flex; align-items: baseline; gap: 8px; word-break: break-all; }
.pop-no {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #00FF00;
  text-align: center;
  line-height: 18px;
  font-size: 11px;
  font-weight: bold;
}
.pop-label { flex-shrink: 0; color: #666; font-size: 12px; }

/* 指摘・警告パネル (右スライド) */
.drawer {
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 0;
  width: min(480px, 90vw);
  background: #fff;
  border-left: 1px solid #ddd;
  box-shadow: -4px 0 16px rgba(0,0,0,.12);
  z-index: 30;
  display: flex;
  flex-direction: column;
}
.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #F2FFF2;
  border-bottom: 1px solid #82FF82;
  font-weight: bold;
  font-size: 14px;
}
.drawer-head button { border: none; background: none; font-size: 16px; cursor: pointer; }
.drawer-body { overflow: auto; padding: 12px 14px 40px; }

.pane-title {
  font-size: 13px;
  color: #666;
  padding: 10px 0 6px;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
}

.vtabs { display: flex; gap: 4px; border-bottom: 2px solid #00FF00; margin-bottom: 10px; flex-wrap: wrap; }
.vtab {
  padding: 6px 18px;
  background: #f5f5f5;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: #333;
  text-decoration: none;
  font-size: 13px;
}
.vtab.active { background: #C4FFC4; border-color: #00FF00; font-weight: bold; }
.vtab:hover { background: #B0FFB0; }
.doc-select { margin-right: 12px; padding: 4px 8px; font-size: 13px; }

.proof-status { margin: 4px 0 10px; }
.proof-status .muted { color: #888; font-size: 12px; margin-left: 8px; }

.card {
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  border: 1px solid;
}
.card-warn { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
.card-yellow { background: #E1FFE1; border-color: #82FF82; color: #795548; }
.card-title { font-weight: bold; margin-bottom: 4px; }

.block-row {
  border: 1px solid #eee;
  border-left-width: 4px;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 6px;
}
.block-row.state-unchanged { border-left-color: #ccc; }
.block-row.state-applied { border-left-color: #2e7d32; }
.block-row.state-new_change { border-left-color: #f9a825; }
.block-row.state-reverted { border-left-color: #c62828; background: #fff5f5; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.block-path { font-size: 12px; color: #888; word-break: break-all; }
.block-text { margin-top: 4px; font-size: 14px; white-space: pre-wrap; }
.block-prev { margin-top: 2px; font-size: 12px; color: #999; text-decoration: line-through; }
.finding { margin-top: 6px; font-size: 13px; color: #444; }
.badge-yellow { background: #E1FFE1; color: #04B204; }
.muted { color: #999; }
.result-link { font-size: 12px; margin-left: 8px; color: #1565c0; }

/* --- ログイン画面 (Proself風) --- */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00FF00;
}
.login-card {
  background: #fff;
  width: 400px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 20px 2px;
}
.login-logo img { height: 120px; }
.login-logo .login-brand {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  font-size: 48px;
  color: #00FF00;
  letter-spacing: 1px;
}
.login-divider { border: none; border-top: 1px solid #e0e0e0; margin: 0 20px; }
.login-card form { width: 250px; margin: 0 auto; padding-bottom: 24px; }
.login-card label {
  display: block;
  font-size: 10px;
  font-weight: bold;
  color: #00FF00;
  margin: 14px 0 0;
}
.login-card label::before { content: "■"; margin-right: 2px; }
.login-card input {
  width: 100%;
  padding: 9px 2px 10px;
  border: none;
  border-bottom: 2px solid #00FF00;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  outline: none;
}
.login-card button {
  width: 100%;
  margin-top: 23px;
  padding: 12px;
  border: none;
  border-radius: 3px;
  background: #00FF00;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  cursor: pointer;
}
.login-card button:hover { background: #007a36; }
.login-card .login-error { color: #c62828; font-size: 13px; margin-top: 12px; }
.login-card .login-error:empty { display: none; }
.login-powered {
  text-align: right;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  margin-top: 4px;
}

/* 下帯: サイドバーと同じ黄・同じ幅で左下に。文字は緑 (黄地に白は読めない) */
.footer {
  background: #00FF00;
  color: #00FF00;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 48px;
  width: 180px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: bold;
  position: fixed;
  bottom: 0;
  left: 0;
}
.footer .footer-ver { text-decoration: underline; margin-left: 4px; }

/* --- WEB公開/アップロード招待モーダル --- */
.dropdown-menu button:disabled { color: #bbb; cursor: default; }
.dropdown-menu button:disabled:hover { background: none; }
#share-target { font-size: 14px; color: #333; }
#share-pw-wrap { display: flex; gap: 6px; margin-top: 4px; }
#share-pw { flex: 1; padding: 6px 8px; font-size: 14px; }
#share-pw-gen {
  border: 1px solid #ccc; background: #fff; border-radius: 4px;
  padding: 4px 12px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
#share-pw-gen:hover { background: #E6FFE6; }
.share-url-row { display: flex; gap: 6px; }
#share-url { flex: 1; padding: 6px 8px; font-size: 13px; background: #F2FFF2; border: 1px solid #00F200; border-radius: 4px; }
#share-copy {
  border: 1px solid #ccc; background: #fff; border-radius: 4px;
  padding: 4px 10px; font-size: 15px; cursor: pointer;
}
#share-copy:hover { background: #E6FFE6; }
#share-expires { padding: 6px 8px; font-size: 14px; }

/* --- 公開ページ (WEB公開/アップロード招待。未ログイン閲覧) --- */
.pub-body {
  min-height: 100vh;
  background: #00FF00;
  padding: 40px 12px 24px;
}
.pub-wrap { max-width: 780px; margin: 0 auto; }
.pub-card {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  padding: 20px 28px 28px;
}
.pub-brand { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pub-brand img { height: 120px; }
.pub-brand-text {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  font-size: 26px;
  color: #00FF00;
}
.pub-head { margin: 14px 0 10px; }
.pub-title { font-size: 17px; font-weight: bold; }
.pub-sub { font-size: 12px; color: #888; margin-top: 2px; }
.pub-error {
  background: #ffebee; color: #c62828; border-radius: 4px;
  padding: 12px 14px; font-size: 14px; margin: 12px 0;
}
.pub-pw { max-width: 320px; margin: 18px 0; }
.pub-pw-label { font-size: 13px; color: #666; margin-bottom: 8px; }
.pub-pw input {
  width: 100%; padding: 8px 10px; font-size: 14px;
  border: 1px solid #ccc; border-radius: 4px;
}
.pub-pw button {
  margin-top: 10px; padding: 8px 20px; border: none; border-radius: 4px;
  background: #00FF00; color: #fff; font-size: 14px; font-weight: bold; cursor: pointer;
}
.pub-pw button:hover { background: #007a36; }
.pub-pw-error { color: #c62828; font-size: 13px; margin-top: 8px; }
.pub-pw-error:empty { display: none; }
table.list tr.pub-dir td {
  background: #A8FFA8; border-top: 1px solid #00F200; border-bottom: 1px solid #00F200;
  padding: 5px 12px; font-weight: bold; font-size: 13px; color: #006B00;
}
.pub-indent { padding-left: 18px; }
.pub-dl-col { width: 120px; text-align: right; }
.pub-dl {
  border: 1px solid #bbb; background: #fff; border-radius: 3px;
  padding: 3px 12px; font-size: 12px; color: #444; cursor: pointer; white-space: nowrap;
}
.pub-dl:hover { background: #E6FFE6; border-color: #00FF00; }
.pub-up-btns { display: flex; gap: 8px; margin: 14px 0 4px; }
.pub-up-btn {
  border: 1px solid #ccc; background: #fff; border-radius: 4px;
  padding: 10px 18px; font-size: 14px; cursor: pointer;
}
.pub-up-btn:hover { background: #E6FFE6; border-color: #00FF00; }
.pub-up-msg { font-size: 13px; color: #2e7d32; min-height: 20px; margin: 6px 0; }
.pub-up-msg.error { color: #c62828; }
.pub-note { font-size: 12px; color: #888; margin: 14px 0 6px; }

/* --- 管理画面 (admin.html) --- */
.admin-title { font-size: 16px; font-weight: bold; color: #fff; }
.admin-body { padding: 24px; }
.admin-main { max-width: 920px; margin: 0 auto; }
.admin-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-card {
  display: flex; gap: 14px; align-items: center; padding: 18px;
  background: #fff; border: 1px solid #eee; border-left: 4px solid #00FF00;
  border-radius: 4px; text-decoration: none; color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.admin-card:hover { background: #F0FFF0; }
.admin-card-ico { font-size: 34px; line-height: 1; }
.admin-card-body { display: flex; flex-direction: column; gap: 4px; }
.admin-card-title { font-weight: bold; font-size: 15px; }
.admin-card-desc { font-size: 12px; color: #888; }
.soon { font-size: 11px; color: #00B500; border: 1px solid #00E000; border-radius: 3px; padding: 0 4px; margin-left: 4px; font-weight: normal; }
.admin-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.admin-back { color: #795548; text-decoration: none; font-size: 13px; }
.admin-back:hover { text-decoration: underline; }
.admin-list th { text-align: left; white-space: nowrap; }
.admin-list .muted { color: #888; font-size: 13px; }
.admin-list .col-date { width: 110px; white-space: nowrap; }
.admin-list .col-role { white-space: nowrap; }
.admin-list .mini-btn { white-space: nowrap; }
.role-admin { color: #c0392b; font-weight: bold; }
.mini-btn { border: 1px solid #bbb; background: #fff; border-radius: 3px; padding: 2px 12px; font-size: 12px; cursor: pointer; }
.mini-btn:hover { background: #f5f5f5; }
button.danger { color: #c0392b; border: 1px solid #e0b4b0; background: #fff; border-radius: 4px; padding: 6px 14px; cursor: pointer; }
button.danger:hover { background: #fdecea; }
.admin-placeholder { color: #888; padding: 20px; }

/* --- 重いファイル (使用量スタックバー) --- */
.usage-row { margin: 18px 0; }
.usage-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.usage-name { font-weight: bold; font-size: 14px; }
.usage-total { font-size: 12px; color: #666; }
.usage-bar {
  display: flex;
  gap: 2px;                 /* セグメント区切り (地色の隙間) */
  height: 22px;
  min-width: 4px;
  border-radius: 4px;
  overflow: hidden;
}
.usage-seg {
  background: #00FF00;
  min-width: 1px;
  cursor: pointer;
}
.usage-seg:nth-child(even) { background: #00E300; }   /* 隣接区別の明度違い */
.usage-seg:hover { filter: brightness(.88); }
.usage-seg.usage-rest { background: #D9D9D9; cursor: default; }
.usage-seg.usage-rest:hover { filter: none; }
.usage-tip {
  position: fixed;
  z-index: 60;
  max-width: 380px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
}
.usage-tip.tip-static { cursor: default; }
.usage-tip .tip-name { font-weight: bold; word-break: break-all; }
.usage-tip .tip-meta { color: #666; font-size: 12px; margin-top: 2px; word-break: break-all; }
.usage-tip .tip-go { color: #1565c0; font-size: 12px; margin-top: 4px; }
#user-modal .modal, #group-modal .modal { width: 680px; }
.member-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px 14px; max-height: 220px; overflow: auto;
}
.member-grid label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#u-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 14px; max-height: 220px; }
#u-groups label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 管理: 機能の公開範囲 */
.feature-help { background: #E6FFE6; border: 1px solid #B0F0B0; border-radius: 8px;
  padding: 14px 20px; max-width: 680px; margin-bottom: 16px; font-size: 13px; color: #555; }
.feature-help-title { font-weight: bold; color: #795548; margin-bottom: 6px; font-size: 13px; }
.feature-help ul { padding-left: 18px; }
.feature-help li { margin: 4px 0; line-height: 1.6; }
.feature-box { background: #fff; border: 1px solid #e2e2e2; border-radius: 8px;
  padding: 20px 24px; max-width: 680px; margin-bottom: 16px; }
.feature-title { font-size: 16px; font-weight: bold; margin-bottom: 4px; }
.feature-desc { font-size: 13px; color: #777; margin-bottom: 14px; }
.feature-radio { display: block; font-size: 14px; margin: 6px 0; cursor: pointer; }
.feature-pick { margin: 10px 0 4px 22px; }
.feature-pick .modal-label { margin-top: 10px; }

/* 通知バー内のプログレスバー (フォルダアップロード進捗)。バーは右側 */
.notice.notice-progress { display: flex; align-items: center; gap: 12px; }
.notice-msg { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.notice-track { flex: 1 1 auto; min-width: 120px; height: 10px;
  background: #fff; border: 1px solid #c8e6c9; border-radius: 5px; overflow: hidden; }
/* 通知バー内は白地に緑 (通知文字と同色)。span のままでは width が効かないので block 化 */
.notice-progress .pt-progress-bar-fill { display: block; height: 100%; background: #2e7d32; }
.notice-progress .pt-progress-txt { flex: none; }

/* 通知バー内の中止ボタン */
.notice-cancel { flex: none; border: 1px solid #c8e6c9; background: #fff; color: #2e7d32;
  border-radius: 4px; padding: 2px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.notice-cancel:hover { background: #ffebee; border-color: #f0b4b4; color: #c62828; }