.reading-trust {
  margin: 18px 0 34px;
  padding: 20px;
  border: 1px solid var(--rule-2, #aeb8c6);
  background: color-mix(in srgb, var(--panel, #fbfcfe) 86%, transparent);
}

.reading-trust-kicker {
  margin: 0;
  color: var(--case, #3159d8);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
}

.reading-trust h2 {
  margin: 5px 0 12px;
  color: var(--ink);
  font-family: "Gowun Batang", serif;
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: -.025em;
}

.reading-trust-question {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0;
  padding: 13px 14px;
  border-left: 3px solid var(--case, #3159d8);
  color: var(--ink);
  background: var(--panel-2, #eef2f7);
  font-size: .9375rem;
  line-height: 1.7;
}

.reading-trust-question b { white-space: nowrap; }
.reading-trust-question span { word-break: keep-all; }

.reading-entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 15px;
}

.reading-entry-links a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 7px 11px;
  border: 1px solid var(--rule-2, #aeb8c6);
  color: var(--ink);
  background: var(--panel, #fbfcfe);
  font-size: .8125rem;
  line-height: 1.45;
  text-decoration: none;
}

.reading-entry-links a:first-child {
  border-color: var(--case, #3159d8);
  color: #fff;
  background: var(--case, #3159d8);
}

.reading-entry-links a:hover { border-color: var(--case, #3159d8); }

.reading-layers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.reading-layers > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--rule, #cbd3de);
  background: var(--panel, #fbfcfe);
}

.reading-layers b,
.reading-layers span { display: block; }
.reading-layers b { color: var(--ink); font-size: .8125rem; }
.reading-layers span { margin-top: 3px; color: var(--muted); font-size: .75rem; line-height: 1.6; word-break: keep-all; }

.reading-layer-links {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px !important;
}

.reading-layer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 3px 8px;
  border: 1px solid var(--rule-2, #aeb8c6);
  color: var(--ink-2, #333c46);
  background: var(--panel-2, #eef2f7);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.reading-layer-links a:hover,
.reading-layer-links a:focus-visible {
  border-color: var(--case, #3159d8);
  color: var(--case, #3159d8);
  outline: none;
}

.reading-source { margin-top: 12px; border-top: 1px solid var(--rule, #cbd3de); }
.reading-source > summary { display: flex; align-items: center; min-height: 44px; color: var(--muted); font-size: .8125rem; cursor: pointer; }
.reading-source dl { display: grid; gap: 0; margin: 0; }
.reading-source dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 9px 0; border-top: 1px solid var(--rule, #cbd3de); }
.reading-source dt { color: var(--muted); font-size: .75rem; font-weight: 600; }
.reading-source dd { margin: 0; color: var(--ink-2, #333c46); font-size: .8125rem; line-height: 1.7; word-break: keep-all; }

#story-start,
#lens-intro-title,
#t-mb,
#t-psy,
#t-my,
#t-ta,
#t-ic,
#t-lw,
#t-ph,
#reader-question { scroll-margin-top: 138px; }

@media (min-width: 900px) {
  .reading-layers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .reading-trust { margin: 12px 0 24px; padding: 14px 12px; }
  .reading-trust h2 { margin-bottom: 9px; }
  .reading-trust-question { grid-template-columns: 1fr; gap: 2px; }
  .reading-entry-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 9px 0 11px; }
  .reading-entry-links a { justify-content: center; min-height: 40px; padding-inline: 5px; text-align: center; }
  .reading-layers {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(172px, 67vw);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }
  .reading-layers > div { padding: 9px 10px; scroll-snap-align: start; }
  .reading-source dl > div { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
}