/* ============================================================
   CHAPTER Daily Journal — 1ヶ月プロンプト
   机の上に、黒い表紙の Daily Journal が一冊。
   めくると生成りの紙に、今日の一問。しおりは開いた日ごとに一枚すすむ。
   書体はOS標準のみ（外部読込なし）。
   lp-kenpin 自己採点: P5 H4 E4 S5 R4 V5 ／ macrostructure: book-object（机の上の一冊）
   ============================================================ */

:root {
  --desk: #E8E4DC;          /* 机の面 */
  --page: #FBF9F4;          /* 紙 */
  --page-edge: #F1ECE3;     /* 重なった紙の小口（明） */
  --page-edge-dark: #C9C1B2;/* 小口の影線 */
  --cover: #181716;         /* 黒い表紙（実物） */
  --cover-band: #FBF9F4;    /* 表紙の白い帯 */
  --cover-text: #F2EEE6;
  --cover-text-dim: rgba(242, 238, 230, 0.78);
  --cover-text-soft: rgba(242, 238, 230, 0.66);
  --cover-line: rgba(255, 255, 255, 0.72);
  --shadow-book: 0 30px 50px -34px rgba(35, 26, 14, 0.55), 0 1px 0 rgba(0, 0, 0, 0.04);
  --shade: rgba(0, 0, 0, 0.28);
  --shade-soft: rgba(0, 0, 0, 0.18);
  --ink: #1F1C19;
  --ink-2: #5F5950;         /* 副文 */
  --ink-3: #746D63;         /* ラベル */
  --rule: #D9D2C5;          /* 罫線 */
  --rule-strong: #B3AA99;
  --accent: #96703C;        /* キャラメル：しおりと選択にだけ使う */
  --accent-deep: #7E5C2E;

  --numeral: "Didot", "Cormorant Garamond", "Hoefler Text", "Bodoni 72", "Times New Roman", serif;
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", system-ui, sans-serif;

  /* 本の幅：PCでは画面の高さに収まる幅まで、スマホでは横幅いっぱい */
  --book-w: clamp(300px, calc((100vh - 15rem) * 0.714), 460px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --turn: 0.72s;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; min-height: 100%; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--page); padding: 0.5rem 1rem; z-index: 50; }
.skip-link:focus { left: 0; }
:is(a, button, input, textarea, summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

button:active, .turn-btn:active, .linkish:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- header / footer ---------- */
.site-head {
  width: 100%; max-width: 64rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 4vw, 2rem) clamp(0.5rem, 2vw, 0.75rem);
}
.brand { display: inline-block; line-height: 0; }
.brand img { width: clamp(86px, 13vw, 108px); height: auto; }
.head-nav { display: flex; align-items: center; gap: 1rem; }
.readout { font-family: var(--numeral); font-size: 0.92rem; letter-spacing: 0.14em; color: var(--ink-2); font-variant-numeric: lining-nums; white-space: nowrap; }
.head-link { color: var(--ink); text-decoration: none; font-size: 0.78rem; letter-spacing: 0.2em; border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px; }
.head-link:hover { border-color: var(--ink); }

.site-foot { text-align: center; padding: 1.5rem 1.25rem 2.25rem; }
.foot-title { font-family: var(--numeral); font-size: 0.9rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 0.25rem; }
.foot-sub { font-family: var(--sans); text-transform: none; letter-spacing: 0.14em; font-size: 0.72rem; margin-left: 0.5rem; }
.foot-fine { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-2); margin: 0; }
.noscript { margin: 2rem auto; max-width: 30rem; text-align: center; }

/* ---------- 机の上の一冊 ---------- */
#app { flex: 1; display: flex; flex-direction: column; align-items: center; padding: clamp(0.5rem, 2vw, 1.25rem) 16px 1rem; outline: none; }

