/* Curriculum-style boxes and link buttons inserted from the notice editor.
   Color comes from .nb--* so each box can pick its own hue. */

.nb--accent,
.sun-editor-editable .nb--accent { --nb-color: var(--color-accent); --nb-on: var(--color-accent-contrast, #fff); }
.nb--coral,
.sun-editor-editable .nb--coral { --nb-color: var(--color-nb-coral); --nb-on: #fff; }
.nb--teal,
.sun-editor-editable .nb--teal { --nb-color: var(--color-nb-teal); --nb-on: #fff; }
.nb--charcoal,
.sun-editor-editable .nb--charcoal { --nb-color: var(--color-nb-charcoal); --nb-on: #fff; }
.nb--yellow,
.sun-editor-editable .nb--yellow { --nb-color: var(--color-nb-yellow); --nb-on: var(--color-nb-ink); }
.nb--green,
.sun-editor-editable .nb--green { --nb-color: var(--color-nb-green); --nb-on: #fff; }
.nb--red,
.sun-editor-editable .nb--red { --nb-color: var(--color-nb-red); --nb-on: #fff; }
.nb--orange,
.sun-editor-editable .nb--orange { --nb-color: var(--color-nb-orange); --nb-on: #fff; }

.notice-blocks [hidden] {
  display: none !important;
}

/* Sit in the same inline box as SunEditor groups. Those groups only contain floats,
   so their baseline is the bottom edge. A bare inline button aligns to the text
   baseline and drops below that row. */
.sun-editor .se-btn-tray > .notice-blocks__slot {
  vertical-align: baseline;
}

.sun-editor .notice-blocks__slot > .notice-blocks__open {
  float: left;
  width: auto;
  height: 34px;
  min-height: 34px;
  margin: 1px !important;
  padding: 0 10px;
  font-size: var(--font-size-xs);
  line-height: 1;
  white-space: nowrap;
}

/* Icon-only tray tools (boxes / symbols / table style). */
.sun-editor .notice-blocks__slot > .notice-blocks__open--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  padding: 0;
}

.sun-editor .notice-blocks__open-icon {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* Editor-only: selected curriculum box / button with a corner drag handle. */
.sun-editor-editable .nb-is-selected {
  position: relative;
  outline: 2px solid var(--color-accent, #589ef5);
  outline-offset: 2px;
  vertical-align: top;
}

.sun-editor-editable .nb-resize-handle {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid var(--color-accent, #589ef5);
  border-radius: 2px;
  background: #fff;
  cursor: nwse-resize;
  z-index: 6;
  pointer-events: auto;
}

/* Public articles never show selection chrome even if a stale class slipped through. */
.notice-article__body .nb-is-selected {
  outline: none;
}

.notice-article__body .nb-resize-handle {
  display: none !important;
}

.notice-blocks {
  width: min(32rem, calc(100vw - var(--spacing-lg) * 2));
  max-height: calc(100vh - var(--spacing-xl));
  margin: auto;
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.notice-blocks::backdrop {
  background-color: rgba(17, 24, 39, 0.45);
}

.notice-blocks__title {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-xl);
}

.notice-blocks__field {
  display: grid;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.notice-blocks__area {
  min-height: 5.5rem;
  resize: vertical;
}

.notice-blocks__kinds,
.notice-blocks__colors,
.notice-blocks__styles,
.notice-blocks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

/* Row caption. A full row so the shapes under it stay together. */
.notice-blocks__kind-label {
  flex: 0 0 100%;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
}

.notice-blocks__kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.notice-blocks__kind[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast, #fff);
}

.notice-blocks__glyph {
  display: block;
  width: 22px;
  height: 22px;
}

.notice-blocks__swatch,
.notice-blocks__style {
  min-height: 36px;
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

/* Each color chip is the same pill, filled before it is chosen.
   The selected mark is inset so the outer size stays identical. */
.notice-blocks__swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 4.5rem;
  width: 4.5rem;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-color: var(--nb-color);
  border-radius: var(--radius-full);
  background: var(--nb-color);
  color: var(--nb-on);
}

.notice-blocks__swatch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--color-bg-elevated);
}

.notice-blocks__style[aria-pressed="true"] {
  border-color: var(--nb-color, var(--color-accent));
  background: var(--nb-color, var(--color-accent));
  color: var(--nb-on, #fff);
}

.notice-blocks__status {
  min-height: 1.25rem;
  margin: 0 0 var(--spacing-sm);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

.notice-blocks__actions {
  margin-bottom: 0;
}

/* SunEditor contents CSS loads later and resets every div, span, link, and
   star inside .sun-editor-editable (display, padding, font, color).
   Each block rule is repeated under that class so the curriculum look wins
   in the editor. The short selector still styles the saved article. */

/* Process card: same shell as .curriculum-sheet__process-card.
   Width and min-height stay fixed so a short label cannot shrink the card. */
.nb-process,
.sun-editor-editable .nb-process {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 0.45rem;
  width: min(24.2rem, 100%);
  max-width: 100%;
  min-height: 9.5rem;
  margin: 0.25rem 0.4rem 0.25rem 0;
  padding: 1.15rem 1rem 1.25rem;
  box-sizing: border-box;
  vertical-align: middle;
  text-align: center;
  border-radius: 14px;
}

.nb-process--step,
.sun-editor-editable .nb-process--step {
  background: #fff;
  border: 3px solid color-mix(in srgb, var(--nb-color) 35%, white);
  color: var(--color-nb-ink);
}

.nb-process--result,
.sun-editor-editable .nb-process--result {
  background: var(--nb-color);
  border: 0;
  color: var(--nb-on);
  /* Same outer height as the step card (shared 9.5rem min-height). */
  min-height: 9.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.nb-process--step .nb-process__num,
.sun-editor-editable .nb-process--step .nb-process__num {
  color: var(--nb-color);
  font-family: var(--font-jalnan);
  font-size: clamp(1.45rem, 2.2vw, 1.75rem);
  line-height: 1;
}

.nb-process .nb-process__title,
.sun-editor-editable .nb-process .nb-process__title {
  display: block;
  margin: 0;
  font-family: var(--font-jalnan);
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--nb-color);
}

.nb-process--result .nb-process__title,
.nb-process--result .nb-process__desc,
.sun-editor-editable .nb-process--result .nb-process__title,
.sun-editor-editable .nb-process--result .nb-process__desc {
  color: var(--nb-on);
}

.nb-process .nb-process__desc,
.sun-editor-editable .nb-process .nb-process__desc {
  display: block;
  margin: 0;
  font-family: var(--font-gyeonggi-batang);
  font-size: clamp(1.12rem, 1.65vw, 1.28rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-nb-ink);
}

/* Interlocking circle. Neighbors nest like .curriculum-sheet__pillars. */
.nb-pillar,
.sun-editor-editable .nb-pillar {
  --nb-pillar-size: clamp(9rem, 26vw, 16rem);
  /* Overlap depth is 14% of the diameter, same as the curriculum sheet. */
  --nb-pillar-overlap: calc(var(--nb-pillar-size) * -0.14);
  --nb-pillar-rim: clamp(6px, 0.65vw, 10px);
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  flex: 0 0 auto;
  width: var(--nb-pillar-size);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0.25rem 0.4rem 0.25rem 0;
  vertical-align: middle;
  padding: clamp(0.85rem, 2.2vw, 1.5rem);
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--nb-color);
  color: var(--nb-on);
  font-size: clamp(1.22rem, 2.75vw, 1.72rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: center;
  box-shadow: none;
}

/* The disk on the left sits on top and shows a white rim where the next disk tucks under. */
.nb-pillar:has(+ .nb-pillar),
.sun-editor-editable .nb-pillar:has(+ .nb-pillar) {
  z-index: 2;
  margin-right: 0;
  box-shadow: 0 0 0 var(--nb-pillar-rim) #fff;
}

.nb-pillar:has(+ .nb-pillar + .nb-pillar),
.sun-editor-editable .nb-pillar:has(+ .nb-pillar + .nb-pillar) {
  z-index: 3;
}

.nb-pillar + .nb-pillar,
.sun-editor-editable .nb-pillar + .nb-pillar {
  margin-left: var(--nb-pillar-overlap);
}

.nb-pillar span,
.sun-editor-editable .nb-pillar span {
  display: block;
}

/* Label plus equal steps, arrows between them. */
.nb-track,
.sun-editor-editable .nb-track {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.45rem;
  width: fit-content;
  max-width: 100%;
  margin: 0.25rem 0.4rem 0.25rem 0;
  vertical-align: middle;
  color: var(--nb-color);
}

.nb-track__label,
.nb-track__step,
.sun-editor-editable .nb-track__label,
.sun-editor-editable .nb-track__step {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Same chip height as .curriculum-sheet__track-label / track-step (5.25rem). */
  min-width: 8.5rem;
  max-width: 13.5rem;
  min-height: 5.25rem;
  padding: 0.85rem 1.15rem;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.nb-track__label,
.sun-editor-editable .nb-track__label {
  background: var(--nb-color);
  color: var(--nb-on);
  font-family: var(--font-jalnan);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
}

.nb-track__step,
.sun-editor-editable .nb-track__step {
  background: #fff;
  color: var(--nb-color);
  border: 1px solid var(--nb-color);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: var(--font-weight-bold);
}

.nb-track__arrow,
.nb-track__spacer,
.sun-editor-editable .nb-track__arrow,
.sun-editor-editable .nb-track__spacer {
  display: flex;
  align-items: center;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.nb-track__spacer,
.sun-editor-editable .nb-track__spacer {
  visibility: hidden;
  width: 0.4rem;
}

/* Thick outline title, then a dotted list.
   Width matches .curriculum-sheet__feature so a short title cannot shrink the box. */
.nb-feature,
.sun-editor-editable .nb-feature {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  flex: 0 0 auto;
  width: min(25rem, 100%);
  max-width: 100%;
  margin: 0.25rem 0.4rem 0.25rem 0;
  box-sizing: border-box;
}

.nb-feature .nb-feature__head,
.sun-editor-editable .nb-feature .nb-feature__head {
  display: block;
  box-sizing: border-box;
  margin: 0 0 var(--spacing-md);
  padding: 0.65rem var(--spacing-sm);
  border: 6px solid var(--nb-color);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-nb-ink);
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  text-align: center;
}

.nb-feature__list,
.sun-editor-editable .nb-feature__list {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nb-feature__list li,
.nb-feature__item,
.sun-editor-editable .nb-feature__list li,
.sun-editor-editable .nb-feature__item {
  display: block;
  position: relative;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-nb-ink);
  font-family: var(--font-gyeonggi-batang);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.65;
}

.nb-feature__list li::before,
.nb-feature__item::before,
.sun-editor-editable .nb-feature__list li::before,
.sun-editor-editable .nb-feature__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d1d1d1;
}

/* Chamfered step card. The color is the rim around the white panel. */
.nb-step,
.sun-editor-editable .nb-step {
  --nb-step-cut: 24px;
  --nb-step-border: 6px;
  --nb-step-inner-cut: calc(var(--nb-step-cut) - var(--nb-step-border) * 0.5858);
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  /* Same plate as .curriculum-sheet__step (15.5rem × 20rem). */
  width: min(15.5rem, 100%);
  height: 20rem;
  margin: 0.25rem 0.4rem 0.25rem 0;
  padding: var(--nb-step-border);
  box-sizing: border-box;
  background: var(--nb-color);
  clip-path: polygon(
    var(--nb-step-cut) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--nb-step-cut)
  );
}

.nb-step__inner,
.sun-editor-editable .nb-step__inner {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  gap: 0.65rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 1rem 0.85rem 0.85rem;
  background: #fff;
  clip-path: polygon(
    var(--nb-step-inner-cut) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--nb-step-inner-cut)
  );
}

.nb-step .nb-step__label,
.sun-editor-editable .nb-step .nb-step__label {
  display: block;
  margin: 0;
  width: 100%;
  color: var(--nb-color);
  font-size: clamp(1.35rem, 1.9vw, 1.65rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  text-align: center;
}

.nb-step .nb-step__text,
.sun-editor-editable .nb-step .nb-step__text {
  display: block;
  margin: 0;
  width: 100%;
  color: var(--color-nb-ink);
  font-family: var(--font-gyeonggi-batang);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.5;
  text-align: center;
  overflow-wrap: break-word;
}

/* Header band plus a square-bullet paragraph.
   Size matches .curriculum-sheet__feedback-card and does not follow the title length. */
.nb-feedback,
.sun-editor-editable .nb-feedback {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  flex: 0 0 auto;
  width: min(19rem, 100%);
  min-height: 12.4rem;
  max-width: 100%;
  margin: 0.25rem 0.4rem 0.25rem 0;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--nb-color);
  border-radius: 1.5rem;
}

.nb-feedback .nb-feedback__title,
.sun-editor-editable .nb-feedback .nb-feedback__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  background: color-mix(in srgb, var(--nb-color) 8%, white);
  color: var(--nb-color);
  font-size: clamp(1.2rem, 1.55vw, 1.45rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  text-align: center;
}

.nb-feedback .nb-feedback__body,
.sun-editor-editable .nb-feedback .nb-feedback__body {
  display: flex;
  gap: 0.55rem;
  margin: 0;
  padding: 1.45rem 1.15rem 1.6rem;
  color: var(--color-nb-ink);
  font-size: clamp(1rem, 1.2vw, 1.075rem);
  line-height: 1.65;
}

.nb-feedback .nb-feedback__body::before,
.sun-editor-editable .nb-feedback .nb-feedback__body::before {
  content: "";
  flex: 0 0 0.34rem;
  width: 0.34rem;
  height: 0.34rem;
  margin-top: 0.48em;
  background: var(--color-nb-ink);
}

/* An empty body would show only the bullet and collapse the card. */
.nb-feedback .nb-feedback__body:empty,
.sun-editor-editable .nb-feedback .nb-feedback__body:empty {
  display: none;
}

.nb-btn-row,
.sun-editor-editable .nb-btn-row {
  display: inline-flex;
  vertical-align: middle;
  width: fit-content;
  max-width: 100%;
  margin: 0.25rem 0.4rem 0.25rem 0;
  box-sizing: border-box;
}

.nb-btn,
.sun-editor-editable .nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0.35rem 0.35rem 0.35rem 0;
  padding: 0.55rem 1.25rem;
  border: 2px solid var(--nb-color);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  box-sizing: border-box;
  /* Soft depth from the button’s own color — one layer, no glow. */
  box-shadow: 0 4px 12px color-mix(in srgb, var(--nb-color) 28%, transparent);
  transition:
    transform var(--duration-normal, 300ms) var(--ease-out, ease-out),
    box-shadow var(--duration-normal, 300ms) var(--ease-out, ease-out),
    background-color var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease,
    color var(--duration-fast, 150ms) ease;
  will-change: transform;
}

/* Public article: lift on hover / keyboard focus. Editor keeps the shadow but skips lift
   so drag-resize handles stay easy to aim. */
.notice-article__body .nb-btn:hover,
.notice-article__body .nb-btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--nb-color) 36%, transparent);
}

.notice-article__body .nb-btn:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--nb-color) 24%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .nb-btn,
  .sun-editor-editable .nb-btn {
    transition: none;
    will-change: auto;
  }

  .notice-article__body .nb-btn:hover,
  .notice-article__body .nb-btn:focus-visible,
  .notice-article__body .nb-btn:active {
    transform: none;
  }
}

/* Author-set inline width/height on a button (or its row) must fill the box. */
.sun-editor-editable .nb-btn-row[style*="width"] > .nb-btn,
.notice-article__body .nb-btn-row[style*="width"] > .nb-btn {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}

.sun-editor-editable a.nb-btn[style*="width"],
.notice-article__body a.nb-btn[style*="width"] {
  /* Inline size from the editor resize handle. */
  min-height: 0;
}

.nb-btn.nb-btn--solid,
.nb-btn.nb-btn--pill,
.sun-editor-editable .nb-btn.nb-btn--solid,
.sun-editor-editable .nb-btn.nb-btn--pill {
  background: var(--nb-color);
  color: var(--nb-on);
}

.nb-btn.nb-btn--outline,
.sun-editor-editable .nb-btn.nb-btn--outline {
  background: transparent;
  color: var(--nb-color);
}

.nb-btn.nb-btn--soft,
.sun-editor-editable .nb-btn.nb-btn--soft {
  background: color-mix(in srgb, var(--nb-color) 14%, white);
  border-color: transparent;
  color: var(--nb-color);
}

.nb-btn.nb-btn--pill,
.sun-editor-editable .nb-btn.nb-btn--pill {
  border-radius: 999px;
}

/* Compact floating palette. No dimmed backdrop; the box dialog keeps its own. */
.notice-symbols.notice-blocks {
  position: fixed;
  top: 7.5rem;
  left: 50%;
  width: max-content;
  max-width: calc(100vw - var(--spacing-md) * 2);
  margin: 0;
  padding: var(--spacing-sm);
  transform: translateX(-50%);
  z-index: var(--z-modal);
  box-shadow: var(--shadow-lg);
}

.notice-symbols::backdrop {
  background: transparent;
}

.notice-symbols__bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.notice-symbols__move {
  flex: 1 1 auto;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  cursor: move;
  touch-action: none;
}

.notice-symbols__close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  line-height: 1;
  cursor: pointer;
}

.notice-symbols__close:hover,
.notice-symbols__close:focus-visible {
  color: var(--color-text-primary);
  background: var(--color-bg-default);
}

.notice-symbols .notice-blocks__status {
  min-height: 0;
  margin: 0;
}

.notice-symbols .notice-blocks__status:empty {
  display: none;
}

.notice-symbols__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.notice-symbols__tab {
  min-height: 28px;
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.notice-symbols__tab[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast, #fff);
}

.notice-symbols__body {
  max-height: 12.5rem;
  overflow: auto;
}

.notice-symbols__grid {
  display: grid;
  grid-template-columns: repeat(8, 2rem);
  gap: 4px;
  margin: 0;
}

.notice-symbols__char {
  width: 2rem;
  height: 2rem;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: 1;
  cursor: pointer;
}

.notice-symbols__char:hover,
.notice-symbols__char:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Sheet titles. Each one fills the line, unlike the small inline cards. */
.nb-hero,
.sun-editor-editable .nb-hero,
.nb-intro-title,
.sun-editor-editable .nb-intro-title,
.nb-section-title,
.sun-editor-editable .nb-section-title {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: var(--spacing-md) 0;
  color: var(--nb-color, var(--color-nb-coral));
  letter-spacing: -0.02em;
  vertical-align: top;
}

.nb-hero,
.sun-editor-editable .nb-hero {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
}

.nb-hero__title,
.sun-editor-editable .nb-hero__title {
  flex: 0 0 auto;
  font-family: var(--font-jalnan);
  font-size: clamp(2.55rem, 7vw, 4rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--nb-color, var(--color-nb-coral));
}

.nb-hero__side,
.sun-editor-editable .nb-hero__side {
  display: flex;
  flex: 1 1 8rem;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 0;
  padding-bottom: 0.2em;
}

.nb-hero__meta,
.sun-editor-editable .nb-hero__meta {
  font-family: var(--font-primary);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-align: right;
  color: var(--nb-color, var(--color-nb-coral));
}

.nb-hero__rule,
.sun-editor-editable .nb-hero__rule,
.nb-intro-title::after,
.sun-editor-editable .nb-intro-title::after {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--nb-color, var(--color-nb-coral));
}

.nb-intro-title,
.sun-editor-editable .nb-intro-title {
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-jalnan);
  font-size: clamp(1.95rem, 4.2vw, 2.65rem);
  font-weight: 400;
  line-height: 1.2;
}

.nb-intro-title::after,
.sun-editor-editable .nb-intro-title::after {
  content: "";
  flex: 1 1 auto;
  min-width: 2rem;
  width: auto;
}

.nb-section-title,
.sun-editor-editable .nb-section-title {
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0 var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 3.1vw, 1.9rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

.nb-section-title::before,
.sun-editor-editable .nb-section-title::before {
  content: "";
  flex: 0 0 5px;
  align-self: stretch;
  min-height: 1.25em;
  background: var(--nb-color, var(--color-nb-coral));
  border-radius: 2px;
}

/* Extra HR faces in the toolbar submenu and in saved notice bodies. */
.sun-editor .se-list-line .se-btn-list {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: var(--spacing-sm) var(--spacing-md);
}

.sun-editor .se-list-line hr,
.sun-editor-editable hr,
.notice-article__body hr {
  display: block;
  width: 100%;
  height: 0;
  margin: var(--spacing-lg) auto;
  border: 0;
  background: none;
}

.sun-editor .se-list-line hr {
  margin: 0;
}

.sun-editor .se-list-line .__se__solid {
  width: 12rem;
  border-top: 1px solid var(--color-gray-400);
}

.sun-editor-editable hr.__se__solid,
.notice-article__body hr.__se__solid {
  width: 36rem;
  max-width: 100%;
  border-top: 1px solid var(--color-gray-400);
}

.sun-editor .se-list-line .nb-hr--full,
.sun-editor-editable hr.nb-hr--full,
.notice-article__body hr.nb-hr--full {
  width: 100%;
  border-top: 1px solid var(--color-border);
}

.sun-editor .se-list-line .nb-hr--thick,
.sun-editor-editable hr.nb-hr--thick,
.notice-article__body hr.nb-hr--thick {
  width: 3.25rem;
  border-top: 3px solid var(--color-text-primary);
}

.sun-editor .se-list-line .nb-hr--chevron,
.sun-editor-editable hr.nb-hr--chevron,
.notice-article__body hr.nb-hr--chevron {
  position: relative;
  height: 16px;
  overflow: visible;
  border: 0;
  /* Line ends meet the V opening so the divider reads as one stroke. */
  background-image:
    linear-gradient(var(--color-gray-400), var(--color-gray-400)),
    linear-gradient(var(--color-gray-400), var(--color-gray-400));
  background-repeat: no-repeat, no-repeat;
  background-size: calc(50% - 6px) 1px, calc(50% - 6px) 1px;
  background-position: left top, right top;
}

.sun-editor .se-list-line .nb-hr--chevron {
  width: 12rem;
}

.sun-editor-editable hr.nb-hr--chevron,
.notice-article__body hr.nb-hr--chevron {
  width: 36rem;
  max-width: 100%;
}

.sun-editor .se-list-line .nb-hr--chevron::after,
.sun-editor-editable hr.nb-hr--chevron::after,
.notice-article__body hr.nb-hr--chevron::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border-right: 1px solid var(--color-gray-400);
  border-bottom: 1px solid var(--color-gray-400);
  background: transparent;
  /* Rotate around the opening so the V tips sit on the 1px line. */
  transform: translate(-50%, -4px) rotate(45deg);
}

.sun-editor .se-list-line .nb-hr--diamond,
.sun-editor-editable hr.nb-hr--diamond,
.notice-article__body hr.nb-hr--diamond {
  position: relative;
  height: 14px;
  overflow: visible;
  border: 0;
  /* Line stops at the diamond so the rhombus stays a clean outline. */
  background-image:
    linear-gradient(var(--color-gray-400), var(--color-gray-400)),
    linear-gradient(var(--color-gray-400), var(--color-gray-400));
  background-repeat: no-repeat, no-repeat;
  background-size: calc(50% - 6px) 1px, calc(50% - 6px) 1px;
  background-position: left center, right center;
}

.sun-editor .se-list-line .nb-hr--diamond {
  width: 12rem;
}

.sun-editor-editable hr.nb-hr--diamond,
.notice-article__body hr.nb-hr--diamond {
  width: 36rem;
  max-width: 100%;
}

.sun-editor .se-list-line .nb-hr--diamond::after,
.sun-editor-editable hr.nb-hr--diamond::after,
.notice-article__body hr.nb-hr--diamond::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-400);
  background: var(--color-bg-elevated);
  transform: translate(-50%, -50%) rotate(45deg);
}

