/* Article-only reading styles; the editor keeps its own layout. */
.reader {
  --reading-size: 1.125rem;
  width: min(740px, calc(100% - 48px));
  margin-top: 48px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans CJK KR", "Malgun Gothic", sans-serif;
}
.reader[data-reading-size="large"] { --reading-size: 1.25rem; }
.reader[data-reading-size="largest"] { --reading-size: 1.375rem; }
.reader .back-link { font-size: .875rem; }
.reader .article-heading { padding: 32px 0 24px; margin-bottom: 32px; }
.reader .eyebrow { font-size: .75rem; letter-spacing: .03em; flex-wrap: wrap; }
.reader .article-heading h1 {
  font-size: clamp(1.875rem, 3.4vw, 2.5rem);
  line-height: 1.4;
  letter-spacing: -.04em;
  margin: 18px 0 24px;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.reader .article-meta { font-size: .8125rem; gap: 12px; flex-wrap: wrap; }
.reading-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.reading-tools[hidden] { display: none; }
.reading-tools > span { font-size: .75rem; color: #58665d; }
.reading-sizes { display: flex; gap: 3px; padding: 3px; background: #eef0e9; border: 1px solid var(--line); border-radius: 8px; }
.reading-sizes button { border: 0; border-radius: 5px; background: transparent; min-height: 40px; min-width: 48px; padding: 6px 12px; font-size: .8125rem; }
.reading-sizes button:hover { background: #e0e6db; }
.reading-sizes button[aria-pressed="true"] { background: var(--green); color: #fff; }
.reader-content {
  font-size: var(--reading-size);
  line-height: 1.9;
  letter-spacing: -.015em;
  color: #303b35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.reader-content p { margin: 1.4em 0; }
.reader-content :is(h1,h2,h3,h4,h5,h6) {
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 2.2em 0 .85em !important;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.035em;
  text-wrap: pretty;
  scroll-margin-top: 28px;
}
.reader-content h1 { font-size: 1.7em; }
.reader-content h2, .reader-content .reader-section-title { font-size: 1.5em; }
.reader-content h3 { font-size: 1.25em; }
.reader-content h4 { font-size: 1.125em; }
.reader-content :is(h5,h6) { font-size: 1em; }
.reader-content .reader-section-title { font-size: 1.5em; }
.reader-content :is(h1,h2,h3,h4,h5,h6) + p { margin-top: .65em; }
.reader-content a { color: #236252; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.reader-content a:hover { text-decoration-thickness: 2px; }
.reader-content :is(ul,ol) { padding-left: 1.45em; margin: 1.25em 0; }
.reader-content li { margin: .5em 0; padding-left: .15em; }
.reader-content li::marker { color: #5b7763; }
.reader-content li > :is(ul,ol) { margin: .5em 0; }
.reader-content li > p { margin: .5em 0; }
.reader-content :is(blockquote,.reader-callout) {
  background: #edf3ee !important;
  border: 1px solid #dce6dc !important;
  border-left: 3px solid #729477 !important;
  border-radius: 0 8px 8px 0;
  padding: 24px 28px !important;
  margin: 2em 0 !important;
}
.reader-content :is(blockquote,.reader-callout) > :first-child { margin-top: 0 !important; }
.reader-content :is(blockquote,.reader-callout) > :last-child { margin-bottom: 0 !important; }
.reader-content .reader-callout p + p { margin-top: 1em !important; }
.reader-content img { display: block; margin: 32px auto; border-radius: 8px; }
.reader-content a:has(> img:only-child) { display: block; }
.reader-content figure { margin: 2em 0; }
.reader-content figure img { margin-bottom: 12px; }
.reader-content figcaption { font-size: .8125rem; line-height: 1.7; }
.reader-content table { font-size: .875em; line-height: 1.75; letter-spacing: 0; }
.reader-content :is(th,td) { padding: 14px 16px !important; border-color: #dce3d9 !important; vertical-align: top; }
.reader-content th { background: #eaf0e7; color: var(--ink) !important; font-weight: 700; }
.reader-content tbody tr:nth-child(even) { background: #f4f6f1; }
.reader-content td { background: transparent; }
.reader-table { margin: 1.75em 0; }
.reader-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.reader-table-scroll:focus-visible { outline: 3px solid #8b9f57; outline-offset: 4px; }
.reader-content .reader-table-scroll table { display: table; margin: 0 !important; min-width: var(--table-width, 30em); }
.reader-content .reader-table-hint { margin: 0 0 8px; font-size: .75rem; color: #58665d; letter-spacing: 0; }
.reader-content pre { font-size: .875em; line-height: 1.7; border-radius: 8px; padding: 20px; }
.reader-content :not(pre) > code { background: #eaf0e7; border-radius: 4px; padding: .15em .35em; font-size: .9em; overflow-wrap: anywhere; }
.reader-content hr { margin: 3em 0; }
.reader-content .reader-toc { margin: 2em 0; border-block: 1px solid var(--line); padding: 0; }
.reader-toc summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 0; list-style: none; }
.reader-toc summary::-webkit-details-marker { display: none; }
.reader-toc summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; }
.reader-toc[open] summary::after { content: "−"; }
.reader-content .reader-toc summary > * { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: .9375rem; font-weight: 600; color: var(--ink) !important; background: transparent !important; }
.reader-toc summary:focus-visible { outline: 3px solid #8b9f57; outline-offset: 4px; }
.reader-content .reader-toc > :is(ul,ol) { margin: 0 0 20px; padding-left: 1.3em; font-size: .875em; line-height: 1.8; }
.reader-content .reader-toc li { margin: .4em 0; }
.reader-content .reader-toc a { color: var(--green) !important; text-decoration: none; }
.reader-content .reader-toc a:hover { text-decoration: underline; }
.reader .article-tags { margin-top: 56px; padding-top: 28px; }
.reader .article-tags a { font-size: .75rem; padding: 6px 12px; }
@media (max-width: 650px) {
  .reader { --reading-size: 1.0625rem; width: calc(100% - 40px); margin-top: 28px; }
  .reader[data-reading-size="large"] { --reading-size: 1.1875rem; }
  .reader[data-reading-size="largest"] { --reading-size: 1.3125rem; }
  .reader .article-heading { padding: 26px 0 20px; margin-bottom: 28px; }
  .reader .article-heading h1 { font-size: 1.875rem; letter-spacing: -.045em; margin: 16px 0 22px; }
  .reader .article-meta { gap: 9px; font-size: .75rem; }
  .reading-tools { margin-top: 20px; }
  .reading-sizes button { min-height: 44px; padding-inline: 10px; }
  .reader-content { line-height: 1.9; }
  .reader-content h2, .reader-content .reader-section-title { font-size: 1.375em; }
  .reader-content :is(blockquote,.reader-callout) { padding: 20px !important; margin: 1.75em 0 !important; }
  .reader-content img { margin-block: 26px; }
  .reader-content :is(th,td) { padding: 12px 14px !important; }
}
@media print {
  .reading-tools, .reader-toc, .reader-table-hint { display: none; }
  .reader { width: 100%; margin: 0; --reading-size: 11pt; }
  .reader-content .reader-table-scroll { overflow: visible; }
  .reader-content .reader-table-scroll table { min-width: 0; }
}
