/* Megru: 知識ノートの見た目(2026-09-25 khamada「大学生の試験前のまとめノートのように。手書きの質感を徹底的に」)。
   紙=罫線(30px ごと)とドット・左の赤い余白線・上の No. と Date。文字=手書きの書体(fonts/hand.css)。線と挿絵=hand.js。
   罫線に文字が乗り続けるよう、縦の大きさはすべて 30px の倍数にそろえる(付箋・表の後ろは hand.js が余白で合わせる) */
:root{
  --nb-line:30px;
  --nb-paper:#fdfcf6; --nb-rule:#bfd0e2; --nb-rule-dot:#8fa9c4; --nb-margin-line:#f2a7a7; --nb-desk:#ece8df;
  --pen-ink:#1f2a48; --pen-blue:#1d5bc4; --pen-red:#d0342c; --pen-green:#23864f; --pencil:#6d6a64;
  --hl-yellow:rgba(255,226,0,.5); --hl-pink:rgba(255,92,170,.32); --hl-mint:rgba(60,215,120,.33); --hl-sky:rgba(80,175,255,.33);
  --sticky:#fff1a1; --sticky-ink:#3a3320; --tape:rgba(255,255,255,.55);
  --nb-desk-ink:#5f5c56; --nb-desk-pen:#1f2a48;
  --hand:"Yomogi","Hiragino Maru Gothic ProN","Yu Gothic UI",sans-serif;
  --marker:"Yusei Magic","Yomogi","Hiragino Maru Gothic ProN",sans-serif;
}
:root[data-theme="dark"]{   /* 暗い画面でも紙は明るいまま(少しだけ落とす)。暗い紙に明るいインクは読みにくかった(9/25 khamada「読みにくさが酷すぎる」)。
                                 暗くするのは机(紙の外)だけ。ペンと蛍光ペンの色は明るい画面と同じ */
  --nb-paper:#e4dfd1; --nb-rule:#a7bacd; --nb-rule-dot:#7c95ae; --nb-margin-line:#df8f8f; --nb-desk:#171715;
  --sticky:#f0e08a; --tape:rgba(255,255,255,.42);
  --nb-desk-ink:#d9d4c8; --nb-desk-pen:#f2eee4;
}
body{background:var(--nb-desk);color:var(--ink);margin:0}

/* 上の帯(アプリの操作。ノートの外) */
.nb-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:var(--card);color:var(--ink);border-bottom:1px solid var(--border);
        padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
