/* Scoped reading pages: the supplied prose stays as readable as a notebook. */
#reading-result { grid-column: 1 / -1; min-width: 0; }
.reading-notebook {
  --reading-ink: #414e45;
  --reading-muted: #657063;
  --reading-line: #d6dbce;
  --reading-blue: #50617f;
  color: var(--reading-ink);
  background: #fffef8;
  min-width: 0;
  padding: 28px 24px 24px;
  border-top: 1px dashed #d3d2c8;
  font-family: NanumSquareRound, var(--body, sans-serif);
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.reading-notebook *,
.reading-notebook *::before,
.reading-notebook *::after { box-sizing: border-box; }
.reading-notebook [hidden] { display: none !important; }
.reading-notebook p,
.reading-notebook h2,
.reading-notebook h3,
.reading-notebook h4,
.reading-notebook h5 { margin: 0; }
.reading-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.reading-notebook .reading-title {
  color: var(--reading-blue);
  font: 700 24px/1.4 NanumSquareRound, var(--body, sans-serif);
  letter-spacing: -.035em;
}
.reading-personality {
  max-width: 68ch;
  margin: 0 auto 32px;
  padding: 2px 0 30px;
  border-bottom: 1px dashed var(--reading-line);
}
.reading-notebook .reading-personality-headline {
  width: fit-content;
  max-width: 100%;
  margin-top: 16px;
  color: #4b5a42;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: -.025em;
  background: linear-gradient(transparent 79%, #e9edda 79%);
}
.reading-personality-prose {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: -.015em;
}
.reading-notebook .reading-personality-prose p + p { margin-top: 18px; }
.reading-notebook .reading-personality-note {
  margin-top: 20px;
  color: var(--reading-muted);
  font-size: 14px;
  line-height: 1.7;
}
.reading-notebook .reading-updated {
  color: var(--reading-muted);
  font-size: 13px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.reading-notebook .reading-headline {
  width: fit-content;
  max-width: 100%;
  margin-top: 20px;
  color: #455440;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -.025em;
  background: linear-gradient(transparent 77%, #e8eddc 77%);
}
.reading-notebook .reading-summary { margin-top: 10px; max-width: 72ch; }
.reading-notebook .reading-note {
  margin-top: 12px;
  padding-left: 11px;
  border-left: 2px solid #ccd4c1;
  color: var(--reading-muted);
  font-size: 14px;
  line-height: 1.7;
}
.reading-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 25px 0 18px;
  padding-bottom: 9px;
  border-bottom: 1px dashed #cfd5c6;
}
.reading-notebook .reading-tab {
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px 7px 9px 6px;
  background: transparent;
  color: #64715b;
  font: 700 15px/1.5 NanumSquareRound, var(--body, sans-serif);
  cursor: pointer;
  overflow-wrap: anywhere;
  word-break: keep-all;
  transition: background-color .15s, border-color .15s;
}
.reading-notebook .reading-tab:hover { background: #f0f3e9; }
.reading-notebook .reading-tab[aria-selected="true"] {
  color: #45563d;
  border-color: #a9b797;
  background: #eaf0de;
  box-shadow: 1px 2px 0 #dfe5d5;
}
.reading-notebook .reading-tab:nth-child(2)[aria-selected="true"] {
  color: #585d7c;
  border-color: #b8bacd;
  background: #f0eff8;
  box-shadow: 1px 2px 0 #e3e2ee;
}
.reading-notebook .reading-tab:nth-child(3)[aria-selected="true"] {
  color: #715b4a;
  border-color: #c9b89f;
  background: #f8f0e2;
  box-shadow: 1px 2px 0 #ece2d4;
}
.reading-notebook .reading-tab:nth-child(4)[aria-selected="true"] {
  color: #486876;
  border-color: #a8c3c8;
  background: #eaf4f5;
  box-shadow: 1px 2px 0 #dce8e9;
}
.reading-panel { min-width: 0; border-radius: 7px; }
.reading-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}
.reading-card {
  min-width: 0;
  padding: 20px 20px 17px;
  border: 1px solid var(--reading-line);
  border-radius: 8px 11px 7px 10px;
  background: #fdfdf7;
  box-shadow: 2px 3px 0 #eeeee5;
}
.reading-card-style { grid-column: 1 / -1; }
.reading-card:nth-child(even) {
  border-radius: 10px 7px 11px 8px;
  background: #fffdfa;
}
.reading-card.is-pending {
  border-style: dashed;
  background: #f8f8f2;
  box-shadow: none;
}
.reading-notebook .reading-card-kicker {
  margin-bottom: 5px;
  color: #6e775f;
  font-size: 13px;
  line-height: 1.65;
}
.reading-notebook .reading-card-title {
  color: #495b43;
  font: 700 19px/1.5 NanumSquareRound, var(--body, sans-serif);
  letter-spacing: -.025em;
}
.reading-notebook .reading-card-period {
  margin-top: 7px;
  color: #626c78;
  font-size: 14px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
.reading-card-body { margin-top: 12px; font-size: 16px; line-height: 1.7; }
.reading-notebook .reading-card-body p + p { margin-top: 12px; }
.reading-notebook .reading-card-footnote {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed #d6dace;
  color: var(--reading-muted);
  font-size: 14px;
  line-height: 1.7;
}
.reading-timing {
  min-width: 0;
  margin-top: 27px;
  padding-top: 24px;
  border-top: 1px dashed #d7d6c8;
}
.reading-notebook .reading-timing-title {
  width: fit-content;
  max-width: 100%;
  color: #526044;
  font: 700 21px/1.5 NanumSquareRound, var(--body, sans-serif);
  letter-spacing: -.025em;
  background: linear-gradient(transparent 75%, #edf0dd 75%);
}
.reading-timing-intro { margin-top: 12px; max-width: 72ch; }
.reading-notebook .reading-timing-intro p + p { margin-top: 10px; }
.reading-timing-months,
.reading-timing-years { min-width: 0; margin-top: 24px; }
.reading-notebook .reading-timing-group-title {
  margin-bottom: 12px;
  color: #6b6656;
  font: 700 16px/1.6 NanumSquareRound, var(--body, sans-serif);
}
.reading-timing-month-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}
.reading-timing-month {
  min-width: 0;
  padding: 18px;
  border: 1px solid #ddd6c9;
  border-radius: 10px 6px 11px 7px;
  background: #fffaf0;
  box-shadow: 2px 3px 0 #f0ece1;
}
.reading-timing-month:nth-child(even) {
  border-color: #d9d9cf;
  border-radius: 6px 10px 8px 11px;
  background: #f8faf1;
}
.reading-notebook .reading-timing-entry-title {
  color: #526044;
  font: 700 19px/1.5 NanumSquareRound, var(--body, sans-serif);
  font-variant-numeric: tabular-nums;
}
.reading-notebook .reading-timing-entry-kicker {
  margin-top: 5px;
  color: #6b6656;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.65;
}
.reading-timing-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.reading-timing-badges li {
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid #d6dac9;
  border-radius: 8px 10px 7px 9px;
  color: #657057;
  background: #f3f4e9;
  font-size: 12px;
  line-height: 1.6;
}
.reading-timing-year-list {
  overflow: hidden;
  border: 1px solid var(--reading-line);
  border-radius: 9px 12px 8px 10px;
  background: #fdfdf7;
}
.reading-timing-year + .reading-timing-year { border-top: 1px dashed var(--reading-line); }
.reading-timing-year-summary {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px 12px;
  min-height: 64px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.reading-timing-year-summary::-webkit-details-marker { display: none; }
.reading-timing-year-summary:hover { background: #f1f4e9; }
.reading-timing-year[open] > .reading-timing-year-summary { background: #eff3e6; }
.reading-timing-year-label {
  color: #526044;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.reading-timing-year-kicker { min-width: 0; font-size: 15px; line-height: 1.6; }
.reading-timing-year-indicator { grid-column: 3; color: #788669; font-size: 21px; line-height: 1; text-align: center; }
.reading-timing-year-content { padding: 7px 18px 19px; }
.reading-notebook .reading-tab:focus-visible,
.reading-notebook .reading-panel:focus-visible,
.reading-notebook .reading-timing-year-summary:focus-visible {
  outline: 2px solid #657a9c;
  outline-offset: 4px;
}
.reading-notebook .reading-timing-year-summary:focus-visible { outline-offset: -4px; }
@media (max-width: 650px) {
  .reading-notebook { padding: 24px 15px 21px; }
  .reading-notebook .reading-title { font-size: 22px; }
  .reading-personality { margin-bottom: 26px; padding-bottom: 25px; }
  .reading-notebook .reading-personality-headline { font-size: 19px; }
  .reading-personality-prose { margin-top: 19px; line-height: 1.85; }
  .reading-notebook .reading-personality-prose p + p { margin-top: 16px; }
  .reading-notebook .reading-headline { margin-top: 17px; font-size: 20px; }
  .reading-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 22px; }
  .reading-notebook .reading-tab { padding: 8px 5px; font-size: 14px; }
  .reading-cards { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .reading-card { padding: 18px 17px 16px; }
  .reading-timing { margin-top: 24px; padding-top: 21px; }
  .reading-notebook .reading-timing-title { font-size: 20px; }
  .reading-timing-month-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .reading-timing-month { padding: 17px; }
  .reading-timing-year-summary { grid-template-columns: 62px minmax(0, 1fr) 17px; gap: 8px; padding: 13px 14px; }
  .reading-timing-year-label { font-size: 16px; }
  .reading-timing-year-kicker { font-size: 14px; }
  .reading-timing-year-content { padding: 6px 15px 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-notebook .reading-tab { transition: none; }
}