---
// 考察記事から、いま考えていることと目指すことを伝えるページ（試作）
// v="yoko"：全部を横組みの読み物に。出典・見出しの番号・ラベルは左の余白に置く
// v="tate"：最初の画面と本人の言葉（「」）を縦書きに。説明の文は横組み
import { TOP, NOW, AXES, CHANGES, OPEN, AIM, TATE_BREAKS, type Log } from '../data/thinking';
import V from './ThinkingVoice.astro';
interface Props { v: 'yoko' | 'tate' }
const { v } = Astro.props;
const tate = v === 'tate';
const href = (l: Log) => `/record/${l.slug}`;
// 縦書きの中の欧字と数字（日本語組版の決まり JLREQ 3.2.3 に合わせる）
// - 小文字の英単語（micro factory など）は、決まりどおり時計回りに90度寝かせる（何もしない＝ブラウザの既定）
// - 大文字だけの略語（AI・VLA など5字まで）は1字ずつ正立させる
// - 2桁の数字は縦中横にする
const esc = (t: string) => t.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]!));
const BR = new Map(TATE_BREAKS.map((b) => [b.replaceAll('／', ''), b]));
for (const [plain] of BR) {
  const all = [NOW.voice.t, ...AXES.flatMap((a) => a.voice.map((q) => q.t)), ...CHANGES.items.map((c) => c.voice.t), ...OPEN.items.map((o) => o.v).filter(Boolean), AIM.voice.t];
  if (!all.includes(plain)) throw new Error(`縦書きの改行位置が、本人の言葉と一致しない: ${plain}`);
}
const tateHtml = (t: string) => (BR.get(t) ?? t).split('／').map((ln) => esc(ln)
  .replace(/(?<![0-9A-Za-z])([0-9]{2}|[0-9][A-Z])(?![0-9A-Za-z])|(?<![0-9A-Za-z])([A-Z]{1,5})(?![A-Za-z])/g,
    (_m, tcy, up) => tcy ? `<span class="tcy">${tcy}</span>` : `<span class="up">${up}</span>`)).join('<br>');