.nb-top a,.nb-top button{color:var(--t2);display:flex;align-items:center;gap:4px;font-size:14px;text-decoration:none;background:none;border:0;padding:4px}
.nb-top svg{width:20px;height:20px}
.nb-ttl{flex:1;min-width:0;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
#app{max-width:680px;margin:0 auto;padding:14px 10px calc(40px + env(safe-area-inset-bottom));box-sizing:border-box}

/* 手書きの線の重ね(hand.js) */
.hand-root{position:relative;z-index:0}
.hand-layer{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.hand-back{z-index:-1}
.hand-front{z-index:2}
.hand-icon{display:inline-block;vertical-align:-5px;flex:none}
.hand-arrow{display:inline-block;vertical-align:-2px;margin:0 3px}
.hand-dot{display:inline-block;vertical-align:-1px;margin-right:5px;flex:none}

/* 紙 */
.paper{position:relative;font-family:var(--hand);font-size:var(--hand-size);line-height:var(--nb-line);color:var(--pen-ink);
  padding:0 16px var(--nb-line) 50px;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 22px rgba(0,0,0,.08);
  background:
    radial-gradient(circle at 18px calc(var(--nb-line) - .5px),var(--nb-rule-dot) 1.1px,transparent 1.7px) 0 0/36px var(--nb-line),
    linear-gradient(to bottom,transparent calc(var(--nb-line) - 1px),var(--nb-rule) calc(var(--nb-line) - 1px),var(--nb-rule) var(--nb-line)) 0 0/100% var(--nb-line),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"),
    var(--nb-paper)}
.paper::before{content:"";position:absolute;left:38px;top:0;bottom:0;width:1.5px;background:var(--nb-margin-line);opacity:.8}
.paper *{box-sizing:border-box}
.pg-head{display:flex;justify-content:space-between;height:var(--nb-line);font-size:13px;color:var(--pencil)}
.pg-head span{align-self:flex-end;line-height:22px;padding:0 4px}
.pg-title{font-family:var(--marker);font-size:26px;line-height:calc(var(--nb-line) * 2);margin:0;color:var(--pen-ink);letter-spacing:.02em}
.pg-title span{padding:0 2px}
.pg-kind{display:flex;align-items:center;gap:6px;height:var(--nb-line);font-size:14px;color:var(--pencil)}
.pg-gap{height:var(--nb-line)}

/* 見出しと本文 */
.sec{margin-top:var(--nb-line)}
.sec-hd{display:flex;align-items:center;gap:8px;height:var(--nb-line)}
.sec-hd h3{font-family:var(--marker);font-weight:400;font-size:20px;line-height:var(--nb-line);margin:0;padding:0 3px;white-space:nowrap}
.sec-hd .fix{margin-left:auto;font-family:var(--hand);font-size:13px;color:var(--pencil);background:none;border:0;padding:0 2px;line-height:var(--nb-line)}
.ln{min-height:var(--nb-line);overflow-wrap:anywhere}
.ln.li{display:flex;align-items:flex-start}
.ln.li .hand-dot,.ln.li .hand-arrow,.ln.li .hand-icon{margin-top:calc((var(--nb-line) - 12px) / 2)}
.ln.li .hand-arrow{margin-top:calc((var(--nb-line) - 14px) / 2);margin-left:0}
.ln.li > span{flex:1;min-width:0}
.ln.sub{font-family:var(--marker);font-size:16px}
.ln .k{font-family:var(--marker);font-size:15.5px;margin-right:4px}
.blank{color:var(--pencil);font-size:14px;min-height:var(--nb-line)}
.num{color:var(--pen-red)}
.memo,.memo .num{color:var(--pencil)}
.nsrc{display:flex;align-items:flex-start;gap:4px;white-space:normal;font-size:13px;color:var(--pencil);min-height:var(--nb-line)}
.nsrc .hand-icon{margin-top:5px}
.nsrc > span{flex:1;min-width:0;overflow-wrap:anywhere}
.nsrc a{color:inherit;text-decoration:none}
.nsrc a:hover{color:var(--pen-blue)}
table.hand-table{border-collapse:collapse;width:100%;margin:0}
table.hand-table td{padding:0 10px;line-height:var(--nb-line);vertical-align:top;overflow-wrap:anywhere}
table.hand-table td:first-child{font-family:var(--marker);font-size:15px;white-space:nowrap;width:1%;color:var(--pen-blue)}

/* 付箋(AI の提案)。紙の色の部分だけ少し傾け、字はまっすぐ */
.sticky{position:relative;isolation:isolate;margin:var(--nb-line) 6px 0 -4px;padding:14px 14px 12px;color:var(--sticky-ink);font-size:15.5px;line-height:26px}
.sticky::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sticky);border-radius:2px 2px 6px 2px;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 6px 14px rgba(0,0,0,.14);transform:rotate(-.7deg)}
.sticky.r::before{transform:rotate(.6deg)}
.sticky::after{content:"";position:absolute;top:-10px;left:50%;width:86px;height:22px;margin-left:-43px;background:var(--tape);
  transform:rotate(-2.5deg);box-shadow:0 0 0 1px rgba(0,0,0,.03)}
.sticky .st-hd{display:flex;align-items:center;gap:6px;font-family:var(--marker);font-size:16px}
.sticky .st-conf{margin-left:auto;font-family:var(--hand);font-size:12.5px;opacity:.8}
.sticky .st-why{font-size:14px;opacity:.85}
.sticky .st-lab{font-family:var(--marker);font-size:13.5px;margin-top:8px;opacity:.75}
.sticky .st-cur{white-space:pre-wrap;font-size:14.5px;opacity:.7;overflow-wrap:anywhere}
.sticky .st-new{white-space:pre-wrap;overflow-wrap:anywhere}
.sticky .nsrc{color:inherit;opacity:.8;min-height:26px}
.sticky .st-down{display:block;margin:4px 0 0 6px;transform:rotate(90deg);transform-origin:13px 7px;width:26px}

/* 手描きのボタン */
.hbtns{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:12px;align-items:center}
.hbtn{font-family:var(--marker);font-size:15px;line-height:30px;height:32px;padding:0 12px;background:none;border:0;color:inherit;cursor:pointer}
.hbtn:disabled{opacity:.4}
.hbtns.foot{margin-top:0}.hbtns.foot .hbtn{height:30px}   /* ノートの下のボタンは罫線に揃える(上の余白で文字に罫線が重なっていた) */
.hbtn.quiet{font-family:var(--hand);font-size:13.5px;padding:0 4px;color:var(--pencil)}
.msg{color:var(--pen-red);font-size:14px;min-height:var(--nb-line)}