.sun-editor .se-list-line .__se__dotted,
.sun-editor-editable hr.__se__dotted,
.notice-article__body hr.__se__dotted {
  width: 4.5rem;
  border-top: 4px dotted var(--color-gray-400);
}

.sun-editor .se-list-line .nb-hr--slash,
.sun-editor-editable hr.nb-hr--slash,
.notice-article__body hr.nb-hr--slash {
  width: 2.25rem;
  height: 2.25rem;
  border-top: 1px solid var(--color-gray-400);
  transform: rotate(-45deg);
  transform-origin: center;
}

.sun-editor .se-list-line .nb-hr--pipe,
.sun-editor-editable hr.nb-hr--pipe,
.notice-article__body hr.nb-hr--pipe {
  width: 0;
  height: 2.5rem;
  border-left: 1px solid var(--color-gray-400);
}

/* ---- Notice body: pasted URL → Open Graph style link card ---- */
.sun-editor-editable .nb-link-card,
.notice-article__body .nb-link-card {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-md);
  width: 100%;
  max-width: 100%;
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm);
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  transition: border-color var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease;
}

.notice-article__body .nb-link-card:hover,
.notice-article__body .nb-link-card:focus-visible {
  border-color: var(--color-accent, #589ef5);
  box-shadow: var(--shadow-sm);
}

.sun-editor-editable .nb-link-card__media,
.notice-article__body .nb-link-card__media {
  flex: 0 0 5.5rem;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--color-gray-100, #f3f4f6);
}

.sun-editor-editable .nb-link-card__media--empty,
.notice-article__body .nb-link-card__media--empty {
  background: linear-gradient(
    135deg,
    var(--color-gray-100, #f3f4f6),
    var(--color-gray-200, #e5e7eb)
  );
}

.sun-editor-editable .nb-link-card__img,
.notice-article__body .nb-link-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sun-editor-editable .nb-link-card__body,
.notice-article__body .nb-link-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.15rem var(--spacing-xs) 0.15rem 0;
}

.sun-editor-editable .nb-link-card__title,
.notice-article__body .nb-link-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--font-size-base, 1rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text, #222);
}

.sun-editor-editable .nb-link-card__desc,
.notice-article__body .nb-link-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.4;
  color: var(--color-text-secondary, #6b7280);
}

.sun-editor-editable .nb-link-card__host,
.notice-article__body .nb-link-card__host {
  margin-top: 0.15rem;
  font-size: var(--font-size-xs, 0.75rem);
  line-height: 1.3;
  color: var(--color-gray-400, #9ca3af);
}

@media (min-width: 768px) {
  .sun-editor-editable .nb-link-card__media,
  .notice-article__body .nb-link-card__media {
    flex-basis: 6.5rem;
    width: 6.5rem;
    height: 6.5rem;
  }
}

/* ---- Notice editor: table cell style panel ---- */
.notice-table-style.notice-blocks {
  position: fixed;
  top: 7.5rem;
  left: 50%;
  width: min(22rem, calc(100vw - var(--spacing-md) * 2));
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  transform: translateX(-50%);
  z-index: var(--z-modal);
  box-shadow: var(--shadow-lg);
}

.notice-table-style::backdrop {
  background: transparent;
}

.notice-table-style__bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.notice-table-style__move {
  flex: 1 1 auto;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  cursor: move;
  touch-action: none;
}

.notice-table-style__close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  line-height: 1;
  cursor: pointer;
}

.notice-table-style__close:hover,
.notice-table-style__close:focus-visible {
  background: var(--color-bg-paper);
  color: var(--color-text-primary);
}

.notice-table-style__hint {
  margin: 0 0 var(--spacing-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.notice-table-style__scope {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

.notice-table-style__scope-input {
  width: 1rem;
  height: 1rem;
}

.notice-table-style__body {
  display: grid;
  gap: var(--spacing-md);
}

.notice-table-style__field {
  display: grid;
  gap: var(--spacing-xs);
}

.notice-table-style__label {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.notice-table-style__controls {
  display: grid;
  gap: var(--spacing-xs);
}

.notice-table-style__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.notice-table-style__swatch {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.notice-table-style__swatch--clear {
  width: auto;
  min-width: 2.5rem;
  padding: 0 0.35rem;
  background: var(--color-bg-paper);
  color: var(--color-text-secondary);
  font-size: 10px;
}

.notice-table-style__picker {
  width: 1.75rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.notice-table-style__select {
  width: 100%;
  min-height: 2.25rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.notice-table-style__align {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.notice-table-style__align-btn {
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.notice-table-style__align-btn:hover,
.notice-table-style__align-btn:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.notice-table-style .notice-blocks__status {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-xs);
}

.notice-table-style .notice-blocks__status:empty {
  display: none;
}