/* ===================================================
   Romptn Blocks — Frontend Styles
   All values use --rb-* tokens from tokens.css.
   =================================================== */

/* ── Base Reset ─────────────────────────────────── */
.romptn-blocks,
.romptn-blocks * {
  box-sizing: border-box;
}
.romptn-blocks p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.romptn-blocks ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.romptn-blocks li {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* ── Highlight Marker (toc-summary内) ──────────── */
.romptn-highlight-marker {
  background: rgba(255, 235, 59, 0.6);
  padding: 0 2px;
  border-radius: 2px;
}
.romptn-blocks--mania .romptn-highlight-marker {
  background: rgba(0, 212, 255, 0.35);
}

/* ── marker-under (inline class, 655 instances) ── */
/* Uses --m-purple-muted directly (defined by mania theme tokens.css).
   Falls back to blue for romptn where --m-* is undefined. */
.marker-under {
  font-weight: 700;
  background: linear-gradient(transparent 60%, var(--m-purple-muted, rgba(0, 122, 255, 0.55)) 60%);
  border: none;
  padding-block-end: 0;
}

/* ===================================================
   toc-summary
   =================================================== */
.romptn-toc-summary-block {
  margin: 24px 0;
}

.romptn-toc-summary-ui.pattern-basic {
  padding: 18px 20px;
  border-radius: var(--rb-radius-lg, 1rem);
  background: var(--rb-color-primary-soft);
  position: relative;
  margin-top: var(--rb-space-lg);
}

.romptn-toc-summary-ui.pattern-basic .romptn-toc-summary-ui__image-background {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: var(--rb-color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -24px;
  left: calc(50% - 24px);
}

.romptn-toc-summary-ui.pattern-basic .romptn-toc-summary-ui__image {
  width: 28px;
  height: 28px;
}

.romptn-toc-summary-ui.pattern-basic .romptn-toc-summary-ui__title {
  margin: var(--rb-space-xs) 0 var(--rb-space-lg);
  font-weight: var(--rb-font-bold);
  font-size: var(--rb-text-sm);
  color: var(--rb-color-primary);
  text-align: center;
}

.romptn-toc-summary-ui.pattern-basic .romptn-toc-summary-ui__list {
  margin: 0;
  color: var(--rb-text-primary);
}

.romptn-toc-summary-ui.pattern-basic .romptn-toc-summary-ui__list li::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--rb-color-primary);
  margin-top: 6px;
  flex-shrink: 0;
}

.romptn-toc-summary-ui.pattern-basic .romptn-toc-summary-ui__item {
  display: flex;
  align-items: flex-start;
  gap: var(--rb-space-md);
  margin-bottom: var(--rb-space-md);
  line-height: 1.6;
  font-size: var(--rb-text-sm);
}

.romptn-toc-summary-ui.pattern-basic .romptn-toc-summary-ui__item:last-child {
  margin-bottom: 0;
}

/* ===================================================
   content-box
   =================================================== */
.rb-content-box {
  margin-block: var(--rb-space-lg);
}

.rb-content-box__label {
  display: block;
  background: var(--rb-bg-overlay);
  border: 1px solid var(--rb-border-accent);
  border-block-end: none;
  padding: var(--rb-space-sm) var(--rb-space-lg);
  border-radius: var(--rb-radius-md) var(--rb-radius-md) 0 0;
  font-weight: var(--rb-font-bold);
  font-size: var(--rb-text-sm);
  color: var(--rb-text-primary);
}

.rb-content-box__body {
  background: var(--rb-bg-elevated);
  border: 1px solid var(--rb-border);
  padding: var(--rb-space-lg);
  border-radius: 0 0 var(--rb-radius-md) var(--rb-radius-md);
  color: var(--rb-text-secondary);
  line-height: var(--rb-leading-normal);
}

/* No label → full radius */
.rb-content-box:not(:has(.rb-content-box__label)) .rb-content-box__body {
  border-radius: var(--rb-radius-md);
}

/* variant: check — bold check icon in label */
.rb-content-box__check {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 6px;
  flex-shrink: 0;
  color: var(--rb-color-primary);
  transform: translateY(4px);
}
.rb-content-box__check svg {
  width: 1.1em;
  height: 1.1em;
}