---
<article class={`tp tp-${v}`}>

  <!-- 最初の画面 -->
  {tate ? (
    <header class="top-tate">
      <div class="tt">
        <p class="tt-note">二〇二六年十月までの考察記事から、いま考えていること</p>
        <h1>{TOP.q[0]}<br />{TOP.q[1]}</h1>
        <p class="tt-lead">{TOP.lead[0]}<br />{TOP.lead[1]}</p>
      </div>
    </header>
  ) : (
    <header class="row top">
      <p class="note">2026年10月までの<br />考察記事から、<br />いま考えていること</p>
      <div class="txt">
        <h1><span class="ph">{TOP.q[0]}</span><span class="ph">{TOP.q[1]}</span></h1>
        <p class="lead">{TOP.lead[0]}<br />{TOP.lead[1]}</p>
      </div>
    </header>
  )}

  <!-- いま見えていること -->
  <section class="sec">
    <div class="row"><span class="note"></span><h2 class="txt">{NOW.h}</h2></div>
    <div class="row"><p class="note mono">{NOW.logs.map((l) => <a href={href(l)}>{l.n}</a>)}</p><p class="txt">{NOW.text}</p></div>
    <figure class="row voice">
      <figcaption class="note mono"><a href={href(NOW.voice.log)}>{NOW.voice.log.n}</a></figcaption>
      <blockquote class="txt">{tate ? <p set:html={tateHtml(NOW.voice.t)} /> : <p>{NOW.voice.t}</p>}</blockquote>
    </figure>
  </section>

  <!-- 考えの軸 -->
  <section class="sec">
    <div class="row"><span class="note"></span><h2 class="txt">考えの軸</h2></div>
    {AXES.map((a) => (
      <div class="axis">
        <div class="row"><p class="note no">{a.no}</p><h3 class="txt"><span class="no-sp">{a.no}　</span>{a.h}</h3></div>
        <div class="row"><p class="note">{a.scene.k}</p><p class="txt">{a.scene.link
          ? a.scene.t.split(a.scene.link.text).map((part, i) => i === 0 ? part : <><a href={a.scene.link!.href} target="_blank" rel="noopener">{a.scene.link!.text}</a>{part}</>)
          : a.scene.t}</p></div>
        {a.voice.slice(0, 1).map((q) => <V q={q} tate={tate} html={tateHtml(q.t)} />)}
        <div class="row why"><p class="note"><span>なぜそう考えるか</span>{a.why.logs.map((l) => <a class="mono" href={href(l)}>{l.n}</a>)}</p><p class="txt">{a.why.t}</p></div>
        {a.voice.slice(1).map((q) => <V q={q} tate={tate} html={tateHtml(q.t)} />)}
        {a.think && <div class="row"><p class="note">考え</p><p class="txt think">{a.think}</p></div>}
        <div class="row"><p class="note">やりたいこと</p><p class="txt">{a.want}</p></div>
        <div class="row src"><p class="note">元の記事</p><p class="txt mono">{a.logs.map((l) => <a href={href(l)}>{l.n}</a>)}</p></div>
      </div>
    ))}
  </section>

  <!-- 考えが変わったこと -->
  <section class="sec">
    <div class="row"><span class="note"></span><h2 class="txt">{CHANGES.h}</h2></div>
    {CHANGES.items.map((c) => (
      <div class="chg">
        <div class="row"><span class="note"></span><h3 class="txt h-chg">{c.h}</h3></div>
        <div class="row"><span class="note"></span><p class="txt">{c.t}</p></div>
        <V q={c.voice} tate={tate} html={tateHtml(c.voice.t)} />
      </div>
    ))}
  </section>

  <!-- まだ分からないこと -->
  <section class="sec">
    <div class="row"><span class="note"></span><h2 class="txt">{OPEN.h}</h2></div>
    {OPEN.items.map((o) => (
      <div class="open">
        <div class="row"><p class="note mono">{!o.v && <a href={href(o.log)}>{o.log.n}</a>}</p><p class="txt">{o.t}</p></div>
        {o.v && (
          <figure class="row voice">
            <figcaption class="note mono"><a href={href(o.log)}>{o.log.n}</a><span class="when">{o.when}</span></figcaption>
            <blockquote class="txt">{tate ? <p set:html={tateHtml(o.v)} /> : <p>{o.v}</p>}</blockquote>
          </figure>
        )}
      </div>
    ))}
  </section>

  <!-- 目指すこと -->
  <section class="sec aim">
    <div class="row"><span class="note"></span><h2 class="txt">{AIM.h}</h2></div>
    <figure class="row voice big">
      <figcaption class="note mono"><a href={href(AIM.voice.log)}>{AIM.voice.log.n}</a></figcaption>
      <blockquote class="txt">{tate ? <p set:html={tateHtml(AIM.voice.t)} /> : <p>{AIM.voice.t}</p>}</blockquote>
    </figure>
    <div class="row"><p class="note mono"><a href={href(AIM.log)}>{AIM.log.n}</a></p><p class="txt">{AIM.text}</p></div>
  </section>

  <!-- 最後に1つだけ -->
  <div class="row end">
    <span class="note"></span>
    <div class="txt">
      <p>この考えについて、話してみたいことがあれば。</p>
      <a class="btn" href="/message">メッセージを送る<i class="ms" aria-hidden="true">arrow_forward</i></a>
    </div>
  </div>

</article>

<style is:global>
/* ============================================================
   文字だけのページの決まり（横組み・縦書きで共通）
   - 紙：真っ白にしない（#fff と純黒の組は、長く読むと白がまぶしい）。黄みに寄せすぎない温かい生成り
   - 墨：純黒（#000）にしない。紙との差は 14:1 前後。注の灰色も 5:1 以上
   - 本文：明朝 18px・行の高さ 1.95・字間 0.04em。1行 36字前後（日本語で長く読める幅）
   - 縦の間隔は、本文1行の高さ（--L）の倍数だけで取る
   - 線・枠・色の帯・飾りは使わない。区切りは余白で作る
   ============================================================ */
.tp{
  --paper:#f5f3ee; --ink:#22201c; --sub:#696459; --sel:#22201c;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --fs:18px; --lh:1.95; --L:calc(var(--fs) * var(--lh));
  --col:calc(36 * 1.04 * var(--fs));     /* 36字 */
  --note:10rem; --gap:2.75rem;
  --gut:max(20px,env(safe-area-inset-left,0px));
  background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:var(--fs);line-height:var(--lh);letter-spacing:.04em;font-weight:400;
  padding:48px 0 calc(var(--L) * 5);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-break:strict;text-spacing-trim:trim-start;text-autospace:normal
}
.tp *{box-sizing:border-box}
.tp ::selection{background:var(--sel);color:var(--paper)}
.tp p,.tp figure,.tp blockquote{margin:0}
.tp a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em}
.tp a:hover{text-decoration-thickness:2px}
.tp .mono{font-family:var(--mono);letter-spacing:0}

