/* CMS Public Site — base layout (Step 5) */
:root {
  --bg:        #ffffff;
  --surface:   #f7f8fa;
  --text:      #1f2937;
  --text-mute: #6b7280;
  --border:    #e5e7eb;
  --accent:    #1e6dde;
  --accent-2:  #154fa6;
  --max-w:     1100px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
        "Noto Sans KR", "맑은 고딕", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); }
a:hover { color: var(--accent-2); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #000; color: #fff; padding: 8px 12px;
}
.skip-link:focus { left: 8px; top: 8px; z-index: 100; }

/* Header */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.site-header__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; gap: 16px;
}
.cms-logo { font-weight: 700; color: var(--text); text-decoration: none; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.site-nav li > a { color: var(--text); text-decoration: none; padding: 6px 4px; }
.site-nav li.is-active > a,
.site-nav li > a[aria-current="page"] { color: var(--accent); border-bottom: 2px solid var(--accent); }

.site-header__toggle {
  display: none; flex-direction: column; gap: 4px;
  width: 36px; height: 32px; padding: 4px 6px;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
}
.site-header__toggle span { display: block; height: 2px; background: var(--text); }

/* Main */
.site-main {
  max-width: var(--max-w); margin: 0 auto; padding: 24px 20px 48px;
}

/* Hero / cards */
.cms-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 22px;
  margin-bottom: 18px;
}
.cms-hero h1 { margin: 0 0 6px; font-size: 28px; }
.cms-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 16px;
  margin-bottom: 14px;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: 36px;
}
.site-footer__inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 18px 20px; color: var(--text-mute); font-size: 14px;
}

/* Board (Step 7.3) */
.board { margin: 0 0 24px; }
.board__head  { margin: 0 0 14px; }
.board__title { margin: 0 0 4px; font-size: 22px; }
.board__crumb { margin: 0 0 4px; color: var(--text-mute); font-size: 13px; }
.board__crumb a { color: var(--text-mute); }
.board__meta  { color: var(--text-mute); font-size: 13px; }
.board__meta .b-sep { margin: 0 6px; opacity: .6; }

.board__search { display: flex; gap: 8px; margin: 0 0 12px; }
.board__search-input {
  flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text);
}
.board__search-btn {
  padding: 8px 14px; border: 1px solid var(--accent); background: var(--accent);
  color: #fff; border-radius: 8px; cursor: pointer;
}

