/* ═══ 古事記 神様×神社 対照WEB — 共有スタイル ═══ */
:root{
  --sumi:#221e1a;        /* 墨 : 本文 */
  --usuzumi:#6b645c;     /* 薄墨 : 補足 */
  --washi:#f5f2ea;       /* 和紙 : 読書面 */
  --washi-dark:#ece7db;
  --yoru:#151824;        /* 常夜 : ヘッダー */
  --yoru2:#232a3d;
  --shu:#b23a2f;         /* 朱 : 神名・アクション */
  --shu-dark:#8e2d24;
  --kin:#c9a24b;         /* 金泥 : 夜面のアクセント */
  --ai:#2b3a55;          /* 藍 */
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --nav-h:52px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--serif);background:var(--washi);color:var(--sumi);line-height:2;}
body.has-nav{padding-top:var(--nav-h)}

/* ───────── 固定ナビ（巻ページ） ───────── */
.topnav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:200;
  background:rgba(21,24,36,.96);backdrop-filter:blur(4px);
  display:flex;align-items:center;gap:4px;padding:0 14px;
  font-family:var(--sans);font-size:12.5px;
}
.topnav a{color:#d8d2c2;text-decoration:none;padding:6px 10px;letter-spacing:.1em;border-radius:2px}
.topnav a:hover,.topnav a:focus-visible{color:var(--kin)}
.topnav a.nv-active{color:var(--kin);border-bottom:2px solid var(--kin)}
.nv-current{
  margin-left:auto;color:#b9b2a0;font-size:11.5px;letter-spacing:.08em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw;
}

/* ───────── ヘッダー（常夜） ───────── */
header.hero{
  background:linear-gradient(160deg,var(--yoru) 0%,var(--yoru2) 70%,#31405e 100%);
  color:#efe9da;padding:56px 24px 48px;position:relative;overflow:hidden;
}
header.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(1.5px 1.5px at 12% 30%,rgba(201,162,75,.9) 50%,transparent 51%),
   radial-gradient(1px 1px at 78% 18%,rgba(201,162,75,.7) 50%,transparent 51%),
   radial-gradient(1.5px 1.5px at 60% 62%,rgba(201,162,75,.5) 50%,transparent 51%),
   radial-gradient(1px 1px at 32% 76%,rgba(201,162,75,.6) 50%,transparent 51%),
   radial-gradient(2px 2px at 90% 70%,rgba(201,162,75,.45) 50%,transparent 51%);
}
.hd-inner{max-width:860px;margin:0 auto;display:flex;gap:28px;align-items:flex-start;position:relative;z-index:1}
.hd-title-v{
  writing-mode:vertical-rl;font-size:clamp(30px,5vw,44px);font-weight:700;
  letter-spacing:.35em;line-height:1.5;border-right:1px solid rgba(201,162,75,.5);
  padding-right:18px;min-height:200px;color:#f4ecd9;
}
.hd-copy{padding-top:8px}
.hd-copy .eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.3em;color:var(--kin);margin-bottom:14px}
.hd-copy p{font-size:15px;max-width:34em;color:#d8d2c2}
.hd-copy .kami-demo{color:var(--kin);border-bottom:1px dotted var(--kin);cursor:pointer}
.hd-stats{font-family:var(--sans);font-size:11px;letter-spacing:.15em;color:rgba(216,210,194,.75);margin-top:16px}

/* 巻ページの小ヘッダー */
.vol-hero{
  background:linear-gradient(160deg,var(--yoru) 0%,var(--yoru2) 100%);
  color:#efe9da;padding:26px 24px;
}
.vol-hero-inner{max-width:860px;margin:0 auto;display:flex;align-items:baseline;gap:16px}
.vol-hero h1{font-size:22px;font-weight:700;letter-spacing:.15em}
.vol-hero .vh-sub{font-family:var(--sans);font-size:11.5px;color:#b9b2a0;letter-spacing:.1em}

/* ───────── レイアウト ───────── */
main{max-width:860px;margin:0 auto;padding:32px 24px 96px}
section{margin-bottom:56px}
h2.sec{font-family:var(--sans);font-size:13px;letter-spacing:.28em;color:var(--shu-dark);
   font-weight:700;margin-bottom:22px;display:flex;align-items:center;gap:14px}
h2.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--shu-dark),transparent)}

