@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary: #185FA5;
    --primary-dark: #0D3F73;
    --primary-light: #E8F0FE;
    --sidebar-bg: #1A2332;
    --sidebar-hover: #243447;
    --sidebar-active: #185FA5;
    --text: #333;
    --text-light: #666;
    --text-muted: #999;
    --bg: #F5F7FA;
    --white: #fff;
    --border: #E2E8F0;
    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.12);
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 240px;
    background: var(--sidebar-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-header h1 { font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.sidebar-header .subtitle { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 4px; }

.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }

.nav-item {
    display: flex; align-items: center; padding: 12px 20px; cursor: pointer;
    transition: background 0.15s; font-size: 14px; color: rgba(255,255,255,0.75);
    text-decoration: none; gap: 12px;
}
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.active { background: var(--sidebar-active); color: #fff; font-weight: 500; }
.nav-item svg { display: none; }

.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px; }

.user-select {
    width: 100%; padding: 6px 8px; border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1);
    color: #fff; font-size: 13px; font-family: inherit;
}
.user-select option { color: #333; background: #fff; }

.main { margin-left: 240px; flex: 1; min-height: 100vh; }

.topbar {
    background: var(--white); border-bottom: 1px solid var(--border);
    padding: 16px 28px; display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 50;
}
.topbar h2 { font-size: 18px; font-weight: 700; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }

/* ハンバーガー（スマホのみ表示。PCでは display:none） */
.hamburger {
    display: none; background: none; border: none; cursor: pointer;
    padding: 6px; margin-right: 4px; flex-shrink: 0; flex-direction: column; gap: 4px;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
/* サイドバー背景オーバーレイ（スマホで開いた時のみ） */
.sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 90;
}
.sidebar-backdrop.show { display: block; }

.content { padding: 24px 28px; }

.card {
    background: var(--white); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px;
}
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-header h3 { font-size: 15px; font-weight: 600; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }

.stat-card {
    background: var(--white); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column;
}
.stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--primary); }
.stat-value.small { font-size: 20px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
    background: var(--bg); padding: 10px 12px; text-align: left; font-weight: 600;
    font-size: 12px; color: var(--text-light); border-bottom: 2px solid var(--border);
    white-space: nowrap; position: sticky; top: 0;
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
/* 手続き一覧のコンパクト化（1行表示＝一覧性向上）。余白を詰め、長い顧客名/氏名は省略表示 */
.proc-compact tbody td { padding: 5px 8px; }
.proc-compact td.ell { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 申請日時/対象日の遅い方から1週間経過した未処理案件＝真っ赤＋少し拡大 */
.proc-escalated td { background: #ffd0d0 !important; color: #b30000 !important; font-size: 14px !important; font-weight: 700 !important; }
.proc-escalated td:first-child { border-left: 5px solid #dc3545; }
tbody tr:hover { background: var(--primary-light); }
tbody tr { cursor: pointer; }

.btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
    border-radius: 6px; font-size: 13px; font-weight: 500; border: none;
    cursor: pointer; transition: all 0.15s; font-family: inherit; text-decoration: none;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #DC2626; }
.btn-success { background: var(--success); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-light); margin-bottom: 4px; }
.form-control {
    width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 14px; font-family: inherit; transition: border-color 0.15s;
}
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(24,95,165,0.1); }
select.form-control { appearance: auto; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.form-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.form-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.badge-active { background: #D1FAE5; color: #065F46; }
.badge-inactive { background: #FEE2E2; color: #991B1B; }
.badge-pending { background: #FEF3C7; color: #92400E; }
.badge-approved { background: #D1FAE5; color: #065F46; }
.badge-rejected { background: #FEE2E2; color: #991B1B; }

.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; z-index: 200;
    opacity: 0; visibility: hidden; transition: all 0.2s;
}
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal {
    background: var(--white); border-radius: 12px; box-shadow: var(--shadow-lg);
    width: 95vw; max-width: 1800px; height: 92vh; max-height: 92vh;
    transform: translateY(20px); transition: transform 0.2s;
    display: flex; flex-direction: column;
}
.modal-overlay.show .modal { transform: translateY(0); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.modal-header h3 { font-size: 16px; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); padding: 4px; }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; }

.tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
/* 顧客詳細モーダルのタブはスクロール時も常に上部に固定（タブ下の線が画面固定ライン）
 * modal-body の padding-top を 0 にすることで「scrollport の上端」と「modal-body 外周」が一致し、
 * sticky 時にタブが完全に上端へ張り付き、上にコンテンツが透ける隙間が生まれない。
 * その代わりタブ自身に padding-top:20px を持たせて見た目の余白を確保する。 */
.modal-body:has(#custTabs) { padding-top: 0; }
#custTabs {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    margin-left: -24px;
    margin-right: -24px;
    padding: 20px 24px 0;
}
.tab {
    padding: 10px 20px; font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all 0.15s; color: var(--text-muted); font-weight: 500;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.search-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.search-bar .form-control { max-width: 300px; }

.task-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); gap: 12px; }
.task-check { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }
.task-done { text-decoration: line-through; color: var(--text-muted); }

.progress { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.progress-bar { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s; }

.toast {
    position: fixed; bottom: 24px; right: 24px; background: var(--sidebar-bg); color: #fff;
    padding: 12px 20px; border-radius: 8px; font-size: 14px; z-index: 300;
    transform: translateY(100px); opacity: 0; transition: all 0.3s;
}
.toast.show { transform: translateY(0); opacity: 1; }
/* 承認申請を送信したことを知らせるトースト（目立つオレンジ） */
.toast.approval { background: #fd7e14; font-weight: 600; font-size: 15px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); max-width: 420px; line-height: 1.5; }

.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Billing table */
.billing-table-wrapper {
    overflow: auto;
    max-height: 80vh;
    max-width: calc(100vw - 280px);
    border: 1px solid #ddd;
    border-radius: 8px;
}
.billing-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1800px;
    font-size: 12px;
}
.billing-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #1e3a5f;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 8px;
    text-align: center;
    border-bottom: 2px solid #0d2137;
    white-space: nowrap;
}
.billing-table thead th {
    z-index: 3;
}
.billing-table thead th.sticky-col { z-index: 5; background: #1e3a5f !important; }
.billing-table tbody td {
    padding: 6px 8px;
    text-align: right;
    border-bottom: 1px solid #e8e6df;
    white-space: nowrap;
}
.billing-table tfoot td {
    padding: 8px 8px;
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
    border-top: 2px solid #c0c0c0;
}
.sticky-col {
    position: sticky;
    background: #fff;
    z-index: 3;
}
.sticky-col.col-no { left: 0; width: 50px; min-width: 50px; text-align: center; }
.sticky-col.col-name { left: 50px; width: 200px; min-width: 200px; text-align: left; font-weight: 600; }
.sticky-col.col-tantou, th.col-tantou { left: 250px; width: 70px; min-width: 70px; text-align: center; box-shadow: 3px 0 6px rgba(0,0,0,0.15); }
.billing-table tbody td.sticky-col { background: #fff !important; z-index: 3; }
.billing-table tbody tr:nth-child(even) td { background: #f9f9f7; }
.billing-table tbody tr:nth-child(even) td.sticky-col { background: #f9f9f7 !important; }
.billing-table tbody tr.ext-row td.sticky-col { background: #fffaf0 !important; }
.billing-table tbody tr.ext-row:nth-child(even) td.sticky-col { background: #fff5e6 !important; }
.billing-table tbody tr.ext-row td { background: #fffaf0; }
.billing-table tbody tr.ext-row:nth-child(even) td { background: #fff5e6; }
.billing-table tfoot td.sticky-col { background: #e8eef6 !important; z-index: 3; }
.billing-table .cur-month { background: #f0f7ff !important; }
.billing-table .has-spot { background: #fff8e1 !important; }
.billing-table .has-draft { background: #ffd59e !important; }
.billing-table .has-furikomi { background: #e4f5e1 !important; }
.billing-table td a.amount-link { position: relative; z-index: 1; }

.billing-mode-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.billing-mode-tabs button {
    padding: 6px 18px; border-radius: 4px; font-size: 13px; font-weight: 500;
    border: 1px solid #ccc; cursor: pointer; background: #fff; color: #666;
}
.billing-mode-tabs button.active { background: #185FA5; color: #fff; border-color: #185FA5; font-weight: 600; }

/* 末尾の空白スペーサー: どの月でも固定列の右まで横スクロールで寄せるための余白 */
.billing-table .billing-spacer { background: #fff !important; border: none !important; padding: 0 !important; }
.billing-table thead th.billing-spacer, .billing-table tfoot td.billing-spacer { background: #fff !important; }
.billing-table-wrapper { cursor: grab; user-select: none; }
.billing-table-wrapper.dragging { cursor: grabbing !important; }
.billing-table a.amount-link {
    color: #185FA5; text-decoration: underline; cursor: pointer;
}
.billing-table a.amount-link:hover { color: #0C447C; }

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%); transition: transform 0.25s ease;
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
    }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .hamburger { display: flex; }
    .topbar { padding: 12px 16px; gap: 10px; }
    .topbar h2 { font-size: 16px; }
    .content { padding: 16px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr; }
    /* 横長の表は横スクロールで（潰さず読めるように） */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* 顧客詳細モーダルのタブ: スマホでは1行に押し込まず横スクロール（タブが縮んで文字が縦積みになり上半分を占有するのを防ぐ）。PC表示は不変 */
    #custTabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 12px; }
    #custTabs::-webkit-scrollbar { height: 3px; }
    #custTabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
    #custTabs .tab { flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; font-size: 13px; }
    /* モーダルをスマホでは全画面化（四方の余白・角丸を無くし画面いっぱいに）。PC表示は不変 */
    .modal {
        width: 100vw; max-width: 100vw;
        height: 100vh; height: 100dvh; max-height: 100dvh;
        border-radius: 0;
    }
    .modal-header { padding: 14px 16px; }
    .modal-body { padding: 14px 16px; }
    .modal-footer { padding: 12px 16px; }
}

/* ========== 操作マニュアル ========== */
.manual-page { font-family: "Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif; }
.manual-page h1 { font-size: 26px; font-weight: 700; color: #185FA5; border-bottom: 3px solid #185FA5; padding-bottom: 10px; margin: 0 0 24px; }
.manual-page h2 { font-size: 20px; font-weight: 700; color: #185FA5; border-left: 5px solid #185FA5; padding: 6px 0 6px 14px; background: #f0f7ff; margin: 36px 0 16px; border-radius: 0 4px 4px 0; }
.manual-page h3 { font-size: 17px; font-weight: 700; color: #444; border-bottom: 1px solid #ddd; padding-bottom: 6px; margin: 28px 0 12px; }
.manual-page h4 { font-size: 15px; font-weight: 700; color: #555; margin: 20px 0 8px; }
.manual-page p { margin: 0 0 12px; }
.manual-page ul, .manual-page ol { margin: 6px 0 16px; padding-left: 26px; }
.manual-page li { margin: 4px 0; }
.manual-page strong { color: #185FA5; font-weight: 700; }
.manual-page hr { border: none; border-top: 1px dashed #ccc; margin: 32px 0; }
.manual-page code { background: #f4f4f4; padding: 1px 6px; border-radius: 3px; font-size: 13px; color: #c7254e; }
.manual-page blockquote { background: #fff8e1; border-left: 4px solid #f59e0b; padding: 10px 16px; margin: 14px 0; border-radius: 0 4px 4px 0; color: #555; }
.manual-page blockquote p { margin: 0; }
.manual-page table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 13.5px; }
.manual-page th { background: #185FA5; color: #fff; padding: 8px 12px; text-align: left; font-weight: 600; border: 1px solid #134c87; }
.manual-page td { padding: 7px 12px; border: 1px solid #d8d8d8; vertical-align: top; }
.manual-page tr:nth-child(even) td { background: #fafafa; }
.manual-page a { color: #185FA5; text-decoration: underline; }
.manual-page a:hover { color: #0C447C; }
/* 2層目: 折りたたみの技術メモ（テーブル名・関数名など裏側の詳細） */
.manual-page details { background: #f6f8fa; border: 1px solid #d8dee5; border-radius: 6px; margin: 14px 0 24px; padding: 0 16px; }
.manual-page details[open] { padding-bottom: 10px; }
.manual-page summary { cursor: pointer; padding: 10px 0; font-size: 13px; font-weight: 700; color: #586069; list-style: none; user-select: none; }
.manual-page summary::-webkit-details-marker { display: none; }
.manual-page summary::before { content: "▶"; display: inline-block; margin-right: 8px; font-size: 10px; color: #999; transition: transform 0.15s ease; }
.manual-page details[open] summary::before { transform: rotate(90deg); }
.manual-page details > *:not(summary) { font-size: 13px; color: #444; }
.manual-page details strong { color: #444; }
.manual-page details table { margin: 6px 0 12px; font-size: 12.5px; }
.manual-page details code { font-size: 12px; }

@media print {
    /* 印刷／PDF時は技術メモも展開して出す */
    .manual-page details > *:not(summary) { display: block !important; }
    .manual-page summary::before { content: ""; }
    .sidebar, .top-bar { display: none !important; }
    .main { margin-left: 0 !important; }
    .content { padding: 0 !important; }
    .manual-page { max-width: 100% !important; padding: 0 !important; box-shadow: none !important; }
    .manual-page h2 { page-break-after: avoid; }
    .manual-page table, .manual-page blockquote { page-break-inside: avoid; }
}

/* ===== OneNote 風 自由配置メモ ===== */
.onenote-wrap { display:flex; gap:0; height:calc(100vh - 120px); min-height:480px; }
.onenote-side { width:220px; flex:0 0 220px; border-right:1px solid #e3e3e3; overflow-y:auto; background:#fafafa; }
.onenote-side-head { padding:8px 10px 8px 14px; font-size:12px; font-weight:bold; color:#888; border-bottom:1px solid #eee; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.onenote-newpage-btn { font-size:11px; font-weight:bold; color:#fff; background:#4a6cf7; border:none; border-radius:4px; padding:4px 8px; cursor:pointer; white-space:nowrap; }
.onenote-newpage-btn:hover { background:#3a5ce0; }
.onenote-side-empty { padding:14px; font-size:12px; color:#aaa; }
.onenote-side-item { display:flex; align-items:center; padding:9px 12px; font-size:13px; cursor:pointer; border-bottom:1px solid #f0f0f0; }
.onenote-side-item:hover { background:#f0f4ff; }
.onenote-side-item.active { background:#e4ecff; border-left:3px solid #4a6cf7; padding-left:9px; }
.onenote-side-title { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.onenote-side-del { color:#ccc; font-size:15px; padding:0 4px; border-radius:3px; }
.onenote-side-item:hover .onenote-side-del { color:#c0392b; }
.onenote-side-del:hover { background:#fde8e6; }

.onenote-main { flex:1; display:flex; flex-direction:column; min-width:0; }
/* 顧客詳細「ノート」タブの埋め込み（サイドのページ一覧＋本体。大きめに表示） */
.onenote-embed-wrap { height:78vh; min-height:480px; border:1px solid #e3e3e3; border-radius:6px; overflow:hidden; }
.onenote-empty { padding:40px; color:#999; font-size:14px; line-height:1.9; text-align:center; }
.onenote-toolbar { display:flex; align-items:center; gap:6px; padding:7px 12px; border-bottom:1px solid #e3e3e3; background:#fff; flex-wrap:wrap; }
.onenote-title-input { font-size:15px; font-weight:bold; border:1px solid transparent; border-radius:4px; padding:4px 8px; min-width:160px; }
.onenote-title-input:hover { border-color:#e0e0e0; }
.onenote-title-input:focus { border-color:#4a6cf7; outline:none; background:#fff; }
.onenote-tb-sep { width:1px; height:20px; background:#e0e0e0; margin:0 2px; }
.onenote-tb-btn { min-width:28px; height:28px; border:1px solid #d8d8d8; background:#fff; border-radius:4px; cursor:pointer; font-size:14px; }
.onenote-tb-btn:hover { background:#f0f0f0; }
.onenote-tb-btn:disabled { opacity:.35; cursor:default; background:#fff; }
.onenote-tb-sel { height:28px; border:1px solid #d8d8d8; border-radius:4px; font-size:12px; }
.onenote-tb-color { display:inline-flex; align-items:center; gap:3px; font-size:12px; color:#666; }
.onenote-tb-color input { width:26px; height:26px; border:1px solid #d8d8d8; border-radius:4px; padding:1px; cursor:pointer; background:#fff; }
.onenote-rule-toggle { font-size:12px; color:#666; display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.onenote-usage { font-size:11px; color:#9aa0a6; margin-left:14px; }
.onenote-savestate { font-size:11px; color:#28a745; margin-left:auto; }
.onenote-savestate.dirty { color:#e08e0b; }
.onenote-savestate.err { color:#dc3545; font-weight:bold; }

.onenote-canvas-wrap { flex:1; overflow:auto; background:#ececec; padding:16px; }
.onenote-canvas { position:relative; width:1400px; min-height:1200px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.12); cursor:text; }
.onenote-canvas.ruled { background-image:repeating-linear-gradient(#fff 0px, #fff 31px, #d6e4f0 32px); background-size:100% 32px; }
/* 縁(パディング枠)＝手のひらカーソルでドラッグ移動。内側の本文は文字カーソル */
.onenote-box { position:absolute; box-sizing:border-box; min-width:32px; min-height:26px; padding:6px 7px; cursor:grab; }
.onenote-box:hover { outline:1px dashed #b9c6e8; }
.onenote-box:active { cursor:grabbing; }
.onenote-box:focus-within { outline:1px solid #4a6cf7; }
/* 自由テキストもセルも: 文字に合わせて伸縮（幅auto）・自動折返ししない（改行はキー操作のみ） */
.onenote-box-body { outline:none; min-height:18px; cursor:text; font-size:14px; line-height:1.7; white-space:pre; }
/* Tab で作る四角枠セル（表組み風）: 枠線つき・グループ内で幅高さを揃える（JSが固定サイズを付与） */
.onenote-box.cell { border:1px solid #333; cursor:grab; }
.onenote-box.cell:hover { outline:none; box-shadow:0 0 0 1px #4a6cf7; }
.onenote-box.cell .onenote-box-body { height:100%; box-sizing:border-box; }
/* 縁の右クリック削除メニュー */
.onenote-ctxmenu { position:fixed; z-index:100000; background:#fff; border:1px solid #ccc; border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,0.18); min-width:150px; padding:4px; font-size:13px; }
.onenote-ctx-item { padding:7px 14px; border-radius:4px; cursor:pointer; color:#333; white-space:nowrap; }
.onenote-ctx-item:hover { background:#eef2ff; }
.onenote-ctx-item.del { color:#c0392b; }
.onenote-ctx-item.del:hover { background:#fde8e6; }
.onenote-ctx-sep { height:1px; background:#eee; margin:4px 6px; }
.onenote-ctx-tableform { padding:6px 10px; }
.onenote-ctx-formhead { font-weight:bold; font-size:12px; color:#333; margin-bottom:6px; }
.onenote-ctx-formrow { font-size:12px; color:#555; display:flex; align-items:center; gap:4px; margin-bottom:8px; }
.onenote-ctx-formrow input { width:48px; padding:3px 4px; border:1px solid #ccc; border-radius:4px; font-size:12px; }
.onenote-ctx-formbtn { width:100%; background:#4a6cf7; color:#fff; border:none; border-radius:4px; padding:6px; font-size:12px; font-weight:bold; cursor:pointer; }
.onenote-ctx-formbtn:hover { background:#3a5ce0; }
/* ツールバーの色ボタン（A の下に現在色のバー） */
.onenote-tb-btn sup { font-size:9px; }
.onenote-color-btn { position:relative; }
.onenote-color-bar { display:inline-block; width:13px; height:3px; background:#e00000; vertical-align:bottom; margin:0 1px -1px -10px; }
/* サイズ/色のポップアップ */
.onenote-pop { position:fixed; z-index:100001; background:#fff; border:1px solid #b0b0b0; border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,0.22); padding:8px; }
.onenote-pop-size { min-width:150px; padding:5px; }
.onenote-size-item { display:flex; align-items:center; gap:12px; padding:6px 10px; border-radius:4px; cursor:pointer; }
.onenote-size-item:hover { background:#eef2ff; }
.onenote-size-prev { width:28px; text-align:center; color:#333; line-height:1; }
.onenote-pal-sec { font-size:11px; color:#666; margin:5px 2px 3px; }
.onenote-pal-r { display:flex; gap:2px; }
.onenote-pal-r + .onenote-pal-r { margin-top:2px; }
.onenote-pal-gap { height:6px; }
.onenote-sw { width:18px; height:18px; border:1px solid rgba(0,0,0,0.18); cursor:pointer; display:inline-block; box-sizing:border-box; }
.onenote-sw:hover { outline:2px solid #4a6cf7; outline-offset:-1px; position:relative; z-index:1; }
.onenote-pal-foot { border-top:1px solid #eee; margin-top:7px; padding-top:4px; }
.onenote-pal-item-row { padding:6px 8px; border-radius:4px; cursor:pointer; font-size:13px; color:#333; }
.onenote-pal-item-row:hover { background:#f0f0f0; }