.board__table { width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.board__table th, .board__table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.board__table th { background: var(--surface); color: var(--text-mute); font-size: 12px; font-weight: 600; }
.board__table tr:last-child td { border-bottom: 0; }
.board__table tr.is-notice td { background: #fffbe6; }
.board__table .b-id, .board__table .b-flag, .board__table .b-date, .board__table .b-hits { white-space: nowrap; color: var(--text-mute); }
.board__table .b-title a { color: var(--text); text-decoration: none; }
.board__table .b-title a:hover { color: var(--accent); text-decoration: underline; }
.board__table .b-empty { text-align: center; color: var(--text-mute); padding: 20px; }

.b-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface); color: var(--text-mute); font-size: 12px; }
.b-badge--notice { background: #fff3bf; color: #8a6d00; }

.b-pager { display: flex; gap: 4px; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
.b-pager a, .b-pager span { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); text-decoration: none; }
.b-pager a:hover { background: var(--surface); }
.b-pager .is-current { background: var(--accent); color: #fff; border-color: var(--accent); }

.board__total { color: var(--text-mute); font-size: 13px; margin: 6px 2px; }

.board__body { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px; min-height: 160px; }
.board__body p { margin: 0 0 .8em; line-height: 1.7; }
.board__body img { max-width: 100%; height: auto; }

.board__foot  { margin-top: 14px; }
.board__back  { display: inline-block; padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; }
.board__back:hover { background: var(--surface); }

.board__error { display: none; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; }
.board__error[data-flash]:not([data-flash=""]) { display: block; background: #fde2e2; color: #7a1f1f; border: 1px solid #f5b7b7; }
.board__field { display: block; margin-bottom: 12px; }
.board__label { display: block; margin-bottom: 6px; color: var(--text-mute); font-size: 12px; }
.board__input { width: 100%; max-width: 320px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.board__actions { display: flex; gap: 8px; align-items: center; }
.board__btn { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); text-decoration: none; cursor: pointer; }
.board__btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.board__btn--primary:hover { background: var(--accent-2); }

/* Attachments + Comments (Step 7.4) */
.board__attach-list { list-style: none; padding: 12px 0 0; margin: 12px 0 0; border-top: 1px dashed var(--border); }
.board__attach-list li { margin: 4px 0; }

.board__flash { display: none; margin: 12px 0; padding: 10px 12px; border-radius: 8px; }
.board__flash[data-flash]:not([data-flash=""]) { display: block; background: #f0f4ff; color: #1a3a73; border: 1px solid #c2d4f3; }
.board__flash--success { background: #e6fbe9; color: #14532d; border-color: #a3e0b3; }
.board__flash--error   { background: #fde2e2; color: #7a1f1f; border-color: #f5b7b7; }

.board__comments-section { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.board__comments-title { font-size: 16px; margin: 0 0 12px; }
.board__comments { list-style: none; padding: 0; margin: 0 0 16px; }
.board__comment {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 6px 0;
}
.board__comment-meta { color: var(--text-mute); font-size: 12px; margin-bottom: 6px; }
.board__comment-body { white-space: pre-wrap; line-height: 1.55; }
.board__comment-body em.board__comment-secret { color: var(--text-mute); font-style: normal; }
.board__comment-actions { margin-top: 6px; font-size: 12px; }
.board__comment-actions a { color: var(--text-mute); text-decoration: none; }
.board__comment-actions a:hover { color: var(--accent); text-decoration: underline; }
.board__empty { color: var(--text-mute); margin: 6px 0 14px; }

.board__comment-form { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.board__comment-row { display: flex; gap: 8px; margin-bottom: 8px; }
.board__comment-row .board__input { flex: 1; }
.board__comment-textarea { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); }
.board__inline-check { color: var(--text-mute); display: inline-flex; align-items: center; gap: 4px; }
.board__comment-quote { background: var(--surface); border-left: 3px solid var(--border); padding: 10px 12px; margin: 12px 0; white-space: pre-wrap; }

/* Mobile */
@media (max-width: 760px) {
  .site-nav { display: none; }
  .site-nav.is-open {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg); border-bottom: 1px solid var(--border);
  }
  .site-nav.is-open ul { flex-direction: column; gap: 0; }
  .site-nav.is-open li > a { display: block; padding: 12px 20px; border-top: 1px solid var(--border); }
  .site-header__toggle { display: inline-flex; }
}

/* Step 10.3 — Main page section composer (Renderer-based) */
.cms-section { margin: 32px 0; padding: 0; }
.cms-section__title { font-size: 1.4rem; margin: 0 0 12px; }

.cms-section-hero { padding: 56px 24px; text-align: center; border-radius: 8px; }
.cms-section-hero__title { font-size: 2.2rem; margin: 0 0 12px; }
.cms-section-hero__subtitle { font-size: 1.1rem; color: var(--text-mute, #6b7280); }
.cms-section-hero__cta { margin-top: 20px; }

.cms-feature-grid {
  list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.cms-feature { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; }
.cms-feature__icon img { width: 36px; height: 36px; }
.cms-feature__title { font-weight: 600; display: block; margin-bottom: 4px; }
.cms-feature__body p { margin: 0; color: var(--text-mute, #6b7280); }

.cms-section-notice-strip {
  display: flex; gap: 12px; padding: 10px 14px; background: #f6f7f9;
  border-left: 3px solid var(--accent, #2563eb); border-radius: 4px;
}
.cms-notice-strip__label { font-weight: 700; }
.cms-notice-strip__list { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; flex-wrap: wrap; }

.cms-board-summary--card { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cms-board-summary--card li > a { display: block; padding: 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; text-decoration: none; color: inherit; }
.cms-board-summary--list { list-style: disc inside; padding: 0; margin: 0; }
.cms-section-board-summary__more { display: inline-block; margin-top: 10px; }

.cms-section-banner img { display: block; max-width: 100%; height: auto; }

.cms-section-cta { padding: 28px; background: #f6f7f9; border-radius: 6px; text-align: center; }
.cms-section-cta__body { color: var(--text-mute, #6b7280); }

.cms-faq__item { border-bottom: 1px solid var(--border, #e5e7eb); padding: 8px 0; }
.cms-faq__item summary { cursor: pointer; font-weight: 600; }
.cms-faq__body { padding: 8px 0 0 16px; color: var(--text-mute, #6b7280); }

.cms-section-html-raw { padding: 0; }

/* Step 12.3 — Popup 4 positions + dismiss/close UI */
.cms-popup { position: fixed; z-index: 9000; max-width: 90vw; box-shadow: 0 8px 24px rgba(0,0,0,.18); background: #fff; border-radius: 8px; }
.cms-popup[hidden] { display: none !important; }
.cms-popup__body { padding: 18px 20px; }
.cms-popup__actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 6px 12px 10px; border-top: 1px solid #eee; }
.cms-popup__close { background: none; border: 0; font-size: 20px; cursor: pointer; line-height: 1; padding: 4px 8px; }
.cms-popup__dismiss-form { margin: 0; }
.cms-popup__dismiss-btn { background: #f3f4f6; border: 1px solid #d1d5db; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: .85em; }

.cms-popup--top-strip   { top: 0;    left: 0;  right: 0;  max-width: none; border-radius: 0; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.cms-popup--bottom-bar  { bottom: 0; left: 0;  right: 0;  max-width: none; border-radius: 0; box-shadow: 0 -2px 6px rgba(0,0,0,.08); }
.cms-popup--corner      { bottom: 16px; right: 16px; max-width: 360px; }
.cms-popup--modal       { left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 480px; min-width: 280px; }

/* dim overlay only for modal */
.cms-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 8990; }
.cms-popup-overlay[hidden] { display: none !important; }

.cms-banner img { display: block; max-width: 100%; height: auto; }
.cms-banner { margin: 12px 0; }

/* ===========================================================================
 * WYSIWYG Media V1 (Phase 1D) — public rendering of editor-authored media.
 *
 *   Until now front.css carried NO rule for any of these classes, so figures,
 *   captions, image alignment and YouTube embeds were stored correctly and then
 *   rendered as unstyled defaults. This is the minimum needed to make the
 *   editor's output mean the same thing on the public site.
 *
 *   The class vocabulary is the one already in the database (CKEditor-era):
 *   nothing new is invented, so content written before this file renders too.
 * ======================================================================== */

/* ---- figure / caption ---------------------------------------------------- */
.board__body figure,
.page__body figure { margin: 16px 0; max-width: 100%; }

.board__body figure img,
.page__body figure img { display: block; max-width: 100%; height: auto; }

.board__body figcaption,
.page__body figcaption {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #64748b);
  text-align: center;
}

/* ---- image alignment ------------------------------------------------------
 * The stored vocabulary is CKEditor's inline/block/side. There was no previous
 * public styling for it, so the mapping is defined here once:
 *   image-style-inline → left,  image-style-block → centre,  image-style-side → right.
 * ------------------------------------------------------------------------- */
.board__body figure.image-style-block,
.page__body figure.image-style-block { margin-left: auto; margin-right: auto; }

.board__body figure.image-style-inline,
.page__body figure.image-style-inline { float: left; margin: 6px 16px 10px 0; }

.board__body figure.image-style-side,
.page__body figure.image-style-side { float: right; margin: 6px 0 10px 16px; }

/* Floats must not escape the article box. */
.board__body::after,
.page__body::after { content: ""; display: block; clear: both; }

@media (max-width: 600px) {
  /* Side-by-side text and image stops making sense on a phone. */
  .board__body figure.image-style-inline,
  .board__body figure.image-style-side,
  .page__body figure.image-style-inline,
  .page__body figure.image-style-side { float: none; margin: 16px auto; }
}

/* ---- resized images -------------------------------------------------------
 * `image_resized` carries its width in an inline style (width: N%), which the
 * sanitizer preserves. Nothing to compute here — just don't let it overflow.
 * ------------------------------------------------------------------------- */
.board__body figure.image_resized,
.page__body figure.image_resized { max-width: 100%; }

.board__body figure.image_resized img,
.page__body figure.image_resized img { width: 100%; height: auto; }

.board__body img.image_resized,
.page__body img.image_resized { height: auto; }

/* ---- responsive YouTube embed --------------------------------------------
 * ★ HtmlSanitizer strips `position` from inline styles, so the stored wrapper
 *   keeps only `padding-bottom: 56.25%; height: 0; overflow: hidden`. The
 *   positioning it is NOT allowed to carry is supplied here — that is what
 *   makes the ratio box actually work on the public site.
 * ------------------------------------------------------------------------- */
.cms-embed { position: relative; width: 100%; margin: 16px 0; background: #000; }
.cms-embed > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Embeds stored without the inline ratio box still get 16:9. */
.cms-embed:not([style*="padding-bottom"]) { padding-bottom: 56.25%; height: 0; overflow: hidden; }

/* ---- callout boxes (stored since Step 22.1, never styled publicly) -------- */
.cms-callout { margin: 16px 0; padding: 12px 14px; border-left: 4px solid var(--border, #d8dee9); border-radius: 4px; background: rgba(0,0,0,.03); }
.cms-callout--info   { border-left-color: #2563eb; }
.cms-callout--warn   { border-left-color: #d97706; }
.cms-callout--note   { border-left-color: #64748b; }
.cms-callout--strong { border-left-color: #dc2626; }

/* ---- code / code block (Phase 1F-3 public follow-up) ----------------------
 * The editor gained `<code>` and `<pre><code>` controls, and the sanitizer has
 * always preserved both — but this stylesheet carried no rule for either, so
 * the public page fell back to the UA defaults.
 *
 * ★ `overflow-x: auto` on the <pre> is the whole point of this block, not
 *   decoration. A <pre> defaults to `white-space: pre`, so ONE long line does
 *   not wrap and pushes the article — and with it the page — wider than the
 *   viewport. Measured: the admin editor carries this rule and passed on a
 *   narrow window; the public side, identical except for the missing rule,
 *   failed. That contrast is what identified the cause.
 *
 * ★ `pre-wrap` would also stop the overflow, and is deliberately NOT used:
 *   wrapping rewrites the line structure of code. The line stays intact and
 *   the block scrolls instead.
 * ------------------------------------------------------------------------- */
.board__body code,
.page__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  padding: .12em .35em;
  border-radius: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.board__body pre,
.page__body pre {
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  max-width: 100%;
  overflow-x: auto;        /* ← the rule this follow-up exists for */
}

/* Inside a block the inline chrome would draw a second box around the whole
   listing, so the inline rule is reset rather than re-specified. */
.board__body pre code,
.page__body pre code {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: pre;        /* keep the author's line structure verbatim */
  line-height: 1.55;
}

/* ---- task list (Phase 1F-4 — policy A-1) ----------------------------------
 * A published task list is a reading surface, not a form, so the box below is
 * drawn entirely from `data-checked` and there is no form control on the page:
 *
 *     <ul data-type="taskList">
 *       <li data-checked="true|false" data-type="taskItem"><div><p>…</p></div>
 *
 * ★ The editor DOES render a real <input type="checkbox">, but only in its
 *   own DOM, from the node view. The SERIALIZER (schema.mjs CmsTaskItem) emits
 *   neither <input> nor <label>, so the control never reaches storage and
 *   never reaches this page.
 *
 * ★ An earlier build of 1F-4 relied on HtmlSanitizer stripping the checkbox
 *   on save instead. It does not — `walk()` snapshots a node's children before
 *   iterating, so a child promoted out of an unwrapped <label> is never
 *   re-checked — and PageController::show renders stored HTML without
 *   re-sanitising. The result was three live, clickable checkboxes on the
 *   public page. Measured in the browser. The boundary now sits in the
 *   serializer, which this project controls, rather than in sanitizer
 *   behaviour, which it does not. (The unwrap gap itself is pre-existing and
 *   tracked separately as SANITIZER_UNWRAP_GAP.)
 *
 * ★ So: VISUAL ONLY. No input, no click target, no script — a reader cannot
 *   tick these, and nothing here should be extended to let them without
 *   revisiting policy A-1.
 *
 * ★ The `span:empty` rule below is KEPT deliberately. Current output has no
 *   such span, but a row saved by that earlier build does: the stripped
 *   <label> left its styler <span> behind, and the span is still a flex item,
 *   so the row's `gap` would open a phantom second column. It costs one rule
 *   and it is the only thing standing between a legacy row and a broken
 *   layout. It does NOT hide a legacy <input> — masking a live control would
 *   leave it focusable and clickable, so legacy rows are handled as data, not
 *   as CSS.
 * ------------------------------------------------------------------------- */
.board__body ul[data-type="taskList"],
.page__body ul[data-type="taskList"] {
  list-style: none;
  margin: 16px 0;
  padding-left: 0;
}

.board__body ul[data-type="taskList"] > li,
.page__body ul[data-type="taskList"] > li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.board__body ul[data-type="taskList"] > li > span:empty,
.page__body ul[data-type="taskList"] > li > span:empty { display: none; }

.board__body ul[data-type="taskList"] > li::before,
.page__body ul[data-type="taskList"] > li::before {
  content: "";
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-top: .3em;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
}

.board__body ul[data-type="taskList"] > li[data-checked="true"]::before,
.page__body ul[data-type="taskList"] > li[data-checked="true"]::before {
  /* escaped, not the literal glyph: this rule must not depend on the
     stylesheet being served with a UTF-8 charset to render. */
  content: "\2713";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.board__body ul[data-type="taskList"] > li > div,
.page__body ul[data-type="taskList"] > li > div {
  flex: 1 1 auto;
  min-width: 0;            /* let long lines scroll/wrap instead of widening the page */
}

.board__body ul[data-type="taskList"] > li > div > p,
.page__body ul[data-type="taskList"] > li > div > p { margin: 0 0 .4em; }

.board__body ul[data-type="taskList"] > li > div > :last-child,
.page__body ul[data-type="taskList"] > li > div > :last-child { margin-bottom: 0; }

/* ---- table (Phase 1G-2) ---------------------------------------------------
 *
 *   The editor has had tables since Phase 1C and the sanitizer has always kept
 *   them, but this stylesheet carried no rule for one — so a published table
 *   fell back to UA defaults: no borders, 1px of padding, a bold header row
 *   and nothing else. The same omission the Phase 1F-3 follow-up found for
 *   <pre>/<code>, in the same file, for the same reason.
 *
 *   ★ `.board__table` is NOT this. That is the board LIST ui — a different
 *     component with its own look. These rules are scoped under the two
 *     content roots so the two cannot collide; measured, the list table is
 *     untouched by them.
 *
 *   ★ `overflow-x` goes on the CONTENT ROOT, not on the table. Making the
 *     table itself `display: block` would scroll too, and would also throw
 *     away the table formatting context — border-collapse and column geometry
 *     with it. Measured on the root instead: a fifteen-column table scrolls
 *     inside the article (1201px in a 938px box) while the page itself does
 *     not scroll sideways, and figures, images and <pre> are unaffected.
 *
 *   No wrapper element is introduced. Stored HTML is not touched by any of
 *   this, which is what keeps the round-trip contract green.
 * ------------------------------------------------------------------------- */
.board__body,
.page__body { overflow-x: auto; }

/* ── RC-07: the scroll UNIT is the table, not the whole article ───────────
 *
 *   The root rule above still stands, and is still the safety net for any
 *   legacy content that overruns its box. What it could never do is scroll a
 *   table WITHOUT scrolling the table's siblings: one container means one
 *   scroll offset, so a wide table dragged paragraphs, headings and figures
 *   sideways along with it. Measured at 390px on the QA page: document
 *   overflow 0, root scrollWidth 401 inside a 350 client box — the page was
 *   never wide, the wrong element was doing the scrolling.
 *
 *   The wrapper is added at RENDER time (App\Front\Helpers\PublicTableWrapper)
 *   and is never stored, so the editor, the canonical form and the round-trip
 *   contract stay exactly as they are. Once the table owns a scroll box it no
 *   longer overruns the root, and the root's `auto` simply stops engaging —
 *   which is why the rule above is kept rather than narrowed.
 *
 *   ★ The wrapper, not the table. `overflow` is ignored on a `display: table`
 *     box; the admin side measured that and landed on the same wrapper
 *     (tables.css). `overflow-y: hidden` stops the second axis computing to
 *     `auto` and adding a scrollbar nobody asked for — same reason as admin.
 * ------------------------------------------------------------------------- */
.board__body .cms-table-wrap,
.page__body .cms-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.board__body table,
.page__body table {
  border-collapse: collapse;
  margin: 16px 0;
  color: var(--text);
}

.board__body th,
.board__body td,
.page__body th,
.page__body td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  min-width: 5em;
  vertical-align: top;
}

/* A header row has to survive losing its <thead> wrapper: Phase 1G-1A
   flattens sections, so <th> and its `scope` are all that carry the meaning. */
.board__body th,
.page__body th {
  background: var(--surface);
  text-align: left;
}

.board__body caption,
.page__body caption {
  caption-side: top;
  padding: 0 0 6px;
  color: var(--text-mute);
  font-size: .92em;
  text-align: left;
}

/* R09 TASK-003 — YouTube click-to-load, responsive 16:9 */
.yt-embed { margin: 0 0 1.25rem; max-width: 100%; }
.yt-embed__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #111; border-radius: 8px; overflow: hidden; }
@supports not (aspect-ratio: 16 / 9) {
  .yt-embed__frame { height: 0; padding-top: 56.25%; }
}
.yt-embed__play,
.yt-embed__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-embed__play { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; background: #111; color: #fff; cursor: pointer; font: inherit; }
.yt-embed__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.yt-embed__icon { font-size: 2.5rem; line-height: 1; }
.yt-embed__text { font-size: .95rem; padding: 0 1rem; text-align: center; }
/* LAMPSTAND-QA-DEFECT-01 — representative image under the play button (img from i.ytimg.com, cover-cropped 4:3→16:9) */
.yt-embed__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .15s; }
.yt-embed__play:hover .yt-embed__thumb,
.yt-embed__play:focus-visible .yt-embed__thumb { opacity: 1; }
.yt-embed__icon,
.yt-embed__text { position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, .85); }
.yt-embed__icon { display: inline-flex; align-items: center; justify-content: center; width: 4.25rem; height: 3rem;
  padding-left: .2rem; border-radius: .75rem; background: rgba(204, 0, 0, .92); font-size: 1.6rem; }
.yt-embed__fallback { margin: .4rem 0 0; font-size: .9rem; }