/* 余白の列（注）と本文の列。本文の列をページの真ん中に置き、注は左の余白にかける */
.tp .row{display:grid;grid-template-columns:var(--note) minmax(0,var(--col)) var(--note);column-gap:var(--gap);justify-content:center;padding-inline:var(--gut)}
.tp .note{grid-column:1;font-size:.74rem;line-height:var(--L);letter-spacing:.06em;color:var(--sub);text-align:right;white-space:nowrap}
.tp .note.mono{font-size:.72rem;display:flex;flex-direction:column;align-items:flex-end}
.tp .note a{text-decoration-color:color-mix(in srgb,var(--sub) 45%,transparent)}
.tp .txt{grid-column:2}
.tp .txt + .txt{grid-column:2}
.tp .row + .row{margin-top:calc(var(--L) * .6)}
.tp p.txt,.tp .txt p{text-wrap:pretty}

/* 見出し：大きい文字ほど字間を詰める（palt）。文節の途中で折り返さない */
.tp h1,.tp h2,.tp h3{margin:0;font-weight:600;font-feature-settings:"palt";word-break:auto-phrase;text-wrap:balance}
.tp h1{font-size:clamp(2.6rem,4.8vw,4.1rem);line-height:1.45;letter-spacing:.02em;font-weight:700}
.tp h1 .ph{display:inline-block}
.tp h2{font-size:.95rem;line-height:var(--L);letter-spacing:.2em}
.tp h3{font-size:1.65rem;line-height:1.6;letter-spacing:.03em}
.tp .no-sp{display:none}

/* 最初の画面（横） */
.tp .top{padding-top:calc(var(--L) * 4);padding-bottom:calc(var(--L) * 3)}
.tp .top .note{padding-top:1.4rem;white-space:normal}
.tp .top .txt{grid-column:2 / 4}
.tp .lead{margin-top:calc(var(--L) * 1.3);font-size:1.375rem;line-height:1.95;letter-spacing:.05em;word-break:auto-phrase}

/* 節と軸：区切りは余白だけ */
.tp .sec{padding-top:calc(var(--L) * 4)}
.tp .sec > .row:first-child{margin-bottom:calc(var(--L) * 1)}
.tp .axis{padding-top:calc(var(--L) * 2.5)}
.tp .sec > .row + .axis{padding-top:calc(var(--L) * .5)}
.tp .axis .row:first-child{margin-bottom:calc(var(--L) * .6)}
.tp .note.no{font-size:1.65rem;line-height:1.6;font-weight:600;color:var(--ink);letter-spacing:0;font-feature-settings:"lnum"}
.tp .think{font-weight:600}
.tp .src .txt{font-size:.74rem;display:flex;flex-wrap:wrap;gap:0 1.2em;color:var(--sub)}
.tp .src .note{opacity:0}

.tp .why .note{display:flex;flex-direction:column;align-items:flex-end}
.tp .why .note a{font-size:.72rem}
.tp .chg + .chg{padding-top:calc(var(--L) * 2)}
.tp .h-chg{font-size:1.24rem;line-height:1.7;margin-bottom:calc(var(--L) * .2)}

/* 本人の言葉：少し大きく・少し太く。色も線も足さない */
.tp .voice{margin-block:calc(var(--L) * 1)}
.tp .voice blockquote p{font-size:1.24rem;line-height:1.95;font-weight:500;letter-spacing:.05em}
.tp .voice blockquote p::before{content:"「"}
.tp .voice blockquote p::after{content:"」"}
.tp .voice .note{padding-top:.3rem}
.tp .voice.big blockquote p{font-size:1.5rem;line-height:1.9}

.tp .open + .open{margin-top:calc(var(--L) * 1.5)}
.tp .open .voice{margin-block:calc(var(--L) * .6) 0}
.tp .note .when{font-family:var(--serif);letter-spacing:.06em}

