/* ═══════════════════════════════════════════════════════════════
   わがこと日本 — app editorial theme（紙面設計）
   Loads last; elevates the app to the landing-page design language.
   Motion は styles.css のトークン（--dur-* / --ease-* / --stagger）のみ使用。
   ═══════════════════════════════════════════════════════════════ */

:root{
  --w-ink:#16120c; --w-ink2:#241e14; --w-soft:#6b6355;
  --w-washi:#f6f1e6; --w-washi2:#efe8d8; --w-card:#fbf8f0;
  --w-line:#ddd2bc; --w-line2:#c9bda1;
  --w-shu:#b23a22; --w-shu2:#c9552f; --w-gold:#a08347;
  --w-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --w-sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --w-max:720px;
}
[data-theme="dark"]{
  --w-ink:#ece4d2; --w-ink2:#ddd2bc; --w-soft:#a89c86;
  --w-washi:#171310; --w-washi2:#1f1a14; --w-card:#1d1811;
  --w-line:#3a3226; --w-line2:#4a4030;
  --w-shu:#d0512f; --w-shu2:#e0653f; --w-gold:#c2a262;
}

body{
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(160,131,71,.022) 2px 3px),
    radial-gradient(120% 90% at 50% -10%, var(--w-washi2), var(--w-washi) 60%);
  background-attachment:fixed;
  color:var(--w-ink);
  font-family:var(--w-sans);
}

/* ─── オンボーディング：入口も紙面 ─── */
.onboarding{
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(160,131,71,.03) 2px 3px),
    radial-gradient(100% 80% at 50% 0%, var(--w-washi2), var(--w-washi) 65%);
}
.ob-inner{max-width:560px;}
.ob-mark{
  width:64px;height:64px;border-radius:50%;
  background:var(--w-shu);color:#f6f1e6;
  font-family:var(--w-serif);font-weight:800;font-size:30px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(178,58,34,.30);
  margin:0 auto 18px;
}
.ob-title{
  font-family:var(--w-serif);font-weight:800;
  font-size:clamp(30px,7vw,40px);letter-spacing:.06em;color:var(--w-ink);
}
.ob-tag{color:var(--w-soft);letter-spacing:.1em;font-size:14px;}
.ob-divider{
  width:44px;height:2px;background:var(--w-shu);
  margin:22px auto;border-radius:2px;
}
.ob-q{font-family:var(--w-serif);font-weight:600;font-size:16px;color:var(--w-ink2);}
.ob-sub{color:var(--w-soft);font-weight:400;}
.ob-select{
  border:1px solid var(--w-line2);background:var(--w-card);color:var(--w-ink);
  border-radius:10px;font-family:var(--w-sans);
}
.chip{
  border:1px solid var(--w-line2);background:transparent;color:var(--w-ink2);
  border-radius:999px;transition:all var(--dur-xs) var(--ease-brush);font-family:var(--w-sans);
}
.chip.on,.chip[aria-pressed="true"],.chip.picked{
  background:var(--w-ink);border-color:var(--w-ink);color:var(--w-washi);
}
.ob-start{
  background:var(--w-shu);color:#f6f1e6;border:none;border-radius:999px;
  font-family:var(--w-sans);font-weight:700;letter-spacing:.14em;
  padding:16px 34px;font-size:15px;
  box-shadow:0 12px 30px rgba(178,58,34,.32);
  transition:transform var(--dur-xs) var(--ease-brush), box-shadow var(--dur-xs) var(--ease-brush);
}
.ob-start:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(178,58,34,.4);}
.ob-note{color:var(--w-soft);}
.ob-preview{
  border:1px solid var(--w-line);background:var(--w-card);
  border-radius:12px;font-family:var(--w-serif);
}

/* ─── トップバー ─── */
.topbar{
  background:color-mix(in srgb, var(--w-washi) 86%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--w-line);
  box-shadow:none;
}
.brand-mark{
  background:var(--w-shu);color:#f6f1e6;border-radius:50%;
  font-family:var(--w-serif);font-weight:800;
}
.brand-name{
  font-family:var(--w-serif);font-weight:800;letter-spacing:.08em;color:var(--w-ink);
}
.daytabs button{
  font-family:var(--w-sans);border-radius:999px;
  border:1px solid transparent;color:var(--w-soft);
  letter-spacing:.04em;
}
.daytabs button.on{
  background:var(--w-ink);color:var(--w-washi);border-color:var(--w-ink);
}
.streak{
  border:1px solid var(--w-line);border-radius:999px;color:var(--w-soft);
  background:var(--w-card);
}
.streak-mark{color:var(--w-shu);font-family:var(--w-serif);font-weight:800;}
.theme-toggle,.ops-toggle{
  border:1px solid var(--w-line);background:var(--w-card);color:var(--w-ink2);
  border-radius:10px;transition:border-color var(--dur-xs) var(--ease-brush);
}
.theme-toggle:hover,.ops-toggle:hover{border-color:var(--w-gold);}
.ops-sub{color:var(--w-soft);}

/* ─── 誌面レイアウト ─── */
.reader{max-width:var(--w-max);}

