/* ===== 全体 ===== */
* { 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;
}
/* スマホ横向きロック（縦向き推奨の案内） */
#rotate-lock { display: none; }
@media (max-width: 900px) and (orientation: landscape) {
#rotate-lock {
display: flex; flex-direction: column; align-items: center; justify-content: center;
position: fixed; inset: 0; z-index: 100000; background: #fff; text-align: center; gap: 14px;
padding: 20px;
}
.rotate-emoji { font-size: 54px; }
.rotate-msg { font-size: 18px; color: #2f2e2b; }
.rotate-msg b { color: #1f9d6b; }
}
/* アプリ ヘッダー（PC・スマホ共通の上部バー） */
#app-header {
display: flex; align-items: center; gap: 10px;
position: sticky; top: 0; z-index: 60;
background: #fff; border-bottom: 1px solid #ececeb; padding: 9px 18px;
}
.app-header-logo { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; }
.app-header-title { font-size: 18px; font-weight: 700; color: #1b1b1b; letter-spacing: .2px; }
.app-header-plus { color: #F7B900; }
#app-menu-btn { margin-left: auto; border: none; background: transparent; font-size: 22px; line-height: 1; color: #3a3a3a; padding: 4px 10px; cursor: pointer; border-radius: 8px; }
#app-menu-btn:hover { background: #f2f1ef; }
/* ヘッダーメニュー（コンテンツの高さのドロップダウン） */
#app-menu-scrim { display: none; position: fixed; inset: 0; background: transparent; z-index: 310; }
#app-menu {
position: fixed; top: 56px; right: 12px; z-index: 320; width: 210px;
background: #fff; border: 1px solid #efeee9; border-radius: 18px;
box-shadow: 0 14px 38px rgba(0,0,0,.16); padding: 8px;
transform-origin: top right; transform: scale(.95); opacity: 0; pointer-events: none;
transition: transform .16s ease, opacity .16s ease;
}
#app-menu.open { transform: scale(1); opacity: 1; pointer-events: auto; }
.am-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px; margin-bottom: 4px; border-bottom: 1px solid #f0efec; font-size: 15px; font-weight: 700; color: #1b1b1b; }
.am-logo { border-radius: 5px; flex-shrink: 0; }
.am-item {
display: block; text-align: left; padding: 12px 14px; margin: 2px 0;
font-size: 15px; font-weight: 600; color: #5a5751; letter-spacing: .02em;
border-radius: 12px; cursor: pointer; transition: background .12s, color .12s;
}
.am-item:hover, .am-item:active { background: #fef4d9; color: #b07d00; }
/* 使い方モーダル */
#help-modal { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; padding: 16px; }
.help-card { background: #fff; border-radius: 16px; width: 100%; max-width: 440px; max-height: 82vh; overflow-y: auto; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.help-top { position: sticky; top: 0; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; border-bottom: 1px solid #f0efec; font-size: 17px; }
#help-close { cursor: pointer; color: #9b9a97; font-size: 18px; padding: 2px 6px; }
.help-body { padding: 8px 18px 20px; }
.help-body h4 { margin: 14px 0 4px; font-size: 14px; color: #1f9d6b; }
.help-body p { margin: 0; font-size: 14px; color: #4a4945; line-height: 1.7; }
/* スマホ下部の検索バー */
#mobile-search { display: none; }
svg.ms-ico { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: #8a8a86; stroke-width: 2; stroke-linecap: round; margin-left: 4px; }
#mobile-search #ms-input {
flex: 1; border: none; background: #f1f1ef; border-radius: 22px;
font-size: 16px; padding: 11px 16px; outline: none; color: #2f2e2b;
}
#mobile-search #ms-input:focus { background: #ebeae8; }
#ms-clear, #ms-new { border: none; background: transparent; font-size: 19px; cursor: pointer; padding: 6px; color: #6b6a66; }
#ms-results { display: none; }
.ms-result { padding: 11px 14px; border-bottom: 1px solid #f1f1ef; cursor: pointer; }
.ms-result:active { background: #f2f1ef; }
.ms-r-title { font-size: 15px; color: #2f2e2b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-r-snip { font-size: 12.5px; color: #9b9a97; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-empty { padding: 18px; text-align: center; color: #9b9a97; font-size: 14px; }
/* ログイン画面の閉じるボタン */
.login-card { position: relative; }
#login-close { position: absolute; top: 10px; right: 14px; font-size: 18px; color: #9b9a97; cursor: pointer; }
/* ＋から開く編集ポップアップ（スクロール可・選択に効く） */
#edit-pop {
display: none; position: fixed; left: 12px; right: 12px; z-index: 390;
background: #fff; border: 1px solid #e4e3e0; border-radius: 16px;
box-shadow: 0 12px 40px rgba(0,0,0,.22); padding: 12px 14px;
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#edit-pop .ep-label { font-size: 11px; font-weight: 700; color: #9b9a97; margin: 12px 0 6px; }
#edit-pop .ep-label:first-child { margin-top: 0; }
#edit-pop .ep-row { display: flex; gap: 8px; flex-wrap: wrap; }
#edit-pop .ep-row button {
border: 1px solid #e4e3e0; background: #fff; border-radius: 9px;
padding: 12px 14px; font-size: 15px; color: #37352f; cursor: pointer; line-height: 1;
}
#edit-pop .ep-row button:active { background: #f1f1ef; }
#edit-pop .ep-colors { display: flex; gap: 8px; flex-wrap: wrap; }
#edit-pop .ep-sw {
width: 40px; height: 40px; border: 1px solid #e4e3e0; border-radius: 10px; background: #fff;
font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
#edit-pop .ep-sw:active { transform: scale(.92); }
#edit-pop .ep-hl { font-weight: 700; color: #37352f; font-size: 14px; }
/* 編集中の「キーボードを閉じる」ボタン（右側・テキストに被らない） */
#kb-close { display: none; }
@media (max-width: 700px) {
body.kb-editing #kb-close {
display: flex; align-items: center; justify-content: center;
position: fixed; left: 14px; z-index: 300; width: 48px; height: 48px; border-radius: 50%;
background: #fff; color: #37352f; border: 1px solid #dcdbd7;
padding: 0; /* 矢印はSVGなので数値どおり円の中心に乗る */
cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
body.kb-editing #kb-close svg { display: block; }
body.kb-editing #kb-close:active { background: #f1f1ef; }
}
/* 更新お知らせ（画面下部のボタン・グラデーション） */
#update-bar {
position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200;
align-items: center; gap: 8px; cursor: pointer;
background: linear-gradient(135deg, #7c3aed 0%, #2383e2 55%, #06b6d4 100%);
color: #fff; padding: 12px 24px; font-size: 16px; font-weight: 600;
border-radius: 26px; box-shadow: 0 6px 20px rgba(35, 131, 226, .45);
}
#update-bar:hover { filter: brightness(1.08); }
#update-bar .uv { font-weight: 700; }
.update-btn {
background: #fff; color: #2383e2; border: none; border-radius: 8px;
padding: 8px 18px; font-size: 15px; font-weight: 700; 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: 47px; align-self: flex-start; /* ヘッダーの下に固定 */
height: calc(100vh - 47px); overflow-y: auto;
}
#side-nav { display: flex; flex-direction: column; flex: 1; }
.side-top { display: none; }
.grp-menu { display: none; position: fixed; z-index: 10001; background: #fff; border: 1px solid #e4e3e0; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 6px; width: 180px; max-height: 90vh; overflow-y: auto; }
.grp-menu-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #37352f; }
.grp-menu-item:hover { background: #f1f1ef; }
.grp-menu-item.danger { color: #c0392b; }
.gm-ico { width: 18px; text-align: center; }
.side-divider .act-menu { font-size: 18px; font-weight: 700; letter-spacing: 1px; color: #9b9a97; opacity: 1; }
.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: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; color: #54524d; line-height: 1.45; font-weight: 600;
}
.side-item:hover { background: #ececeb; }
.side-item.active { background: #e6e6e4; font-weight: 700; color: #37352f; }
.side-tri { width: 18px; height: 22px; flex-shrink: 0; position: relative; }
.side-tri::before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-style: solid; border-color: #b8b7b3; border-width: 0 2px 2px 0; }
.side-tri.expanded::before { transform: translate(-50%, -65%) rotate(45deg); }
.side-tri.collapsed::before { transform: translate(-65%, -50%) rotate(-45deg); }
.side-tri.empty::before { display: none; }
.side-tri:hover::before { border-color: #8a8986; }
.side-tri:hover { color: #37352f; }
.side-ico { width: 18px; text-align: center; flex-shrink: 0; }
/* サイドバー下部のSVGアイコン（設定・リマインド・検索）。線の太さ・色は文字に合わせる */
.side-svg { width: 17px; height: 17px; display: block; margin: 0 auto; color: #7b7a77; }
.side-item:hover .side-svg, .side-item.active .side-svg { color: #37352f; }
.side-label { flex: 1; min-width: 0; 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: 6px 8px 6px; margin-top: 8px; border-top: 1px solid #ececec;
}
.side-divider-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #9b9a97; }
.side-divider { cursor: pointer; align-items: center; line-height: 1.2; }
.grp-logo { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.grp-logo.letter { color: #fff; font-weight: 700; font-size: 13px; }
.grp-logo.emoji { background: #f0efec; font-size: 16px; }
.grp-logo.img { background-size: cover; background-position: center; }
.grp-name { flex: 1; font-weight: 700; font-size: 15px; color: #37352f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 2px; }
.side-divider.nested { border-top: none; margin-top: 5px; padding-top: 5px; }
.side-divider.nested .grp-name { font-size: 14px; }
.side-divider.drop-inside { background: #d7e9fb; border-radius: 8px; box-shadow: inset 0 0 0 2px #2383e2; }
.side-tri.small { width: 18px; height: 16px; }
.side-tri.small::before { width: 6px; height: 6px; border-width: 0 2px 2px 0; }
.div-lock { font-size: 12px; margin-left: 4px; }
.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-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; }
/* アプリ フッター（サイドバー最下部） */
.app-footer {
display: flex; align-items: center; gap: 8px;
margin-top: 14px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid #ececeb;
}
.app-footer-logo { width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0; opacity: .95; }
.app-footer-text { display: flex; flex-direction: column; line-height: 1.35; }
.af-made { font-size: 11.5px; color: #9b9a97; }
.af-made b { color: #6b6a66; font-weight: 700; }
.af-ver { font-size: 10.5px; color: #b3b2af; }
.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-inside { background: #d7e9fb; box-shadow: inset 0 0 0 2px #2383e2; border-radius: 8px; }
/* ===== サイドバーのドラッグ移動（Notion風の挿入ライン） ===== */
#side-nav { position: relative; }
#side-drop-line {
position: absolute; height: 3px; background: #2383e2; border-radius: 2px;
pointer-events: none; z-index: 30; display: none;
}
#side-drop-line::before {
content: ""; position: absolute; left: -6px; top: -2.5px;
width: 8px; height: 8px; box-sizing: border-box;
border: 2px solid #2383e2; border-radius: 50%; background: #fff;
}
.side-item.sd-dragging, .side-divider.sd-dragging, .side-note.sd-dragging { opacity: .4; }
.sd-ghost {
position: fixed; z-index: 10050; pointer-events: none;
background: #fff; border: 1px solid #dcdbd7; border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.2); padding: 6px 12px;
font-size: 14px; color: #37352f; max-width: 70vw;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 長押し中にiOSの選択メニューが出ないように */
.side-item, .side-divider, .side-note { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* 曜日タブ（横川レポート内） */
.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 5px; font-size: 16px; line-height: 1; }
.editor-toolbar .tb-hl { width: 28px; padding: 4px 0; font-size: 12px; font-weight: 700; line-height: 1; color: #37352f; text-align: center; }
.editor-toolbar .tb-hl:hover { filter: brightness(.96); }
.editor-toolbar .tb-insert { background: #2383e2; color: #fff; border-color: #2383e2; font-weight: 600; }
.editor-toolbar .tb-insert:hover { background: #1b6dc0; }
.editor-toolbar .tb-done { display: none; } /* スマホのみ表示（戻す/やり直すはPCでも表示） */
.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; }
.editor-toolbar .tb-palette { font-weight: 600; }
/* 色パレット（まとめてタップで選ぶ） */
.color-pop { position: fixed; z-index: 360; background: #fff; border: 1px solid #e4e3e0; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 10px 12px; width: 258px; }
.cp-label { font-size: 11px; color: #9b9a97; font-weight: 700; margin: 2px 0 6px; }
.cp-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cp-sw { width: 30px; height: 30px; border: 1px solid #e4e3e0; border-radius: 8px; background: #fff; cursor: pointer; font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.cp-sw:active { transform: scale(.92); }
.cp-hl { font-weight: 700; color: #37352f; font-size: 13px; }
.cp-clear { color: #b3b2af; }
.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（改行
）＝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; } }
/* 設定のアコーディオン */
.set-acc { margin-top: 10px; border: 1px solid #ececeb; border-radius: 8px; background: #fafafa; }
.set-acc > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; color: #37352f; user-select: none; }
.set-acc[open] > summary { border-bottom: 1px solid #ececeb; }
.set-acc > *:not(summary) { margin: 8px 12px; }
.set-acc-card > .set-sum { cursor: pointer; font-size: 15px; font-weight: 700; color: #37352f; padding: 2px 0 6px; user-select: none; }
/* ===== ToDo =====
★チェックボックスは「本文の中の要素」ではなく、CSSで描くだけ（::before）。
contenteditable の中に contenteditable="false" の要素を置くと、ブラウザが勝手に
複製・移動したり、選択しても消えなかったりする（＝「消しても出る」「他の行に出る」の原因）。
DOMに存在しなければ、消えない・増えない・動かない。行は素の 文字
だけ。 */
/* ★チェックボックスは position: absolute で「行の外」に浮かせる。
行の中に流す（inline-block）と、カーソルが行の先頭(x=0)に置かれたときに
チェックボックスの上に重なってしまう。
absolute なら文字は padding-left の分だけ右から始まるので、カーソルは必ずその右に出る。
・折り返した2行目以降も字下げされる（ぶら下げインデント）
・行の外にあるので、チェック済みの取り消し線も四角を横切らない */
.todo { position: relative; padding-left: 32px; margin: 4px 0; }
.todo::before {
content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; box-sizing: border-box;
border: 2px solid #37352f; /* 細い線・文字と同じ濃さ */
border-radius: 3px; /* 角はほんの少しだけ丸める */
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
text-decoration: none;
}
.todo:hover::before { border-color: #000; }
.todo-done::before { content: "✓"; background: #2383e2; border-color: #2383e2; }
.todo-done { text-decoration: line-through; }
.todo-done, .todo-done * { color: #9b9a97 !important; } /* チェック済みはグレー（色付き文字も上書き） */
/* 旧データに残っている span は表示しない（保存時に自動で取り除かれる） */
.todo-check { display: none !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; }
/* 同期枠（同じIDの枠は中身を共有） */
.sync-block { position: relative; border: 1.5px solid #dbe8e2; background: #f6fbf9; border-radius: 10px; margin: 10px 0; }
.sync-head { position: absolute; top: 6px; right: 8px; display: flex; align-items: center; gap: 4px; opacity: .4; user-select: none; transition: opacity .15s; }
.sync-block:hover .sync-head { opacity: 1; }
.sync-copy, .sync-del { border: none; background: transparent; font-size: 12px; padding: 2px 6px; cursor: pointer; color: #6f7d76; border-radius: 6px; }
.sync-copy:hover, .sync-del:hover { background: #e7f1ec; }
.sync-del { color: #b06b6b; }
.sync-body { padding: 12px 13px; min-height: 26px; outline: none; }
.sync-body:focus { background: #fbfffd; }
/* ページ内タブ */
.page-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 8px; border-bottom: 1px solid #ececec; padding: 6px 0; }
.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-dragging { opacity: .45; }
.ptab-drop { box-shadow: -3px 0 0 #1f9d6b; }
.ptab-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: 1.5px solid #fff; padding: 0; margin: 0; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ptab-del:hover { background: #c0392b; }
.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 .tbl-del { color: #c0392b; border-color: #f0c9c9; }
@media (max-width: 700px) { .tbl-tools { gap: 8px; flex-wrap: wrap; } .tbl-tools button { font-size: 14px; padding: 8px 14px; } }
.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; }
/* スラッシュコマンド・メニュー */
#block-menu { z-index: 380 !important; } /* 丸ボタン(300)・キーボードより前面に */
.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; min-width: 22px; text-align: center;
color: #a9a8a4; cursor: pointer; font-size: 17px; line-height: 1.4; letter-spacing: -2px;
padding: 3px 6px; border-radius: 5px; user-select: none;
}
#block-handle:hover { background: #ececeb; color: #4b4a46; }
#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 .nt-ar { font-size: 1.1em; line-height: 1; display: inline-block; transform: translateY(-1px); }
#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; }
/* ===== テーブル ===== */
/* レポートは折り返さず横スクロール */
.report-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.student-table { width: 100%; border-collapse: collapse; }
.report-scroll .student-table { width: max-content; min-width: 100%; }
.student-table th, .student-table td { white-space: nowrap; }
.student-table .row-confirm { white-space: nowrap; }
.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 .16s 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: 2px 0 10px; }
.prop { display: flex; align-items: flex-start; margin-bottom: 5px; }
.prop-key { width: 130px; color: #9b9a97; font-size: 13.5px; flex-shrink: 0; }
.prop-val { font-size: 14px; flex: 1; min-width: 0; } /* 値の欄は右端まで使う（横に途切れない） */
.divider { border-top: 1px solid #ececeb; margin: 20px 0; }
.goal { color: #a23b3b; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.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: 7px; }
.goal-label { color: #a23b3b; font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.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; }
/* ログイン画面 */
#login-overlay {
position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px;
background: radial-gradient(120% 90% at 50% -10%, #ffe9a8 0%, #fdf6e6 42%, #f5f7f4 100%);
}
.login-card {
background: #fff; width: 350px; max-width: 92vw; border-radius: 22px;
box-shadow: 0 24px 60px rgba(120,90,0,.16), 0 2px 8px rgba(0,0,0,.05);
padding: 30px 26px 26px; display: flex; flex-direction: column; gap: 12px;
border: 1px solid #f4efe0;
}
.login-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 6px; }
.login-logo-img { width: 66px; height: 66px; border-radius: 16px; box-shadow: 0 8px 22px rgba(247,185,0,.35); }
.login-brand { font-size: 26px; font-weight: 800; color: #1b1b1b; letter-spacing: .3px; margin-top: 10px; }
.login-plus { color: #F7B900; }
.login-sub { font-size: 13px; color: #9b8f6b; }
.login-card h2 { font-size: 16px; font-weight: 700; margin: 4px 0 2px; color: #55503f; text-align: center; }
.login-card input { border: 1.5px solid #ece7d8; border-radius: 12px; padding: 13px 15px; font-size: 16px; background: #fcfbf7; transition: border-color .15s, background .15s; }
.login-card input:focus { outline: none; border-color: #F7B900; background: #fff; }
.login-error { color: #c0392b; font-size: 13px; min-height: 16px; text-align: center; }
#login-btn { background: linear-gradient(135deg, #FFC93C, #F7A800); color: #4a3600; border: none; border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 16px rgba(247,168,0,.3); transition: filter .15s, transform .05s; }
#login-btn:hover { filter: brightness(1.04); }
#login-btn:active { transform: translateY(1px); }
.login-switch { text-align: center; font-size: 14px; color: #8a8578; margin-top: 4px; }
.login-switch span { color: #E39A00; font-weight: 700; cursor: pointer; }
.login-error.ok { color: #1f9d6b; }
/* アカウント / 端末 / 統括管理 */
.admin-badge { display: inline-block; background: #1f9d6b; color: #fff; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 7px; vertical-align: middle; }
.set-subhead { font-size: 13px; font-weight: 600; color: #6b6b6b; margin: 10px 0 6px; }
.set-devices { margin-top: 10px; }
.dev-row, .adm-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #ececea; border-radius: 10px; margin-bottom: 6px; font-size: 14px; background: #fafafa; }
.dev-name, .adm-name { flex: 1; min-width: 0; color: #2f2e2b; }
.dev-seen { font-size: 12px; color: #9a9a95; white-space: nowrap; }
.dev-cur { display: inline-block; background: #eaf6f0; color: #1f9d6b; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 6px; }
.adm-sub { display: inline-block; margin-left: 8px; font-size: 12px; color: #9a9a95; }
.adm-note { color: #6b6b6b; }
.adm-row.pending { background: #fff8e8; border-color: #f0e0b0; }
.adm-btns { display: flex; gap: 6px; white-space: nowrap; }
.dev-del, .adm-approve, .adm-reject, .adm-delete, .adm-reset {
border: none; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.adm-approve { background: linear-gradient(135deg, #2fae7a, #1f9d6b); color: #fff; }
.dev-del, .adm-reject, .adm-delete { background: #fbeaea; color: #c0392b; }
.adm-reset { background: #eef0f3; color: #52606d; }
.dev-del:hover, .adm-approve:hover, .adm-reject:hover, .adm-delete:hover, .adm-reset:hover { filter: brightness(1.03); }
/* 保存しましたトースト */
#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: 2px; }
.detail-sub-edit { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.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: 11px; }
.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 { flex: 1; min-width: 0; 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; }
/* アプリらしい上部ヘッダー（一覧画面で表示・スクロールしても固定） */
#app-header {
display: flex; align-items: center; gap: 10px;
position: sticky; top: 0; z-index: 50;
background: #fff; border-bottom: 1px solid #ececeb;
padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
}
#app-menu { top: calc(56px + env(safe-area-inset-top, 0px)); }
/* 一覧（サイドバー）が基本画面。ページは右から全画面でスライドイン */
.sidebar { position: static; width: 100%; min-height: 100vh; height: auto; align-self: auto; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
/* スマホ下部の検索バー（一覧画面で固定表示・ホームバーを避けて上げる） */
#mobile-search {
display: flex; align-items: center; gap: 8px;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
background: #fff; border-top: 1px solid #ececeb;
padding: 8px 14px calc(18px + env(safe-area-inset-bottom, 0px));
}
#ms-results {
position: fixed; left: 0; right: 0; z-index: 41;
bottom: calc(66px + env(safe-area-inset-bottom, 0px));
max-height: 58vh; overflow-y: auto; background: #fff;
border-top: 1px solid #ececeb; box-shadow: 0 -8px 24px rgba(0,0,0,.12);
}
#side-nav { display: flex; flex-direction: column; flex: 1; }
.main-area {
position: fixed; inset: 0; background: #fff; z-index: 100; overflow-y: auto;
overscroll-behavior: contain; /* 端でのバウンスを裏の一覧へ伝えない */
transform: translateX(100%); transition: transform .17s ease; /* 右からスライドイン（さくさく） */
}
.layout.show-content .main-area { transform: translateX(0); }
/* ページ表示中は常にこの「内側スクロール」1本で動かす。
以前は開いた後に通常配置(bodyスクロール)へ切り替えていたが、切り替え時の
スクロール位置の移し替えがiOSで1フレームに収まらず「先頭に飛んで戻る」ピクつきの
原因だったため廃止（.settled はクラスとして残るが配置は変えない）。 */
body.nav-settled .sidebar,
body.nav-settled #app-header,
body.nav-settled #mobile-search,
body.nav-settled #ms-results { display: none; }
.detail.open.settled { transform: none; }
/* サイドバーは裏に置いたまま（ページを閉じる／ドラッグ中に裏として見える） */
#nav-toggle { display: inline-flex; align-items: center; font-size: 17px; }
#nav-scrim { display: none; }
.detail { width: 100%; max-width: none; z-index: 130; } /* 内容(main-area)より前面に */
.scrim { z-index: 125; }
.detail-top { position: sticky; top: 0; background: #fff; z-index: 2; height: auto; min-height: 44px; padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 10px; }
.detail-close { font-size: 16px; padding: 4px 6px; }
.container { padding: 20px 14px 60px; }
/* 「‹ 一覧」バーと編集ツールバーは、両方とも sticky で最上部に貼り付く。
編集バーはJSでトップバーの真下（main-area直下）に置かれるので、
通常時（画面全体スクロール）・端スワイプ中・編集ロック中（内側スクロール）の
どのモードでも同じ2段のまま構造的に崩れない。 */
.main-area .topbar {
position: sticky; top: 0; z-index: 9; background: #fff;
height: 40px; box-sizing: border-box; padding: 0 12px;
display: flex; align-items: center;
border-bottom: 1px solid #ececeb;
}
/* ページを開いている間は、一覧画面用のヘッダー・下部検索を隠す（‹一覧に被らない） */
/* ページ表示中もヘッダー等は隠さない（隠すと閉じたときにレイアウトがガクンと下がるため）。
ページ本体(main-area)が前面に重なるので、開いている間は見えない。ドラッグ中だけ裏に見える。 */
body.page-open #ms-results { display: none !important; }
.main-area > .editor-toolbar {
position: sticky; top: 40px; z-index: 8;
height: 46px; box-sizing: border-box;
margin: 0; padding: 8px 12px;
background: #fff; border-bottom: 1px solid #ececeb;
}
/* 編集中（キーボード表示中）：アプリ全体を「キーボードの上の見えている領域」ちょうどの
固定枠に閉じ込め、ページはその中でスクロールさせる（高さはJSが設定）。
画面の外にはみ出す物が無いのでiOSが画面をずらさず、バーは一切動かない。 */
body.kb-editing { overflow: hidden; }
body.kb-editing .main-area,
body.kb-editing .layout.show-content .main-area.settled {
position: fixed; top: 0; left: 0; right: 0; bottom: auto;
min-height: 0; transform: none;
overflow-y: auto; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
background: #fff; z-index: 100;
}
body.kb-editing .main-area .topbar { z-index: 121; }
body.kb-editing .editor-toolbar { z-index: 120; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
/* サイドバー：文字さらに1.1倍・縦の間隔1.1倍 */
.side-item { font-size: 16.9px; padding-top: 5.3px; padding-bottom: 5.3px; margin: 1.3px 0; line-height: 1.5; }
.grp-name { font-size: 18.2px; }
.side-divider.nested .grp-name { font-size: 16.9px; }
.side-divider { padding-top: 7.7px; padding-bottom: 7.7px; margin-top: 11px; }
.side-divider.nested { margin-top: 7.7px; padding-top: 6.6px; }
.app-footer .af-made { font-size: 12.5px; }
.editor-toolbar .tb-back, .editor-toolbar .tb-done { display: inline-flex; align-items: center; }
/* ページの基本テキスト：全行そろえて少し右に（左余白はエディタ全体で付ける＝1行目もずれない）／文字1.05倍／縦マージン1.05倍 */
.page-editor { padding-left: 10px; }
.page-editor > p:not([class]), .page-editor > div:not([class]) {
font-size: 15.75px;
margin-bottom: 0.35em; /* 改行の間隔を普通サイズに（大きすぎ解消） */
line-height: 1.5;
}
/* 更新バーはスマホでも中央のボタン型（下から少し上に浮かせる） */
#update-bar { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); z-index: 200; }
}
/* タッチ端末：ホバーで2回タップになる問題を防ぐ */
@media (hover: none) {
.side-item:not(.active):hover, .slash-item:hover, .bm-group:hover, .day-tab:not(.active):hover { background: transparent; }
.side-item.active { background: #e6e6e4; }
.day-tab.active { background: linear-gradient(135deg, #2fae7a, #1f9d6b); color: #fff; } /* 選択中は緑のまま（消えないように） */
.side-item .side-actions { display: none !important; } /* ＋／× を出さない＝1タップで開く */
}
/* ===== PC：編集バーを常に上部（ヘッダー直下）に固定 ===== */
@media (min-width: 701px) {
.editor-toolbar {
position: fixed; top: 47px; left: 220px; right: 0; z-index: 50;
height: 46px; box-sizing: border-box;
margin: 0; padding: 8px 16px;
border-bottom: 1px solid #ececeb;
}
/* バーが浮いた分、ページ側（パンくず含む）を下げる（編集ページのみ） */
.main-area:has(.editor-toolbar) { padding-top: 46px; }
}
/* ===== カレンダーブロック（月間・マスにメモ） ===== */
.cal-block { border: 1px solid #e4e3e0; border-radius: 10px; margin: 10px 0; background: #fff; overflow: hidden; }
.cal-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #f7f7f5; border-bottom: 1px solid #ececeb; }
.cal-title { font-weight: 700; font-size: 14.5px; margin: 0 2px; }
.cal-nav, .cal-del { border: 1px solid #e4e3e0; background: #fff; border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer; color: #37352f; line-height: 1.4; }
.cal-del { margin-left: auto; color: #9b9a97; }
.cal-nav:hover, .cal-del:hover { background: #f1f1ef; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-wd { text-align: center; font-size: 11px; font-weight: 700; color: #9b9a97; padding: 5px 0; border-bottom: 1px solid #ececeb; }
.cal-wd.sun { color: #e03e3e; }
.cal-wd.sat { color: #0b6e99; }
.cal-cell { min-height: 64px; border-right: 1px solid #f0efec; border-bottom: 1px solid #f0efec; padding: 2px; }
.cal-grid .cal-cell:nth-of-type(7n) { border-right: none; }
.cal-cell.empty { background: #fafaf8; }
.cal-date { font-size: 11px; font-weight: 600; color: #6b6a66; padding: 1px 3px; user-select: none; }
.cal-date.sun { color: #e03e3e; }
.cal-date.sat { color: #0b6e99; }
.cal-cell.today { background: #fbf3db; }
.cal-cell.today .cal-date { color: #b7791f; }
.cal-memo { min-height: 40px; font-size: 12px; line-height: 1.45; padding: 1px 3px; outline: none; word-break: break-word; }
.cal-memo:focus { background: #f1f6fc; border-radius: 4px; }
@media (max-width: 700px) {
.cal-cell { min-height: 56px; }
.cal-memo { font-size: 11px; min-height: 34px; }
.cal-title { font-size: 14px; }
}
/* ===== ボードページ（カード管理） ===== */
.bd-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 14px; }
.bd-view { border: 1px solid #e4e3e0; background: #fff; border-radius: 6px; padding: 5px 12px; font-size: 13px; cursor: pointer; color: #6b6a66; }
.bd-view.active { background: #37352f; color: #fff; border-color: #37352f; }
.bd-new { border: 1px solid #F7B900; background: #fff; color: #b7791f; border-radius: 6px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; margin-left: 8px; }
.bd-new:hover { background: #fdf6e3; }
.bd-addcol { margin-left: auto; border: none; background: transparent; color: #9b9a97; font-size: 13px; cursor: pointer; padding: 5px 8px; border-radius: 6px; }
.bd-addcol:hover { background: #f1f1ef; color: #37352f; }
/* 列は画面幅に収まるように折り返して並べる（横スクロールしない）。
同じ段の列は高さが揃う（Notion風）。 */
.bd-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding-bottom: 24px; }
.bd-col { min-width: 0; background: transparent; padding: 0; display: flex; flex-direction: column; }
.bd-untitled { color: #b9b8b4; }
.bd-col-head { display: flex; align-items: center; gap: 6px; padding: 2px 4px 8px; }
.bd-col-name { font-size: 13px; font-weight: 700; background: #ececeb; padding: 2px 8px; border-radius: 5px; cursor: pointer; }
.bd-count { font-size: 12px; color: #9b9a97; }
.bd-coldel { margin-left: auto; border: none; background: transparent; color: #c9c8c5; cursor: pointer; font-size: 12px; }
.bd-coldel:hover { color: #e03e3e; }
.bd-card { background: #fff; border: 1px solid #e6e5e2; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.bd-card:hover { background: #fbfbfa; }
.bd-card-title { font-size: 14px; font-weight: 600; color: #37352f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-card-who { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 6px; margin-top: 6px; min-height: 20px; align-items: center; }
.bd-num-empty { visibility: hidden; }
.bd-who { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #55534e; }
.bd-ava { width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bd-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.bd-num { background: #ececeb; border-radius: 4px; font-size: 11.5px; font-weight: 600; padding: 1px 7px; color: #55534e; }
.bd-mv { border: 1px solid #e4e3e0; background: #fff; border-radius: 5px; font-size: 10px; padding: 2px 6px; cursor: pointer; color: #9b9a97; margin-left: 4px; }
.bd-mv:hover { color: #37352f; }
.bd-addcard { width: 100%; border: none; background: transparent; color: #9b9a97; font-size: 13px; text-align: left; padding: 6px 8px; cursor: pointer; border-radius: 6px; }
.bd-addcard:hover { background: #ececeb; color: #37352f; }
.bd-list-grp { margin-bottom: 18px; }
.bd-list-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bd-status { font-size: 12.5px; font-weight: 700; background: #ececeb; border-radius: 5px; padding: 2px 8px; }
.bd-row { display: flex; align-items: center; gap: 10px; }
.bd-row-title { font-weight: 600; font-size: 14px; flex: 1; }
/* カードの中身（小さめのページ） */
#bd-modal .bd-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 400; }
#bd-modal .bd-sheet { position: fixed; z-index: 401; left: 50%; top: 8%; transform: translateX(-50%); width: min(560px, 94vw); max-height: 82vh; overflow-y: auto; background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); padding: 14px 16px 18px; }
#bd-modal .bd-sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#bd-modal .bd-f-col { border: 1px solid #e4e3e0; border-radius: 6px; padding: 4px 8px; font-size: 13px; background: #fff; }
#bd-modal .bd-sheet-del, #bd-modal .bd-sheet-close { border: none; background: transparent; font-size: 16px; cursor: pointer; color: #9b9a97; }
#bd-modal .bd-sheet-del { margin-left: auto; }
#bd-modal .bd-sheet-close:hover, #bd-modal .bd-sheet-del:hover { color: #37352f; }
#bd-modal .bd-f-title { width: 100%; border: none; outline: none; font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #1b1b1b; }
#bd-modal .bd-sheet-row { display: flex; gap: 8px; margin-bottom: 10px; }
#bd-modal .bd-sheet-row input { flex: 1; min-width: 0; border: 1px solid #e4e3e0; border-radius: 6px; padding: 6px 9px; font-size: 13px; }
#bd-modal .bd-f-body { min-height: 160px; border-top: 1px solid #ececeb; padding: 10px 2px; font-size: 14.5px; line-height: 1.7; outline: none; word-break: break-word; }
#bd-modal .bd-f-body:empty::before { content: attr(data-ph); color: #b9b8b4; }
@media (max-width: 700px) {
/* スマホは2列ずつ折り返し */
.bd-cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
#bd-modal .bd-sheet { top: 4%; max-height: 76vh; }
}
/* ===== アプリ共通ポップアップ（黄色テーマ・画面中央） ===== */
.app-dlg-ov { position: fixed; inset: 0; z-index: 500; background: rgba(30, 28, 24, .42); display: flex; align-items: center; justify-content: center; padding: 20px; }
.app-dlg { width: min(360px, 92vw); background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); padding: 18px 16px 14px; border-top: 4px solid #F7B900; }
.app-dlg-title { font-size: 15px; font-weight: 700; color: #37352f; margin-bottom: 12px; white-space: pre-line; }
.app-dlg-msg { font-weight: 600; line-height: 1.7; white-space: pre-line; }
.app-dlg-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.app-dlg-item { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid #ececeb; background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 14px; }
.app-dlg-item:hover, .app-dlg-item:active { background: #fdf6e3; border-color: #F7B900; }
.adi-ico { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.adi-tx { display: flex; flex-direction: column; }
.adi-tx small { color: #9b9a97; font-weight: 400; font-size: 11.5px; margin-top: 1px; }
.app-dlg-input { width: 100%; box-sizing: border-box; border: 1.5px solid #e4e3e0; border-radius: 8px; padding: 9px 11px; font-size: 15px; margin-bottom: 12px; outline: none; }
.app-dlg-input:focus { border-color: #F7B900; }
.app-dlg-btns { display: flex; gap: 8px; justify-content: flex-end; }
.app-dlg-cancel { border: 1px solid #e4e3e0; background: #fff; color: #55534e; border-radius: 8px; padding: 8px 16px; font-size: 13.5px; cursor: pointer; }
.app-dlg-cancel:hover { background: #f1f1ef; }
.app-dlg-ok { border: none; background: linear-gradient(135deg, #F9B617, #F7A500); color: #fff; font-weight: 700; border-radius: 8px; padding: 8px 20px; font-size: 13.5px; cursor: pointer; box-shadow: 0 3px 10px rgba(247, 181, 0, .35); }
.app-dlg-ok:hover { filter: brightness(1.05); }
/* ボード：ドラッグ移動の見た目 */
.bd-card.dragging { opacity: .35; }
.bd-ghost { position: fixed; z-index: 600; pointer-events: none; opacity: .92; transform: rotate(2deg); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }
.bd-col.dragover { background: #fdf6e3; border-radius: 10px; outline: 2px dashed #F7B900; outline-offset: 2px; }
/* サイドバーのメモ書き（小さな見出し・Notionの「チームスペース」風） */
.side-note { display: flex; align-items: center; padding: 12px 8px 3px; cursor: default; }
.side-note-tx { font-size: 12px; font-weight: 600; color: #9b9a97; letter-spacing: .4px; }
.side-note .side-act { margin-left: auto; opacity: 0; cursor: pointer; color: #9b9a97; }
.side-note:hover .side-act { opacity: 1; }
@media (max-width: 700px) {
.side-note-tx { font-size: 13px; }
.side-note .side-act { opacity: 1; }
}
/* ===== 検索ページ（シンプル） ===== */
.srch-box { display: flex; align-items: center; gap: 8px; border: 1.5px solid #e4e3e0; border-radius: 10px; padding: 10px 12px; background: #fff; }
.srch-box:focus-within { border-color: #F7B900; }
.srch-ico { font-size: 15px; }
.srch-input { flex: 1; min-width: 0; border: none; outline: none; font-size: 15px; background: transparent; }
.srch-results { margin-top: 14px; }
.srch-item { padding: 10px 6px; border-bottom: 1px solid #f0efec; cursor: pointer; border-radius: 6px; }
.srch-item:hover { background: #f7f7f5; }
.srch-title { font-size: 14.5px; font-weight: 600; color: #37352f; }
.srch-snip { font-size: 12.5px; color: #9b9a97; margin-top: 2px; }
.srch-empty { color: #9b9a97; font-size: 13.5px; padding: 12px 4px; }
/* サイドバー下部の検索窓（タップで検索ページへ） */
.side-srchbox { display: flex; align-items: center; gap: 8px; margin: 4px 6px 6px; padding: 8px 12px; background: #fff; border: 1px solid #e4e3e0; border-radius: 8px; cursor: pointer; color: #9b9a97; font-size: 13.5px; }
.side-srchbox:hover, .side-srchbox.active { border-color: #F7B900; color: #55534e; }
.side-srchbox .ssb-ico { display: flex; align-items: center; flex-shrink: 0; }
.side-srchbox .ssb-ico .side-svg { width: 15px; height: 15px; color: #9b9a97; }
.side-srchbox:focus-within .ssb-ico .side-svg, .side-srchbox:hover .ssb-ico .side-svg { color: #55534e; }
/* サイドバー検索窓（直接入力）と結果ポップアップ（黄色デザイン） */
.side-srchbox .ssb-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13.5px; color: #37352f; }
.side-srchbox:focus-within { border-color: #F7B900; }
#side-search-pop {
position: fixed; z-index: 480; width: min(340px, 92vw); max-height: 60vh; overflow-y: auto;
background: #fff; border-radius: 14px; border-top: 4px solid #F7B900;
box-shadow: 0 16px 48px rgba(0, 0, 0, .28); padding: 10px 12px 8px;
}
.ssp-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; color: #37352f; margin-bottom: 6px; }
.ssp-count { color: #9b9a97; font-weight: 400; font-size: 12px; }
.ssp-close { margin-left: auto; border: none; background: transparent; cursor: pointer; color: #9b9a97; font-size: 14px; }
.ssp-close:hover { color: #37352f; }
.ssp-item { padding: 8px 6px; border-radius: 8px; cursor: pointer; }
.ssp-item:hover { background: #fdf6e3; }
.ssp-title { font-size: 13.5px; font-weight: 600; color: #37352f; }
.ssp-snip { font-size: 12px; color: #9b9a97; margin-top: 1px; }
.ssp-empty { color: #9b9a97; font-size: 13px; padding: 8px 4px; }
/* 画像メニューの削除ボタン */
.img-menu .im-del { color: #c0392b; font-weight: 600; }
/* パスワード欄（伏せ字＋表示切替）と見出しごとのロック一覧 */
.pw-wrap { display: flex; gap: 6px; flex: 1; align-items: center; }
.pw-eye { border: 1px solid #e4e3e0; background: #fff; border-radius: 6px; cursor: pointer; padding: 4px 10px; font-size: 14px; }
.pw-eye:hover { background: #f1f1ef; }
.set-sub { font-size: 13.5px; font-weight: 700; color: #55534e; margin: 14px 0 6px; }
.lg-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f0efec; }
.lg-name { flex: 1; font-size: 13.5px; font-weight: 600; color: #37352f; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-lock { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: #55534e; white-space: nowrap; }
.lg-pass { width: 120px; flex-shrink: 0; }
/* 見出しロック一覧の「共通に戻す」 */
.lg-clear { border: 1px solid #e4e3e0; background: #fff; border-radius: 6px; padding: 4px 8px; font-size: 11.5px; color: #55534e; cursor: pointer; white-space: nowrap; }
.lg-clear:hover { background: #f1f1ef; }
.lg-save { border: none; background: #2383e2; color: #fff; border-radius: 6px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.lg-save:hover { background: #1b6dc0; }
/* ===== 表の選択式セル（Notion風の色付きバッジ） ===== */
.sel-cell { cursor: pointer; }
.sel-cell:hover { background: #f4f4f2; }
.sel-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 1px 10px 1px 8px; border-radius: 999px;
font-size: 13px; line-height: 1.6; white-space: nowrap; color: #37352f;
}
.sel-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sc-gray { background: #e3e2e0; } .sc-gray::before { background: #91918e; }
.sc-red { background: #ffe2dd; } .sc-red::before { background: #e16f64; }
.sc-orange { background: #fadec9; } .sc-orange::before { background: #d9730d; }
.sc-yellow { background: #fdecc8; } .sc-yellow::before { background: #cb912f; }
.sc-green { background: #dbeddb; } .sc-green::before { background: #6c9b7d; }
.sc-blue { background: #d3e5ef; } .sc-blue::before { background: #5b97bd; }
.sc-purple { background: #e8deee; } .sc-purple::before { background: #9a6dd7; }
.sc-pink { background: #f5e0e9; } .sc-pink::before { background: #d15796; }
.sel-pop {
position: fixed; z-index: 10060; background: #fff;
border: 1px solid #e4e3e0; border-radius: 12px;
box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 8px;
min-width: 180px; max-height: 60vh; overflow-y: auto;
}
.sel-grp { font-size: 12px; color: #9b9a97; padding: 8px 8px 4px; }
.sel-opt {
display: flex; width: 100%; align-items: center; text-align: left;
background: none; border: none; padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.sel-opt:hover, .sel-opt:active { background: #f1f1ef; }
.sel-none { color: #9b9a97; font-size: 13px; margin-top: 4px; border-top: 1px solid #f0efec; border-radius: 0 0 8px 8px; }
/* 表のセルは折り返さない（Notionと同じ。はみ出す分は横スクロール） */
.mini-table th, .mini-table td { white-space: nowrap; }
/* ===== 空ページの「中のページ」一覧 ===== */
.child-pages { padding: 6px 0 20px; }
.cp-head { font-size: 12px; color: #9b9a97; padding: 6px 8px; border-bottom: 1px solid #f0efec; margin-bottom: 4px; }
.cp-item { display: flex; align-items: center; gap: 9px; padding: 8px 8px; border-radius: 8px; cursor: pointer; font-size: 15px; color: #37352f; }
.cp-item:hover, .cp-item:active { background: #f1f1ef; }
.cp-item .cp-tx { border-bottom: 1px solid #e4e3e0; }
/* 生徒の行を曜日タブへドラッグ */
.day-tab.day-drop { background: #d7e9fb; box-shadow: inset 0 0 0 2px #2383e2; }
tr.row.sd-dragging { opacity: .4; }
/* 表の区切り行（校舎・曜日のセクション） */
.mini-table tr.tbl-sec td { background: #f7f6f3; }
/* ページの画像アイコン */
.side-ico.img { width: 18px; height: 18px; background-size: cover; background-position: center; border-radius: 4px; }
.page-icon.img { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.12em; background-size: cover; background-position: center; border-radius: 6px; }
/* ドラッグ中に一時的に隠す子ページ */
#side-nav .sd-hide { display: none !important; }
/* ===== 上部のピン留めタブ（PCのみ表示） ===== */
#top-tabs { display: none; }
@media (min-width: 701px) {
#top-tabs { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; margin: 0 14px; overflow-x: auto; scrollbar-width: none; }
#top-tabs::-webkit-scrollbar { display: none; }
.tt-tab {
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
padding: 4px 6px 4px 10px; border-radius: 8px;
border: 1px solid #ececeb; background: #fafaf8; cursor: pointer;
font-size: 13px; color: #37352f; max-width: 190px; white-space: nowrap;
}
.tt-tab .tt-tx { overflow: hidden; text-overflow: ellipsis; }
.tt-tab:hover { background: #f1f1ef; }
.tt-tab.active { background: #fff; border-color: #cfcecb; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.tt-x { color: #b3b2af; padding: 0 4px; border-radius: 4px; font-size: 13px; }
.tt-x:hover { background: #e6e6e4; color: #37352f; }
.tt-add {
flex-shrink: 0; width: 26px; height: 26px; cursor: pointer;
border: 1px dashed #d5d4d0; background: none; border-radius: 8px;
color: #9b9a97; font-size: 15px; line-height: 1;
}
.tt-add:hover { background: #f1f1ef; }
}
/* ===== 画像・PDFの拡大表示 ===== */
/* ===== 画像の拡大表示（ライトボックス） =====
★ボタンは全部「下部バー」に集約し、左寄せ。上のバーを無くしたぶん、画像が大きく出せる。
★画像でも背景でも「1タップ / 1クリックで閉じる」（拡大が1タップなら、縮小も1タップ）。 */
.lb-ov { position: fixed; inset: 0; z-index: 10080; background: #fff; display: flex; flex-direction: column; }
.lb-body {
flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
touch-action: none; background: #fafaf8; cursor: zoom-out;
padding-top: env(safe-area-inset-top, 0px);
}
.lb-img { max-width: 100%; max-height: 100%; will-change: transform; border-radius: 4px; box-shadow: 0 4px 24px rgba(0,0,0,.12); background: #fff; }
/* 下部バー：左寄せ・折り返し可（スマホでも収まる） */
.lb-bar {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px;
padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid #f0efec; background: #fff; flex: 0 0 auto;
}
.lb-bar button { border: 1px solid #e4e3e0; background: #fff; color: #37352f; border-radius: 8px; padding: 8px 14px; font-size: 14px; cursor: pointer; }
.lb-bar button:active { background: #f4f3f0; }
.lb-gap { flex: 0 0 10px; } /* 「閉じる」と大きさボタンの間の余白 */
.lb-close { font-size: 15px; }
.lb-del { border-color: #e4cfcf !important; background: #fdf3f3 !important; color: #a23b3b !important; }
@media (max-width: 700px) {
.lb-bar { gap: 6px; padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
.lb-bar button { padding: 7px 11px; font-size: 13px; }
.lb-gap { flex: 0 0 4px; }
}
/* 生徒の行の並べ替え（挿入位置の青ライン） */
tr.row.st-before td { box-shadow: inset 0 3px 0 #2383e2; }
tr.row.st-after td { box-shadow: inset 0 -3px 0 #2383e2; }
/* ===== AIページ（振替の読み取り／定型メッセージ） ===== */
.ai-wrap { max-width: 760px; padding: 4px 0 40px; }
.ai-tabs { display: flex; gap: 6px; border-bottom: 1px solid #eceae7; margin-bottom: 18px; }
.ai-tab { border: none; background: transparent; padding: 9px 14px; font-size: 14px; color: #6b6a66;
cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ai-tab.active { color: #37352f; font-weight: 600; border-bottom-color: #37352f; }
.ai-note { font-size: 13px; color: #6b6a66; line-height: 1.7; margin: 0 0 12px; }
.ai-note code { background: #f2f1ee; border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.ai-lbl { display: block; font-size: 13px; color: #6b6a66; margin: 16px 0 6px; }
.ai-ta { width: 100%; box-sizing: border-box; border: 1px solid #e4e3e0; border-radius: 8px;
padding: 10px 12px; font-size: 14px; line-height: 1.7; font-family: inherit; color: #37352f;
background: #fff; resize: vertical; }
.ai-ta:focus { outline: none; border-color: #2383e2; }
.ai-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.ai-row label { width: 64px; flex-shrink: 0; color: #6b6a66; font-size: 13.5px; }
.ai-row .edit-input { flex: 1; min-width: 180px; border: 1px solid #e4e3e0; background: #fff; }
.ai-btns { margin: 12px 0; }
.ai-btns2 { margin: 8px 0 4px; }
.ai-btns .add-btn:disabled { opacity: .55; cursor: default; }
.ai-out { margin-top: 16px; }
.ai-busy { font-size: 13.5px; color: #6b6a66; padding: 12px 0; }
.ai-ok { font-size: 13.5px; color: #1f9d6b; font-weight: 600; margin-bottom: 10px; }
.ai-warn { font-size: 13.5px; color: #c0392b; background: #fdf1ef; border: 1px solid #f3d3ce;
border-radius: 8px; padding: 10px 12px; line-height: 1.7; }
/* 読み取り結果の1件 */
.ai-item { border: 1px solid #eceae7; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.ai-item.ng { border-color: #f0d9a8; background: #fffbf0; }
.ai-item-l { font-size: 14px; color: #37352f; }
.ai-item-w { font-size: 12.5px; color: #b7791f; margin-top: 5px; }
.ai-item-r { font-size: 12px; color: #9b9a97; margin-top: 5px; line-height: 1.6; }
/* 生徒ごとの文面 */
.ai-msg { border: 1px solid #eceae7; border-radius: 8px; margin-bottom: 10px; background: #fff; overflow: hidden; }
.ai-msg-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #faf9f8; border-bottom: 1px solid #eceae7; }
.ai-msg-h b { font-size: 14px; }
.ai-msg-sub { font-size: 12px; color: #9b9a97; flex: 1; }
.ai-cp { border: 1px solid #d9d8d4; background: #fff; color: #37352f; border-radius: 6px;
padding: 5px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.ai-cp:hover { background: #f2f1ee; }
.ai-msg-b { margin: 0; padding: 12px; font-family: inherit; font-size: 13.5px; line-height: 1.8;
color: #37352f; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 700px) {
.ai-row label { width: 100%; }
.ai-row .edit-input { width: 100%; }
}
/* テストモード（無料枠で試す時に、生徒名簿を送らない） */
.ai-test { display: flex; gap: 10px; align-items: flex-start; background: #faf9f8;
border: 1px solid #e4e3e0; border-radius: 8px; padding: 11px 13px; margin: 12px 0;
font-size: 12.5px; color: #6b6a66; line-height: 1.7; cursor: pointer; }
.ai-test:has(input:checked) { background: #fffbf0; border-color: #f0d9a8; color: #7a5c14; }
.ai-test input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }
/* 記録先の事前登録 */
.ai-mini { border: 1px solid #d9d8d4; background: #fff; color: #37352f; border-radius: 6px;
padding: 7px 14px; font-size: 13px; cursor: pointer; flex-shrink: 0; }
.ai-mini:hover { background: #f2f1ee; }
.ai-dest { border: 1px solid #e4e3e0; border-radius: 10px; padding: 12px; margin: 4px 0 12px; background: #faf9f8; }
.ai-dest-h { font-size: 12.5px; color: #6b6a66; margin: 0 0 8px; line-height: 1.6; }
.ai-dest .edit-input { width: 100%; box-sizing: border-box; border: 1px solid #e4e3e0; background: #fff; }
.ai-dest-list { max-height: 300px; overflow-y: auto; margin: 10px 0; border: 1px solid #eceae7;
border-radius: 8px; background: #fff; -webkit-overflow-scrolling: touch; }
.ai-dest-i { display: flex; gap: 10px; align-items: center; padding: 9px 12px; font-size: 13.5px;
color: #37352f; border-bottom: 1px solid #f2f1ee; cursor: pointer; }
.ai-dest-i:last-child { border-bottom: none; }
.ai-dest-i.on { background: #f0f7fd; font-weight: 500; }
.ai-dest-i input { width: 17px; height: 17px; flex-shrink: 0; }
.ai-dest-none { padding: 14px; font-size: 13px; color: #9b9a97; text-align: center; }
/* AI：APIキー（アカウントごと） */
.ai-key-state { font-size: 13.5px; padding: 11px 13px; border: 1px solid #eceae7;
border-radius: 8px; background: #faf9f8; margin-bottom: 14px; }
.ai-key-ok { color: #1f9d6b; font-weight: 600; }
.ai-key-ng { color: #c0392b; font-weight: 600; }
.ai-key-sub { color: #9b9a97; font-size: 12px; font-weight: 400; }
#ai-key-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
/* レポート追加：保存ボタンの横のヒント */
.nr-btnrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nr-hint { font-size: 12.5px; color: #9b9a97; }
/* AI：「次のレッスン」への反映ログ */
.ai-lesson-log { border: 1px solid #eceae7; border-radius: 8px; padding: 10px 12px; margin-top: 12px; background: #faf9f8; }
.ai-lesson-h { font-size: 12.5px; color: #6b6a66; font-weight: 600; margin-bottom: 6px; }
.ai-lesson-i { font-size: 13px; line-height: 1.8; }
.ai-lesson-i.ok { color: #1f9d6b; }
.ai-lesson-i.ng { color: #b7791f; }
/* 選択式セルのポップアップ：この行を削除 */
.sel-pop .sel-delrow { color: #c0392b; border-top: 1px solid #eceae7; margin-top: 4px; padding-top: 8px; }
.sel-pop .sel-delrow:hover { background: #fdf1ef; }
/* 選択式セルのポップアップ：表の操作 */
.sel-pop .sel-sep { height: 1px; background: #eceae7; margin: 6px 0; }
.sel-pop .sel-act { color: #37352f; }
.sel-pop .sel-act:hover { background: #f2f1ee; }