/* 570テーマ: 黄 #FFD800系 + 白。骨格は 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: #FFD100;
  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: #009944;
  margin-left: -5px;
}
.topbar .breadcrumb {
  flex: 1;
  padding: 5px 14px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar .breadcrumb a { color: #fff; text-decoration: none; }
.topbar .breadcrumb a:hover { text-decoration: underline; }
.topbar .user { white-space: nowrap; }
.topbar .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; }
.topbar .user-menu { left: auto; right: 0; 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;
}

/* --- レイアウト --- */
.layout { display: flex; height: calc(100% - 118px); }

/* --- 左サイドバー (黄) --- */
.sidebar {
  width: 180px;
  background: #FFFF00;
  padding: 20px 0 12px;
  flex-shrink: 0;
  overflow: 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: #FFF9A0; }
.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: #FFF9A0; }
.sidebar .nav-more {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0 12px;
  line-height: 34px;
  border: none;
  border-top: 1px solid #F2E200;
  background: none;
  color: #666;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
.sidebar .nav-more:hover { background: #FFF9A0; }
.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; }

/* タブ (常時同じ場所に表示) */
.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;
}
.tabs .tab.active {
  background: #fff;
  color: #333;
  font-weight: bold;
  border-color: #FFD800;
  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 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: #FFFBE6; }
table.list tr.selected { background: #FFF3B0; }
table.list .col-check { width: 32px; }
table.list .col-size { width: 90px; text-align: right; color: #666; }
table.list .col-date { width: 180px; color: #666; white-space: nowrap; }
table.list .col-info { width: 150px; }
table.list .col-type { width: 110px; color: #666; font-size: 13px; }
.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-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 #ccc;
  background: #fff;
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
  margin-right: 6px;
}
.confirm-btn:hover { background: #e8f5e9; }
.confirm-names { font-size: 12px; color: #2e7d32; }

/* ファイル操作プルダウン (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: #FFFBE6; }
#dest-folder { width: 100%; padding: 6px 8px; font-size: 14px; }

/* --- 校正ツリー --- */
#tree-section {
  margin: 8px 12px;
  border: 1px solid #FFE082;
  background: #FFFDF2;
  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: #FFD800; background: #FFFBE6; }
.tree-arrow { color: #bbb; margin: 0 4px; }
.tree-redline { padding: 4px 0; font-size: 13px; color: #b71c1c; }

/* --- アップロードモーダル --- */
.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: #FFD800; border-color: #FFD800; font-weight: bold; }
.modal-actions button.primary:hover { background: #f0cc00; }

/* --- 校正結果画面 (全画面プレビュー) --- */
.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: #FFFBE6; }
.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: #FFD800;
  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: #FFFDF2;
  border-bottom: 1px solid #FFE082;
  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 #FFD800; margin-bottom: 10px; flex-wrap: wrap; }
.vtab {
  padding: 6px 18px;
  background: #f5f5f5;
  border-radius: 6px 6px 0 0;
  color: #333;
  text-decoration: none;
  font-size: 13px;
}
.vtab.active { background: #FFD800; font-weight: bold; }
.vtab:hover { background: #FFF3B0; }
.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: #fff8e1; border-color: #ffe082; 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: #fff8e1; color: #b28704; }
.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: #FFFF00;
}
.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: #009944;
  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: #FFD100;
  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 #FFD100;
  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: #FFD100;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  cursor: pointer;
}
.login-card button:hover { background: #f2c400; }
.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: #FFD100;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 48px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: bold;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.footer .footer-ver { text-decoration: underline; margin-left: 4px; }