/* 最後の一つ：サイトのボタンとそろえる */
.tp .end{padding-top:calc(var(--L) * 4)}
.tp .end p{margin-bottom:calc(var(--L) * .6)}
.tp .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:4px;background:var(--ink);color:var(--paper);text-decoration:none;font-family:"Noto Sans JP",system-ui,sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.04em}
.tp .btn:hover{background:#000}
.tp .btn .ms{font-family:"Material Symbols Outlined";font-style:normal;font-size:18px;transition:transform .2s}
.tp .btn:hover .ms{transform:translateX(3px)}

/* ---- 縦書き：最初の画面と、本人の言葉 ---- */
/* 縦書きのページは上から下へ速く読むので、横組みの列も1行28字に狭める（横組みのページは36字） */
.tp-tate{--col:calc(28 * 1.04 * var(--fs))}
.tp-tate .top-tate{min-height:calc(100svh - 48px);display:flex;justify-content:center;align-items:center;padding:calc(var(--L) * 2) var(--gut)}
.tp-tate .tt{writing-mode:vertical-rl;display:flex;flex-direction:column;gap:calc(var(--L) * 1.6)}
.tp-tate .tt > *{white-space:nowrap}
.tp-tate .tt-note{font-size:.78rem;letter-spacing:.2em;color:var(--sub)}
.tp-tate .tt h1{font-size:clamp(2.6rem,5.6vh,3.9rem);line-height:1.7;letter-spacing:.08em;font-weight:700}
.tp-tate .tt-lead{font-size:1.3rem;line-height:2.2;letter-spacing:.12em;padding-top:5.5em}
.tp-tate .voice blockquote{display:flex;justify-content:center}
.tp-tate .voice blockquote p{writing-mode:vertical-rl;white-space:nowrap;font-size:1.3rem;line-height:2.1;letter-spacing:.12em;text-align:start}
.tp-tate .voice.big blockquote p{font-size:1.45rem}
/* 横の文と縦の「」の間は、横どうしより大きく空ける（向きが変わる所で目を休ませる） */
.tp.tp-tate .row.voice{margin-block:calc(var(--L) * 3)}
.tp.tp-tate .open .row.voice{margin-block:calc(var(--L) * 2.5) calc(var(--L) * 1)}
.tp-tate .voice .up{text-orientation:upright;letter-spacing:0}
/* 縦中横（2D など）：前後の自動の空きと字間を外し、半角の字形で行の真ん中にそろえる */
.tp-tate .voice blockquote p{text-autospace:no-autospace}
.tp-tate .voice .tcy{text-combine-upright:all;letter-spacing:0;font-feature-settings:"hwid" 1}  /* 半角の字形にして、2字でちょうど1字分の幅にする */

/* ---- スマホ ---- */
@media (max-width:820px){
  .tp{--fs:16.5px;--lh:1.9}
  .tp .row{grid-template-columns:minmax(0,1fr);column-gap:0}
  .tp .note,.tp .txt{grid-column:1}
  .tp .note{text-align:left;line-height:1.8;white-space:normal}
  .tp .note.mono{flex-direction:row;gap:0 1em;justify-content:flex-start}
  .tp .row > .note:empty{display:none}
  .tp .row > .note + .txt{margin-top:2px}
  .tp .note.no{display:none}
  .tp .top .note br{display:none}
  .tp .no-sp{display:inline}
  .tp .voice .note{order:2;padding-top:4px}
  .tp .src .note{display:none}
  .tp .why .note{flex-direction:row;flex-wrap:wrap;gap:0 1em;align-items:baseline}
  .tp h1{font-size:calc((100vw - 2*var(--gut)) / 11.6)}
  .tp h3{font-size:1.4rem}
  .tp .lead{font-size:1.04rem;letter-spacing:.03em}
  .tp .top .txt{grid-column:1}
  .tp .top{padding-top:calc(var(--L) * 2.5)}
  .tp .voice blockquote p{font-size:1.12rem}
  .tp .voice.big blockquote p{font-size:1.25rem}
  .tp-tate .tt{gap:calc(var(--L) * 1)}
  .tp-tate .tt h1{font-size:2.2rem}
  .tp-tate .tt-lead{font-size:1.02rem;padding-top:4em}
  .tp-tate .voice blockquote p{font-size:1.1rem}
  .tp.tp-tate .row.voice{margin-block:calc(var(--L) * 2.2)}
  .tp-tate .voice.big blockquote p{font-size:1.2rem}
}
</style>
