@charset "UTF-8";
/* ==========================================================================
   note.css — ゆうきのノート
   --------------------------------------------------------------------------
   ノートは**外から持ち込んだ資料を綴じる場所**である。資料は資料の体裁で
   届く。この 1 枚が受け持つのは外枠と版面 ── 資料自身の意匠（色・罫・
   カードの作り）は、篇ごとにそのページへ埋め込む（tools/build_note.py）。

   最初の篇はスライドだった。1600 × 900 の紙が 95 枚。紙のままでは
   iPhone に載らないので、**紙をやめて縦に流れる文書に組み直す**。
   ここはその版面を決める。

   基準は iPhone 17 Pro Max（440 × 956pt）。横スクロールを作らないこと、
   タップ対象を 44pt 下回らせないこと、図の中の字を読ませる道を必ず
   用意すること ── この三つが守る線。
   ========================================================================== */

/* ==========================================================================
   1. ノート一覧（/note/）
   ========================================================================== */
.nlist{ margin-top:var(--sp-l); }

.nitem{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--sp-m); align-items:start;
  padding:var(--sp-m) 0; border:0;
  border-bottom:1px solid var(--lux-divider);
  color:inherit;
}
.nitem:first-child{ border-top:1px solid var(--lux-border); }
@media (hover:hover){
  .nitem:hover{ background:var(--lux-bg-warm); }
  .nitem:hover .nitem__title{ color:var(--lux-gold-deep); }
}
.nitem__seq{
  font-family:var(--lux-figure); font-size:22px; font-weight:300;
  color:var(--lux-gold); letter-spacing:.04em; line-height:1.1;
  padding-top:2px;
}
.nitem__main{ display:block; min-width:0; }
.nitem__title{
  display:block; font-family:var(--lux-serif); font-size:clamp(16px,2.2vw,20px);
  font-weight:400; line-height:1.5; color:var(--lux-text);
  transition:color var(--lux-transition);
}
.nitem__sub{
  display:block; font-size:12px; letter-spacing:.04em;
  color:var(--lux-gold-deep); margin-top:3px;
}
.nitem__lead{
  display:block; font-size:13px; line-height:1.85;
  color:var(--lux-text-soft); margin-top:8px;
}
.nitem__meta{
  font-family:var(--lux-label); font-size:9px; letter-spacing:.16em;
  color:var(--lux-text-muted); white-space:nowrap; padding-top:6px;
}
/* 初回投稿日と最終更新日。右肩ではなく本文側に置く ──
   狭い窓で右肩を落としても、日付だけは残るように */
.nitem__days{
  display:block; margin-top:7px;
  font-family:var(--lux-label); font-size:10px; letter-spacing:.1em;
  color:var(--lux-text-muted);
}
.nitem__days b{
  font-weight:400; color:var(--lux-gold-deep); margin-right:.55em;
  letter-spacing:.16em;
}
.nitem__days .sep{ margin:0 .7em; opacity:.5; }

/* --- 組（まとまりで読むもの）------------------------------------------ */
.ngroup{
  border-bottom:1px solid var(--lux-divider);
  border-left:2px solid var(--lux-gold);
  padding-left:var(--sp-m);
}
.ngroup + .nitem, .nitem + .ngroup{ border-top:0; }
.ngroup__head{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--sp-m); align-items:start;
  padding:var(--sp-m) 0 var(--sp-s);
}
.ngroup__seq{
  font-family:var(--lux-figure); font-size:22px; font-weight:300;
  color:var(--lux-gold); letter-spacing:.04em; line-height:1.1; padding-top:2px;
  white-space:nowrap;
}
.ngroup__main{ display:block; min-width:0; }
.ngroup__title{
  display:block; scroll-margin-top:96px; font-family:var(--lux-serif); font-size:clamp(17px,2.4vw,22px);
  font-weight:400; line-height:1.5; color:var(--lux-text);
}
.nsub{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--sp-m); align-items:start;
  padding:12px 0 12px var(--sp-m); border:0;
  border-top:1px solid var(--lux-divider); color:inherit;
}
@media (hover:hover){
  .nsub:hover{ background:var(--lux-bg-warm); }
  .nsub:hover .nsub__title{ color:var(--lux-gold-deep); }
}
.nsub__seq{
  font-family:var(--lux-figure); font-size:15px; font-weight:300;
  color:var(--lux-gold); letter-spacing:.04em; line-height:1.3; padding-top:2px;
}
.nsub__main{ display:block; min-width:0; }
.nsub__title{
  display:block; font-family:var(--lux-serif); font-size:clamp(15px,1.9vw,17px);
  font-weight:400; line-height:1.5; color:var(--lux-text);
  transition:color var(--lux-transition);
}
.nsub__title b{
  font-family:var(--lux-label); font-size:11px; font-weight:400;
  letter-spacing:.16em; color:var(--lux-gold-deep); margin-right:.9em;
}
.nsub .nitem__lead{ margin-top:5px; }