.book {
  position: relative;
  width: min(100%, var(--book-w));
  perspective: 1800px;
  touch-action: pan-y;
  --stack: 24px; /* 残りページの厚み。JSで日ごとに更新 */
}
/* 小口＝残りのページ。右と下に、紙の重なりを1pxの線で */
.edge { position: absolute; z-index: 1; pointer-events: none; }
.edge-right {
  top: 3px; bottom: -3px; left: 100%; width: var(--stack);
  background: repeating-linear-gradient(90deg, var(--page-edge) 0 1px, var(--page-edge-dark) 1px 2px);
  border-right: 1px solid var(--page-edge-dark);
}
.edge-bottom {
  left: 3px; right: -3px; top: 100%; height: var(--stack);
  background: repeating-linear-gradient(180deg, var(--page-edge) 0 1px, var(--page-edge-dark) 1px 2px);
  border-bottom: 1px solid var(--page-edge-dark);
}
/* 閉じているとき、しおりの端が本の下から覗く */
.book.closed::after {
  content: ""; position: absolute; z-index: 0; left: 64%; top: calc(100% + var(--stack) - 6px);
  width: 12px; height: 30px; background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

.page {
  position: relative; z-index: 2;
  background: var(--page);
  aspect-ratio: 5 / 7;
  padding: clamp(1.75rem, 6vw, 2.5rem) clamp(1.5rem, 6vw, 2.5rem) 3.5rem;
  box-shadow: var(--shadow-book);
  display: flex; flex-direction: column;
}

/* めくる：いまの一枚が左の背表紙を軸に起き上がって消える／戻すときは降りてくる */
.leaf {
  position: absolute; left: 0; top: 0; width: 100%; z-index: 5;
  transform-origin: left center;
  backface-visibility: hidden;
  will-change: transform;
}
.leaf::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, var(--shade), transparent 46%);
}
.leaf.out { animation: leaf-out var(--turn) cubic-bezier(0.5, 0.02, 0.25, 1) forwards; }
.leaf.out::after { animation: leaf-shade var(--turn) ease forwards; }
.leaf.in { animation: leaf-in var(--turn) cubic-bezier(0.3, 0.02, 0.2, 1) forwards; }
.leaf.in::after { animation: leaf-shade var(--turn) ease reverse forwards; }
@keyframes leaf-out { from { transform: rotateY(0deg); } to { transform: rotateY(-112deg); } }
@keyframes leaf-in { from { transform: rotateY(-112deg); } to { transform: rotateY(0deg); } }
@keyframes leaf-shade { from { opacity: 0; } to { opacity: 1; } }
.page.settle { animation: settle var(--turn) var(--ease); }
@keyframes settle { from { box-shadow: var(--shadow-book), inset 40px 0 40px -40px var(--shade-soft); } to { box-shadow: var(--shadow-book), inset 0 0 0 0 transparent; } }
.page.fade { animation: fade var(--turn) var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* しおりリボン＝今日のページ */
.ribbon {
  position: absolute; top: -6px; right: 17%; width: 13px; height: 118px; z-index: 3;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  filter: drop-shadow(0 6px 6px var(--shade-soft));
}
.ribbon::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cover-line), transparent 40%, var(--shade-soft)); opacity: 0.35; }