/* 表紙（エピソードヘッダ） */
.ep-head{
  position:relative;
  background:
    linear-gradient(180deg, var(--w-card), color-mix(in srgb, var(--w-card) 60%, var(--w-washi))),
    var(--w-card);
  border:1px solid var(--w-line);
  border-top:3px double var(--w-line2);
  border-radius:4px;
  padding:clamp(28px,6vw,54px) clamp(20px,5vw,48px) clamp(24px,4vw,40px);
  margin-top:26px;
  overflow:hidden;
  box-shadow:0 24px 60px -32px rgba(22,18,12,.35);
}
.ep-tate{
  position:absolute;top:24px;right:clamp(14px,3vw,26px);
  writing-mode:vertical-rl;
  font-family:var(--w-serif);font-size:12px;letter-spacing:.42em;
  color:var(--w-soft);opacity:.8;
  border-right:1px solid var(--w-line);padding-right:10px;
  max-height:72%;
}
.ep-seal{
  position:absolute;bottom:clamp(18px,3vw,30px);right:clamp(14px,3vw,26px);
  width:34px;height:34px;border-radius:6px;
  border:1.5px solid var(--w-shu);color:var(--w-shu);
  font-family:var(--w-serif);font-weight:800;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-3deg);opacity:.85;
}
.ep-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.12em;color:var(--w-soft);
  margin-bottom:16px;
}
.ep-no{
  color:var(--w-shu);font-family:var(--w-serif);font-weight:800;
  font-size:13px;letter-spacing:.2em;
  border-bottom:1px solid var(--w-shu);padding-bottom:2px;margin-right:4px;
}
.ep-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--w-line2);}
.ep-emoji{display:none;}
.ep-title{
  font-family:var(--w-serif);font-weight:800;
  font-size:clamp(28px,6.4vw,44px);
  line-height:1.32;letter-spacing:.03em;color:var(--w-ink);
  margin:0 0 14px;max-width:17em;
  padding-right:clamp(30px,6vw,56px);
}
.ep-subtitle{
  font-family:var(--w-serif);font-size:clamp(15px,2.6vw,17px);
  color:var(--w-ink2);opacity:.85;line-height:2;
  max-width:36em;margin:0 0 22px;
  padding-right:clamp(30px,6vw,56px);
}
.ep-badges{display:flex;flex-wrap:wrap;gap:8px;}
.badge{
  border:1px solid var(--w-line);border-radius:999px;
  background:transparent;color:var(--w-soft);
  font-size:11px;letter-spacing:.08em;padding:5px 12px;
}
.badge.approved{
  border-color:color-mix(in srgb, var(--w-gold) 55%, transparent);
  color:var(--w-gold);background:color-mix(in srgb, var(--w-gold) 8%, transparent);
}

/* 章ラベル */
.sec{max-width:var(--w-max);}
.sec-label{
  display:flex;align-items:center;gap:14px;
  font-family:var(--w-sans);font-size:12px;font-weight:700;
  letter-spacing:.34em;color:var(--w-soft);
  margin:clamp(40px,7vw,58px) 0 18px;
}
.sec-num{
  width:30px;height:30px;flex:none;border-radius:50%;
  border:1px solid var(--w-shu);color:var(--w-shu);
  font-family:var(--w-serif);font-weight:800;font-size:14px;letter-spacing:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
}
.sec-label::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, var(--w-line), transparent);
}

/* 本文 */
.story{
  background:var(--w-card);border:1px solid var(--w-line);border-radius:4px;
  padding:clamp(22px,4.5vw,38px) clamp(20px,4.5vw,40px);
  box-shadow:0 18px 44px -30px rgba(22,18,12,.3);
}
.story p{
  font-family:var(--w-serif);
  font-size:clamp(15.5px,2.7vw,17px);line-height:2.15;
  letter-spacing:.02em;color:var(--w-ink2);
  margin:0 0 1.6em;
}
.story p:last-child{margin-bottom:0;}
.story p:first-child:not(.no-cap)::first-letter{
  font-size:1.9em;font-weight:800;color:var(--w-shu);
  font-family:var(--w-serif);
  float:left;line-height:1;padding:.08em .12em 0 0;
}
.cite{
  color:var(--w-gold);text-decoration:none;font-size:.72em;
  vertical-align:super;letter-spacing:0;
}
.cite:hover{color:var(--w-shu);}

.marks-bar{
  border:none;background:transparent;
  border-top:1px dashed var(--w-line);
  margin-top:18px;padding-top:14px;
  color:var(--w-soft);font-size:12px;
}
.marks-switch{
  border:1px solid var(--w-line2);background:var(--w-card);color:var(--w-ink2);
  border-radius:999px;letter-spacing:.06em;
}
.marks-switch.on{background:var(--w-ink);color:var(--w-washi);border-color:var(--w-ink);}