/* 430px では右肩の枚数を落とす。題を折り返させてまで置く情報ではない */
@media (max-width:520px){
  .nitem, .ngroup__head, .nsub{
    grid-template-columns:auto minmax(0,1fr); gap:var(--sp-s);
  }
  .nitem__meta{ display:none; }
  .ngroup{ padding-left:12px; }
  .nsub{ padding-left:0; }
}

/* ==========================================================================
   2. 篇のページ ── 外枠
   ========================================================================== */
/* 図が 900 単位幅で描かれているので、読み物の測り（768px）では狭い。
   ノートだけ段を広く取る */
.note-shell main.reader{ max-width:none; }
@media (min-width:1080px){
  .note-shell{ grid-template-columns:216px minmax(0,940px); }
}

/* 記事の頭に置く一段落（前付けの「主張」／writing.md §2.2）。
   gago.css は `.quiz .thesis` と `.gallery .thesis` しか持っていないので、
   ここで受ける。**素の本文と同じに出してはいけない** ── 記事全体を
   言い切る一段落で、読者はここだけ読んで先へ進むかを決める */
.note-page .thesis,
.note-index .thesis{
  max-width:34em; color:var(--lux-text-soft); margin:0 0 var(--sp-m);
}
.note-page .thesis b,
.note-index .thesis b{ font-weight:500; color:var(--lux-text); }

.note-meta{
  display:flex; flex-wrap:wrap; gap:var(--sp-s) var(--sp-m);
  padding:var(--sp-s) 0; margin-bottom:var(--sp-m);
  border-bottom:1px solid var(--lux-divider);
  font-family:var(--lux-label); font-size:9px; letter-spacing:.18em;
  color:var(--lux-text-muted);
}

/* 目次の右肩に出す「この見出しは何枚あるか」。
   文字ノードではなく生成内容にしてある ── gago.js は畳んだバーの現在地を
   項目の子ノードから組み立てるので、span で置くと見出しの尻に数字が付く */
.toc__item[data-c]{ padding-right:calc(var(--sp-s) + 2.4em); }
.toc__item[data-c]::after{
  content:attr(data-c); position:absolute; right:var(--sp-s); top:9px;
  text-indent:0; line-height:inherit;
  font-family:var(--lux-mono); font-size:9.5px;
  color:var(--lux-text-muted);
}

/* ==========================================================================
   3. 資料の版面 ── 紙をやめる
   ========================================================================== */
.note-deck{ margin-top:var(--sp-m); }

/* 1 枚が 1 節になる。
   95 枚あるので画面外を描かせない `content-visibility` を当てたくなるが、
   **やめた**。高さの見積りが外れるぶんスクロール位置が飛び、目次から
   節へ跳んだ直後に本文が数百 px ずれる。1 枚あたり 2KB の DOM で
   figure は 33 枚だから、素直に組ませたほうが速いより正しい。 */
.note-deck .slide{
  position:relative;
  padding:var(--sp-l) 0 var(--sp-xl);
  border-top:1px solid var(--lux-divider);
  contain:layout style;
}
/* 目次から跳んだとき、貼りつく目次バーの下に潜らせない */
.note-deck .slide{ scroll-margin-top:calc(var(--stick-h) + 8px); }
.note-deck .slide:first-child{ border-top:0; padding-top:var(--sp-s); }