/* variant: sticky — post-it note style */
.rb-content-box[data-variant="sticky"] {
  position: relative;
}
.rb-content-box[data-variant="sticky"] .rb-content-box__label {
  background: rgba(155, 77, 255, 0.15);
  border: none;
  border-block-end: 1px solid rgba(155, 77, 255, 0.12);
}
.rb-content-box[data-variant="sticky"] .rb-content-box__body {
  background: rgba(155, 77, 255, 0.10);
  border: none;
  border-radius: 0 0 2px 2px;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.25);
  background-image: repeating-linear-gradient(
    transparent,
    transparent 1.9em,
    rgba(155, 77, 255, 0.08) 1.9em,
    rgba(155, 77, 255, 0.08) 2em
  );
}
.rb-content-box[data-variant="sticky"]:not(:has(.rb-content-box__label)) .rb-content-box__body {
  border-radius: 2px;
}
/* Folded corner */
.rb-content-box[data-variant="sticky"] .rb-content-box__body::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, rgba(155, 77, 255, 0.10) 50%, rgba(155, 77, 255, 0.25) 50%);
}

/* ===================================================
   callout-box
   =================================================== */
.rb-callout-box {
  position: relative;
  border: none;
  border-radius: var(--rb-radius-md);
  padding: var(--rb-space-md) var(--rb-space-lg) var(--rb-space-md) calc(var(--rb-space-lg) + 2rem);
  margin-block: var(--rb-space-lg);
  color: var(--rb-text-secondary);
  line-height: var(--rb-leading-normal);
}
.rb-callout-box p { margin: 0; color: inherit; }
.rb-callout-box::before {
  position: absolute;
  inset-inline-start: var(--rb-space-md);
  inset-block-start: calc(var(--rb-space-md) + 6px);
  content: '';
  width: 1.2rem;
  height: 1.2rem;
}

.rb-callout-box[data-type="info"] { background: var(--rb-color-info-bg); }
.rb-callout-box[data-type="info"]::before {
  background-color: var(--rb-color-info);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
}

.rb-callout-box[data-type="alert"] { background: var(--rb-color-alert-bg); }
.rb-callout-box[data-type="alert"]::before {
  background-color: var(--rb-color-alert);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
}

.rb-callout-box[data-type="memo"] { background: var(--rb-color-memo-bg); }
.rb-callout-box[data-type="memo"]::before {
  background-color: var(--rb-color-memo);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
}

/* ===================================================
   faq
   =================================================== */
.rb-faq {
  margin-block: var(--rb-space-lg);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-md);
  overflow: hidden;
}
.rb-faq__q-row,
.rb-faq__a-row {
  display: flex;
  gap: var(--rb-space-md);
  padding: var(--rb-space-md) var(--rb-space-lg);
}
.rb-faq__q-row {
  background: var(--rb-bg-overlay);
  align-items: center;
}
.rb-faq__a-row {
  background: transparent;
  align-items: flex-start;
}
.rb-faq__badge {
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rb-radius-sm);
  font-weight: var(--rb-font-bold);
  font-size: var(--rb-text-sm);
  color: #fff;
}
.rb-faq__badge--q { background: var(--rb-color-primary); }
.rb-faq__badge--a { background: var(--rb-color-alert); }
.rb-faq__question {
  font-weight: var(--rb-font-bold);
  color: var(--rb-text-primary);
  line-height: var(--rb-leading-normal);
}
.rb-faq__answer {
  color: var(--rb-text-secondary);
  line-height: var(--rb-leading-normal);
  flex: 1;
}

/* ===================================================
   toggle-box
   =================================================== */
.rb-toggle-box {
  margin-block: var(--rb-space-lg);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-md);
  overflow: hidden;
}
.rb-toggle-box > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rb-space-md) var(--rb-space-lg);
  background: var(--rb-bg-overlay);
  cursor: pointer;
  font-weight: var(--rb-font-bold);
  color: var(--rb-text-primary);
  list-style: none;
  transition: background var(--rb-duration) var(--rb-ease);
}
.rb-toggle-box > summary::-webkit-details-marker { display: none; }
.rb-toggle-box > summary::after {
  content: '';
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid var(--rb-text-tertiary);
  border-bottom: 2px solid var(--rb-text-tertiary);
  transform: rotate(45deg);
  transition: transform var(--rb-duration) var(--rb-ease);
  flex-shrink: 0;
}
.rb-toggle-box[open] > summary::after {
  transform: rotate(-135deg);
}
.rb-toggle-box > summary:hover {
  background: var(--rb-hover-bg);
}
.rb-toggle-box__content {
  padding: var(--rb-space-lg);
  color: var(--rb-text-secondary);
  line-height: var(--rb-leading-normal);
}