/* ---------- 表紙 ---------- */
.page.cover {
  background: var(--cover); color: var(--cover-text);
  padding: 0; overflow: hidden;
  display: grid; grid-template-columns: 13% 22% 1fr;
}
.cover-band {
  grid-column: 2; background: var(--cover-band);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 1.5rem 0 1.5rem;
}
.cover-band img { width: 70%; height: auto; }
.band-title { writing-mode: vertical-rl; font-family: var(--numeral); font-size: 0.7rem; letter-spacing: 0.36em; color: var(--ink); margin: 0; }
.cover-body {
  grid-column: 3; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.25rem, 4vw, 1.75rem) clamp(1rem, 4vw, 2rem) clamp(1.75rem, 5vw, 2.5rem) clamp(1rem, 3vw, 1.5rem);
}
.cover-kicker { font-family: var(--numeral); font-size: 0.72rem; letter-spacing: 0.3em; color: var(--cover-text-soft); margin: 0 0 0.5rem; }
.cover-title { font-family: var(--mincho); font-weight: 500; font-size: clamp(1.3rem, 4.6vw, 1.65rem); line-height: 1.5; letter-spacing: 0.06em; color: var(--cover-band); margin: 0 0 1rem; overflow-wrap: anywhere; min-width: 0; }
.cover-lede { font-size: 0.84rem; line-height: 1.95; color: var(--cover-text-dim); margin: 0 0 1.5rem; }
.cover-today { font-family: var(--numeral); font-size: 0.9rem; letter-spacing: 0.16em; color: var(--cover-text-dim); margin: 0 0 1rem; font-variant-numeric: lining-nums; }
.btn-open {
  align-self: flex-start; cursor: pointer;
  background: transparent; color: var(--cover-band); border: 1px solid var(--cover-line);
  padding: 0.75rem 1.25rem; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.22em;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn-open:hover { background: var(--cover-band); color: var(--cover); }
.btn-open:focus-visible { outline-color: var(--cover-band); }

/* ---------- 日のページ ---------- */
.eyebrow { display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 0.5rem; font-size: 0.72rem; letter-spacing: 0.2em; color: var(--ink-3); }
.eyebrow.center { justify-content: center; }
.eyebrow-en { font-family: var(--numeral); letter-spacing: 0.26em; font-size: 0.78rem; }
.daynum { font-family: var(--numeral); font-weight: 400; font-size: clamp(2.2rem, 8vw, 2.8rem); letter-spacing: 0.1em; line-height: 1.05; margin: 0 0 clamp(1.5rem, 5vw, 2rem); font-variant-numeric: lining-nums; overflow-wrap: anywhere; min-width: 0; }
.daynum small { font-size: 0.42em; letter-spacing: 0.16em; color: var(--ink-3); margin-left: 0.5rem; }
.prompt { font-family: var(--mincho); font-weight: 500; font-size: clamp(1.28rem, 4.6vw, 1.62rem); line-height: 1.85; letter-spacing: 0.04em; margin: 0 0 1.25rem; overflow-wrap: anywhere; min-width: 0; }
.page.week-opening { aspect-ratio: auto; }
.week-image { display: block; width: 100%; height: auto; object-fit: contain; margin: 0 0 1.5rem; }

.choices { border: 0; padding: 0; margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.choice { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-family: var(--mincho); font-size: 1.04rem; letter-spacing: 0.04em; color: var(--ink-2); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-mark { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--rule-strong); transition: background 0.2s, border-color 0.2s; }
.choice:hover .choice-mark { border-color: var(--ink); }
.choice input:checked + .choice-mark { background: var(--accent); border-color: var(--accent); }
.choice input:checked ~ .choice-text { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.34em; }
.choice input:focus-visible + .choice-mark { outline: 2px solid var(--ink); outline-offset: 3px; }
.follow { font-size: 0.86rem; letter-spacing: 0.08em; color: var(--ink-2); margin: 0 0 0.5rem; }
.follow::before { content: "— "; color: var(--rule-strong); }

/* 今日のことば＝ページの下段の題辞。訳文は明朝、原文と出典はごく小さく */
.quote { margin: auto 0 0; padding: 1rem 0 0; border-top: 1px solid var(--rule); min-width: 0; }
.quote-label { font-size: 0.68rem; letter-spacing: 0.24em; color: var(--ink-3); margin: 0 0 0.5rem; }
.quote-text { margin: 0 0 0.5rem; font-family: var(--mincho); font-size: 1.04rem; line-height: 1.95; letter-spacing: 0.03em; color: var(--ink); }
.quote-text p { margin: 0; overflow-wrap: anywhere; }
.quote-orig { margin: 0 0 0.5rem; font-family: var(--numeral); font-size: 0.86rem; line-height: 1.6; letter-spacing: 0.02em; color: var(--ink-2); overflow-wrap: anywhere; }
.quote-orig:lang(ja) { font-family: var(--mincho); font-size: 0.86rem; }
.quote-src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-2); }
.quote-who { font-family: var(--mincho); font-size: 0.82rem; color: var(--ink); }
.quote-who::before { content: "— "; color: var(--rule-strong); }
.folio { position: absolute; left: 0; right: 0; bottom: clamp(0.9rem, 3vw, 1.2rem); text-align: center; font-family: var(--numeral); font-size: 0.82rem; letter-spacing: 0.18em; color: var(--ink-3); margin: 0; font-variant-numeric: lining-nums; }

