:root {
  --sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --paper: #f3f3f1; --surface: #ffffff; --surface-2: #ebebe8; --ink: #1f1f22; --ink-2: #67676e; --ink-3: #9a9aa1; --line: #deded9;
  --up: #c94a35; --up-soft: #f8e6e1; --down: #2d66a8; --down-soft: #e3ecf6; --mix: #8a6d1e; --mix-soft: #f3ecd8;
  --glass: rgba(250,250,248,.72); --glass-edge: rgba(255,255,255,.9); --shadow: 0 1px 2px rgba(20,20,24,.05), 0 6px 20px rgba(20,20,24,.05);
  --r: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131315; --surface: #1d1d20; --surface-2: #28282c; --ink: #f1f1f3; --ink-2: #a8a8b1; --ink-3: #74747c; --line: #34343a;
    --up: #ff8e78; --up-soft: rgba(255,142,120,.13); --down: #86b4ff; --down-soft: rgba(134,180,255,.13); --mix: #e2c26d; --mix-soft: rgba(226,194,109,.13);
    --glass: rgba(30,30,34,.7); --glass-edge: rgba(255,255,255,.12); --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131315; --surface: #1d1d20; --surface-2: #28282c; --ink: #f1f1f3; --ink-2: #a8a8b1; --ink-3: #74747c; --line: #34343a;
  --up: #ff8e78; --up-soft: rgba(255,142,120,.13); --down: #86b4ff; --down-soft: rgba(134,180,255,.13); --mix: #e2c26d; --mix-soft: rgba(226,194,109,.13);
  --glass: rgba(30,30,34,.7); --glass-edge: rgba(255,255,255,.12); --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }

/* ヘッダー */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-top: env(safe-area-inset-top); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; letter-spacing: .06em; }
.brand svg { width: 22px; height: 22px; }
.stamp { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.view { display: none; padding-top: 6px; animation: fade .25s ease; }
.view.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.page-title { font-size: 26px; font-weight: 700; letter-spacing: .02em; line-height: 1.35; margin: 10px 0 4px; }
.page-sub { color: var(--ink-2); font-size: 13px; margin-bottom: 18px; }
.sec { margin: 30px 0 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sec h2 { font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.sec .aside { font-size: 12px; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: 12px; }

/* 今日の一言 */
.headline { font-size: 21px; font-weight: 700; line-height: 1.55; letter-spacing: .01em; margin: 6px 0 2px; }
.date-line { font-size: 12px; color: var(--ink-2); letter-spacing: .06em; margin-top: 8px; }

/* 相場カード */
.markets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.mk { background: var(--surface); border-radius: var(--r); padding: 11px 12px 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk .l { font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mk .v small { font-size: 11px; font-weight: 500; margin-left: 2px; color: var(--ink-2); }
.mk .c { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk svg { width: 100%; height: 26px; margin-top: 4px; }
.up-t { color: var(--up); } .down-t { color: var(--down); } .mix-t { color: var(--mix); }

/* 動いているもの */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--surface-2); white-space: nowrap; flex-shrink: 0; }
.tag.up { background: var(--up-soft); color: var(--up); }
.tag.down { background: var(--down-soft); color: var(--down); }
.tag.mix { background: var(--mix-soft); color: var(--mix); }
.tag .ar { font-size: 11px; }
.tag .nm { color: var(--ink); font-weight: 600; }
.filter { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; color: var(--ink-2); background: transparent; border: 1px solid var(--line); white-space: nowrap; flex-shrink: 0; }
.filter.on { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }

/* テーマカード */
.card { background: var(--surface); border-radius: var(--r); padding: 18px 18px 16px; box-shadow: var(--shadow); margin-bottom: 12px; }
.theme .no { font-size: 11px; color: var(--ink-3); letter-spacing: .1em; font-weight: 600; }
.theme h3 { font-size: 18px; font-weight: 700; line-height: 1.45; margin: 2px 0 8px; }
.theme .what { font-size: 14px; color: var(--ink); }
.label { font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: .08em; margin: 16px 0 8px; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.chain .arrow { color: var(--ink-3); font-size: 13px; padding: 0 1px; }
.chain .arrow.new { color: var(--mix); }
.chain-text { font-size: 13.5px; color: var(--ink-2); margin-top: 10px; line-height: 1.75; }
.outlook { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.outlook li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.65; }
.outlook li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--ink-2); }
.watch { margin-top: 14px; font-size: 13px; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; }
.watch b { font-weight: 700; margin-right: 6px; }
.rel { margin-top: 12px; display: grid; gap: 0; }
.rel button { display: block; width: 100%; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; }
.rel .src { display: block; font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.voice { margin-top: 12px; padding: 12px 14px; border-left: 2px solid var(--ink); background: var(--surface-2); border-radius: 0 10px 10px 0; font-size: 13.5px; }
.voice .who { font-size: 11.5px; font-weight: 700; margin-bottom: 3px; }
.row-btns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--ink); color: var(--paper); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.up { background: var(--up); color: #fff; }
.btn.down { background: var(--down); color: #fff; }

/* ニュース一覧 */
.list { display: grid; gap: 0; }
.item { display: block; width: 100%; padding: 15px 0 14px; border-bottom: 1px solid var(--line); }
.item:first-child { padding-top: 6px; }
.item .t { font-size: 15px; font-weight: 600; line-height: 1.55; }
.item .m { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; display: flex; gap: 8px; align-items: center; }
.item .p { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.65; }
.item .chips { margin-top: 9px; }
.item .tag { height: 26px; font-size: 11.5px; padding: 0 9px; }
.lv { display: inline-flex; gap: 2px; }
.lv i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.lv i.on { background: var(--ink); }
.empty { padding: 40px 0; text-align: center; color: var(--ink-2); font-size: 13px; }

/* 識者 */
.ex-head { display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.ex-head .n { font-weight: 700; font-size: 14px; line-height: 1.3; }
.ex-head .r { font-size: 11px; color: var(--ink-2); line-height: 1.4; }
.stance { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); flex-shrink: 0; }
.stance.s-強気 { background: var(--up-soft); color: var(--up); }
.stance.s-慎重 { background: var(--down-soft); color: var(--down); }
.ex-view { font-size: 14.5px; line-height: 1.75; margin: 12px 0 10px; }
.ex-src { font-size: 12px; color: var(--ink-2); line-height: 1.55; text-decoration: none; display: block; padding-top: 10px; border-top: 1px solid var(--line); }
.ex-src b { color: var(--ink); font-weight: 600; }

/* つながり図 */
.map-box { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px 4px; margin: 0 -4px; overflow: hidden; }
.map-box svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.map .edge { fill: none; stroke: var(--line); stroke-width: 1; transition: stroke .3s, opacity .3s, stroke-width .3s; }
.map.active .edge { opacity: .25; }
.map .edge.hot { opacity: 1; stroke-width: 1.8; }
.map .edge.hot.up { stroke: var(--up); } .map .edge.hot.down { stroke: var(--down); } .map .edge.hot.mix { stroke: var(--mix); }
.map .node rect { fill: var(--surface-2); stroke: transparent; stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.map .node text { font-size: 10.5px; font-weight: 600; fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; font-family: var(--sans); }
.map .node { cursor: pointer; transition: opacity .3s; }
.map.active .node { opacity: .45; }
.map .node.lit { opacity: 1; }
.map .node.up rect { fill: var(--up-soft); stroke: var(--up); } .map .node.up text { fill: var(--up); }
.map .node.down rect { fill: var(--down-soft); stroke: var(--down); } .map .node.down text { fill: var(--down); }
.map .node.mix rect { fill: var(--mix-soft); stroke: var(--mix); } .map .node.mix text { fill: var(--mix); }
.map .node.origin rect { stroke-width: 2.5; }
.map .node.today rect { stroke: var(--ink-3); stroke-dasharray: 3 2; }
.map .cat-label { font-size: 9px; fill: var(--ink-3); letter-spacing: .1em; font-family: var(--sans); }
.map .pulse { animation: pulse .6s ease; }
@keyframes pulse { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.map .node { transform-box: fill-box; transform-origin: center; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ink-2); margin: 10px 2px 0; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* もしも */
.picker { display: grid; gap: 12px; }
.picker .grp-name { font-size: 11px; color: var(--ink-2); font-weight: 600; letter-spacing: .06em; margin-bottom: 6px; }
.picker .filter { height: 32px; font-size: 12.5px; }
.dir-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 4px; }
.dir-toggle button { height: 46px; border-radius: 12px; border: 1px solid var(--line); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.dir-toggle button.on.up { background: var(--up); border-color: var(--up); color: #fff; }
.dir-toggle button.on.down { background: var(--down); border-color: var(--down); color: #fff; }
.wave { margin-top: 18px; }
.wave-h { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-2); margin-bottom: 8px; }
.wave-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hop { display: block; width: 100%; background: var(--surface); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow); }
.hop .hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hop .from { font-size: 11.5px; color: var(--ink-2); }
.hop .why { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.7; }
.hop .why + .why { margin-top: 8px; }
.hop .rev { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.hop .meta { font-size: 10.5px; color: var(--ink-3); margin-top: 6px; letter-spacing: .03em; }
.note { font-size: 12px; color: var(--ink-2); line-height: 1.7; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-top: 14px; }

/* 学ぶ */
.quiz .q { font-size: 16px; font-weight: 700; line-height: 1.6; margin: 4px 0 14px; }
.quiz .kind { font-size: 11px; color: var(--ink-2); font-weight: 600; letter-spacing: .06em; }
.choices { display: grid; gap: 8px; }
.choice { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; text-align: left; }
.choice.right { border-color: var(--ink); background: var(--ink); color: var(--paper); font-weight: 700; }
.choice.wrong { border-color: var(--up); color: var(--up); }
.choice:disabled { cursor: default; }
.explain { margin-top: 12px; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.explain b { color: var(--ink); }
.score { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gl { background: var(--surface); border-radius: 12px; padding: 12px 13px; box-shadow: var(--shadow); text-align: left; min-width: 0; }
.gl .n { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.gl .d { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 下のナビ */
.nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; width: min(calc(100% - 24px), 480px); display: flex; padding: 6px; border-radius: 24px; background: var(--glass); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: 1px solid var(--glass-edge); box-shadow: 0 8px 30px rgba(0,0,0,.12); }
.nav a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; font-size: 10px; font-weight: 500; color: var(--ink-2); text-decoration: none; border-radius: 18px; transition: background .2s, color .2s; }
.nav a svg { width: 22px; height: 22px; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 700; background: color-mix(in srgb, var(--ink) 9%, transparent); }

/* 下から出る詳細 */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.32); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-radius: 22px 22px 0 0; transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.sheet.on { transform: none; }
.sheet .inner { max-width: 640px; margin: 0 auto; padding: 0 18px; }
.grab { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 0 6px; background: var(--paper); z-index: 2; }
.grab::before { content: ""; position: absolute; left: 50%; top: 7px; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--line); }
.grab .close { margin-left: auto; font-size: 13px; color: var(--ink-2); padding: 8px 2px 4px 12px; }
.sheet h2 { font-size: 21px; font-weight: 700; line-height: 1.45; margin: 4px 0 6px; }
.sheet .cat { font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: .08em; }
.sheet .lead { font-size: 14.5px; line-height: 1.8; margin-top: 8px; }
.links { display: grid; gap: 0; }
.link-row { display: block; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); }
.link-row .hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.link-row .meta { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; letter-spacing: .03em; }
.link-row .why { font-size: 13px; color: var(--ink-2); margin-top: 5px; line-height: 1.7; }
.outbtn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 18px; border-radius: 14px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 700; font-size: 14px; }
.spark-lg { width: 100%; height: 70px; margin-top: 10px; }

.foot { margin: 40px 0 10px; font-size: 11px; color: var(--ink-3); line-height: 1.8; }

@media (min-width: 720px) {
  .page-title { font-size: 30px; }
  .headline { font-size: 24px; }
  .glossary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sheet { left: 50%; right: auto; width: 640px; margin-left: -320px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- v0.3.0 で足したもの ---------- */
/* 切り替え（一覧／流れ、全体図／たどる） */
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); gap: 2px; margin-top: 4px; }
.seg button { min-width: 84px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-align: center; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* 新しい版・新しい内容の知らせ */
.update { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 35; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.2); white-space: nowrap; }
.update[hidden] { display: none; }
.update button { height: 32px; padding: 0 14px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 700; font-size: 12.5px; }
.toast { position: fixed; left: 50%; top: calc(60px + env(safe-area-inset-top)); transform: translate(-50%, -12px); z-index: 45; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12.5px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 今日：週のまとめ・流れへの入口・相場との食い違い */
button.card { display: block; width: 100%; text-align: left; }
.week-card { border: 1px solid var(--ink); }
.week-card h3 { font-size: 17px; font-weight: 700; line-height: 1.45; margin: 2px 0 6px; }
.week-card .what { font-size: 13.5px; color: var(--ink-2); }
.more { font-size: 12px; font-weight: 700; margin-top: 8px; }
.theme .no { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.thread-link { font-size: 11px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); }
.tag.conf { outline: 1.5px dashed var(--mix); outline-offset: 1px; }
.conf-note { font-size: 12px; color: var(--mix); margin-top: 8px; line-height: 1.6; }

/* これからの予定とシナリオ */
.agenda { display: grid; gap: 10px; }
.ag { margin-bottom: 0; padding: 15px 16px 14px; }
.ag-head { display: flex; gap: 14px; align-items: flex-start; }
.ag-date { flex-shrink: 0; min-width: 62px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.ag-date span { display: block; font-size: 11px; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.ag h3 { font-size: 14.5px; font-weight: 700; line-height: 1.45; }
.ag-focus { font-size: 13px; margin-top: 12px; line-height: 1.7; }
.ag-focus b { font-weight: 700; margin-right: 6px; }
.cases { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.case { border-radius: 12px; padding: 11px 12px; background: var(--surface-2); }
.case-l { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.case .chain { gap: 5px 3px; }
.case .tag { height: 26px; font-size: 11.5px; padding: 0 9px; }
.case p { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.65; }
@media (min-width: 560px) { .cases { grid-template-columns: 1fr 1fr; } }

/* 流れ（タイムライン） */
.thread h3 { font-size: 16.5px; font-weight: 700; margin: 2px 0 6px; }
.thread .what { font-size: 13px; color: var(--ink-2); line-height: 1.65; }
.dots { display: flex; gap: 4px; margin-top: 10px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .75; }
.timeline { margin-top: 12px; }
.tl { display: grid; grid-template-columns: 64px 1fr; gap: 12px; position: relative; padding-bottom: 18px; }
.tl::before { content: ""; position: absolute; left: 31px; top: 24px; bottom: 0; width: 1px; background: var(--line); }
.tl:last-child::before { display: none; }
.tl-date { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 2px; background: var(--paper); position: relative; text-align: center; }
.tl-body h3 { font-size: 15px; font-weight: 700; line-height: 1.5; }
.tl-body p { font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.7; }
.tl-body .tag { height: 26px; font-size: 11.5px; padding: 0 9px; }
.small-ol { margin-top: 8px; gap: 4px; }
.small-ol li { font-size: 12.5px; }

/* 見方が分かれている点 */
.debate h3 { font-size: 16.5px; font-weight: 700; line-height: 1.5; }
.crux { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.7; }
.crux b { color: var(--ink); margin-right: 6px; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.side { border-radius: 12px; padding: 11px 12px; }
.side.bull { background: var(--up-soft); }
.side.bear { background: var(--down-soft); }
.side-h { font-size: 12px; font-weight: 700; }
.bull .side-h { color: var(--up); } .bear .side-h { color: var(--down); }
.side p { font-size: 12.5px; line-height: 1.65; margin-top: 6px; }
.side-who { font-size: 11px; color: var(--ink-2); margin-top: 8px; font-weight: 600; }

/* 答え合わせ */
.review .rv-sum { font-size: 14.5px; font-weight: 700; line-height: 1.65; margin: 4px 0 4px; }
.rv-item { border-top: 1px solid var(--line); padding: 12px 0 2px; margin-top: 10px; }
.rv-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verdict { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); }
.verdict.v-hit { background: var(--ink); color: var(--paper); }
.verdict.v-part { background: var(--mix-soft); color: var(--mix); }
.verdict.v-miss { background: var(--up-soft); color: var(--up); }
.rv-o { font-size: 13.5px; margin-top: 6px; line-height: 1.65; }
.rv-a, .rv-l { font-size: 13px; color: var(--ink-2); margin-top: 5px; line-height: 1.7; }
.rv-a b, .rv-l b { color: var(--ink); margin-right: 6px; }

/* 週のまとめ */
.wk-move { padding: 12px 0; border-bottom: 1px solid var(--line); }
.wk-move h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.wk-move p { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.75; }
.wk-move .tag { height: 26px; font-size: 11.5px; padding: 0 9px; }

/* たどる（1つの項目を真ん中にした図） */
.ego-box { padding: 12px 6px 10px; }
.ego { width: 100%; height: auto; display: block; }
.ego .elabel { font-size: 10.5px; fill: var(--ink-3); text-anchor: middle; font-family: var(--sans); letter-spacing: .04em; }
.ego .eedge { fill: none; stroke: var(--ink-3); opacity: .7; }
.ego .eedge.weak { stroke-dasharray: 4 3; }
.ego .enode { cursor: pointer; }
.ego .enode rect { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.ego .enode:active rect { fill: var(--line); }
.ego text { text-anchor: middle; dominant-baseline: central; font-family: var(--sans); pointer-events: none; }
.ego .en { font-size: 13px; font-weight: 700; fill: var(--ink); }
.ego .es { font-size: 10.5px; font-weight: 600; }
.ego .es.up-f { fill: var(--up); } .ego .es.down-f { fill: var(--down); }
.ego .ecenter { cursor: pointer; }
.ego .ecenter rect { fill: var(--ink); }
.ego .ec { font-size: 15px; font-weight: 700; fill: var(--paper); }
.ego .ecs { font-size: 10.5px; fill: var(--paper); opacity: .75; }
.trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 0 0 10px; }
.trail .muted { margin-right: 4px; }
.trail .arrow { color: var(--ink-3); font-size: 12px; }
.trail .tag { height: 28px; }
.trail .tag.here { background: var(--ink); color: var(--paper); }
.trail .tag.here .nm { color: var(--paper); }
.trail .filter { height: 28px; font-size: 12px; margin-left: 6px; }

/* ---------- v0.4.0：わかりやすさの整理と、用語のタップ説明 ---------- */
.brand svg { width: 25px; height: 18px; }
/* 用語：点線の下線。タップで意味 */
.term { border-bottom: 1.5px dotted var(--ink-3); cursor: pointer; padding-bottom: 0; }
.term:active { background: var(--surface-2); }
.term-demo { border-bottom: 1.5px dotted var(--ink-3); }
.hint { font-size: 11.5px; color: var(--ink-3); margin-top: 18px; }
.termcard { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60; max-width: 560px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 14px; box-shadow: 0 12px 40px rgba(0,0,0,.25); transform: translateY(12px); opacity: 0; transition: transform .2s, opacity .2s; }
.termcard.on { transform: none; opacity: 1; }
.termcard[hidden] { display: none; }
.tc-h { display: flex; align-items: baseline; gap: 10px; }
.tc-h b { font-size: 18px; font-weight: 700; }
.tc-h span { font-size: 11px; color: var(--ink-2); }
#tc-exp { font-size: 14.5px; line-height: 1.8; margin-top: 6px; }
.tc-btns { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; flex-wrap: wrap; }
.tc-btns .btn { min-height: 38px; }

/* はじめての読み方 */
.guide { margin-top: 16px; border: 1px solid var(--line); box-shadow: none; }
.guide h3 { font-size: 14px; font-weight: 700; }
.guide ol { margin: 8px 0 12px; padding-left: 20px; font-size: 13.5px; line-height: 1.9; }

/* 今日のテーマ（一覧は要点だけ） */
.trows { display: grid; gap: 10px; }
.trow { margin: 0; padding: 15px 16px 13px; }
.tr-top { display: flex; align-items: flex-start; gap: 10px; }
.tr-no { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.trow h3 { font-size: 16px; font-weight: 700; line-height: 1.5; }
.tr-pt { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; margin: 6px 0 10px 34px; }
.trow .chain { margin-left: 34px; gap: 5px 3px; }
.trow .tag { height: 26px; font-size: 11.5px; padding: 0 9px; }
.tr-foot { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 0 34px; font-size: 11.5px; color: var(--ink-2); }
.tr-foot .more { margin: 0; color: var(--ink); }
.link-card { display: block; text-decoration: none; }
.link-card p { font-weight: 700; line-height: 1.65; margin-top: 4px; }
.link-card .more { display: block; }

/* 詳細の見出し（問いの形） */
.q-sec { margin-top: 18px; }
.q-h { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .04em; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.q-h::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--ink); }
.q-sec > p { font-size: 14.5px; line-height: 1.85; }
.q-sec > p + p { margin-top: 6px; }
.q-sec .chain { margin-bottom: 8px; }
.meta-line { font-size: 11px; color: var(--ink-3); margin-top: 6px; }
details.fold { margin-top: 16px; border-top: 1px solid var(--line); }
details.fold summary { cursor: pointer; list-style: none; padding: 12px 0; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; }
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary::after { content: "開く"; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
details.fold[open] summary::after { content: "閉じる"; }

/* 予定（一覧は1行ずつ） */
.ag-list { padding: 4px 0; }
.ag-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.ag-row:last-of-type { border-bottom: 0; }
.ag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-main b { font-size: 14px; font-weight: 700; line-height: 1.45; }
.ag-main span { font-size: 11.5px; color: var(--ink-2); }
.chev { color: var(--ink-3); font-size: 20px; }
.ag-all { display: block; width: 100%; text-align: center; padding: 11px 0 9px; font-size: 12.5px; font-weight: 700; border-top: 1px solid var(--line); }

/* もしも：起点を選ぶ・段ごとの一覧 */
.pick-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.pick-btn b { flex: 1; font-size: 15px; }
.pick-btn .chg { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.hops { display: flex; flex-wrap: wrap; gap: 8px; }
.hop2 { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); }
.hop2 .from { font-size: 11px; color: var(--ink-2); }

/* 用語集 */
.term-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.term-btn { padding: 8px 12px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; font-weight: 600; border-bottom: 1.5px dotted var(--ink-3); }

/* つながり：目的から試して、暮らしへの影響を先に読む */
.connect-intro { font-size: 14px; line-height: 1.8; margin: 8px 0 16px; }
.connect-tabs { display: flex; width: 100%; gap: 4px; }
.connect-tabs button { flex: 1; min-width: 0; min-height: 44px; height: auto; padding: 8px 6px; font-size: 13px; }
.connect-start { margin-top: 24px; }
.connect-start h2, .connect-explain h2, .sim-reality h2 { font-size: 16px; line-height: 1.6; margin-bottom: 10px; }
.scenario-list { display: grid; gap: 10px; }
.scenario { display: flex; align-items: center; gap: 12px; padding: 16px; width: 100%; min-height: 56px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.scenario > span:first-child { flex: 1; min-width: 0; }
.scenario b { display: block; font-size: 16px; line-height: 1.6; }
.scenario-desc { display: block; font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.7; }
.scenario-go { flex-shrink: 0; font-size: 20px; }
.scenario:active, .impact-row:active { background: var(--surface-2); }
.scenario-list.compact { gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.scenario-list.compact .scenario { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 11px 14px; min-height: 48px; }
.scenario-list.compact .scenario:last-child { border-bottom: 0; }
.scenario-list.compact b { font-size: 14px; }
#sim-sec { scroll-margin-top: 68px; }
.sim-workspace .sec { margin-top: 24px; }
.sim-workspace .pick-btn { min-height: 52px; box-shadow: none; border: 1px solid var(--line); }
.sim-prompt { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.sim-prompt b { color: var(--ink); font-weight: 500; }
.sim-takeaway { margin-top: 24px; }
.eyebrow { font-size: 12px; color: var(--ink-2); font-weight: 600; line-height: 1.7; }
.sim-takeaway h2 { font-size: 21px; line-height: 1.5; margin: 6px 0; }
.takeaway-hint { font-size: 12px; color: var(--ink-2); margin-bottom: 12px; }
.impact-list { display: grid; gap: 10px; }
.impact-row { display: block; width: 100%; padding: 15px 16px; background: var(--surface); border-radius: 14px; border: 1px solid var(--line); }
.impact-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.impact-head b { font-size: 15px; line-height: 1.6; }
.impact-dir { font-size: 13px; font-weight: 700; }
.impact-life { display: block; font-size: 13px; line-height: 1.75; margin-top: 5px; color: var(--ink-2); }
.impact-more { display: block; font-size: 12px; font-weight: 600; margin-top: 8px; }
.sim-limit { font-size: 12px; color: var(--ink-2); line-height: 1.8; margin-top: 12px; }
.sim-paths summary { min-height: 48px; align-items: center; gap: 12px; }
#v-map .hop2 { min-height: 44px; }
.connect-picker .filter, #v-map .filter { min-height: 44px; height: auto; padding-top: 8px; padding-bottom: 8px; }
.connect-picker .q-h { margin-top: 22px; }
.connect-explain { margin: 20px 0 16px; }
.connect-explain p, .sim-reality > p { color: var(--ink-2); font-size: 13px; line-height: 1.8; }
.connect-explain .btn { margin-top: 12px; }
.connect-next { display: flex; min-height: 44px; margin-top: 18px; text-decoration: none; text-align: center; }
.sim-reality { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.sim-reality .rel button { font-size: 14px; padding: 14px 0; }

/* ニュース：全件を見出し中心に、全体の入口と分野ごとに並べる */
.news-modes button, .news-filters .filter { min-height: 44px; }
.news-filters .filter { height: 44px; }
.news-section { margin-top: 26px; }
.news-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.news-section-head h2 { font-size: 14px; font-weight: 700; line-height: 1.5; }
.news-section-head > span { flex-shrink: 0; font-size: 11.5px; color: var(--ink-2); }
.news-section-note { font-size: 12px; color: var(--ink-2); line-height: 1.65; margin-top: 8px; }
.news-featured { padding: 16px 16px 2px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.news-item { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px 0; text-align: left; }
.news-item:first-child { padding-top: 14px; }
.news-item:last-child { border-bottom: 0; }
.news-item-main { display: block; flex: 1; min-width: 0; }
.news-item .t { display: block; overflow-wrap: anywhere; }
.news-item .m { flex-wrap: wrap; gap: 4px 8px; line-height: 1.6; color: var(--ink-2); }
.news-category { color: var(--ink); font-weight: 600; }
.news-importance { border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 10px; color: var(--ink); }
.news-chevron { flex-shrink: 0; color: var(--ink-3); font-size: 24px; font-weight: 400; line-height: 1; }
.news-connections summary { min-height: 44px; align-items: center; gap: 12px; }
.news-connections .q-sec { margin-top: 12px; }
.news-connections .tag { min-height: 44px; height: auto; padding: 10px 12px; }
.news-connections .btn, .news-connections .link-row { min-height: 44px; }

/* v0.5.1：まとめた記事の数 */
.news-more { border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 10px; color: var(--ink-2); }
.rel a { display: block; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; text-decoration: none; }
.rel a .src { display: block; font-size: 11px; color: var(--ink-2); margin-top: 2px; }

/* v0.6.0：集めている媒体 */
.src-link { display: inline; margin-left: 4px; font-size: inherit; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); }
.src-list { display: grid; gap: 0; }
.src-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.src-row small { margin-left: 6px; font-size: 10px; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; color: var(--ink-2); }

/* v0.6.1：説明・番号・飾りを外したあとの整え */
.trow { padding: 14px 16px 14px; }
.tr-top { align-items: center; justify-content: space-between; gap: 10px; }
.trow h3 { flex: 1; }
.tr-pt { margin: 4px 0 10px; }
.trow .chain { margin-left: 0; }
.tr-days { margin-left: 8px; font-size: 10.5px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; white-space: nowrap; }
.chev-r { flex-shrink: 0; color: var(--ink-3); font-size: 20px; line-height: 1; }
.week-card, .link-card { position: relative; padding-right: 40px; }
.week-card .chev-r, .link-card .chev-r { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.week-card h3 { margin-bottom: 0; }
.link-card p { margin-top: 0; }
.ex-head { gap: 0; }
.foot { margin: 28px 0 6px; text-align: center; }