/* 手直し: 罫線の上にそのまま書く */
.edit textarea{display:block;width:100%;min-height:calc(var(--nb-line) * 5);margin:0;padding:0;border:0;outline:0;resize:vertical;background:transparent;
  font-family:var(--hand);font-size:var(--hand-size);line-height:var(--nb-line);color:var(--pen-blue);caret-color:var(--pen-red)}
.edit{padding:0 2px}

/* 版の記録 */
.hist a{display:block;font-size:13.5px;color:var(--pencil);text-decoration:none;min-height:var(--nb-line)}
.hist a[hidden]{display:none}   /* 最近の 5 版だけ見せ、残りは「もっと見る」(9/26 khamada。display:block が hidden に勝って全部出ていた) */

/* 一覧: 机の上のノートの表紙 */
.desk{padding:6px 4px 20px}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 16px;margin-top:8px}
.cover{position:relative;display:block;aspect-ratio:5/7;border-radius:3px 9px 9px 3px;background:var(--cv);text-decoration:none;color:#1f2a48;
  box-shadow:0 1px 1px rgba(0,0,0,.12),0 8px 18px rgba(0,0,0,.14);transition:transform .15s}
.cover:active{transform:scale(.98)}
.cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:15px;border-radius:3px 0 0 3px;background:rgba(0,0,0,.2)}
.cover::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 40%,rgba(0,0,0,.06));pointer-events:none}
.cover .lab{position:absolute;left:24px;right:12px;top:22%;padding:10px 10px 8px;background:#fbfaf4;border-radius:2px;
  background-image:linear-gradient(to bottom,transparent 25px,#c9d6e3 25px,#c9d6e3 26px);background-size:100% 26px;background-position:0 10px}
.cover .lab .no{font-family:var(--hand);font-size:11.5px;color:#6d6a64;line-height:18px}
.cover .lab .t{font-family:var(--marker);font-size:16px;line-height:26px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cover .lab .d{font-family:var(--hand);font-size:11.5px;color:#6d6a64;line-height:22px;text-align:right}
.cover .tag{position:absolute;top:-9px;right:14px;z-index:3;background:var(--sticky);color:var(--sticky-ink);font-family:var(--hand);font-size:12.5px;
  padding:3px 9px 2px;transform:rotate(4deg);box-shadow:0 2px 5px rgba(0,0,0,.2)}
:root[data-theme="dark"] .cover{filter:brightness(.88)}
.desk-note{font-family:var(--hand);font-size:15px;line-height:1.9;color:var(--nb-desk-ink);margin:18px 6px}
.gone{font-family:var(--hand);font-size:14.5px;color:var(--nb-desk-ink);margin-top:26px}
.gone div{display:flex;justify-content:space-between;align-items:center;min-height:34px}
.gone button{font-family:var(--hand);font-size:13.5px;color:var(--link);background:none;border:0}

/* 新しいノート(一枚の紙) */
.paper.form{margin-bottom:22px}
.form input{display:block;width:100%;height:var(--nb-line);border:0;outline:0;padding:0 2px;background:transparent;font-family:var(--hand);font-size:18px;
  line-height:var(--nb-line);color:var(--pen-blue);caret-color:var(--pen-red)}
.form input::placeholder{color:var(--pencil);opacity:.7}
.chk{display:inline-flex;align-items:center;gap:8px;font-family:var(--hand);font-size:16px;background:none;border:0;color:inherit;height:var(--nb-line);padding:0 14px 0 2px}
.chk .bx{position:relative;display:inline-block;width:17px;height:17px}
.chk .bx .hand-icon{position:absolute;left:-4px;top:-9px}
.words{font-size:14.5px;color:var(--pencil)}
.words button{font-family:var(--hand);font-size:14.5px;background:none;border:0;color:var(--pen-blue);padding:0 3px;line-height:var(--nb-line)}

/* 書体は 3 つから選べる(2026-09-25 khamada「明朝体のような一般的な書体・手書き・きっちりした達筆寄り」)。既定は手書き。
   選んだ書体は端末に覚える(notes.js)。紙と手書きの線はどれでも同じ */
:root{--hand-size:17px;--marker-w:400}
html[data-nbfont="neat"]{--hand:"Klee One","Hiragino Mincho ProN","Yu Mincho",serif;--marker:"Klee One","Hiragino Mincho ProN","Yu Mincho",serif;--marker-w:600;--hand-size:16.5px}
html[data-nbfont="plain"]{--hand:"Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho","MS Mincho","Noto Serif JP",serif;--marker:var(--hand);--marker-w:700;--hand-size:16px}
.pg-title,.sec-hd h3,.hbtn,.sticky .st-hd,.sticky .st-lab,.ln.sub,.ln .k,table.hand-table td:first-child,.cover .lab .t{font-weight:var(--marker-w)}
.fonts{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;margin:2px 4px 18px;font-family:var(--hand);font-size:13.5px;color:var(--nb-desk-ink)}
.fonts button{background:none;border:0;padding:4px 6px;font-size:15.5px;color:var(--nb-desk-pen);line-height:26px}
.fonts button[data-f="hand"]{font-family:"Yomogi",sans-serif}
.fonts button[data-f="neat"]{font-family:"Klee One",serif;font-weight:600}
.fonts button[data-f="plain"]{font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;font-weight:700}

/* 本人の編集(2026-09-26 khamada): つまみ・メニュー・ペン箱・目次・リンク・持ち上げた部品・差し込む線 */
.blk{position:relative}
.sec-hd{position:relative}
.grip{position:absolute;left:-46px;top:3px;width:32px;height:24px;padding:0;border:0;background:none;opacity:.5;cursor:grab;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;display:flex;align-items:center;justify-content:center}
.grip:active{opacity:.9}
.blk.lifting,.sec.lifting{opacity:.22}
.ghost{position:fixed;z-index:50;pointer-events:none;margin:0;background:var(--nb-paper);box-shadow:0 12px 28px rgba(0,0,0,.28);transform:rotate(-1.2deg);
  border-radius:3px;padding:0 6px;font-family:var(--hand);font-size:var(--hand-size);line-height:var(--nb-line);color:var(--pen-ink);opacity:.96}
.ghost .grip{display:none}
.drop{position:absolute;left:34px;z-index:4;pointer-events:none;height:10px}
.menu{position:fixed;z-index:60;min-width:180px;max-width:270px;background:var(--nb-paper);border-radius:4px;padding:6px 4px;
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 10px 26px rgba(0,0,0,.24);font-family:var(--hand)}
.menu-t{font-size:13px;color:var(--pencil);padding:6px 12px 4px;border-bottom:1px dashed var(--nb-rule);margin-bottom:2px}
.menu-b{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 12px;font-family:var(--hand);font-size:16px;color:var(--pen-ink)}
.menu-b:active{background:rgba(0,0,0,.05)}
.menu-b.danger{color:var(--pen-red)}
.pens{position:fixed;z-index:60;display:flex;flex-wrap:wrap;justify-content:center;gap:0;max-width:calc(100vw - 16px);padding:5px 6px;background:var(--nb-paper);
  border-radius:22px;box-shadow:0 1px 2px rgba(0,0,0,.1),0 8px 22px rgba(0,0,0,.24)}
.pens[hidden]{display:none}
.pens button{background:none;border:0;padding:5px 3px;line-height:0;-webkit-user-select:none;user-select:none}
.toc{margin-top:var(--nb-line)}
.toc-i{display:flex;align-items:baseline;gap:8px;width:100%;background:none;border:0;padding:0 2px;min-height:var(--nb-line);line-height:var(--nb-line);
  font-family:var(--hand);font-size:var(--hand-size);color:var(--pen-blue);text-align:left;cursor:pointer}
.toc-n{color:var(--pen-red);min-width:1.6em}
.toc-t{flex:1;min-width:0;overflow-wrap:anywhere}
.toc-p{flex:none;font-size:12px;line-height:20px;color:var(--sticky-ink);background:var(--sticky);padding:0 6px;transform:rotate(2deg);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.lnk{color:var(--pen-blue) !important;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.lnk .hand-icon{vertical-align:-2px;margin-right:2px}
.add-line{display:block;margin-left:auto;background:none;border:0;font-family:var(--hand);font-size:13.5px;color:var(--pencil);height:var(--nb-line);line-height:var(--nb-line);padding:0 2px}
.add-sec{margin:var(--nb-line) 0 0 0;font-size:15px;color:var(--pen-blue)}
.ln.aside{color:var(--pen-blue)}
.ln .kome{margin-right:6px;color:var(--pen-blue)}
.hinput{display:block;width:100%;height:var(--nb-line);border:0;outline:0;padding:0 2px;background:transparent;font-family:var(--marker);font-size:19px;color:var(--pen-ink);caret-color:var(--pen-red)}
.clipbar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%) rotate(-.6deg);z-index:40;display:flex;align-items:center;gap:8px;
  max-width:calc(100vw - 24px);background:var(--sticky);color:var(--sticky-ink);font-family:var(--hand);font-size:13.5px;padding:7px 12px;border-radius:3px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.clipbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.clipbar button{flex:none;background:none;border:0;color:var(--pen-blue);font-family:var(--hand);font-size:13.5px}
.toast .undo{margin-left:12px;background:none;border:0;color:var(--link);font-weight:700;font-size:inherit}
.sticky .hbtns{margin-top:24px}