/* 暗い頁は資料の中で息継ぎの役をしている（中扉・言い切りの一行）。
   狭い画面では画面の端まで伸ばして、頁が変わったことを分からせる */
.note-deck .slide.dark{
  background:var(--lux-text); color:#E8E8E8;
  border-top:0; padding:var(--sp-xl) var(--sp-m);
  margin:var(--sp-m) 0;
}
@media (max-width:1079px){
  .note-deck .slide.dark{
    margin-left:calc(-1 * var(--gutter-l));
    margin-right:calc(-1 * var(--gutter-r));
    padding-left:var(--gutter-l); padding-right:var(--gutter-r);
  }
}

/* 紙の座標系だったもの。ただの入れ物に戻す */
.note-deck .pad,
.note-deck .body,
.note-deck .figwrap,
.note-deck .vc{
  position:static; display:block;
  width:auto; height:auto; max-width:none; max-height:none;
  inset:auto; transform:none;
}

/* 紙の上下に置かれていた帯（表紙の題字まわり、裏表紙の署名）。
   1600px なら左右に振り分けられるが、396px では 2 つ並べられない。
   狭い画面では積み、左に揃える */
.note-deck .npad-row{ margin-bottom:var(--sp-l); }
.note-deck .npad-row:last-child{ margin-bottom:0; }
.note-deck .npad-row > * + *{ margin-top:var(--sp-s); }
@media (min-width:820px){
  .note-deck .npad-row{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:var(--sp-l);
  }
  .note-deck .npad-row > * + *{ margin-top:0; }
}
/* 資料が右の要素に直書きしている text-align:right を、狭い画面でだけ消す。
   左右に振り分ける相手がいなくなった以上、右寄せは宙に浮くだけになる。
   直書きに勝つ手が !important しかないので、ここだけ使う */
@media (max-width:819px){
  .note-deck .npad-row > *{ text-align:left !important; }
}

