* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  background: #f4f6f8; color: #222; line-height: 1.6;
}
a { color: #2563a8; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- ログイン ---- */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:#2c3e50; }
.login-card { background:#fff; padding:36px 32px; border-radius:10px; width:340px; box-shadow:0 8px 30px rgba(0,0,0,.2); }
.login-card h1 { font-size:20px; margin:0 0 4px; }
.login-card .sub { color:#666; font-size:13px; margin:0 0 20px; }
.login-card label { display:block; font-size:13px; margin-bottom:14px; }
.login-card input { width:100%; padding:10px; margin-top:4px; border:1px solid #ccc; border-radius:6px; font-size:15px; }
.login-card button { width:100%; padding:11px; background:#2c3e50; color:#fff; border:none; border-radius:6px; font-size:15px; cursor:pointer; }
.login-card button:hover { background:#1f2d3a; }
.login-card .hint { font-size:11px; color:#999; margin-top:16px; }
.err, .login-card .err { background:#fdecea; color:#c0392b; padding:8px 10px; border-radius:5px; font-size:13px; margin-bottom:14px; }

/* ---- ヘッダー ---- */
.topbar { display:flex; align-items:center; gap:20px; background:#2c3e50; color:#fff; padding:0 18px; height:52px; }
.topbar .brand a { color:#fff; font-weight:bold; font-size:16px; }
.topbar nav { display:flex; gap:16px; flex:1; }
.topbar nav a { color:#cfd8e3; font-size:14px; }
.topbar nav a:hover { color:#fff; text-decoration:none; }
.user-area { display:flex; align-items:center; gap:10px; font-size:13px; }
.udept { color:#9fb3c8; font-size:11px; margin-left:6px; }
.badge { background:#e67e22; padding:1px 8px; border-radius:10px; font-size:11px; }
.logout { color:#cfd8e3; }

.container { max-width:1100px; margin:0 auto; padding:20px 16px 60px; }

/* ---- 一覧 ---- */
.page-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.page-head h2 { margin:0; font-size:20px; }
.search { display:flex; gap:6px; }
.search input { padding:8px 10px; border:1px solid #ccc; border-radius:6px; min-width:200px; }
.search button { padding:8px 14px; border:none; background:#2563a8; color:#fff; border-radius:6px; cursor:pointer; }
.search .clear { align-self:center; font-size:13px; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.1); display:block; color:inherit; }
.card:hover { box-shadow:0 4px 12px rgba(0,0,0,.15); text-decoration:none; }
.thumb { position:relative; aspect-ratio:16/9; background:#dde3e8; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb-ph { display:flex; align-items:center; justify-content:center; height:100%; color:#889; font-size:13px; }
.done-badge { position:absolute; top:8px; right:8px; background:#27ae60; color:#fff; font-size:11px; padding:2px 8px; border-radius:10px; }
.prog-badge { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:2px 8px; border-radius:10px; }
.card-body { padding:10px 12px; }
.card-title { font-weight:bold; font-size:15px; }
.card-desc { font-size:12px; color:#666; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-tags { font-size:11px; color:#2563a8; margin-top:5px; }
.card-progress { height:4px; background:#eee; }
.card-progress span { display:block; height:100%; background:#27ae60; }
.empty { color:#888; padding:40px 0; text-align:center; }

/* ---- 視聴 ---- */
.back { font-size:13px; }
.watch-title { margin:10px 0 14px; font-size:20px; }
.desc-box { background:#fff; padding:14px 16px; border-radius:8px; margin-top:14px; white-space:pre-wrap; }

.comments { margin-top:24px; }
.comments h3 { font-size:16px; }
.comment-form { background:#fff; padding:12px; border-radius:8px; }
.comment-form textarea { width:100%; min-height:60px; border:1px solid #ccc; border-radius:6px; padding:8px; }
.c-time { display:block; font-size:12px; color:#666; margin:6px 0; }
.comment-form button { padding:8px 18px; background:#2563a8; color:#fff; border:none; border-radius:6px; cursor:pointer; }
#comment-list { margin-top:14px; }
.comment { background:#fff; padding:10px 12px; border-radius:6px; margin-bottom:8px; }
.c-head { font-size:13px; color:#555; }
.c-jump { color:#2563a8; cursor:pointer; }
.c-date { color:#aaa; font-size:11px; margin-left:8px; }
.c-text { margin-top:4px; white-space:pre-wrap; }

/* ---- 管理: アップロード ---- */
.upload-box { background:#fff; padding:16px; border-radius:8px; margin-bottom:24px; }
.upload-box h3 { margin-top:0; }
.upload-fields { display:flex; flex-direction:column; gap:8px; max-width:520px; }
.upload-fields input, .upload-fields textarea { padding:8px; border:1px solid #ccc; border-radius:6px; }
.upload-fields button { padding:9px; background:#27ae60; color:#fff; border:none; border-radius:6px; cursor:pointer; }
.up-status { margin-top:10px; font-size:13px; color:#2563a8; }

.vtable { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; }
.vtable th, .vtable td { padding:8px 10px; border-bottom:1px solid #eee; text-align:left; font-size:14px; vertical-align:middle; }
.vtable th { background:#f0f3f6; }
.mini { width:80px; border-radius:4px; }
.small { font-size:11px; color:#888; }
.small.err { color:#c0392b; }
.st-ready { color:#27ae60; } .st-converting { color:#e67e22; }
.st-pending { color:#888; } .st-error { color:#c0392b; }
.pbar { display:inline-block; width:120px; height:6px; background:#eee; border-radius:3px; overflow:hidden; vertical-align:middle; margin:0 6px; }
.pbar span { display:block; height:100%; background:#e67e22; transition:width .5s; }
.del { background:#c0392b; color:#fff; border:none; border-radius:4px; padding:4px 10px; cursor:pointer; margin-left:6px; }

/* ---- 受講状況マトリクス ---- */
.table-scroll { overflow-x:auto; }
.matrix { border-collapse:collapse; background:#fff; font-size:13px; }
.matrix th, .matrix td { border:1px solid #e3e8ec; padding:6px 8px; text-align:center; white-space:nowrap; }
.matrix th { background:#f0f3f6; }
.matrix .sticky { position:sticky; left:0; background:#f7f9fb; text-align:left; z-index:1; }
.vcol { max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.cell.c-done { background:#d5f4e0; color:#1e7d46; font-weight:bold; }
.cell.c-part { background:#fdf1d8; }
.cell.c-none { color:#bbb; }
.role-sel { padding:3px; border:1px solid #ccc; border-radius:4px; }
.badge-local { background:#8e44ad; color:#fff; font-size:11px; padding:1px 8px; border-radius:10px; }
.staff-results { margin-top:10px; }
.staff-row { display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid #e3e8ec; border-radius:6px; padding:8px 12px; margin-bottom:6px; }
.staff-act { display:flex; gap:6px; }
.staff-act button { padding:5px 10px; border:none; border-radius:5px; cursor:pointer; font-size:13px; }
.add-trainee { background:#2563a8; color:#fff; }
.add-admin { background:#e67e22; color:#fff; }

@media (max-width:640px) {
  .topbar { gap:10px; padding:0 10px; }
  .topbar nav { gap:10px; }
  .uname { display:none; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
}

/* ---- 追加機能のスタイル ---- */
/* コンテンツ種別・未読バッジ */
.type-badge { position:absolute; top:8px; left:8px; background:#34495e; color:#fff; font-size:11px; padding:2px 8px; border-radius:10px; }
.unread-badge { position:absolute; bottom:8px; right:8px; background:#c0392b; color:#fff; font-size:11px; padding:2px 8px; border-radius:10px; }

/* チャプター */
.chapters-box { background:#fff; border-radius:8px; padding:12px 14px; margin-top:12px; }
.chapters-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.ch-admin { display:flex; gap:6px; }
.ch-admin input { padding:6px; border:1px solid #ccc; border-radius:5px; }
.ch-admin button { padding:6px 12px; background:#2563a8; color:#fff; border:none; border-radius:5px; cursor:pointer; }
.chapter-list { list-style:none; padding:0; margin:10px 0 0; }
.chapter-item { display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid #f0f0f0; }
.ch-jump { color:#2563a8; cursor:pointer; font-family:Consolas,monospace; min-width:48px; }
.ch-name { flex:1; }
.ch-del { background:#c0392b; color:#fff; border:none; border-radius:4px; width:22px; height:22px; cursor:pointer; }

/* PDF・ドキュメント */
.doc-view { background:#525659; border-radius:8px; padding:0; overflow:hidden; }
.pdf-frame { width:100%; height:75vh; border:none; display:block; }
.doc-download { background:#fff; border-radius:8px; padding:30px; text-align:center; }
.dl-btn { display:inline-block; margin-top:12px; padding:10px 24px; background:#2563a8; color:#fff; border-radius:6px; }

/* コメント: 管理者バッジ・既読 */
.c-admin-badge { background:#e67e22; color:#fff; font-size:10px; padding:1px 6px; border-radius:8px; margin-left:4px; }
.c-new { background:#c0392b; color:#fff; font-size:10px; padding:1px 6px; border-radius:8px; margin-left:4px; }
.comment.unread { border-left:3px solid #c0392b; }
.c-reply { background:none; border:none; color:#2563a8; cursor:pointer; font-size:12px; padding:2px 0; }

/* モーダル */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-card { background:#fff; border-radius:10px; padding:22px; width:440px; max-width:92vw; max-height:85vh; overflow:auto; }
.modal-card h3 { margin-top:0; }
.modal-card label { display:block; margin-bottom:10px; font-size:13px; }
.modal-card input, .modal-card textarea { width:100%; padding:8px; border:1px solid #ccc; border-radius:6px; margin-top:3px; }
.modal-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.modal-btns button { padding:8px 18px; border:none; border-radius:6px; cursor:pointer; background:#2563a8; color:#fff; }
.modal-btns .cancel { background:#95a5a6; }
.ver-row { padding:8px 0; border-bottom:1px solid #eee; }
.ver-row .cur { background:#27ae60; color:#fff; font-size:11px; padding:1px 8px; border-radius:10px; }

/* 操作ボタン群 */
.ops button { margin:2px; padding:3px 8px; border:none; border-radius:4px; cursor:pointer; font-size:12px; }
.ops .edit { background:#2563a8; color:#fff; }
.ops .replace { background:#16a085; color:#fff; }
.ops .vers { background:#8e44ad; color:#fff; }
.ops .del { background:#c0392b; color:#fff; }
.storage-total { background:#fff; padding:6px 12px; border-radius:6px; }

/* ---- タブ・絞り込み ---- */
.tabs { display:flex; gap:4px; border-bottom:2px solid #dde3ea; margin-bottom:16px; }
.tab { background:none; border:none; padding:10px 20px; cursor:pointer; font-size:15px; color:#666; border-bottom:2px solid transparent; margin-bottom:-2px; }
.tab.active { color:#2563a8; border-bottom-color:#2563a8; font-weight:bold; }
.tab-count { background:#e3e8ec; color:#555; font-size:12px; padding:1px 8px; border-radius:10px; margin-left:4px; }
.filter-input { width:100%; padding:9px 12px; border:1px solid #ccc; border-radius:6px; margin-bottom:12px; }
.demote, .promote { background:#8e44ad; color:#fff; border:none; border-radius:4px; padding:4px 10px; cursor:pointer; font-size:12px; margin-left:6px; }
.demote { background:#95a5a6; }

/* 動画編集ページ */
.edit-layout { display:grid; grid-template-columns: 1.5fr 1fr; gap:20px; margin-top:12px; }
@media (max-width:900px) { .edit-layout { grid-template-columns:1fr; } }
.edit-left .player-wrap { position:relative; background:#000; border-radius:8px; overflow:hidden; }
.edit-left video { width:100%; display:block; }
.time-info { background:#fff; padding:8px 14px; margin-top:8px; border-radius:6px; font-size:13px; }
.cur-time { font-family:Consolas,monospace; font-weight:bold; color:#2563a8; }
.info-edit { background:#fff; padding:16px; border-radius:8px; margin-top:12px; }
.info-edit h3 { margin-top:0; }
.info-edit label { display:block; margin-bottom:10px; font-size:13px; }
.info-edit input, .info-edit textarea { width:100%; padding:8px; border:1px solid #ccc; border-radius:6px; margin-top:3px; box-sizing:border-box; }
.info-edit button { padding:8px 18px; background:#2563a8; color:#fff; border:none; border-radius:6px; cursor:pointer; }

.edit-right { background:#fff; padding:16px; border-radius:8px; }
.edit-right h3 { margin-top:0; }
.ch-add-box { background:#f4f6f9; border-radius:6px; padding:10px; margin-bottom:12px; }
.ch-add-row { display:flex; gap:6px; margin-bottom:6px; align-items:center; }
.ch-add-row input { flex:1; padding:6px 10px; border:1px solid #ccc; border-radius:5px; box-sizing:border-box; }
.ch-time-input { max-width:180px; font-family:Consolas,monospace; }
.btn-add { padding:6px 12px; background:#16a085; color:#fff; border:none; border-radius:5px; cursor:pointer; font-size:13px; white-space:nowrap; }
.btn-add:hover { background:#12876f; }
.ch-list { list-style:none; padding:0; margin:0; }
.ch-item { display:flex; gap:6px; align-items:center; padding:6px 0; border-bottom:1px solid #eee; }
.ch-jump { padding:4px 10px; background:#e3e8ec; border:none; border-radius:4px; cursor:pointer; font-family:Consolas,monospace; font-size:12px; color:#2563a8; min-width:56px; }
.ch-jump:hover { background:#d0dae2; }
.ch-title-input { flex:1; padding:5px 8px; border:1px solid #ddd; border-radius:4px; font-size:13px; }
.ch-save-btn { padding:4px 8px; background:#2563a8; color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:12px; }
.ch-del-btn { padding:4px 8px; background:#c0392b; color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:12px; }

/* ---- eCampus ロゴ ---- */
/* SVGをマスクとして使い、背景色で色を制御する(元SVGは無改変) */
.brand-logo {
  display: inline-block;
  background-color: currentColor;   /* 親要素のcolorを継承 */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: middle;
}
/* 横ロゴ(ヘッダー用) */
.brand-logo-h {
  -webkit-mask-image: url("../img/ecampus_logo.svg");
  mask-image: url("../img/ecampus_logo.svg");
  width: 140px;
  height: 32px;
}
/* 縦ロゴ(ログイン画面用) SVGアスペクト比 2809:1715 */
.brand-logo-v {
  -webkit-mask-image: url("../img/ecampus_logo_v.svg");
  mask-image: url("../img/ecampus_logo_v.svg");
  width: 220px;
  height: 134px;
  margin: 0 auto 24px;
  display: block;
}
/* ヘッダーは濃色背景 → ロゴは白 */
.topbar .brand-logo-h { color: #ffffff; }
.topbar .brand-logo-h:hover { color: #cfe1f5; }
/* ログインカードは白背景 → ロゴは濃色(ボタンと同系のブランドカラー) */
.login-card .brand-logo-v { color: #2c3e50; }

/* 視聴済み範囲の帯(シークバー下) */
.watched-bar { position:relative; width:100%; height:6px; background:#e3e8ec; border-radius:3px; margin-top:6px; overflow:hidden; }
.wb-seg { position:absolute; top:0; bottom:0; background:#27ae60; }


/* ==================================================
   Video.js オーバーレイ(独自追加要素のみ)
   Video.js本体のスタイルは触らない。デフォルトのまま使う。
   ================================================== */

/* プレイヤーの外側ラッパー(位置決めのみ)*/
.vjs-wrap { position: relative; max-width: 100%; }

/* 透かし: Video.js の .video-js 要素内に挿入されるので、
   フルスクリーンでも表示され続ける */
.video-js .watermark {
  position: absolute;
  top: 15%;
  left: 10%;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  pointer-events: none;
  z-index: 100;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: top 3s, left 3s;
  user-select: none;
}
.video-js.vjs-fullscreen .watermark {
  font-size: 18px;
}

/* 画質バッジ */
.video-js .quality-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: Consolas, monospace;
  pointer-events: none;
  z-index: 100;
}

/* 進捗バー上の視聴済み範囲(緑帯) */
.vjs-watched-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
}
.vjs-watched-seg {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(39, 174, 96, 0.55);
}

/* 進捗バー上のチャプター区切り線 */
.vjs-chapter-marks {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 2;
}
.vjs-ch-mark {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.7);
}

/* 画質選択ボタン(Video.jsのコントロールバーに追加した独自ボタン) */
.vjs-quality-btn {
  cursor: pointer;
  position: relative;
}
.vjs-quality-btn .vjs-quality-label {
  padding: 0 8px;
  font-size: 12px;
  color: #fff;
  line-height: 3em;
}
.vjs-quality-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: rgba(28, 28, 28, 0.95);
  color: #fff;
  list-style: none;
  padding: 4px 0;
  margin: 0;
  border-radius: 4px;
  min-width: 100px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}
.vjs-quality-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
.vjs-quality-item:hover { background: rgba(255, 255, 255, 0.15); }
.vjs-quality-item.active { color: #4ec3ff; }
.vjs-quality-item.active::before { content: '✓ '; }