/* ---------- 目次・おしまい ---------- */
.page.contents, .page.end { aspect-ratio: auto; }
.page-h { font-family: var(--mincho); font-weight: 500; font-size: 1.3rem; letter-spacing: 0.08em; margin: 0 0 0.5rem; overflow-wrap: anywhere; min-width: 0; }
.page-h .en { display: block; font-family: var(--numeral); font-size: 0.72rem; letter-spacing: 0.3em; color: var(--ink-3); margin-bottom: 0.5rem; }
.about { color: var(--ink-2); font-size: 0.88rem; line-height: 1.95; margin: 0 0 1.5rem; }
.about p { margin: 0 0 0.5rem; }
.about .rule { color: var(--ink); }
.week { margin: 0 0 1.5rem; }
.week-h { display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 0.25rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--ink); font-family: var(--mincho); font-weight: 500; font-size: 1rem; letter-spacing: 0.06em; }
.week-h .en { font-family: var(--numeral); font-size: 0.78rem; letter-spacing: 0.26em; color: var(--ink-3); }
.days { list-style: none; margin: 0; padding: 0; }
.entry { position: relative; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0 0.75rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.entry:hover .entry-q { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.3em; }
.entry-no { font-family: var(--numeral); font-size: 1.05rem; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "palt" 0; }
.entry-q { font-family: var(--mincho); font-size: 0.95rem; line-height: 1.7; }
.entry.written .entry-no::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); margin-left: 0.25rem; vertical-align: middle; }
.entry.today::before { content: ""; position: absolute; left: -0.9rem; top: 0.6rem; bottom: 0.6rem; width: 3px; background: var(--accent); }
.entry.today .entry-no { color: var(--accent-deep); }
.tools { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.82rem; letter-spacing: 0.1em; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.3em; }
.linkish:hover { text-decoration-color: var(--ink); }
.linkish.quiet { color: var(--ink-3); }

.page.end { text-align: center; justify-content: center; min-height: calc(min(100vw - 32px, var(--book-w)) * 1.2); }
.end-lede { font-family: var(--mincho); font-size: clamp(1.2rem, 4.4vw, 1.5rem); letter-spacing: 0.06em; line-height: 1.9; margin: 0 0 1rem; overflow-wrap: anywhere; min-width: 0; }
.end-note { color: var(--ink-2); font-size: 0.88rem; margin: 0 0 1.5rem; text-align: left; }
.end-note p { margin: 0 0 0.75rem; }
.end-signoff { font-family: var(--numeral); font-size: 1.2rem; letter-spacing: 0.04em; margin: 0 0 1.5rem; }
.end-tools { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

/* ---------- 本の下のナビ ---------- */
.turn-nav { width: min(100%, var(--book-w)); display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--stack, 24px) + 1.5rem); min-height: 2.4rem; }
.turn-btn { background: none; border: 0; padding: 0.5rem 0; cursor: pointer; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.18em; color: var(--ink-2); transition: color 0.2s; }
.turn-btn:hover { color: var(--ink); }
.turn-btn .arr { font-family: var(--numeral); letter-spacing: 0; }
.turn-nav .spacer { flex: 1; }

/* ---------- 読み込み失敗 ---------- */
.load-error { color: var(--ink-2); font-size: 0.9rem; }

@media (max-width: 420px) {
  .head-link { font-size: 0.72rem; }
  .page.cover { grid-template-columns: 11% 24% 1fr; }
  .cover-lede br { display: none; }
}

@media (max-width: 640px) {
  .quote-text { font-size: 0.88rem; line-height: 1.85; }
  .quote-orig, .quote-orig:lang(ja) { font-size: 0.76rem; }
  .quote-src { font-size: 0.7rem; }
  .quote-who { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .edge { transition: none; }
  .leaf.out, .leaf.in { animation-duration: 0.28s; animation-name: fade-out; }
  .leaf.in { animation-name: fade-in; }
  .leaf::after { display: none; }
  .page.settle, .page.fade { animation: none; }
  @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
}