/* 見出し。番号・題・目盛りが 1 行に載らない幅では折り返す */
.note-deck .hd{
  position:static; height:auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:6px var(--sp-s);
  padding-bottom:8px; margin-bottom:var(--sp-m);
  border-bottom:1px solid var(--lux-border);
}
.note-deck .slide.dark .hd{ border-bottom-color:#454545; }
.note-deck .hd .l{ display:flex; align-items:baseline; gap:var(--sp-s); min-width:0; }
/* 「測れる ←→ 測れない」の目盛り。狭い画面では 42vw を上限にする */
.note-deck .gz{ width:min(240px,42vw); height:auto; flex:0 0 auto; }

/* 通し番号。紙の隅にあったノンブルを、節の肩に小さく置き直す */
.note-deck .pn{
  position:absolute; top:var(--sp-s); right:0;
  font-family:var(--lux-label); font-size:9px; letter-spacing:.14em;
  color:var(--lux-cta-border);
}
.note-deck .slide:first-child .pn,
.note-deck .slide.dark .pn{ display:none; }

/* ==========================================================================
   4. 二段組を畳む
   ========================================================================== */
.note-deck .c2,
.note-deck .c2u,
.note-deck .c2a,
.note-deck .c2b{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:var(--sp-l); height:auto;
}
@media (min-width:820px){
  .note-deck .c2,
  .note-deck .c2u{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .note-deck .c2a{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
  .note-deck .c2b{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
}

/* 言い切りの一行。紙では画面いっぱいに置かれていた */
.note-deck .killer{ display:block; height:auto; padding:var(--sp-m) 0; }

/* ==========================================================================
   5. 表 ── 自分の枠の中で横に流す
   ========================================================================== */
.ntable{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  border:1px solid var(--lux-border);
}
.ntable table{ min-width:520px; border:0; }
.note-deck .tw{ border:0; }

/* ==========================================================================
   6. 図 ── 幅に合わせて置き、タップで全画面
   --------------------------------------------------------------------------
   図の中の字は viewBox の単位で書かれている。900 単位幅の図に 15 単位の
   字を置いた絵を 396px で描けば、字は 6.6px になる。**縮めれば読めなく
   なるし、拡げれば頁が横に伸びる。**

   だから頁の上では全体像だけを見せ、読むための拡大は別に用意する。
   拡大したときは、縦持ちのままでも画面の**長い辺**を使う（§7）。
   ========================================================================== */
.note-deck .nfig{
  display:block; position:relative; cursor:zoom-in;
  border:1px solid var(--lux-border); background:var(--lux-surface);
  margin:0;
  /* 「タップで拡大」を置くぶんの帯。図に被せると、図の中の注記
     （たいてい左下から右へ伸びる 1 行）を隠してしまう */
  padding-bottom:20px;
}
.note-deck .slide.dark .nfig{ border-color:#454545; }
.note-deck .nfig svg{
  display:block; width:100%; height:auto; border:0; background:transparent;
}
.note-deck .nfig:focus-visible{ outline:2px solid var(--lux-gold); outline-offset:2px; }
.nfig__hint{
  position:absolute; right:8px; bottom:4px;
  font-family:var(--lux-label); font-size:8.5px; letter-spacing:.14em;
  color:var(--lux-text-muted); pointer-events:none;
}
@media (hover:hover){
  .note-deck .nfig:hover{ border-color:var(--lux-gold); }
  .note-deck .nfig:hover .nfig__hint{ color:var(--lux-gold); }
}
/* ポインタで読める幅があるなら、拡大を促す必要はない */
@media (min-width:1080px){
  .nfig__hint{ display:none; }
  .note-deck .nfig{ padding-bottom:0; }
}

/* 章の図版とは扱いを変える。
   gago.css は狭い画面で `figure svg{min-width:520px}` を当て、はみ出した
   ぶんを figure の横スクロールに回している。430px 幅で描かれた章の図なら
   それでよいが、**ここの図は 900 単位幅**で、520px でもまだ字が 8px しか
   ない。横に振っても読めないものを横に振っても仕方がないので、
   幅なりに置いて全画面へ逃がす。章側の指定はここで解く */
.note-deck figure{ margin:0; overflow-x:visible; }
.note-deck figure > figcaption::after{ content:none; }
.note-deck .nfig svg{ min-width:0; max-width:100%; }
/* 図の説明は文章であって符牒ではない。gago.css の figcaption（図版番号を
   出すための小さな総大文字・中央揃え）から、地の文の組みに戻す */
.note-deck figcaption{
  margin-top:10px; text-align:left; text-transform:none;
  letter-spacing:.01em; font-family:var(--sans);
}

/* ==========================================================================
   7. 図の拡大 ── 縦持ちのまま横長の図を読む
   --------------------------------------------------------------------------
   440 × 956 の画面に 900 × 340 の図を入れると、幅に合わせるかぎり
   440px までしか使えない。**画面を回さずに、図のほうを回す。**
   956px 側を図の長辺に当てれば、同じ画面で 2.2 倍に読める。

   端末を横に倒したときは倒したぶんで足りるので、回転はやめる
   （二重に回ると天地が逆になる）。
   ========================================================================== */
.nz{
  width:100%; max-width:none; height:100%; max-height:none;
  margin:0; padding:0; border:0; background:var(--lux-bg);
  overflow:hidden; touch-action:pinch-zoom;
}
.nz::backdrop{ background:rgba(0,0,0,.86); }
.nz__stage{
  position:absolute; top:50%; left:50%;
  translate:-50% -50%;
  display:flex; align-items:center; justify-content:center;
  width:calc(100dvw - 16px); height:calc(100dvh - 16px);
}
.nz__stage svg{
  width:100%; height:100%; max-width:100%; max-height:100%;
  border:0; background:transparent;
}
/* 写真は舞台いっぱいに置き、比は object-fit で保つ */
.nz__stage img{
  width:100%; height:100%; max-width:100%; max-height:100%;
  border:0; background:transparent; object-fit:contain;
}
/* 縦持ちで、図が横長のときだけ回す */
@media (orientation:portrait){
  .nz.nz--wide .nz__stage{
    width:calc(100dvh - 16px); height:calc(100dvw - 16px);
    rotate:90deg;
  }
}
@media (min-width:1080px){
  .nz.nz--wide .nz__stage{ rotate:none; }
}
.nz__close{
  position:fixed; top:calc(env(safe-area-inset-top) + 10px); right:14px;
  min-height:44px; padding:0 16px;
  font-family:var(--lux-label); font-size:9px; letter-spacing:.2em;
  color:var(--lux-text); background:var(--lux-bg);
  border:1px solid var(--lux-cta-border); cursor:pointer;
}
.nz__close:focus-visible{ outline:2px solid var(--lux-gold); outline-offset:2px; }

/* ==========================================================================
   8. 資料の中で、サイトの規則と噛み合わない箇所だけを直す
   ========================================================================== */
/* gago.css の .note（語釈の下に付ける小さな注）が、資料の .note に
   margin-top:.3em を落としてくる。ここだけ打ち消す */
.note-deck .note{ margin-top:0; }
/* 資料の見出しは h3.lbl などで組まれている。gago.css の h1〜h4 の
   余白と色が混ざるので、資料側に返す */
.note-deck h1,.note-deck h2,.note-deck h3,.note-deck h4{
  margin:0; color:inherit; border:0; padding:0; font-weight:inherit;
}
.note-deck p{ margin:0; }
.note-deck ul,.note-deck ol{ margin:0; padding-left:0; }
.note-deck li{ margin-bottom:0; }
.note-deck b{ font-weight:700; }
.note-deck a{ color:inherit; }

@media print{
  .nz,.nfig__hint,.note-meta{ display:none; }
  .note-deck .slide{ content-visibility:visible; break-inside:avoid; }
}

/* ==========================================================================
   9. 記事（Markdown で書いたもの）
   --------------------------------------------------------------------------
   持ち込み資料と違って、記事は寸法を持たずに届く（writing.md）。
   だから .note-deck のような「資料の CSS を閉じ込める器」は要らず、
   gago.css の部品がそのまま効く。ここで足すのは、記事という読み物に
   合わせた微調整だけ。
   ========================================================================== */

/* 図の説明は文章であって符牒ではない。gago.css の figcaption は図版番号を
   出すための小さな総大文字・中央揃えなので、地の文の組みに戻す */
.note-body figcaption{
  text-align:left; text-transform:none; letter-spacing:.02em;
  font-family:var(--lux-serif); font-size:12.5px; line-height:1.8;
  color:var(--lux-text-soft); margin-top:8px;
}
/* 図は本文と地続きに置く。枠で囲うと図鑑になってしまう */
.note-body figure{ margin:var(--sp-m) 0; }
.note-body figure svg{ max-width:100%; }

/* 節のあいだは罫で切る（design.md §0「空白ではなく罫線で領域を切る」）。
   h2 が自前で罫を持っているので、節の側では余白だけを見る */
.note-body .section:first-child{ padding-top:var(--sp-s); }
.note-body .section:first-child h2{ margin-top:0; }

/* 確度の印は段落の頭に出る。行の中で浮かないよう、直後に半角ぶん空ける */
.note-body .tag-fact,
.note-body .tag-infer,
.note-body .tag-hyp{ margin-right:.4em; }

/* 箱の中の段落は、地の文よりわずかに小さい。入れ子で二重に縮まないように */
.note-body .keypoint p,
.note-body .aside p{ font-size:14px; }

/* ==========================================================================
   10. 語を集める篇（`:::語` を持つ記事）
   --------------------------------------------------------------------------
   一句ずつを立てて並べる形式。ここだけ道具が要る ── 拼音のルビを消せること、
   探せること、並べ替えられること。文章として読むだけなら要らないが、
   **覚えるために読む**ときは要る。

   ルビは 1 字ずつ貼ってある（tools/article.py）。行にまとめて添えるやり方は、
   どの字がどの音かが分からないので中級から先で効かない。
   ========================================================================== */

/* --- 道具の帯。目次の下に貼りつく --- */
.cn-bar{
  position:sticky; top:calc(var(--stick-h) + 0px); z-index:30;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:8px 0; margin-bottom:var(--sp-m);
  background:var(--lux-bg);
  border-bottom:1px solid var(--lux-border);
}
.cn-bar input[type="search"]{
  flex:1 1 160px; min-width:0; min-height:38px;
  padding:0 10px; font:inherit; font-size:13px;
  color:var(--lux-text); background:var(--lux-bg-soft);
  border:1px solid var(--lux-border); border-radius:0;
  -webkit-appearance:none; appearance:none;
}
.cn-bar input[type="search"]::placeholder{ color:var(--lux-text-muted); font-size:12px; }
.cn-bar input[type="search"]:focus-visible{ outline:2px solid var(--lux-gold); outline-offset:-2px; }

.cn-sort{ display:flex; flex:0 0 auto; }
.cn-bar button{
  min-height:38px; padding:0 10px;
  font-family:var(--lux-label); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
  color:var(--lux-text-muted); background:transparent;
  border:1px solid var(--lux-cta-border); cursor:pointer;
}
.cn-sort button + button{ border-left:0; }
.cn-bar button[aria-pressed="true"]{
  color:#FFFFFF; background:var(--lux-gold); border-color:var(--lux-gold);
}
.cn-bar button:focus-visible{ outline:2px solid var(--lux-gold); outline-offset:2px; }
.cn-ruby{ flex:0 0 auto; }
.cn-count{
  flex:0 0 auto; margin-left:auto;
  font-family:var(--lux-mono); font-size:10px; color:var(--lux-text-muted);
}
@media (max-width:520px){
  .cn-count{ width:100%; margin-left:0; text-align:right; }
}

/* --- 一句のカード --- */
.cn-card{
  border-top:1px solid var(--lux-gold);
  border-bottom:1px solid var(--lux-divider);
  padding:var(--sp-m) 0; margin:0 0 var(--sp-m);
}
.cn-line{
  font-family:var(--lux-serif);
  font-size:clamp(19px,2.6vw,25px); font-weight:400;
  line-height:2.7; letter-spacing:.04em; color:var(--lux-text);
  margin:0 0 var(--sp-s);
}
.cn-line ruby{ ruby-position:over; }
.cn-line rt{
  font-family:var(--lux-mono); font-size:.42em; font-weight:400;
  letter-spacing:.02em; color:var(--lux-gold); line-height:1.4;
  transform:translateY(.25em);
}
.cn-punc{ letter-spacing:0; }
.cn-ja{
  font-size:14px; line-height:1.85; color:var(--lux-text-soft); margin:0;
}
.cn-meta{
  display:flex; flex-wrap:wrap; gap:4px var(--sp-s); margin-top:var(--sp-s);
  font-family:var(--lux-label); font-size:9px; letter-spacing:.16em;
  color:var(--lux-text-muted);
}
.cn-meta__src{ color:var(--lux-gold-deep); }

/* 拼音を消したとき。行間も一緒に戻す（ルビのぶんの空きが要らなくなる） */
.py-off .cn-line rt{ display:none; }
.py-off .cn-line{ line-height:1.95; }

/* 目次から跳ぶとき、貼りつく帯が二段になっている（目次の帯＋道具の帯）。
   両方のぶんを空けないと、句の頭が帯の下に潜る */
/* 道具の帯は .note-body の**兄**（外側）にある。子ではないので
   :has() では捕まらない。隣接の関係で受ける */
.cn-bar ~ .note-body section.section,
.cn-bar ~ .note-body .yohaku{
  scroll-margin-top:calc(var(--stick-h) + var(--cn-bar-h, 62px) + 8px);
}

/* 探しているあいだ、当たらなかった節は畳む */
.cn-hidden{ display:none !important; }
.cn-empty{
  padding:var(--sp-l) 0; text-align:center;
  font-size:13px; color:var(--lux-text-muted);
}

/* 本文の中に出てくる中国語の一句。カードほど強く立てない */
.cn-in{ font-family:var(--lux-serif); letter-spacing:.04em; }