/* ===== 全体 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #2f2e2b;
  background: #ffffff;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 更新お知らせ（画面下部の小さなボタン） */
#update-bar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60;
  align-items: center; gap: 6px; cursor: pointer;
  background: #2383e2; color: #fff; padding: 6px 14px; font-size: 13px;
  border-radius: 18px; box-shadow: 0 3px 12px rgba(0,0,0,.25);
}
#update-bar:hover { background: #1b6dc0; }
#update-bar .uv { font-weight: 600; }
.update-btn {
  background: #fff; color: #2383e2; border: none; border-radius: 6px;
  padding: 5px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.update-btn:hover { background: #eef4fb; }
.ver-now { font-size: 14px; font-weight: 600; }

/* ===== レイアウト（サイドバー＋本体） ===== */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px; flex-shrink: 0; background: #f7f7f5;
  border-right: 1px solid #ececeb; padding: 12px 10px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: flex-start;   /* ページの長さに関係なく画面の高さに固定 */
  height: 100vh; overflow-y: auto;
}
#side-nav { display: flex; flex-direction: column; flex: 1; }
.side-top { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 6px 8px; }
.side-top .logo {
  width: 22px; height: 22px; border-radius: 5px; background: #e8453c; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.side-item {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; color: #54524d;
}
.side-item:hover { background: #ececeb; }
.side-item.active { background: #e6e6e4; font-weight: 600; color: #37352f; }
.side-tri { width: 26px; height: 22px; flex-shrink: 0; position: relative; }
.side-tri::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; }
.side-tri.collapsed::before { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 11px solid #b8b7b3; }
.side-tri.expanded::before { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 11px solid #b8b7b3; }
.side-tri.collapsed:hover::before { border-left-color: #8a8986; }
.side-tri.expanded:hover::before { border-top-color: #8a8986; }
.side-tri:hover { color: #37352f; }
.side-ico { width: 18px; text-align: center; flex-shrink: 0; }
.side-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-actions { display: none; gap: 2px; flex-shrink: 0; }
.side-item:hover .side-actions { display: flex; }
.side-act {
  width: 20px; height: 20px; border-radius: 4px; text-align: center; line-height: 20px;
  color: #9b9a97; font-size: 14px;
}
.side-act:hover { background: #dcdcda; color: #37352f; }
.act-del:hover { color: #a23b3b; }
.side-empty { font-size: 12.5px; color: #b3b2af; padding: 4px 8px; font-style: italic; }
.side-add {
  margin-top: 8px; padding: 6px 10px; font-size: 13px; color: #9b9a97;
  cursor: pointer; border-radius: 6px;
}
.side-add:hover { background: #ececeb; color: #54524d; }
.side-add-div { margin-top: 0; font-size: 12px; }
.side-divider {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 8px 4px; margin-top: 8px; border-top: 1px solid #ececec;
}
.side-divider-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #9b9a97; }
.side-divider .side-act { opacity: 0; cursor: pointer; font-size: 13px; padding: 0 4px; }
.side-divider .act-del { color: #c0392b; }
.side-divider:hover .side-act { opacity: .8; }
.side-divider-ico { width: 18px; height: 18px; border-radius: 4px; background-size: cover; background-position: center; display: inline-block; flex-shrink: 0; margin-right: 5px; }
.side-divider-ico.emoji { background: none; font-size: 15px; line-height: 18px; text-align: center; }
.side-top .logo.brand-img { background-size: cover; background-position: center; color: transparent; }
.side-top .logo.brand-emoji { background: none; color: inherit; font-size: 18px; }
.brand-name { }
.side-divider.drop-after { box-shadow: 0 2px 0 #2383e2; }

/* サイドバー下部の設定 */
.side-bottom-sep { border-top: 1px solid #e4e3e0; margin: 10px 4px 6px; margin-top: auto; }
.side-version { font-size: 11px; color: #b3b2af; padding: 4px 10px 2px; }
.side-settings .side-count { background: #fff; }

/* 設定ページ */
.set-card {
  border: 1px solid #ececeb; border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; max-width: 560px;
}
.set-card h3 { font-size: 16px; margin-bottom: 14px; }
.set-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.set-row label { width: 130px; flex-shrink: 0; color: #6b6a66; font-size: 13.5px; }
.set-row .edit-input { border: 1px solid #e4e3e0; background: #fff; }
.set-note { font-size: 12.5px; color: #9b9a97; margin-top: 6px; line-height: 1.6; }
.set-btns { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.cloud-btn { border: none; border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 500; cursor: pointer; }
.cloud-btn.save { background: #2383e2; color: #fff; }
.cloud-btn.save:hover { background: #1b6dc0; }
.cloud-btn.load { background: #eef2f6; color: #37352f; }
.cloud-btn.load:hover { background: #e2e8ee; }
.set-empty { color: #9b9a97; font-size: 13.5px; }
.set-trash-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid #f1f1ef; font-size: 14px;
}
.set-trash-row:last-child { border-bottom: none; }
.restore-btn {
  flex-shrink: 0; margin-left: 8px; font-size: 12px; color: #2383e2; background: #fff;
  border: 1px solid #cfe0f3; border-radius: 5px; padding: 2px 10px; cursor: pointer;
}
.restore-btn:hover { background: #eaf3fb; }

/* ドラッグ＆ドロップの目印 */
.side-item { position: relative; }
.side-item.drop-before { box-shadow: inset 0 2px 0 #2383e2; }
.side-item.drop-after  { box-shadow: inset 0 -2px 0 #2383e2; }
.side-item.drop-inside { background: #d7e9fb; }

/* 曜日タブ（横川レポート内） */
.day-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.day-tab {
  background: #f1f1ef; border: 1px solid #e4e3e0; color: #54524d;
  padding: 6px 14px; border-radius: 8px; font-size: 14px; cursor: pointer;
}
.day-tab:hover { background: #e9e9e7; }
.day-tab.active { background: linear-gradient(135deg, #2fae7a, #1f9d6b); border-color: #1f9d6b; color: #fff; }
.day-tab-count { font-size: 12px; opacity: .8; margin-left: 2px; }
/* 編集モード：タブ幅は変えず、右肩に削除✕を置く */
.day-tab { position: relative; }
.day-tab.editing { cursor: pointer; box-shadow: 0 0 0 2px #f0c070 inset; }
.day-del { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%; background: #e0524d; color: #fff; font-size: 11px; border: 1px solid #fff; cursor: pointer; }
.day-del:hover { background: #c0392b; }
/* 曜日タブとは別物の「操作ボタン」。タブと見間違えないよう控えめに */
.day-ctl-sep { display: inline-block; width: 1px; align-self: stretch; min-height: 22px; margin: 0 8px; background: #e2e1de; }
.day-ctl { background: transparent; border: none; color: #8a8a86; cursor: pointer; font-size: 13px; padding: 4px 8px; border-radius: 6px; }
.day-ctl:hover { background: #f0f0ee; color: #555; }
.day-add { color: #2383e2; }
.day-editmode.active { background: #ffe9c7; color: #7a5b00; }
.del-student-btn { width: 100%; padding: 10px; margin: 6px 0 20px; border: 1px solid #f0c9c9; border-radius: 8px; background: #fdf2f2; color: #c0392b; font-size: 14px; cursor: pointer; }
.del-student-btn:hover { background: #fbe6e6; }

/* 準備中ページ */
.ph-box {
  margin-top: 40px; padding: 40px 24px; text-align: center;
  background: #f7f7f5; border: 1px dashed #d3d2cf; border-radius: 12px;
  color: #6b6a66; font-size: 15px; line-height: 1.9;
}
.ph-sub { font-size: 13px; color: #9b9a97; }

/* ===== ページ本文エディタ（Notion風） ===== */
.editor-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow-x: auto;
  padding: 6px 0 10px; border-bottom: 1px solid #ececeb; margin-bottom: 14px;
  position: sticky; top: 0; background: #fff; z-index: 5;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.editor-toolbar::-webkit-scrollbar { display: none; }
.editor-toolbar button, .editor-toolbar .tb-sep, .editor-toolbar .tb-color { flex-shrink: 0; white-space: nowrap; }
.editor-toolbar button {
  border: 1px solid #e4e3e0; background: #fff; border-radius: 6px;
  padding: 4px 10px; font-size: 13px; cursor: pointer; color: #37352f;
}
.editor-toolbar button:hover { background: #f1f1ef; }
.editor-toolbar .tb-color { padding: 4px 6px; font-size: 15px; line-height: 1; }
.editor-toolbar .tb-insert { background: #2383e2; color: #fff; border-color: #2383e2; font-weight: 600; }
.editor-toolbar .tb-insert:hover { background: #1b6dc0; }
.editor-toolbar .tb-back, .editor-toolbar .tb-done { display: none; }   /* スマホのみ表示 */
.editor-toolbar .tb-done { background: #2f7d4a; color: #fff; border-color: #2f7d4a; font-weight: 600; }
.tb-sep { width: 1px; height: 18px; background: #e4e3e0; margin: 0 4px; }

.page-editor {
  min-height: 320px; outline: none; font-size: 15px; line-height: 1.4; color: #37352f;
  max-width: 720px; padding-bottom: 80px;
}
/* Enter（段落）＝広め、Shift+Enter（改行<br>）＝line-heightのみで狭め＝約半分 */
.page-editor > div, .page-editor > p { margin: 0 0 0.7em; }
.page-editor > .todo, .page-editor > .cols2, .page-editor > .doc-embed,
.page-editor > .pdfjs-embed, .page-editor > .xlsx-embed, .page-editor > .toggle-block { margin-bottom: 6px; }
.page-editor:empty:before { content: attr(data-ph); color: #b3b2af; }
.page-editor:focus { outline: none; }
.page-editor h1 { font-size: 26px; font-weight: 700; margin: 18px 0 6px; }
.page-editor h2 { font-size: 20px; font-weight: 600; margin: 14px 0 4px; }
.page-editor p { margin: 4px 0; }
.page-editor ul { margin: 4px 0 4px 22px; }
.page-editor li { margin: 2px 0; }
.page-editor a { color: #2383e2; text-decoration: underline; cursor: pointer; border-radius: 3px; transition: background .1s; }
.page-editor a:hover { background: #eaf3fb; }
.page-editor a:active { background: #cfe0f3; }
.page-editor blockquote { border-left: 3px solid #d3d2cf; margin: 6px 0; padding: 2px 0 2px 14px; color: #6b6a66; }
.page-editor img { max-width: 100%; border-radius: 8px; margin: 6px 0; display: block; cursor: pointer; }
.img-menu {
  display: none; position: fixed; z-index: 100; gap: 4px;
  background: #fff; border: 1px solid #e4e3e0; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 5px;
}
.img-menu button {
  border: 1px solid #e4e3e0; background: #fff; border-radius: 6px;
  padding: 4px 10px; font-size: 13px; cursor: pointer;
}
.img-menu button:hover { background: #eef2f6; }
.img-handle {
  display: none; position: fixed; z-index: 101; width: 16px; height: 16px;
  background: #2383e2; border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: nwse-resize; touch-action: none;
}
.pdf-embed { width: 100%; height: 500px; border: 1px solid #e4e3e0; border-radius: 8px; margin: 6px 0; display: block; }
.doc-embed { position: relative; width: 100%; border: 1px solid #e4e3e0; border-radius: 8px; margin: 6px 0; overflow: hidden; }
.embed-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #f7f7f5; cursor: pointer; border-bottom: 1px solid #ececeb; }
.embed-head:hover { background: #f1f1ef; }
.embed-toggle { color: #9b9a97; font-size: 11px; width: 12px; }
.embed-title { flex: 1; font-size: 13px; color: #54524d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embed-head .embed-del {
  position: static; width: 22px; height: 22px; background: #ececeb; color: #6b6a66; flex-shrink: 0;
}
.embed-head .embed-del:hover { background: #e0e0de; color: #a23b3b; }
.embed-body { height: 520px; overflow: hidden; cursor: pointer; }
.doc-embed.collapsed .embed-body { display: none; }
.doc-embed iframe { width: 100%; height: 100%; border: 0; }
/* Excelビューアを縮小して全体を見せる（66%表示） */
.office-scale { width: 152%; height: 152%; transform: scale(0.66); transform-origin: 0 0; }
.office-scale iframe { width: 100%; height: 100%; }
.embed-del {
  position: absolute; top: 8px; right: 8px; z-index: 3; width: 26px; height: 26px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.embed-del:hover { background: rgba(0,0,0,.8); }
.pdfjs-embed {
  position: relative; width: 100%; max-width: 100%; overflow: hidden;
  border: 1px solid #ececeb; border-radius: 8px; padding: 8px; margin: 6px 0; background: #f7f7f5; cursor: pointer;
}
.pdfjs-embed .pdf-page { display: block; width: 100%; height: auto; border-radius: 4px; margin: 6px auto; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.xlsx-embed {
  position: relative; width: 100%; max-width: 100%; overflow: auto;
  border: 1px solid #ececeb; border-radius: 8px; padding: 8px; margin: 6px 0; background: #fff; cursor: pointer;
}
.xlsx-embed table { border-collapse: collapse; font-size: 12px; }
.xlsx-embed td, .xlsx-embed th { border: 1px solid #ddd; padding: 2px 7px; white-space: nowrap; }
.xlsx-sheetname { font-weight: 600; font-size: 13px; margin: 10px 0 4px; color: #37352f; }
.cols2 { display: flex; gap: 16px; margin: 8px 0; }
.cols2 .col { flex: 1; min-width: 0; border: 1px dashed #e4e3e0; border-radius: 6px; padding: 8px 10px; min-height: 40px; }
@media (max-width: 700px) { .cols2 { flex-direction: column; } }
.todo { position: relative; padding-left: 30px; margin: 3px 0; }
.todo-check {
  position: absolute; left: 0; top: 3px; width: 20px; height: 20px; box-sizing: border-box;
  border: 3px solid #8a8a87; border-radius: 4px; cursor: pointer; user-select: none;
}
.todo-check:hover { border-color: #555; }
.todo-done .todo-check { background: #2383e2; border-color: #2383e2; text-decoration: none; }
.todo-done .todo-check::after { content: "✓"; color: #fff; font-size: 14px; font-weight: 700; line-height: 14px; display: flex; align-items: center; justify-content: center; height: 100%; }
.todo-done { text-decoration: line-through; }
.todo-done, .todo-done * { color: #9b9a97 !important; }   /* チェック済みはグレー（色付き文字も上書き） */
.toggle-block { margin: 6px 0; }
.toggle-block > summary { cursor: pointer; font-weight: 600; list-style: revert; padding: 2px 0; outline: none; }
.toggle-block > div { padding: 4px 0 4px 18px; }
.callout { background: #f1f1ef; border-radius: 8px; padding: 12px 14px; margin: 8px 0; }
/* ページ内タブ */
.page-tabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 8px; border-bottom: 1px solid #ececec; padding-bottom: 6px; }
.ptab { position: relative; background: #f1f1ef; border: 1px solid #e4e3e0; color: #54524d; border-radius: 8px 8px 0 0; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.ptab.active { background: linear-gradient(135deg, #2fae7a, #1f9d6b); border-color: #1f9d6b; color: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(31,157,107,.35); }
.ptab.editing { box-shadow: 0 0 0 2px #f0c070 inset; }
.ptab-del { margin-left: 6px; background: #e0524d; color: #fff; border-radius: 50%; padding: 0 5px; font-size: 11px; }
.ptab-add { background: transparent; border: 1px dashed #a9d9c4; color: #1f9d6b; border-radius: 6px; padding: 5px 10px; font-size: 13px; cursor: pointer; }
.ptab-edit { background: transparent; border: none; color: #8a8a86; font-size: 12px; cursor: pointer; padding: 5px 8px; }
.ptab-edit.active { background: #ffe9c7; color: #7a5b00; border-radius: 6px; }
/* リマインド */
.rem-form { display: flex; flex-direction: column; gap: 8px; }
.rem-row2 { display: flex; align-items: center; gap: 8px; }
.rem-row2 > label { min-width: 72px; color: #6b6b6b; font-size: 13px; flex-shrink: 0; white-space: nowrap; }
.side-rem-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #e0524d; margin-left: 5px; flex-shrink: 0; }
.rem-day { display: inline-flex; align-items: center; gap: 2px; margin-right: 8px; font-size: 14px; }
.rem-row { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid #eee; }
.rem-row.off { opacity: .5; }
.rem-main { flex: 1; min-width: 0; }
.rem-text { font-size: 14px; }
.rem-when { font-size: 12px; color: #1f9d6b; }
.rem-toggle { border: 1px solid #d9d8d4; background: #fff; border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.rem-row:not(.off) .rem-toggle { background: #eafaf2; border-color: #a9d9c4; color: #1f9d6b; font-weight: 600; }
.rem-edit { border: none; background: transparent; color: #1f9d6b; cursor: pointer; font-size: 14px; padding: 0 4px; }
.rem-edit-form { display: flex; flex-direction: column; gap: 8px; background: #f6faf8; border: 1px solid #cdeadd; border-radius: 10px; padding: 12px; margin: 6px 0; }
.rem-edit-btns { display: flex; gap: 8px; }
.rem-cancel { border: 1px solid #d9d8d4; background: #fff; color: #666; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.rem-del { border: none; background: transparent; color: #c0392b; cursor: pointer; font-size: 14px; padding: 0 4px; }
.rem-page { color: #6b6b6b; }
.side-rem { margin-left: 4px; font-size: 12px; }
/* リマインドカード（右上・折りたたみ可） */
#rem-cards { position: fixed; top: 60px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; width: 300px; max-width: 80vw; }
.rem-card { background: #fff; border: 1px solid #cdeadd; border-left: 4px solid #1f9d6b; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.16); overflow: hidden; }
.rem-card-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #f6faf8; cursor: pointer; }
.rem-card-title { flex: 1; font-size: 13px; font-weight: 600; color: #1f7d57; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rem-card-fold, .rem-card-close { border: none; background: transparent; cursor: pointer; font-size: 13px; color: #888; padding: 0 4px; }
.rem-card-close:hover { color: #c0392b; }
.rem-card-body { padding: 10px 12px; font-size: 14px; color: #333; white-space: pre-wrap; }
.rem-card.folded .rem-card-body { display: none; }
@media (max-width: 700px) { #rem-cards { top: 52px; right: 8px; width: 260px; } }
/* 時刻フィールド＆ホイールピッカー */
.time-field { text-align: left; cursor: pointer; }
.tw-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.tw-card { background: #fbfaf3; border-radius: 18px; padding: 18px 20px; width: 340px; max-width: 90vw; box-shadow: 0 20px 55px rgba(0,0,0,.3); }
.tw-head { display: flex; align-items: center; gap: 12px; }
.tw-title { font-size: 18px; font-weight: 700; color: #1f5b4e; flex: 1; }
.tw-save { background: #2c5c53; color: #fff; border: none; border-radius: 12px; padding: 10px 22px; font-size: 15px; font-weight: 600; cursor: pointer; }
.tw-sep { border-top: 1px dashed #c9c6ba; margin: 14px 0; }
.tw-wheel-wrap { position: relative; height: 230px; overflow: hidden; }
.tw-band { position: absolute; left: 6px; right: 6px; top: 92px; height: 46px; background: #edefe8; border: 1px solid #d7d8c9; border-radius: 12px; pointer-events: none; }
.tw-wheel { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; text-align: center; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tw-wheel::-webkit-scrollbar { display: none; }
.tw-item { scroll-snap-align: center; font-size: 22px; color: #bcbaad; transition: color .1s, font-size .1s; }
.tw-item.sel { color: #20362f; font-weight: 700; font-size: 27px; }
.tbl-block { margin: 10px 0; overflow-x: auto; }
.mini-table { border-collapse: collapse; width: 100%; }
.mini-table th, .mini-table td { border: 1px solid #d9d8d4; padding: 6px 10px; text-align: left; vertical-align: top; min-width: 60px; }
.mini-table th { background: #f4f4f2; font-weight: 600; }
.tbl-tools { display: flex; gap: 6px; margin-top: 4px; }
.tbl-tools button { font-size: 0.8em; padding: 3px 8px; border: 1px solid #e4e3e0; border-radius: 6px; background: #fff; color: #555; cursor: pointer; }
.tbl-tools button:active { background: #eee; }
.file-chip {
  display: inline-flex; align-items: center; gap: 4px; background: #f1f1ef;
  border: 1px solid #e4e3e0; border-radius: 6px; padding: 3px 10px; font-size: 13px;
  color: #37352f; text-decoration: none; margin: 2px 0;
}
.file-chip:hover { background: #e9e9e7; }
.page-link {
  background: #eef4fb; color: #2383e2; border-radius: 5px; padding: 1px 6px;
  text-decoration: none; font-weight: 500; cursor: pointer;
}
.page-link:hover { background: #ddebf9; }
.page-link:active { background: #c3dcf5; }

/* ===== 次のレッスン（時間割・2列） ===== */
.sched-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.sched-col { min-width: 0; }
.sched-col-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sched-col-title {
  font-size: 16px; font-weight: 700; background: #fdeee4; color: #6b4a2a;
  border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; flex: 1; min-width: 0;
}
.sched-col-title:focus { outline: none; border-color: #d9730d; background: #fff; }
.sched-col-note {
  width: 100%; border: 1px solid #ececeb; border-radius: 6px; padding: 6px 8px;
  font-size: 13px; color: #6b6a66; margin-bottom: 12px; resize: vertical; font-family: inherit;
}
.sched-col-note:focus { outline: none; border-color: #2383e2; }
.sched-col-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 760px) { .sched-cols { grid-template-columns: 1fr; } }

.sched-date { margin-bottom: 18px; }
.sched-date-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.sd-mark { color: #c0504d; font-weight: 700; }
.sched-date-input {
  font-size: 17px; font-weight: 700; color: #c0504d; border: 1px solid transparent;
  border-radius: 6px; padding: 3px 8px; background: transparent; flex: 1; max-width: 320px;
}
.sched-date-input:hover { background: #fdf6f6; }
.sched-date-input:focus { outline: none; border-color: #c0504d; background: #fff; }

.sched-slot { margin: 4px 0 10px 6px; }
.sched-slot-head { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.sched-slot-input {
  font-size: 14px; font-weight: 600; color: #2f7d4a; border: 1px solid transparent;
  border-radius: 6px; padding: 2px 6px; background: transparent; max-width: 200px;
}
.sched-slot-input:hover { background: #f1f7f1; }
.sched-slot-input:focus { outline: none; border-color: #2f7d4a; background: #fff; }

.sched-entry { display: flex; align-items: center; gap: 6px; padding: 2px 0 2px 18px; flex-wrap: wrap; }
.sched-entry input { border: 1px solid transparent; border-radius: 5px; padding: 3px 6px; font-size: 14px; background: transparent; }
.sched-entry input:hover { background: #f4f4f2; }
.sched-entry input:focus { outline: none; border-color: #2383e2; background: #fff; }
.se-grade { width: 42px; }
.se-name { width: 92px; }
.se-cls { width: 52px; }
.se-extra { width: 68px; }
.se-status { width: 96px; color: #c0504d; }
.sched-entry { gap: 3px; padding-left: 14px; }
.sched-entry input { font-size: 13px; padding: 3px 4px; }

.mini-del { border: none; background: transparent; color: #b3b2af; cursor: pointer; font-size: 13px; border-radius: 4px; padding: 2px 6px; }
.mini-del:hover { background: #f8e3e3; color: #a23b3b; }
.sched-add { display: inline-block; color: #9b9a97; font-size: 13px; cursor: pointer; padding: 4px 10px; border-radius: 6px; margin: 2px 0 2px 18px; }
.sched-add:hover { background: #ececeb; color: #54524d; }
.sched-bottom { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }

/* スラッシュコマンド・メニュー */
.slash-menu {
  display: none; position: fixed; z-index: 100;
  background: #fff; border: 1px solid #e4e3e0; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; width: 220px;
  max-height: 280px; overflow-y: auto;
}
.slash-menu { padding: 4px; }
.slash-item {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 8px; border-radius: 6px; font-size: 14px; cursor: pointer; color: #37352f;
}
.slash-item:hover, .slash-item.sel { background: #eef2f6; }
.slash-ico {
  width: 20px; height: 20px; border: 1px solid #e4e3e0; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0;
}
.bm-sec { font-size: 11px; color: #9b9a97; font-weight: 600; padding: 8px 10px 3px; }
.bm-group {
  display: flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px;
  font-size: 14px; cursor: pointer; color: #37352f; font-weight: 500;
}
.bm-group:hover { background: #eef2f6; }
.bm-tri { width: 12px; color: #9b9a97; font-size: 10px; }
#block-handle {
  display: none; position: fixed; z-index: 55; width: 18px; text-align: center;
  color: #c4c3c0; cursor: pointer; font-size: 14px; line-height: 1.5; letter-spacing: -2px;
  border-radius: 4px; user-select: none;
}
#block-handle:hover { background: #ececeb; color: #6b6a66; }
#block-handle { cursor: grab; }
#drop-line { display: none; position: fixed; height: 3px; background: #2383e2; border-radius: 2px; z-index: 56; pointer-events: none; }
.bm-children { display: none; padding-left: 16px; }
.bm-groupwrap.open .bm-children { display: block; }

.main-area { flex: 1; min-width: 0; }

/* ===== 上のバー ===== */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 24px; border-bottom: 1px solid #ececeb;
}
.crumbs { color: #6b6a66; font-size: 14px; }
#sync-status { margin-left: auto; font-size: 12.5px; color: #2f7d4a; }
#nav-toggle { display: none; border: none; background: transparent; font-size: 20px; cursor: pointer; color: #54524d; padding: 2px 8px; border-radius: 6px; }
#nav-toggle:hover { background: #ececeb; }
#nav-scrim { display: none; }

/* ===== 本文 ===== */
.container { max-width: 820px; margin: 0 auto; padding: 32px 24px 80px; }
.page-title { font-size: 34px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.page-icon { font-size: 32px; cursor: pointer; line-height: 1; border-radius: 6px; padding: 2px; }
.page-icon:hover { background: #ececeb; }
.page-title-text { outline: none; border-radius: 4px; padding: 0 4px; }
.page-title-text:focus { background: #f4f4f2; }
.page-title-text:empty:before { content: "無題"; color: #c4c3c0; }
.banner {
  background: #fff8e6; border: 1px solid #f3e3b3; color: #7a6326;
  border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 24px;
}
.day-title { font-size: 22px; font-weight: 600; margin-bottom: 12px; }

/* ===== テーブル ===== */
.student-table { width: 100%; border-collapse: collapse; }
.student-table th {
  text-align: left; font-size: 13px; color: #9b9a97; font-weight: 500;
  padding: 8px 12px; border-bottom: 1px solid #ececeb; white-space: nowrap;
}
.student-table td { padding: 10px 12px; border-bottom: 1px solid #ececeb; font-size: 14px; }
.row { cursor: pointer; }
.row:hover { background: #f7f7f5; }
.row.selected { background: #eaf3fb; box-shadow: inset 3px 0 0 #2383e2; }
.row-name { font-weight: 500; }
.row-confirm { color: #6b6a66; font-size: 13px; }

/* バッジ・タグ */
.class-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 4px;
  font-size: 12px; font-weight: 600; margin-right: 6px; white-space: nowrap;
}
.class-A { background: #f4dfeb; color: #7a3a5e; }
.class-B { background: #d3e5ef; color: #1c4f73; }
.class-C { background: #dbeddb; color: #2f5a37; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; margin-right: 4px; }
.tag-blue { background: #d3e5ef; color: #1c4f73; }
.tag-beige { background: #f3eee3; color: #7a6a43; }
.tag-yellow { background: #faf0d1; color: #806b1f; }
.tag-green { background: #dbeddb; color: #2f5a37; }
.tag-red { background: #fbe4e4; color: #a23b3b; }

.lesson-num { background: #d3e5ef; color: #1c4f73; padding: 2px 9px; border-radius: 4px; font-size: 13px; }
.empty { color: #b3b2af; font-size: 13px; }
.hint { color: #9b9a97; font-size: 13px; margin-top: 14px; }
#add-student {
  cursor: pointer; display: inline-block; padding: 6px 12px; border-radius: 6px;
  transition: background .12s, transform .05s; user-select: none;
}
#add-student:hover { background: #f1f1ef; color: #54524d; }
#add-student:active { background: #e6e6e4; transform: scale(.98); }

/* ===== 詳細パネル（右からスライド） ===== */
.scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.15);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 15;
}
.scrim.open { opacity: 1; pointer-events: auto; }

.detail {
  position: fixed; top: 0; right: 0; height: 100vh;
  width: 50%; max-width: 660px; background: #fff;
  border-left: 1px solid #ececeb; box-shadow: -8px 0 24px rgba(0,0,0,.06);
  transform: translateX(100%); transition: transform .22s ease;
  overflow-y: auto; z-index: 20;
}
.detail.open { transform: translateX(0); }
.detail-top {
  height: 44px; display: flex; align-items: center; padding: 0 18px;
  border-bottom: 1px solid #ececeb;
}
.detail-close { cursor: pointer; color: #6b6a66; font-size: 14px; }
.detail-close:hover { color: #37352f; }
.detail-body { padding: 24px 36px 60px; }

.detail-name { font-size: 28px; font-weight: 700; }
.detail-sub { color: #8a8984; font-size: 13px; margin: 4px 0 20px; }

.prop { display: flex; align-items: flex-start; margin-bottom: 11px; }
.prop-key { width: 130px; color: #9b9a97; font-size: 13.5px; flex-shrink: 0; }
.prop-val { font-size: 14px; }

.divider { border-top: 1px solid #ececeb; margin: 20px 0; }
.goal { color: #a23b3b; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.info-box {
  background: #f1f7f1; border-radius: 8px; padding: 12px 14px; margin-bottom: 22px;
}
.info-line { color: #3f6b46; font-size: 13px; line-height: 1.7; }

.reports-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.report-item { border-left: 3px solid #ececeb; padding: 2px 0 2px 14px; margin-bottom: 18px; }
.report-date { font-weight: 600; font-size: 13px; color: #6b6a66; margin-bottom: 4px; }
.report-progress { font-size: 13px; color: #1c4f73; margin-bottom: 4px; }
.report-note { font-size: 13.5px; line-height: 1.75; color: #37352f; }

/* ===== 編集用の入力欄 ===== */
.edit-input {
  font-family: inherit; font-size: 14px; color: #37352f;
  border: 1px solid transparent; border-radius: 5px;
  padding: 3px 7px; background: transparent; width: 100%;
}
.edit-input:hover { background: #f4f4f2; }
.edit-input:focus { outline: none; border-color: #2383e2; background: #fff; }
.edit-num { width: 80px; }
.goal-edit { margin-bottom: 14px; }
.goal-label { color: #a23b3b; font-weight: 700; font-size: 14px; margin-bottom: 5px; }
.goal-input { width: 100%; color: #a23b3b; font-weight: 700; font-size: 15px; }

.new-report {
  background: #f7f7f5; border: 1px dashed #d3d2cf; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px;
}
.new-report-title { font-size: 13px; font-weight: 600; color: #6b6a66; margin-bottom: 2px; }
.new-report .edit-input { background: #fff; border-color: #e4e3e0; }
.nr-row { display: flex; align-items: center; gap: 10px; }
.nr-row-top { align-items: flex-start; }
.nr-label {
  width: 76px; flex-shrink: 0; font-size: 13px; color: #6b6a66; font-weight: 500;
  padding-top: 4px;
}
.add-btn {
  align-self: flex-start; margin-top: 4px;
  background: #2383e2; color: #fff; border: none;
  padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.add-btn:hover { background: #1b6dc0; }

/* 保存しましたトースト */
#saved-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #2f7d4a; color: #fff; padding: 8px 18px; border-radius: 20px;
  font-size: 13px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 40;
}
#saved-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 編集：基本情報 ===== */
.detail-name.edit-input { font-size: 28px; font-weight: 700; padding: 2px 6px; margin-bottom: 4px; }
.detail-sub-edit { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.detail-sub-edit .edit-input { font-size: 12.5px; color: #8a8984; width: auto; flex: 1; min-width: 80px; }
.prop-class { display: flex; gap: 6px; }
.cls-input { width: 60px; }
.cls-input2 { width: 110px; }
.prop-tags { margin-top: 4px; }
.info-edit { margin-bottom: 22px; }
.info-area { background: #f1f7f1; border-color: #d7e6d7; line-height: 1.7; resize: vertical; }

/* ===== レポート編集・削除 ===== */
.report-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.rep-date { width: 90px; font-weight: 600; color: #6b6a66; font-size: 13px; }
.rep-line { display: flex; align-items: center; gap: 6px; }
.rep-ico { font-size: 12.5px; color: #1c4f73; white-space: nowrap; }
.rep-line .edit-input { font-size: 13px; color: #1c4f73; }
.rep-note { font-size: 13.5px; line-height: 1.7; color: #37352f; resize: vertical; }

.del-btn {
  border: 1px solid #e4cfcf; background: #fdf3f3; color: #a23b3b;
  border-radius: 5px; font-size: 12px; padding: 2px 8px; cursor: pointer; flex-shrink: 0;
}
.del-btn:hover { background: #f8e3e3; }

/* 期間削除（開閉ボタン） */
.toggle-del {
  display: inline-block; margin-bottom: 12px;
  background: #fff; border: 1px solid #e4cfcf; color: #a23b3b;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; cursor: pointer;
}
.toggle-del:hover { background: #fdf6f6; }
.period-del {
  background: #fdf6f6; border: 1px dashed #e4cfcf; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 22px; display: flex; flex-direction: column; gap: 6px;
}
.period-del .edit-input { background: #fff; border-color: #e8d4d4; }
.del-range-btn {
  align-self: flex-start; margin-top: 4px;
  background: #c0504d; color: #fff; border: none;
  padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.del-range-btn:hover { background: #a83f3c; }

/* スマホ対応 */
@media (max-width: 700px) {
  .layout { display: block; }
  /* 一覧（サイドバー）が基本画面。ページは右から全画面でスライドイン */
  .sidebar { position: static; width: 100%; min-height: 100vh; height: auto; align-self: auto; }
  #side-nav { display: flex; flex-direction: column; flex: 1; }
  .main-area {
    position: fixed; inset: 0; background: #fff; z-index: 70; overflow-y: auto;
    display: none;   /* スライドなし。表示/非表示で切り替え */
  }
  .layout.show-content .main-area { display: block; }
  #nav-toggle { display: inline-flex; align-items: center; font-size: 16px; }
  #nav-scrim { display: none; }
  .detail { width: 100%; max-width: none; }
  .container { padding: 20px 14px 60px; }

  /* スマホは文字を約1.2倍に */
  .side-item, .side-add, .side-sec, .side-version { font-size: 16.5px; }
  .side-ico { font-size: 17px; }
  .page-editor { font-size: 18px; }
  .page-title { font-size: 30px; }
  .crumbs { font-size: 15px; }
  .row-name, .student-table td, .student-table th { font-size: 15.5px; }
  .day-title { font-size: 21px; }
  .detail-name { font-size: 26px; }
  .prop-key, .prop-val, .report-note { font-size: 15px; }
  .editor-toolbar .tb-back, .editor-toolbar .tb-done { display: inline-flex; align-items: center; }
}

/* タッチ端末：ホバーで2回タップになる問題を防ぐ */
@media (hover: none) {
  .side-item:hover, .slash-item:hover, .bm-group:hover, .day-tab:hover { background: transparent; }
  .side-item.active { background: #e6e6e4; }
  .side-item .side-actions { display: none !important; }   /* ＋／× を出さない＝1タップで開く */
  .student-table th:nth-child(4), .student-table td:nth-child(4),
  .student-table th:nth-child(5), .student-table td:nth-child(5) { display: none; }
}