/* Blog list and reader reuse the desktop shell, not a separate content system. */
body.blog-reader-theme > main.page-shell {
  width: calc(100% - 40px); max-width: 1640px; margin-inline: auto;
  color: var(--desk-text); background: var(--desk-panel);
}
.blog-reader-theme .page-hero h1 { color: var(--desk-text); }
.blog-reader-theme .page-hero .hero-description { color: var(--desk-muted); }
.blog-reader-theme .blog-workspace.placeholder-panel {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start;
  width: 100%; max-width: 1640px; margin-inline: auto;
  gap: 20px; padding: 0; border: 0; background: transparent; box-shadow: none;
}
.blog-reader-theme .blog-workspace-sidebar {
  display: flex; flex-direction: column; justify-content: flex-start; align-self: start;
  grid-column: 1; grid-row: 1; position: static; height: auto; max-height: none;
  overflow: visible; color: var(--desk-text); background: transparent;
  border: 0; border-right: 1px solid var(--desk-border); border-radius: 0; box-shadow: none;
}
/* Embedded windows used to force a viewport-height grid onto this menu. */
html.embedded-desktop-view .blog-reader-theme .blog-workspace-sidebar {
  height: auto; min-height: 0; max-height: none;
}
.blog-reader-theme .blog-workspace-heading {
  flex: none; gap: 4px; padding: 12px; border-color: var(--desk-border);
}
.blog-reader-theme .blog-workspace-heading :is(span, strong) { color: var(--desk-muted); }
.blog-reader-theme .blog-workspace .blog-tabs {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  flex: none; gap: 4px; padding: 8px; background: transparent; border: 0;
}
.blog-reader-theme .blog-tab,
.blog-reader-theme .blog-reader-all-posts,
.blog-reader-theme .blog-reader-focus > button {
  min-height: 44px; padding: 12px; color: var(--desk-text); background: transparent;
  border: 0; border-radius: 4px; box-shadow: none; text-align: left;
  font: 500 .9rem/1.5 "Manrope", "Noto Sans KR", system-ui, sans-serif; cursor: pointer;
}
.blog-reader-theme .blog-tab.active,
.blog-reader-theme .blog-tab:hover { background: #263b3d; color: var(--desk-accent); }
.blog-reader-theme .blog-workspace .blog-tab {
  padding: 10px 12px; font-size: .95rem; white-space: normal; overflow-wrap: anywhere;
}
.blog-reader-theme .blog-workspace .blog-workspace-posts {
  grid-column: 2; grid-row: 1; position: static; min-width: 0; height: auto;
  max-height: none; overflow: visible; background: transparent; color: var(--desk-text);
  border: 0; border-radius: 0; box-shadow: none;
}
.blog-reader-theme .blog-post-list-heading { color: var(--desk-text); border-color: var(--desk-border); }
.blog-reader-theme .blog-post-list-heading span { color: var(--desk-accent); }
.blog-reader-theme .blog-workspace .article-list { padding: 0; display: grid; gap: 0; }
.blog-reader-theme .blog-workspace .article-card {
  display: block;
  min-height: 0; padding: 14px 12px; border: 0; border-bottom: 1px solid var(--desk-border);
  border-radius: 0; box-shadow: none; background: transparent; color: var(--desk-text);
}
.blog-reader-theme .blog-workspace .article-card:hover { background: #263b3d; transform: none; }
.blog-reader-theme .blog-workspace .article-card > span { background: transparent; color: var(--desk-accent); }
.blog-reader-theme .blog-workspace .article-card h3 { font-size: 1rem; line-height: 1.6; color: inherit; }
.blog-reader-theme .blog-workspace .article-card small { color: var(--desk-muted); }
/* Override the legacy card's 48px square styling for nested badge spans. */
.blog-reader-theme .blog-workspace .article-card .content-new-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; min-width: 16px; padding: 0; margin-left: 6px;
  vertical-align: middle; border: 0; border-radius: 3px; box-shadow: none;
  background: #b71e38; color: #fff; font: 700 10px/1 system-ui, sans-serif;
}
.blog-reader-theme .blog-workspace:not(.reading-post) .blog-post-view,
.blog-reader-theme .blog-workspace.reading-post .blog-workspace-posts { display: none; }
.blog-reader-theme .blog-workspace .blog-post-view {
  grid-column: 2; grid-row: 1; position: static; width: 100%; min-width: 0;
  max-width: none; height: auto; max-height: none; overflow: visible;
  margin: 0; padding: clamp(16px, 2vw, 28px); color: var(--desk-text);
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.blog-reader-theme .blog-workspace .blog-post-view .lesson-article-header :is(h1, h2) {
  max-width: none; width: 100%; overflow-wrap: break-word;
  color: var(--desk-text); font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.4;
}
.blog-reader-theme .blog-workspace .blog-post-view .lesson-article-header p { color: var(--desk-muted); }
.blog-reader-theme .blog-workspace .blog-post-view .lesson-article-header :is(p, a) {
  overflow-wrap: break-word; word-break: normal;
}
.blog-reader-theme .blog-workspace .blog-post-view > .lesson-article-header,
.blog-reader-theme .blog-workspace .blog-post-view > .blog-post-body {
  width: 100%; max-width: 1200px; min-width: 0;
}
.blog-reader-theme .blog-workspace .blog-post-body { overflow-wrap: break-word; }
.blog-reader-theme .blog-workspace .blog-post-view p { max-width: none; }
.blog-reader-theme .blog-workspace .blog-post-body :is(p, li, dd, figcaption) {
  color: var(--desk-text); font: 400 1rem/1.85 "Manrope", "Noto Sans KR", system-ui, sans-serif;
}
.blog-reader-theme .blog-workspace .blog-post-body :is(h2, h3, h4, h5, h6) {
  color: var(--desk-text); font-size: 1.15rem; line-height: 1.6; margin-block: 28px 12px;
  scroll-margin-top: 24px;
}
.blog-reader-theme .blog-workspace .blog-post-view.blog-compact-type .blog-post-body :is(h2, h3, h4, h5, h6) { font-size: 1.05rem; }
.blog-reader-theme .blog-workspace .blog-post-body a { color: var(--desk-accent); }
.blog-reader-theme .blog-workspace .blog-post-body :is(.lesson-note, .lesson-formula, blockquote) {
  color: var(--desk-text); background: var(--desk-raised); border-color: var(--desk-border);
}
.blog-reader-theme .blog-reading-grid { display: grid; width: 100%; max-width: 1410px; grid-template-columns: minmax(0, 1fr) 180px; gap: 30px; align-items: start; }
.blog-reader-theme .blog-workspace .blog-reading-grid .blog-post-body { width: 100%; max-width: none; }
.blog-reader-theme .blog-workspace .blog-post-view:has(.blog-reader-contents) > .lesson-article-header {
  max-width: min(1200px, calc(100% - 210px));
}
.blog-reader-theme .blog-reader-contents { min-width: 0; grid-column: 2; grid-row: 1; border-left: 1px solid var(--desk-border); padding-left: 18px; }
.blog-reader-theme .blog-reader-contents summary,
.blog-reader-theme .blog-reader-focus summary { padding: 12px 0; min-height: 44px; cursor: pointer; color: var(--desk-text); }
.blog-reader-theme .blog-reader-contents ol { list-style: none; padding: 0; margin: 0; }
.blog-reader-theme .blog-reader-contents a { display: block; padding-block: 9px; font-size: .8rem; line-height: 1.6; color: var(--desk-muted); overflow-wrap: anywhere; }
.blog-reader-theme .blog-reader-contents a:hover { color: var(--desk-accent); }
.blog-reader-theme .blog-reader-focus { padding: 12px; margin-top: 24px; border-top: 1px solid var(--desk-border); }
.blog-reader-theme .blog-workspace .blog-post-body :is(img, video) { max-width: 100%; height: auto; object-fit: contain; }
.blog-reader-theme .blog-post-body :is(svg, iframe) { max-width: 100%; }
.blog-reader-theme .blog-post-body mjx-container[display="true"] { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-block: 8px; }
.blog-reader-theme .blog-post-body table { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 1100px) {
  .blog-reader-theme .blog-reading-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-reader-theme .blog-workspace .blog-post-view:has(.blog-reader-contents) > .lesson-article-header { max-width: 1200px; }
  .blog-reader-theme .blog-reader-contents { grid-column: 1; grid-row: 1; border-left: 0; border-bottom: 1px solid var(--desk-border); padding: 0; }
  .blog-reader-theme .blog-reading-grid .blog-post-body { grid-column: 1; grid-row: 2; }
}
@media (max-width: 920px) {
  body.blog-reader-theme > main.page-shell { width: 100%; margin: 0; }
  .blog-reader-theme .blog-workspace.placeholder-panel { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .blog-reader-theme .blog-workspace-sidebar { grid-column: 1; border: 0; }
  .blog-reader-theme .blog-workspace .blog-tabs { display: flex; flex-wrap: wrap; }
  .blog-reader-theme .blog-workspace .blog-workspace-posts,
  .blog-reader-theme .blog-workspace .blog-post-view { grid-column: 1; grid-row: 2; padding: 12px; }
}

/* The reader lives inside resizable desktop windows as well as full pages. */
.blog-reader-theme .blog-workspace .blog-post-view,
.blog-reader-theme .blog-reading-grid,
.blog-reader-theme .blog-workspace .blog-post-body {
  min-width: 0;
  max-width: 100%;
}

.blog-reader-theme .blog-workspace .blog-post-view,
.blog-reader-theme .blog-workspace .blog-post-body {
  grid-template-columns: minmax(0, 1fr);
}

.blog-reader-theme .blog-workspace .blog-post-body :is(h2, h3, h4, h5, h6, p, li, dd, figcaption, a) {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.blog-reader-theme .blog-post-body pre {
  max-width: 100%;
  overflow-x: auto;
}