/* ───────── 検索 ───────── */
.search-wrap{margin-bottom:28px}
#searchBox{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--sumi);
  background:#fff;border:1px solid var(--washi-dark);border-left:3px solid var(--shu);
  padding:12px 16px;outline:none;
}
#searchBox:focus{border-color:var(--shu)}
#searchBox::placeholder{color:#b7b0a2}
.search-results{margin-bottom:56px}
.sr-cat{font-family:var(--sans);font-size:11px;letter-spacing:.22em;color:var(--shu-dark);
  font-weight:700;margin:22px 0 10px}
.sr-item{
  display:block;width:100%;text-align:left;font-family:var(--serif);font-size:14.5px;
  background:#fff;border:1px solid var(--washi-dark);padding:11px 16px;margin-bottom:6px;
  cursor:pointer;color:var(--sumi);transition:border-color .15s;line-height:1.8;
}
.sr-item:hover,.sr-item:focus-visible{border-color:var(--shu)}
.sr-item .sr-yomi{font-family:var(--sans);font-size:11px;color:var(--usuzumi);margin-left:8px}
.sr-item .sr-vol{display:inline-block;font-family:var(--sans);font-size:10px;color:#fff;
  background:var(--ai);padding:1px 8px;margin-right:8px;vertical-align:middle;letter-spacing:.15em}
.sr-item .sr-snippet{display:block;font-family:var(--sans);font-size:11.5px;color:var(--usuzumi);line-height:1.7}
.sr-snippet mark{background:rgba(201,162,75,.45);color:inherit}
.sr-empty{font-family:var(--sans);font-size:13px;color:var(--usuzumi);padding:8px 2px}

/* ───────── 巻カード（目次） ───────── */
.vol-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.vol-card{
  display:flex;gap:18px;background:#fff;border:1px solid var(--washi-dark);
  padding:22px;text-decoration:none;color:var(--sumi);
  transition:border-color .15s, box-shadow .15s;
}
.vol-card:hover,.vol-card:focus-visible{border-color:var(--shu);box-shadow:0 2px 12px rgba(178,58,47,.14)}
.vc-label{writing-mode:vertical-rl;font-size:20px;font-weight:700;letter-spacing:.3em;
  border-right:1px solid var(--washi-dark);padding-right:14px;color:var(--shu-dark)}
.vc-body h3{font-size:15px;font-weight:600;margin-bottom:6px;line-height:1.7}
.vc-body p{font-family:var(--sans);font-size:11.5px;color:var(--usuzumi);line-height:1.8}
.vc-go{font-family:var(--sans);font-size:11px;color:var(--shu-dark);letter-spacing:.15em;margin-top:8px;display:inline-block}

/* ───────── 五十音索引 ───────── */
.gojuon{display:flex;flex-wrap:wrap;gap:8px}
.gojuon button{
  font-family:var(--serif);font-size:14px;background:#fff;border:1px solid var(--washi-dark);
  padding:7px 14px;cursor:pointer;color:var(--sumi);transition:all .15s;
}
.gojuon button:hover,.gojuon button:focus-visible{border-color:var(--shu);color:var(--shu-dark)}
.gojuon .yomi{font-size:11px;color:var(--usuzumi);margin-left:6px;font-family:var(--sans)}

/* ───────── 本文（アコーディオン） ───────── */
.chapter-text{
  background:#fff;border:1px solid var(--washi-dark);position:relative;
  scroll-margin-top:calc(var(--nav-h) + 14px);   /* 固定ナビに隠れない */
}
.chapter-text + .chapter-text{margin-top:14px}
.chapter-head{
  display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;
  background:none;border:none;cursor:pointer;font-family:inherit;color:inherit;
  text-align:left;padding:20px 22px;
}
.chapter-head:focus-visible{outline:2px solid var(--shu);outline-offset:-2px}
.ch-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ch-h3{font-size:19px;font-weight:600;letter-spacing:.08em;line-height:1.5}
.ch-lead{font-family:var(--sans);font-size:11px;color:var(--usuzumi);letter-spacing:.1em}
.ch-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.ch-right .vol-tag{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--usuzumi)}
.ch-icon{
  font-size:13px;color:var(--shu);transition:transform .3s ease;display:inline-block;
}
.chapter-text.open .ch-icon{transform:rotate(90deg)}
.chapter-text.open .chapter-head{border-bottom:1px solid var(--washi-dark)}
.chapter-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.chapter-body-inner{padding:24px 30px 30px}
.chapter-text p{
  font-size:16px;text-align:justify;margin-bottom:1.4em;
  word-break:break-all;overflow-wrap:anywhere;   /* ルビ×justifyの間延び対策 */
}
.chapter-text p:last-of-type{margin-bottom:0}
.src-note{font-family:var(--sans);font-size:11px;color:var(--usuzumi);margin-top:20px;line-height:1.7}
.vol-sep{font-family:var(--sans);font-size:13px;letter-spacing:.3em;color:var(--shu-dark);
  font-weight:700;margin:44px 0 16px;scroll-margin-top:calc(var(--nav-h) + 14px)}

