@charset "utf-8";
/* =====================================================================
   YUKARI デザインシステム ④ 正本リーディングCSS
   - 本文の分類ハイライト・書式・別名ポップアップ・分類フィルタ。
   - Web と FileMaker の双方に当てる想定（白地・可読性最優先）。
   - 分類色は tokens.css の --hl-* を参照。フィルタは変数上書きで実現。
   ===================================================================== */

/* ---- 閲読領域（★タイポはユーザー設定で上書き想定）---- */
.reading{
  font-family:var(--reading-font);
  font-size:var(--reading-size);
  line-height:var(--reading-leading);
  color:var(--ink); text-align:justify;
}
.reading p{ margin:0 0 1.1em; }
.reading h1{ font-size:1.4rem; font-weight:700; margin:.2em 0 .8em; }
.reading h2{ font-size:1.12rem; font-weight:600; border-left:5px solid var(--green-d); padding-left:.6em; margin:1.2em 0 .9em; line-height:1.7; }

/* ---- 分類ハイライト（下線状＝文字に被らず読める）---- */
.kks_person  { background:linear-gradient(transparent var(--hl-band), var(--hl-person)   var(--hl-band)); }
.kks_position{ background:linear-gradient(transparent var(--hl-band), var(--hl-position) var(--hl-band)); }
.kks_place   { background:linear-gradient(transparent var(--hl-band), var(--hl-place)    var(--hl-band)); }
.kks_society { background:linear-gradient(transparent var(--hl-band), var(--hl-society)  var(--hl-band)); }
.kks_book    { background:linear-gradient(transparent var(--hl-band), var(--hl-book)     var(--hl-band)); }
.kks_building{ background:linear-gradient(transparent var(--hl-band), var(--hl-building) var(--hl-band)); }
.kks_mobile  { background:linear-gradient(transparent var(--hl-band), var(--hl-mobile)   var(--hl-band)); }
.kks_event   { background:linear-gradient(transparent var(--hl-band), var(--hl-event)    var(--hl-band)); }
.kks_date    { background:linear-gradient(transparent var(--hl-band), var(--hl-date)     var(--hl-band)); }
.kks-group{ /* 人物＋肩書のまとまり（視覚効果なし） */ }

/* ---- 書式 ---- */
.kks_dot{ -webkit-text-emphasis:filled dot; text-emphasis:filled dot; -webkit-text-emphasis-position:over; text-emphasis-position:over; } /* 傍点 */
.kks_under{ text-decoration:underline; text-underline-offset:3px; }
.kks_under_dashed{ border-bottom:2px dashed #888; }
.kks_del{ text-decoration:line-through; }
.kks_italic{ font-style:italic; }
.kks_right{ text-align:right; }
.kks_center{ text-align:center; }
.kks_indent{ padding-left:2em; }
.kks_handing{ padding-left:1em; text-indent:-1em; }
.kks_indent-handing{ padding-left:3em; text-indent:-1em; }
.kks_hint{ vertical-align:super; font-size:60%; }
.kks_marker{ background:#fff3a0; padding:0 .15em; border-radius:2px; }
.reading ruby rt{ font-size:.5em; color:var(--muted); font-weight:400; }

/* kks_hira / kks_kata は変換ロック専用（見た目なし） */
.kks_hira, .kks_kata{ /* no visual style */ }

/* ---- 引用リンク kks_ref（goto-{pageID}）---- */
/* 引用リンク：黄色ハイライトで視認性重視（日付色と共用）*/
.kks_ref{ vertical-align:super; font-size:62%; color:var(--green-d); font-weight:700; cursor:pointer; background-color:var(--hl-date); border-radius:2px; padding:0 .15em; }
.kks_ref:hover{ text-decoration:underline; }

/* ---- 別名ポップアップ（ホバー or .show-alias でタップ表示）---- */
.reading [data-alias]{ position:relative; cursor:help; }
.reading [data-alias]:hover::after,
.reading [data-alias].show-alias::after{
  content:attr(data-alias);
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
  margin-bottom:7px; padding:4px 10px; border-radius:7px; white-space:nowrap; z-index:10;
  background:rgba(31,42,36,.78); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  color:#fff; font-family:var(--font-body); font-size:.74rem; font-weight:500;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
}
.reading [data-alias]:hover::before,
.reading [data-alias].show-alias::before{
  content:''; position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
  margin-bottom:2px; border:5px solid transparent; border-top-color:rgba(31,42,36,.78); z-index:10;
}