/* 光と影 */
.ls-grid{gap:18px;}
.ls-col{
  border-radius:4px;padding:clamp(20px,4vw,30px);
  border:1px solid var(--w-line);
}
.ls-col h4,.ls-col h2{
  font-family:var(--w-serif);font-weight:800;font-size:16px;
  letter-spacing:.18em;margin:0 0 14px;
  display:flex;align-items:center;gap:10px;
}
.ls-col h4::after,.ls-col h2::after{content:"";flex:1;height:1px;background:currentColor;opacity:.18;}
.ls-col p{
  font-family:var(--w-serif);font-size:15px;line-height:2.05;
  letter-spacing:.02em;margin:0 0 1.3em;
}
.ls-col p:last-child{margin-bottom:0;}
.ls-col.light{
  background:linear-gradient(180deg, color-mix(in srgb, var(--w-gold) 9%, var(--w-card)), var(--w-card));
  border-top:3px solid var(--w-gold);
  color:var(--w-ink2);
}
.ls-col.light h4{color:var(--w-gold);}
.ls-col.shadow{
  background:linear-gradient(180deg,#241e14,#16120c);
  border-color:#3a3226;border-top:3px solid #6b6355;
  color:#d8cfbc;
}
.ls-col.shadow h4{color:#a89c86;}
.ls-col.shadow .mk-f,.ls-col.shadow .mk-i{color:inherit;}
[data-theme="dark"] .ls-col.shadow{background:linear-gradient(180deg,#100d09,#0a0806);}

/* あなたとのつながり */
.hook{
  position:relative;
  background:var(--w-card);
  border:1px solid color-mix(in srgb, var(--w-shu) 30%, var(--w-line));
  border-left:3px solid var(--w-shu);
  border-radius:4px;
  padding:clamp(22px,4.5vw,32px) clamp(20px,4.5vw,36px);
}
.hook-label{
  font-family:var(--w-serif);font-weight:800;color:var(--w-shu);
  letter-spacing:.14em;font-size:14px;margin-bottom:12px;
}
.hook p{
  font-family:var(--w-serif);font-size:15.5px;line-height:2.1;
  color:var(--w-ink2);margin:0 0 12px;
}
.hook-pref{color:var(--w-soft);font-size:12px;letter-spacing:.04em;}

/* 今日のわがこと */
.wagakoto{
  text-align:center;
  background:
    radial-gradient(90% 100% at 50% 0%, color-mix(in srgb, var(--w-shu) 5%, var(--w-card)), var(--w-card));
  border:1px solid var(--w-line);border-radius:4px;
  padding:clamp(28px,6vw,44px) clamp(20px,5vw,40px);
}
.wagakoto .lead{
  font-family:var(--w-serif);color:var(--w-soft);
  font-size:14px;letter-spacing:.08em;line-height:2;margin-bottom:16px;
}
.wagakoto .q{
  font-family:var(--w-serif);font-weight:800;
  font-size:clamp(19px,4vw,24px);line-height:1.8;color:var(--w-ink);
  margin-bottom:22px;
}
.wagakoto .q::before{content:"「";color:var(--w-shu);}
.wagakoto .q::after{content:"」";color:var(--w-shu);}
.wk-choices{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.wk-choice{
  border:1px solid var(--w-line2);background:transparent;color:var(--w-ink2);
  border-radius:999px;padding:10px 20px;font-family:var(--w-sans);
  transition:all var(--dur-xs) var(--ease-brush);
}
.wk-choice:hover{border-color:var(--w-shu);color:var(--w-shu);}
.wk-choice.picked{background:var(--w-shu);border-color:var(--w-shu);color:#f6f1e6;}
.wk-thanks{color:var(--w-gold);font-size:13px;margin-top:16px;letter-spacing:.04em;}
.wk-after{color:var(--w-soft);font-size:12px;margin-top:14px;}

/* クイズ */
.quiz-card{
  background:var(--w-card);border:1px solid var(--w-line);border-radius:4px;
  padding:clamp(22px,4.5vw,34px);
}
.quiz-progress{
  color:var(--w-shu);font-family:var(--w-serif);font-weight:800;
  letter-spacing:.2em;font-size:12px;margin-bottom:12px;
}
.quiz-q{
  font-family:var(--w-serif);font-weight:600;font-size:17px;line-height:1.9;
  color:var(--w-ink);
}
.quiz-opts{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.quiz-opt{
  border:1px solid var(--w-line2);background:transparent;color:var(--w-ink2);
  border-radius:10px;font-family:var(--w-sans);text-align:left;
  padding:13px 16px;transition:all var(--dur-xs) var(--ease-brush);
}
.quiz-opt:hover{border-color:var(--w-gold);}
.quiz-opt.correct{
  border-color:var(--w-gold);color:var(--w-gold);
  background:color-mix(in srgb, var(--w-gold) 8%, transparent);
}
.quiz-opt.wrong{
  border-color:var(--w-shu);color:var(--w-shu);
  background:color-mix(in srgb, var(--w-shu) 6%, transparent);
}
.quiz-exp{
  margin-top:16px;border-top:1px dashed var(--w-line);padding-top:14px;
  font-family:var(--w-serif);line-height:1.95;font-size:14px;color:var(--w-ink2);
}
.quiz-next{
  margin-top:14px;border:none;border-radius:999px;
  background:var(--w-ink);color:var(--w-washi);
  padding:11px 24px;font-weight:700;letter-spacing:.1em;font-family:var(--w-sans);
}
.quiz-done{font-family:var(--w-serif);font-weight:800;color:var(--w-gold);letter-spacing:.1em;}
.quiz-exp{color:var(--w-soft);}

/* 出典 */
.sources{border-top:1px solid var(--w-line);}
.source{
  border-bottom:1px solid var(--w-line);
  padding:14px 2px;display:flex;gap:14px;background:transparent;
}
.source .sn{
  font-family:var(--w-serif);font-weight:800;color:var(--w-gold);
  font-size:13px;min-width:22px;text-align:right;
}
.source .sl{font-family:var(--w-serif);font-weight:600;color:var(--w-ink2);font-size:14px;}
.source .st{color:var(--w-soft);font-size:12px;letter-spacing:.04em;}
.source .snote{color:var(--w-soft);font-size:12px;}
.sources-note{
  color:var(--w-soft);font-size:12px;line-height:1.9;margin-top:16px;
  border-left:2px solid var(--w-gold);padding-left:12px;
}

/* ─── AI案内人 ─── */
.guide-fab{
  background:var(--w-ink);color:var(--w-washi);
  border:none;border-radius:999px;
  font-family:var(--w-sans);font-weight:700;letter-spacing:.1em;
  box-shadow:0 14px 34px -10px rgba(22,18,12,.5);
  transition:transform var(--dur-xs) var(--ease-brush);
}
.guide-fab:hover{transform:translateY(-2px);}
.guide-fab-icon{color:var(--w-shu2);}
.guide{
  background:var(--w-card);border:1px solid var(--w-line);
  border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(22,18,12,.5);
}
.guide-head{
  background:var(--w-washi2);border-bottom:1px solid var(--w-line);
}
.guide-title{font-family:var(--w-serif);font-weight:800;letter-spacing:.1em;color:var(--w-ink);}
.guide-sub{color:var(--w-soft);}
.guide-close{border:none;background:transparent;color:var(--w-soft);}
.guide-log .msg.bot,.guide-log .bot{
  background:var(--w-washi2);border:1px solid var(--w-line);
  border-radius:2px 12px 12px 12px;font-family:var(--w-serif);line-height:1.95;
}
.guide-log .msg.me,.guide-log .me{
  background:var(--w-ink);color:var(--w-washi);
  border-radius:12px 2px 12px 12px;
}
.guide-sugs button{
  border:1px solid var(--w-line2);background:transparent;color:var(--w-soft);
  border-radius:999px;transition:all var(--dur-xs) var(--ease-brush);
}
.guide-sugs button:hover{border-color:var(--w-shu);color:var(--w-shu);}
.guide-input{
  border:1px solid var(--w-line2);background:var(--w-washi);color:var(--w-ink);
  border-radius:999px;font-family:var(--w-sans);
}
.guide-send{
  background:var(--w-shu);color:#f6f1e6;border:none;border-radius:999px;
  font-weight:700;letter-spacing:.08em;
}

/* ─── フッター・モーダル ─── */
.foot{color:var(--w-soft);border-top:1px solid var(--w-line);}
.foot-link{color:var(--w-gold);}
.modal-card{
  background:var(--w-card);border:1px solid var(--w-line);border-radius:14px;
}
.modal-head h3{font-family:var(--w-serif);font-weight:800;letter-spacing:.08em;}

/* ─── 編集室（軽い統一） ─── */
.ops-card{
  background:var(--w-card);border:1px solid var(--w-line);border-radius:4px;
}
.ops-card h3{font-family:var(--w-serif);font-weight:800;letter-spacing:.06em;color:var(--w-ink);}
.score{background:var(--w-washi2);border:1px solid var(--w-line);border-radius:4px;}
.sv.ok{color:var(--w-gold);}

/* ─── 進捗バー ─── */
.progress i{background:linear-gradient(90deg, var(--w-shu), var(--w-gold));}

/* ─── 史実／解釈マーカー：控えめな傍線のみ（塗りなし） ─── */
body.marks-on .mk-f{
  background:transparent;
  border-bottom:1px solid color-mix(in srgb, var(--w-gold) 55%, transparent);
  text-decoration:none;
}
body.marks-on .mk-i{
  background:transparent;
  border-bottom:1px dashed color-mix(in srgb, var(--w-shu) 55%, transparent);
  text-decoration:none;
}
/* 影パネル内では塗り・傍線とも無効（可読性優先） */
.ls-col.shadow .mk-f,.ls-col.shadow .mk-i,
body.marks-on .ls-col.shadow .mk-f,body.marks-on .ls-col.shadow .mk-i{
  background:transparent;border-bottom:none;
}
.marks-key{
  position:static;display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:none;box-shadow:none;padding:0;margin:0;
  width:auto;font-size:12px;color:var(--w-soft);
}
.key-f,.key-i{
  display:inline-block;width:18px;height:0;border-radius:0;background:transparent;
}
.key-f::before,.key-i::before{display:none;}
.key-f{border-bottom:2px solid var(--w-gold);}
.key-i{border-bottom:2px dashed var(--w-shu);}
body.marks-on .mk-f{box-shadow:none;}
body.marks-on .mk-i{box-shadow:none;}
.marks-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.marks-bar .marks-switch{margin-left:auto;}

/* hook ラベルの赤帯を解除（文字のみ朱） */
.hook-label{
  background:transparent !important;padding:0 !important;border-radius:0;
  display:inline-block;
}
[data-theme="dark"] .hook-label{color:var(--w-shu2);}

/* ─── 出現アニメーション ───
   定義は styles.css の .rise（単一ソース）に一本化。
   ここでは重複定義しない。 */

/* ─── モバイル細部 ─── */
@media (max-width:640px){
  .ep-tate{display:none;}
  .ep-title{padding-right:0;}
  .ep-subtitle{padding-right:0;}
  .ls-grid{grid-template-columns:1fr;}
}

/* ─── モバイル：トップバー（コンパクト・非固定） ───
   読書アプリの原則: ヘッダーは読む間は消える。画面はコンテンツのもの。 */
@media (max-width:760px){
  .topbar{
    position:static;            /* 読み進めたらスクロールで消える＝本文が100%使える */
    display:flex;flex-wrap:wrap;align-items:center;
    padding:8px 12px 0;gap:4px;
  }
  .brand{order:1;gap:7px;}
  .brand-mark{width:28px;height:28px;font-size:14px;}
  .brand-name{font-size:15px;}
  .topbar-right{order:2;margin-left:auto;display:flex;align-items:center;gap:6px;}
  .streak{display:none;}        /* 連続日数は読書中の必須情報ではない（本文側に表示余地あり） */
  .theme-toggle,.ops-toggle{padding:5px 12px;min-height:44px;height:44px;}
  .ops-sub{display:none;}
  .daytabs{
    order:3;flex-basis:100%;
    display:flex;gap:6px;overflow-x:auto;
    padding:6px 2px 8px;margin:0 -2px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .daytabs::-webkit-scrollbar{display:none;}
  .daytabs button{flex:none;white-space:nowrap;font-size:12px;padding:5px 12px;min-height:32px;}
}

/* ═══════════ シネマティック・リーダー（史料写真＋スクロール演出） ═══════════ */
body{overflow-x:clip;}

/* ヒーロー：全幅の史料写真 */
.ep-hero{
  position:relative; width:100vw; margin:0 calc(50% - 50vw) 26px;
  height:min(74vh,620px); min-height:420px; overflow:hidden;
  background:#1a140c; display:flex; align-items:flex-end;
}
.ep-hero-media{position:absolute; inset:0;}
.ep-hero-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:sepia(.22) contrast(.96) brightness(.92);
  transform-origin:52% 38%;
}
.ep-hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(26,20,12,.42) 0%, rgba(26,20,12,.08) 34%, rgba(26,20,12,.18) 62%, rgba(22,18,12,.88) 100%),
    radial-gradient(120% 90% at 50% 108%, rgba(178,58,34,.16), transparent 55%);
}
.ep-hero-inner{
  position:relative; z-index:2; width:min(720px,92%); margin:0 auto;
  padding:0 0 54px; color:#f6f1e6; text-align:center;
}
.ep-hero-inner .ep-meta{color:rgba(246,241,230,.85); justify-content:center;}
.ep-hero-inner .ep-meta .ep-no{background:rgba(178,58,34,.85); color:#f6f1e6;}
.ep-hero-inner .ep-title{
  color:#fbf8f0; margin:14px 0 10px;
  font-size:clamp(30px,5.4vw,52px); line-height:1.28; letter-spacing:.04em;
  text-shadow:0 2px 24px rgba(12,9,5,.55);
}
.ep-hero-inner .ep-subtitle{color:rgba(246,241,230,.82); font-size:15.5px;}
.ep-hero-credit{
  position:absolute; right:14px; bottom:10px; z-index:2;
  font-size:10.5px; letter-spacing:.04em; color:rgba(246,241,230,.78);
  text-shadow:0 1px 6px rgba(12,9,5,.6);
  font-family:var(--w-sans); writing-mode:horizontal-tb;
}
.ep-hero-hint{position:absolute; left:50%; bottom:16px; z-index:2; transform:translateX(-50%);}
.ep-hero-hint span{
  display:block; width:1px; height:34px;
  background:linear-gradient(180deg, rgba(246,241,230,.0), rgba(246,241,230,.75));
}
.ep-hero.noimg .ep-hero-media{display:none;}
.ep-hero.noimg{background:linear-gradient(160deg,#241e14,#100c07);}
.ep-badges.under-hero{width:min(720px,92%); margin:-6px auto 8px; justify-content:center; display:flex; flex-wrap:wrap; gap:8px;}

/* 本文内の史料写真 */
.ep-fig{
  margin:34px calc(50% - min(430px,46vw)); width:min(860px,92vw);
  max-width:calc(100vw - 16px);   /* 端末幅は絶対に超えない */
}
.ep-fig img{
  width:100%; display:block; border-radius:4px;
  filter:sepia(.18) contrast(.97);
  box-shadow:0 18px 44px -18px rgba(22,16,8,.45);
  border:1px solid var(--w-line);
}
.ep-fig figcaption{
  margin-top:10px; font-family:var(--w-sans); font-size:12.5px; line-height:1.8;
  color:var(--w-soft); text-align:center;
}
.ep-fig .fig-credit{display:block; font-size:10.5px; color:var(--w-soft); letter-spacing:.05em; margin-top:2px;}
.ep-fig.noimg{display:none;}

/* スクロール・リビール */
@media (prefers-reduced-motion: no-preference){
  .sr{opacity:0; transform:translateY(22px); transition:opacity var(--dur-l) var(--ease-brush), transform var(--dur-l) var(--ease-brush);}
  .sr.in{opacity:1; transform:none;}
  .ls-col.shadow.sr{transition-delay:calc(var(--stagger) * 2);}
  .ep-fig.sr{transform:translateY(30px) scale(.985);}
  .ep-fig.sr.in{transform:none;}
  .ep-hero-media img{animation:kenburns var(--dur-drift) ease-out both;}
  .ep-hero-hint span{animation:hintPulse var(--dur-breath) ease-in-out infinite;}
}
@media (prefers-reduced-motion: reduce){
  .sr{opacity:1; transform:none;}
}
@keyframes kenburns{
  from{transform:scale(1.12) translateY(-1.5%);}
  to{transform:scale(1.0) translateY(0);}
}
@keyframes hintPulse{
  0%,100%{opacity:.35; transform:translateY(0);}
  50%{opacity:1; transform:translateY(6px);}
}

/* モバイル調整 */
@media (max-width:640px){
  .ep-hero{height:66vh; min-height:380px;}
  .ep-hero-inner{padding-bottom:44px;}
  .ep-hero-inner .ep-title{font-size:clamp(26px,8vw,34px);}
  .ep-fig{margin:26px calc(50% - 48vw); width:96vw;}
}

/* ─── オーバーフロー安全網（見出し・カード・フレックス子要素） ─── */
h1,h2,h3,h4,.ep-title,.ep-subtitle,.sec-title,.hook-label,.ob-title{
  overflow-wrap:anywhere; word-break:break-word;
}
.topbar>*, .guide-head>*, .ep-meta>*{min-width:0;}
img,svg,video{max-width:100%;height:auto;}
.ep-hero-media img{height:100%;}  /* ヒーローだけは全面カバー */

/* ─── ゆかりの地（地図カード） ─── */
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;}
.place-card{
  display:block;text-decoration:none;
  background:var(--w-card);border:1px solid var(--w-line);border-radius:6px;
  padding:16px 18px;transition:border-color var(--dur-xs) var(--ease-brush), transform var(--dur-xs) var(--ease-brush);
}
.place-card:hover{border-color:var(--w-gold);transform:translateY(-2px);}
.place-name{font-family:var(--w-serif);font-weight:800;font-size:15.5px;color:var(--w-ink);}
.place-area{font-size:11.5px;letter-spacing:.06em;color:var(--w-soft);margin:3px 0 8px;}
.place-note{font-size:12.5px;line-height:1.8;color:var(--w-ink2);}
.place-cta{margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--w-shu);}

/* 見出しの美しい折返し（1文字孤立を防ぐ） */
.ep-title,.ep-hero-inner .ep-title,.ob-title{text-wrap:balance;}

/* ═══ 不具合修正 2026-07-30 (指摘対応) ═══ */
/* 1. hook ラベル: 枠線上の透明テキストになっていた → カード内の見出しに戻す */
.hook-label{
  position:static !important; top:auto !important; left:auto !important;
  margin-bottom:12px;
}
/* 2. 影カラム: styles.css の .ls-col p (--ink-soft) が暗色背景に勝っていた */
.ls-col.shadow p,.ls-col.shadow li{color:#d8cfbc;}
.ls-col.shadow h4{color:#c9bda4;}
.ls-col.shadow .fn,.ls-col.shadow a{color:#e8dfc8;}
/* 3. 史料写真: 記事シートの枠から食み出す breakout を廃止し、シート内に収める */
.ep-fig{margin:34px 0; width:100%; max-width:100%;}
@media (max-width:640px){
  .ep-fig{margin:26px 0; width:100%;}
}

/* ── A11y pass: skip link / touch targets ── */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1200;background:var(--w-ink,#1c1712);color:#f6f1e6;padding:14px 22px;font-family:var(--w-serif,serif);letter-spacing:.1em;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}
.daytab{min-height:44px;}
.cite{position:relative;}
.cite::after{content:"";position:absolute;inset:-12px -8px;}
.guide-close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.wk-choice,.quiz-opt{min-height:44px;}

/* ── Panel R3 fixes ── */
.ep-title{text-wrap:balance;}
@media(max-width:480px){
  .ep-hero-inner .ep-title{font-size:clamp(24px,7.2vw,34px);letter-spacing:.06em;}
}

/* ═══ 光と影：影のヴェール ═══ */
.ls-col.shadow{position:relative;overflow:hidden}
.ls-col.shadow.veiled>p{filter:blur(7px);opacity:.35;user-select:none;pointer-events:none}
.ls-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(160deg,rgba(28,24,20,.06),rgba(28,24,20,.14));border:0;cursor:pointer;
  font-family:var(--serif,serif);color:var(--ink,#2b2620);padding:20px;text-align:center;font-size:14.5px;line-height:1.9}
.ls-veil b{border-bottom:1px solid currentColor}
.ls-veil-mark{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--ink,#2b2620);color:var(--washi,#f6f1e6);font-size:20px;font-family:var(--serif,serif);transition:transform var(--dur-s) var(--ease-brush)}
.ls-veil:hover .ls-veil-mark{transform:scale(1.07)}
.ls-col.shadow:not(.veiled)>p{animation:lsReveal var(--dur-m) var(--ease-brush) both}
@keyframes lsReveal{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* ═══ つながりマップ ═══ */
.cmap{position:relative;padding:26px 8px 10px;text-align:center}
.cmap-you{display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  width:108px;height:108px;border-radius:50%;justify-content:center;
  background:radial-gradient(circle at 38% 30%,#b3452e,#8c2f1e);color:#f6ecdf;
  font-family:var(--serif,serif);box-shadow:0 10px 28px rgba(140,47,30,.35);position:relative;z-index:2}
.cmap-you-mark{font-size:19px;letter-spacing:.14em}
.cmap-you small{font-size:11px;opacity:.85}
.cmap-ring{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:560px;margin:22px auto 0;position:relative}
.cmap-ring::before{content:"";position:absolute;left:50%;top:-22px;width:1px;height:22px;background:var(--line2,#cbb9a2)}
.cmap-node{position:relative;border:1px solid var(--line2,#cbb9a2);border-radius:14px;background:var(--card,#fffdf7);
  padding:14px 12px;display:flex;flex-direction:column;gap:4px;cursor:pointer;text-align:center;
  transition:transform var(--dur-xs) var(--ease-brush),box-shadow var(--dur-xs) var(--ease-brush),border-color var(--dur-xs) var(--ease-brush)}
.cmap-node:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(43,38,32,.1)}
.cmap-node.on{border-color:#8c2f1e;box-shadow:0 0 0 2px rgba(140,47,30,.18)}
.cmap-node-t{font-size:11px;letter-spacing:.22em;color:var(--sub,#7c6f5c)}
.cmap-node-s{font-family:var(--serif,serif);font-size:15px;color:var(--ink,#2b2620)}
.cmap-node::before{content:"";position:absolute;top:-12px;left:50%;width:1px;height:12px;background:var(--line2,#cbb9a2)}
.cmap-detail{max-width:560px;margin:14px auto 0}
.cmap-hint{font-size:12.5px;color:var(--sub,#7c6f5c);text-align:center;letter-spacing:.06em}
.cmap-detail-in{border-left:3px solid #8c2f1e;background:var(--card,#fffdf7);border-radius:0 12px 12px 0;
  padding:14px 16px;text-align:left;animation:lsReveal var(--dur-m) var(--ease-brush) both}
.cmap-detail-k{font-size:11px;letter-spacing:.2em;color:#8c2f1e}
.cmap-detail-in p{margin:6px 0 0;font-size:14.5px;line-height:2}
.cmap-verified{margin-top:8px;font-size:11.5px;color:var(--sub,#7c6f5c)}
.cmap-jump{color:#8c2f1e;text-decoration:underline;text-underline-offset:3px}

/* ═══ クイズ起動カード＋モーダル ═══ */
.quiz-launch{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line2,#cbb9a2);border-radius:14px;background:var(--card,#fffdf7);padding:18px 20px}
.ql-copy{font-size:14.5px;line-height:1.9;flex:1;min-width:200px}
.ql-btn{border:0;border-radius:999px;background:var(--ink,#2b2620);color:var(--washi,#f6f1e6);
  padding:12px 26px;font-size:14px;letter-spacing:.1em;cursor:pointer;transition:transform var(--dur-xs) var(--ease-brush),box-shadow var(--dur-xs) var(--ease-brush)}
.ql-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(43,38,32,.25)}
.wmodal{position:fixed;inset:0;z-index:220;background:rgba(28,24,20,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px;animation:wmIn var(--dur-s) var(--ease-brush) both}
@keyframes wmIn{from{opacity:0}to{opacity:1}}
.wmodal-card{width:min(560px,100%);max-height:86vh;overflow:auto;background:var(--washi,#f6f1e6);
  border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:wmCard var(--dur-s) var(--ease-lift) both}
@keyframes wmCard{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.wmodal-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;background:var(--washi,#f6f1e6);border-bottom:1px solid var(--line2,#cbb9a2);
  font-family:var(--serif,serif);font-size:14.5px;z-index:1}
.wmodal-close{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--sub,#7c6f5c);
  width:36px;height:36px;border-radius:50%}
.wmodal-close:hover{background:rgba(43,38,32,.08)}
.quiz-card.in-modal{border:0;background:none;padding:18px}
body.modal-open{overflow:hidden}

/* ═══ ゆかりの地：地図＋訪問情報 ═══ */
.place-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.place-tab{border:1px solid var(--line2,#cbb9a2);background:var(--card,#fffdf7);border-radius:999px;
  padding:9px 18px;font-size:13.5px;cursor:pointer;transition:all var(--dur-xs) var(--ease-brush);color:var(--ink,#2b2620)}
.place-tab.on{background:var(--ink,#2b2620);color:var(--washi,#f6f1e6);border-color:var(--ink,#2b2620)}
.place-pane{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:stretch}
.map-embed{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line2,#cbb9a2);min-height:280px;background:#e8e2d5}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-offline{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:20px;font-size:13px;color:var(--sub,#7c6f5c);z-index:-1}
.visit-card{border:1px solid var(--line2,#cbb9a2);border-radius:14px;background:var(--card,#fffdf7);padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.visit-name{font-family:var(--serif,serif);font-size:17px}
.visit-area{display:block;font-size:12px;color:var(--sub,#7c6f5c);margin-top:2px}
.visit-note{font-size:13.5px;line-height:1.9;margin:0}
.visit-rows{margin:0;display:flex;flex-direction:column;gap:6px}
.visit-rows>div{display:flex;gap:10px;font-size:13px;line-height:1.7}
.visit-rows dt{flex:0 0 58px;color:var(--sub,#7c6f5c);letter-spacing:.1em}
.visit-rows dd{margin:0}
.visit-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.visit-link{font-size:13px;padding:9px 16px;border-radius:999px;background:#8c2f1e;color:#f6ecdf;text-decoration:none}
.visit-link.ghost{background:none;border:1px solid var(--line2,#cbb9a2);color:var(--ink,#2b2620)}
@media (max-width:720px){.place-pane{grid-template-columns:1fr}.map-embed{min-height:220px}}

/* ═══ 出典：脚注格の折りたたみ ═══ */
.sources-fold{border:1px solid var(--line2,#cbb9a2);border-radius:14px;background:var(--card,#fffdf7)}
.sources-fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;font-size:13.5px;letter-spacing:.08em}
.sources-fold summary::-webkit-details-marker{display:none}
.fold-arrow{transition:transform var(--dur-s) var(--ease-brush);color:var(--sub,#7c6f5c)}
.sources-fold[open] .fold-arrow{transform:rotate(180deg)}
.sources-fold .sources{padding:0 18px 6px}
.sources-fold .source .sl{font-size:12.5px;line-height:1.8}
.sources-fold .source .st,.sources-fold .snote{font-size:11.5px}
.sources-fold .img-credits{padding:0 18px 14px;font-size:11.5px}
.sec-sources .sources-note{font-size:11.5px}

/* dark mode */
[data-theme="dark"] .cmap-node,[data-theme="dark"] .quiz-launch,[data-theme="dark"] .visit-card,
[data-theme="dark"] .sources-fold,[data-theme="dark"] .cmap-detail-in,[data-theme="dark"] .place-tab{background:#221e19;border-color:#4a4038}
[data-theme="dark"] .wmodal-card,[data-theme="dark"] .wmodal-head{background:#26211b}
[data-theme="dark"] .ls-veil{background:linear-gradient(160deg,rgba(0,0,0,.25),rgba(0,0,0,.5));color:#e8ddcb}
[data-theme="dark"] .map-embed{background:#1c1814}

/* ══════════ 光と影 — 一枚の flip 札 ══════════ */
.ls-flip{perspective:1800px;margin-top:14px;}
.ls-card{
  position:relative;display:grid;cursor:pointer;
  transform-style:preserve-3d;
  transition:transform var(--dur-l) var(--ease-lift);
}
.ls-card.flipped{transform:rotateY(180deg);}
.ls-face{
  position:relative;overflow:hidden;
  grid-area:1/1;min-width:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:16px;padding:30px 28px 22px;
  border:1px solid var(--w-line2);
  display:flex;flex-direction:column;gap:2px;
}
.ls-face h2{
  font-family:var(--w-serif);font-size:19px;letter-spacing:.1em;
  display:flex;align-items:center;gap:12px;margin:0 0 14px;
}
.ls-face h2::after{content:"";flex:1;height:1px;background:currentColor;opacity:.2;}
.ls-face p{margin:0 0 .85em;font-size:15.5px;line-height:2;}
.ls-front{
  background:
    radial-gradient(140% 100% at 20% -20%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(165deg,#fdfaf2,#f3ecdb);
  border-top:3px solid var(--w-gold);
  box-shadow:0 18px 40px -18px rgba(80,60,20,.35), 0 2px 8px rgba(80,60,20,.08);
}
.ls-front h2{color:var(--w-gold);}
.ls-face::before{
  position:absolute;right:6%;bottom:-8%;z-index:0;
  font-family:var(--w-serif);font-size:clamp(160px,34vw,260px);line-height:1;
  pointer-events:none;user-select:none;
}
.ls-face > *{position:relative;z-index:1;}
.ls-front::before{content:"光";color:rgba(148,110,32,.055);}
.ls-back::before{content:"影";color:rgba(255,244,220,.04);}
.ls-back{
  transform:rotateY(180deg);
  background:
    radial-gradient(120% 90% at 80% 120%, rgba(208,81,47,.12), transparent 55%),
    linear-gradient(200deg,#181310,#0d0a07);
  border-color:#3a3226;border-top:3px solid #6e5f45;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.65);
  color:#d8cfbc;
}
.ls-back h2{color:#c9bda4;}
.ls-back p{color:#d8cfbc;}
.ls-back .fn,.ls-back a{color:#e8dfc8;}
.ls-back .mk-f,.ls-back .mk-i{color:inherit;}
.ls-flip-btn{
  margin-top:auto;align-self:flex-end;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  border:1px solid currentColor;background:transparent;color:inherit;
  font-family:var(--w-serif);font-size:13.5px;letter-spacing:.08em;
  opacity:.85;transition:opacity var(--dur-xs) var(--ease-brush), transform var(--dur-xs) var(--ease-brush);
}
.ls-flip-btn:hover{opacity:1;transform:translateY(-1px);}
.ls-hint-mark{
  display:inline-grid;place-items:center;width:24px;height:24px;
  border-radius:50%;border:1px solid currentColor;
  font-size:12px;font-family:var(--w-serif);
}
.ls-hint-arrow{font-size:15px;}
[data-theme="dark"] .ls-front{
  background:linear-gradient(165deg,#2a241b,#1d1811);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
}
[data-theme="dark"] .ls-front h2{color:var(--w-gold);}
@media (prefers-reduced-motion: reduce){
  .ls-card{transition:none;}
}
@media (max-width:640px){
  .ls-face{padding:22px 18px 16px;}
  .ls-face p{font-size:14.5px;}
}

/* ══════════ 画面全体の質感 — 和紙の粒子とにじみ ══════════ */
body.app-body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
[data-theme="dark"] body.app-body::before{opacity:.35;mix-blend-mode:screen;}
.sec{position:relative;z-index:1;}

/* section labels — 落款(印)風に */
.sec-label .sec-num{
  box-shadow:inset 0 0 0 1.5px var(--w-shu);
  color:var(--w-shu);background:transparent;
  font-family:var(--w-serif);
  transform:rotate(-2deg);
}
.sec-label{letter-spacing:.14em;}

/* ═══════════ human-audit fixes（2026-08 監査スクリーンショット対応） ═══════════ */

/* 1. トップバー混雑：一行レイアウト・折返し禁止（重なり解消） */
@media (min-width:761px){
  .topbar{flex-wrap:nowrap;}
  .brand{flex:0 0 auto;}
  .app-nav{
    flex:0 1 auto;min-width:0;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .app-nav::-webkit-scrollbar{display:none;}
  .daytabs{
    flex:1 1 auto;min-width:0;margin-inline:0;justify-content:flex-start;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .daytabs::-webkit-scrollbar{display:none;}
  .daytabs .daytab, .daytabs button{flex:0 0 auto;}
  .topbar-right{flex:0 0 auto;margin-left:auto;}
  .topbar-right .user-chip{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
@media (max-width:760px){
  .app-nav{
    order:4;flex-basis:100%;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;padding:2px 0 6px;
  }
  .app-nav::-webkit-scrollbar{display:none;}
}

/* 2. 光と影 flip 札：backface 透け対策（回転中はアニメ、静止時は非表示で確実に隠す） */
.ls-card .ls-back{visibility:hidden;transition:visibility 0s .32s;}
.ls-card.flipped .ls-back{visibility:visible;transition:visibility 0s 0s;}
.ls-card.flipped .ls-front{visibility:hidden;transition:visibility 0s .32s;}
.ls-card .ls-front{visibility:visible;transition:visibility 0s 0s;}
@media (prefers-reduced-motion:reduce){
  .ls-card .ls-face{transition:none;}
  .ls-card .ls-back,.ls-card.flipped .ls-front{transition:none;}
}

/* 3. つながりマップ：木構造の結線（縦幹＋横梁＋各ノード脚） */
.cmap-ring{--cmap-line:var(--line2,#cbb9a2);}
.cmap-ring::before{ /* 幹：あなた→横梁 */
  content:"";position:absolute;left:50%;top:-22px;width:1px;height:16px;
  background:var(--cmap-line);
}
.cmap-ring::after{ /* 横梁：左右の列の中心を結ぶ */
  content:"";position:absolute;top:-6px;left:25%;right:25%;height:1px;
  background:var(--cmap-line);
}
.cmap-node::before{top:-6px;height:6px;}
/* 2段目のノードは上のノードに接続して見えるよう脚を消し、縦間隔の細線に */
.cmap-node:nth-child(n+3)::before{top:-12px;height:12px;}