/* ===================================================
   timeline
   =================================================== */
.rb-timeline {
  margin-block: var(--rb-space-lg);
  background: var(--rb-bg-elevated);
  border-radius: var(--rb-radius-md);
  padding: var(--rb-space-lg);
}
.rb-timeline__title {
  text-align: center;
  font-weight: var(--rb-font-bold);
  font-size: var(--rb-text-lg);
  color: var(--rb-text-primary);
  margin-block-end: var(--rb-space-lg);
}
.rb-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: var(--rb-space-lg);
  border-inline-start: 2px solid var(--rb-border-accent);
}

/* ===================================================
   timeline-item
   =================================================== */
.rb-timeline-item {
  position: relative;
  padding-inline-start: var(--rb-space-lg);
  padding-block-end: var(--rb-space-lg);
}
.rb-timeline-item:last-child {
  padding-block-end: 0;
}
.rb-timeline-item::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--rb-space-lg) * -1 - 5px);
  inset-block-start: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rb-color-primary);
}
.rb-timeline-item__label {
  font-size: var(--rb-text-sm);
  font-weight: var(--rb-font-bold);
  color: var(--rb-color-primary);
  margin-block-end: var(--rb-space-xs);
}
.rb-timeline-item__title {
  font-weight: var(--rb-font-bold);
  color: var(--rb-text-primary);
  margin-block-end: var(--rb-space-sm);
}
.rb-timeline-item__content {
  color: var(--rb-text-secondary);
  line-height: var(--rb-leading-normal);
}

/* ===================================================
   speech-bubble
   =================================================== */
.rb-speech-bubble {
  display: flex;
  gap: var(--rb-space-md);
  margin-block: var(--rb-space-lg);
  align-items: flex-start;
}
.rb-speech-bubble[data-position="right"] {
  flex-direction: row-reverse;
}
.rb-speech-bubble__person {
  flex-shrink: 0;
  text-align: center;
}
.rb-speech-bubble__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.rb-speech-bubble__name {
  font-size: var(--rb-text-sm);
  color: var(--rb-text-tertiary);
  margin-block-start: var(--rb-space-xs);
}
.rb-speech-bubble__balloon {
  flex: 1;
  position: relative;
  background: var(--rb-bg-elevated);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-md);
  padding: var(--rb-space-md) var(--rb-space-lg);
  color: var(--rb-text-secondary);
  line-height: var(--rb-leading-normal);
}
/* Speech tail — left position */
.rb-speech-bubble[data-position="left"] .rb-speech-bubble__balloon::before {
  content: '';
  position: absolute;
  inset-inline-start: -8px;
  inset-block-start: 18px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid var(--rb-border);
}
.rb-speech-bubble[data-position="left"] .rb-speech-bubble__balloon::after {
  content: '';
  position: absolute;
  inset-inline-start: -6px;
  inset-block-start: 18px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid var(--rb-bg-elevated);
}
/* Speech tail — right position */
.rb-speech-bubble[data-position="right"] .rb-speech-bubble__balloon::before {
  content: '';
  position: absolute;
  inset-inline-end: -8px;
  inset-block-start: 18px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--rb-border);
}
.rb-speech-bubble[data-position="right"] .rb-speech-bubble__balloon::after {
  content: '';
  position: absolute;
  inset-inline-end: -6px;
  inset-block-start: 18px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--rb-bg-elevated);
}

/* ===================================================
   Mobile
   =================================================== */
@media (max-width: 767px) {
  .rb-callout-box {
    padding: var(--rb-space-sm) var(--rb-space-md) var(--rb-space-sm) calc(var(--rb-space-md) + 1.8rem);
  }
  .rb-callout-box::before {
    inset-block-start: var(--rb-space-md);
  }
  .rb-faq__q-row,
  .rb-faq__a-row {
    padding: var(--rb-space-sm) var(--rb-space-md);
  }
  .rb-speech-bubble__icon {
    width: 44px;
    height: 44px;
  }
}