/* 神名（クリッカブル） */
ruby{ruby-align:start}                             /* ルビの均等割付を無効化 */
.kami-name{
  color:var(--shu-dark);cursor:pointer;font-weight:500;
  text-decoration:underline;text-decoration-color:rgba(178,58,47,.45);
  text-decoration-thickness:1px;text-underline-offset:5px;
  transition:background .15s;border-radius:2px;
}
.kami-name rt{font-size:9px;color:var(--usuzumi);font-family:var(--sans);letter-spacing:.05em}
.kami-name:hover,.kami-name:focus-visible{background:rgba(178,58,47,.08)}
.kami-name:focus-visible{outline:2px solid var(--shu);outline-offset:2px}
.kami-name.is-flash{animation:flash 1.6s ease}
@keyframes flash{0%,60%{background:rgba(201,162,75,.35)}100%{background:transparent}}

/* ───────── 吹き出し ───────── */
#popover{
  position:absolute;z-index:300;width:min(380px,calc(100vw - 32px));
  background:#fffdf8;border:1px solid #d8cfba;box-shadow:0 8px 28px rgba(34,30,26,.18);
  padding:20px 20px 16px;display:none;
}
#popover.open{display:block}
#popover::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--shu)}
.po-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.po-name{font-size:16.5px;font-weight:700;line-height:1.7}
.po-close{background:none;border:none;font-size:18px;line-height:1;cursor:pointer;color:var(--usuzumi);padding:2px 6px;flex-shrink:0}
.po-close:hover,.po-close:focus-visible{color:var(--shu)}
.po-summary{font-size:13.5px;line-height:1.9;margin-bottom:14px}
.po-shrine-label{font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--shu-dark);font-weight:700;margin-bottom:8px}
.po-shrines{list-style:none;max-height:280px;overflow-y:auto}
.po-shrines li{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:7px 0;border-top:1px dashed var(--washi-dark);font-size:14px}
.po-shrines li:last-child{border-bottom:1px dashed var(--washi-dark)}
.po-shrines .s-name{flex:1;line-height:1.7}
.po-shrines .s-note{display:block;font-family:var(--sans);font-size:10.5px;color:var(--usuzumi);line-height:1.6}
.map-link{font-family:var(--sans);font-size:11.5px;font-weight:700;color:#fff;background:var(--shu);
  text-decoration:none;padding:4px 10px;white-space:nowrap;letter-spacing:.08em;margin-top:3px}
.map-link:hover,.map-link:focus-visible{background:var(--shu-dark)}
.po-unverified{display:inline-block;font-family:var(--sans);font-size:10px;color:#8a6d1f;background:#f5ead0;padding:1px 7px;margin-left:6px;vertical-align:middle}

/* ───────── レスポンシブ ───────── */
@media (max-width:600px){
  #popover.open{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;
    max-height:70vh;overflow-y:auto;box-shadow:0 -8px 30px rgba(34,30,26,.3)}
  .po-shrines{max-height:none}
  .hd-inner{gap:18px}
  .chapter-body-inner{padding:18px 18px 24px}
  .chapter-head{padding:16px 18px}
  .nv-current{display:none}
}
@media (max-width:480px){
  .kami-name{font-size:.9em}                       /* スマホでの神名間延び対策 */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .chapter-body{transition:none}
  .ch-icon{transition:none}
  .kami-name.is-flash{animation:none;background:rgba(201,162,75,.35)}
}
footer{font-family:var(--sans);font-size:11px;color:var(--usuzumi);text-align:center;
  padding:32px 24px;border-top:1px solid var(--washi-dark);line-height:1.8}