/*
 * umsh-verified-inplace.css
 *
 * 검증된 해석을 등록 디자인 안 슬롯에 그릴 때 쓰는 최소 스타일.
 * 서비스마다 배경·타이포가 다르므로 색은 전부 var(--...) 로 받고, 값이 없으면
 * 운명상회 공통 골드/다크 팔레트로 폴백한다. 레이아웃에는 관여하지 않고
 * 슬롯 내부만 책임진다.
 */

[data-umsh-slot] { min-width: 0; }

/* ── 공용 리더 하단 도구 ─────────────────────────────────── */
/*
 * 실제 저장 리포트에만 접근기가 붙인다. 서비스의 색은 유지하되, 행동은 모든 06
 * 상세에서 같은 순서(공유 → PDF)로 끝낸다. 상태 문구는 버튼 다음에 독립 줄로
 * 두어 긴 복사 결과가 버튼 폭을 밀어내지 않는다.
 */
.umsh-reader-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin: 26px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line, rgba(222, 188, 113, .28));
}
.umsh-reader-actions button {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line, rgba(222, 188, 113, .42));
  border-radius: var(--umsh-radius-button, 8px);
  background: var(--panel, rgba(255, 255, 255, .045));
  color: var(--text, #fff7f2);
  font: inherit;
  font-size: var(--umsh-text-sm, 13px);
  font-weight: var(--umsh-weight-bold, 700);
  line-height: 1.35;
  cursor: pointer;
}
.umsh-reader-actions button:hover { background: rgba(255, 255, 255, .1); }
.umsh-reader-actions button:focus-visible {
  outline: 2px solid var(--cyan, var(--gold, #e8c76f));
  outline-offset: 3px;
}
.umsh-reader-actions [data-umsh-report-share] {
  grid-column: 1;
  grid-row: 1;
}
.umsh-reader-actions [data-umsh-pdf] {
  grid-column: 2;
  grid-row: 1;
  border-color: var(--gold, #e8c76f);
  color: var(--gold-soft, var(--gold, #e8c76f));
}
.umsh-reader-actions [role="status"] {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 0;
  color: var(--muted, rgba(255, 247, 223, .72));
  font-size: var(--umsh-text-xs, 12px);
  line-height: 1.6;
}

/* ── 진행률 ─────────────────────────────────────────────── */
[data-umsh-slot="progress"] {
  display: grid;
  gap: 8px;
}
.umsh-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.umsh-progress-label {
  font-size: var(--umsh-text-xs, 12px);
  font-weight: var(--umsh-weight-bold, 700);
  letter-spacing: .02em;
  color: var(--gold, #e8c76f);
}
.umsh-progress-count {
  font-size: var(--umsh-text-xs, 12px);
  font-variant-numeric: tabular-nums;
  color: var(--muted, rgba(255, 247, 223, .7));
}
.umsh-progress-count strong {
  font-size: var(--umsh-text-body, 15px);
  color: var(--gold-soft, #f2dc9a);
}
.umsh-progress-track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--progress-track, rgba(232, 199, 111, .16));
}
.umsh-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold, #e8c76f), var(--red, #a8261e));
  /* 폭이 0 → n% 로 늘어나는 것만 보여준다. 남은 시간을 추정하지 않는다. */
  transition: width .45s cubic-bezier(.22, .61, .36, 1);
}
[data-umsh-progress-state="complete"] .umsh-progress-fill {
  background: linear-gradient(90deg, var(--gold-soft, #f2dc9a), var(--gold, #e8c76f));
}
.umsh-progress-note {
  margin: 0;
  font-size: var(--umsh-text-xs, 12px);
  line-height: 1.6;
  color: var(--muted, rgba(255, 247, 223, .7));
  word-break: keep-all;
}

/* ── 대표 근거 카드 ──────────────────────────────────────── */
[data-umsh-slot="insights"] {
  display: grid;
  gap: 10px;
}
.umsh-insight {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line, rgba(222, 188, 113, .32));
  border-radius: 14px;
  background: var(--panel, rgba(255, 255, 255, .045));
}
.umsh-insight-index {
  font-size: var(--umsh-text-xs, 12px);
  font-weight: var(--umsh-weight-bold, 700);
  line-height: 1.6;
  color: var(--gold, #e8c76f);
  font-variant-numeric: tabular-nums;
}
.umsh-insight p {
  margin: 0;
  font-size: var(--umsh-text-md, 14px);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ── 섹션 목록 ──────────────────────────────────────────── */
[data-umsh-slot="sections"] {
  display: grid;
  /* 가로 스크롤 타임라인의 최소 너비가 폰 화면 전체를 밀지 않게 한다. */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
[data-umsh-slot="sections"] .umsh-longform,
[data-umsh-slot="sections"] .umsh-summary {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
@container (min-width: 720px) {
  [data-umsh-slot="sections"] .umsh-summary { grid-template-columns: 300px minmax(0, 1fr); }
}

/* ── 만세력 흐름: 삽입형 상세도 공용 리더의 읽기 위계를 따른다 ── */
/*
 * 전체 화면 리더의 #umsh-verified-reading 전용 규칙만으로는 06 상세처럼
 * 디자인 안에 주입되는 [data-umsh-slot="sections"]를 꾸밀 수 없다. 이 블록은
 * 저장된 계산값을 문단 → 그래프 → 근거 순서로 읽게 하며, 서비스 색상 토큰을
 * 우선한다. 그래프는 예측 점수가 아니라 구간을 읽는 보조 도구다.
 */
[data-umsh-slot="sections"] > .umsh-life-flow {
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--line, rgba(222, 188, 113, .32));
  border-radius: 16px;
  background: linear-gradient(145deg, var(--panel-strong, rgba(255, 255, 255, .075)), var(--panel, rgba(255, 255, 255, .035)));
  color: var(--text, #fff7f2);
  font: 15px/1.85 Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  letter-spacing: -.012em;
  text-rendering: optimizeLegibility;
}
[data-umsh-slot="sections"] .umsh-life-flow-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--gold, #e8c76f);
  font-size: var(--umsh-text-xs, 12px);
  font-weight: var(--umsh-weight-bold, 700);
  letter-spacing: .04em;
}
[data-umsh-slot="sections"] .umsh-life-flow h2 {
  margin: 0;
  color: var(--text, #fff7f2);
  font-size: clamp(20px, 5.4vw, 25px);
  font-weight: var(--umsh-weight-bold, 700);
  letter-spacing: -.035em;
  line-height: 1.28;
  word-break: keep-all;
}
[data-umsh-slot="sections"] .umsh-life-flow-current {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 12px 0 0;
  padding: 6px 10px;
  border: 1px solid var(--line, rgba(222, 188, 113, .38));
  border-radius: 999px;
  background: var(--current-panel, rgba(232, 199, 111, .11));
  color: var(--gold-soft, #f2dc9a);
  font-size: var(--umsh-text-sm, 13px);
  font-weight: var(--umsh-weight-bold, 700);
  line-height: 1.45;
  word-break: keep-all;
}
[data-umsh-slot="sections"] .umsh-flow-intro {
  margin: 16px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line, rgba(222, 188, 113, .2));
  color: var(--muted, rgba(255, 247, 223, .78));
  font-size: var(--umsh-text-sm, 13px);
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
[data-umsh-slot="sections"] .umsh-flow-curve {
  margin: 0;
  padding: 16px 10px 11px;
  border: 1px solid var(--line, rgba(222, 188, 113, .28));
  border-radius: 13px;
  background: var(--chart-panel, rgba(0, 0, 0, .2));
}
[data-umsh-slot="sections"] .umsh-flow-plot { overflow-x: auto; scrollbar-color: var(--gold, #e8c76f) transparent; }
[data-umsh-slot="sections"] .umsh-flow-plot svg { display: block; width: 100%; min-width: 340px; height: auto; }
[data-umsh-slot="sections"] .umsh-flow-plot text { font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
[data-umsh-slot="sections"] .umsh-flow-grid { stroke: var(--chart-grid, rgba(232, 199, 111, .3)); stroke-dasharray: 3 4; }
[data-umsh-slot="sections"] .umsh-flow-axis { fill: var(--muted, #d7c9aa); font-size: var(--umsh-text-2xs, 11px); font-weight: var(--umsh-weight-bold, 700); }
[data-umsh-slot="sections"] .umsh-flow-line { fill: none; stroke: var(--gold, #e8c76f); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
[data-umsh-slot="sections"] .umsh-flow-point { fill: var(--panel-solid, #17140f); stroke: var(--gold-soft, #f2dc9a); stroke-width: 2; }
[data-umsh-slot="sections"] .umsh-flow-point.is-current { fill: var(--gold, #e8c76f); stroke: var(--ink, #fff7f2); stroke-width: 3; }
[data-umsh-slot="sections"] .umsh-flow-age { fill: var(--muted, #d7c9aa); font-size: var(--umsh-text-2xs, 11px); font-weight: var(--umsh-weight-bold, 700); }
[data-umsh-slot="sections"] .umsh-flow-age.is-current { fill: var(--gold-soft, #f2dc9a); font-weight: var(--umsh-weight-bold, 700); }
[data-umsh-slot="sections"] .umsh-flow-callout {
  display: grid;
  gap: 5px;
  margin: 12px 0 0;
  padding: 13px 14px;
  border-left: 3px solid var(--gold, #e8c76f);
  border-radius: 0 10px 10px 0;
  background: var(--callout-panel, rgba(232, 199, 111, .11));
}
[data-umsh-slot="sections"] .umsh-flow-callout strong { color: var(--text, #fff7f2); font-size: var(--umsh-text-md, 14px); line-height: 1.5; }
[data-umsh-slot="sections"] .umsh-flow-callout span { color: var(--gold-soft, #f2dc9a); font-size: var(--umsh-text-sm, 13px); font-weight: var(--umsh-weight-bold, 700); line-height: 1.55; }
[data-umsh-slot="sections"] .umsh-life-flow-reference {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
}
[data-umsh-slot="sections"] .umsh-life-flow-reference p {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--line, rgba(222, 188, 113, .2));
  border-radius: 10px;
  background: var(--panel, rgba(255, 255, 255, .04));
}
[data-umsh-slot="sections"] .umsh-life-flow-reference strong { color: var(--gold, #e8c76f); font-size: var(--umsh-text-xs, 12px); font-weight: var(--umsh-weight-bold, 700); }
[data-umsh-slot="sections"] .umsh-life-flow-reference span { color: var(--text, #fff7f2); font-size: var(--umsh-text-sm, 13px); font-weight: var(--umsh-weight-bold, 700); line-height: 1.55; word-break: keep-all; }
[data-umsh-slot="sections"] .umsh-life-flow-source {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line, rgba(222, 188, 113, .22));
}
[data-umsh-slot="sections"] .umsh-life-flow-source > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--gold, #e8c76f);
  font-size: var(--umsh-text-sm, 13px);
  font-weight: var(--umsh-weight-bold, 700);
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}
[data-umsh-slot="sections"] .umsh-life-flow-source > summary::-webkit-details-marker { display: none; }
[data-umsh-slot="sections"] .umsh-life-flow-source > summary::after { content: '접기 −'; flex: 0 0 auto; color: var(--muted, rgba(255, 247, 223, .72)); font-size: var(--umsh-text-xs, 12px); }
[data-umsh-slot="sections"] .umsh-life-flow-source:not([open]) > summary::after { content: '펼치기 +'; }
[data-umsh-slot="sections"] .umsh-life-flow-source > summary:focus-visible { outline: 2px solid var(--cyan, var(--gold, #e8c76f)); outline-offset: 4px; border-radius: 4px; }
[data-umsh-slot="sections"] .umsh-life-flow-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(116px, 1fr));
  gap: 8px;
  margin: 13px 0 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
}
[data-umsh-slot="sections"] .umsh-life-flow-segment {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 100px;
  padding: 12px;
  border: 1px solid var(--line, rgba(222, 188, 113, .2));
  border-radius: 11px;
  background: var(--panel, rgba(255, 255, 255, .035));
  color: var(--muted, rgba(255, 247, 223, .7));
  font-size: var(--umsh-text-xs, 12px);
  line-height: 1.45;
  scroll-snap-align: start;
}
[data-umsh-slot="sections"] .umsh-life-flow-segment strong { color: var(--text, #fff7f2); font-size: var(--umsh-text-base, 16px); line-height: 1.25; }
[data-umsh-slot="sections"] .umsh-life-flow-age { color: var(--gold-soft, #f2dc9a); font-size: var(--umsh-text-xs, 12px); font-weight: var(--umsh-weight-bold, 700); }
[data-umsh-slot="sections"] .umsh-life-flow-segment.is-current { border-color: var(--gold, #e8c76f); background: var(--current-panel, rgba(232, 199, 111, .12)); }
[data-umsh-slot="sections"] .umsh-life-flow-segment.is-current strong { color: var(--gold-soft, #f2dc9a); }
[data-umsh-slot="sections"] .umsh-life-flow-segment em { position: absolute; top: 9px; right: 9px; padding: 2px 6px; border-radius: 999px; background: var(--gold, #e8c76f); color: #171109; font-size: var(--umsh-text-2xs, 11px); font-style: normal; font-weight: var(--umsh-weight-bold, 700); }
[data-umsh-slot="sections"] .umsh-life-flow-note { margin: 13px 0 0; color: var(--muted, rgba(255, 247, 223, .72)); font-size: var(--umsh-text-xs, 12px); line-height: 1.7; word-break: keep-all; }

@media (max-width: 420px) {
  [data-umsh-slot="sections"] > .umsh-life-flow { padding: 18px 15px; }
  [data-umsh-slot="sections"] .umsh-life-flow-reference { grid-template-columns: 1fr; }
  [data-umsh-slot="sections"] .umsh-life-flow-current { max-width: 100%; border-radius: 10px; }
}
[data-umsh-slot="sections"] .reading-card {
  border: 1px solid var(--line, rgba(222, 188, 113, .24));
  border-radius: 14px;
  background: var(--panel, rgba(255, 255, 255, .045));
  overflow: hidden;
}
[data-umsh-slot="sections"] .reading-card > summary {
  padding: 14px;
  cursor: pointer;
  font-weight: var(--umsh-weight-bold, 700);
  font-size: var(--umsh-text-md, 14px);
  line-height: 1.5;
  list-style: none;
  word-break: keep-all;
}
[data-umsh-slot="sections"] .reading-card > summary::-webkit-details-marker { display: none; }
[data-umsh-slot="sections"] .reading-card > summary::after {
  content: "";
  float: right;
  margin-left: 10px;
  font-size: var(--umsh-text-2xs, 11px);
  font-weight: var(--umsh-weight-bold, 700);
  color: var(--gold, #e8c76f);
}
.reading-card.is-pending    > summary::after { content: "준비중"; opacity: .72; }
.reading-card.is-generating > summary::after { content: "작성중"; }
.reading-card.is-failed     > summary::after { content: "미완성"; color: #ff9b9b; }
.reading-card.is-ready      > summary::after { content: "펼치기 +"; }
.reading-card.is-ready[open] > summary::after { content: "접기 −"; }
[data-umsh-slot="sections"] .reading-card > :not(summary) { padding: 0 14px 14px; }

[data-umsh-slot="sections"] .reading-block {
  margin: 0;
  padding: 18px 2px;
  border-top: 1px solid var(--line, rgba(222, 188, 113, .24));
  overflow-wrap: anywhere;
}
[data-umsh-slot="sections"] .reading-role {
  display: block;
  margin-bottom: 8px;
  font-size: var(--umsh-text-xs, 12px);
  font-weight: var(--umsh-weight-bold, 700);
  color: var(--gold, #e8c76f);
}
[data-umsh-slot="sections"] .reading-block p {
  margin: 0;
  color: var(--text, #fff7f2);
  font-size: var(--umsh-text-body, 15px);
  font-weight: var(--umsh-weight-medium, 500);
  line-height: 1.92;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
[data-umsh-slot="sections"] .reading-block p + p { margin-top: 14px; }
[data-umsh-slot="sections"] .reading-block.reading-answer {
  margin: 18px 0 2px;
  padding: 18px 16px;
  border: 0;
  border-left: 3px solid var(--gold, #e8c76f);
  border-radius: 0 12px 12px 0;
  background: var(--answer-panel, rgba(232, 199, 111, .10));
}
[data-umsh-slot="sections"] .reading-block.reading-answer .reading-role { margin-bottom: 9px; }
[data-umsh-slot="sections"] .reading-block.reading-answer p {
  color: var(--text, #fff7f2);
  font-size: var(--umsh-text-base, 16px);
  font-weight: var(--umsh-weight-bold, 700);
  line-height: 1.65;
}
[data-umsh-slot="sections"] .reading-block.reading-action {
  padding: 18px 14px;
  border-radius: 12px;
  background: var(--panel-strong, rgba(232, 199, 111, .08));
}

/* ── 공용 마크다운 뷰 ─────────────────────────────────────
 * 저장 원문의 구조를 카드 본문에서도 제목·표·목록·강조로 구분한다.
 * 서비스별 accent 변수를 사용해 고양이 궁합 등 각 테마의 정체성은 유지한다. */
[data-umsh-slot="sections"] .reading-block strong {
  color: var(--text-strong, #fffdf5);
  font-weight: var(--umsh-weight-bold, 700);
}
[data-umsh-slot="sections"] .reading-block em { color: var(--gold-soft, #f2dc9a); }
[data-umsh-slot="sections"] .reading-block u {
  text-decoration-color: var(--umsh-guide-accent, var(--gold, #e8c76f));
  text-decoration-thickness: 2px;
  text-underline-offset: .24em;
}
[data-umsh-slot="sections"] .reading-block mark {
  padding: .05em .24em;
  border-radius: .3em;
  background: color-mix(in srgb, var(--umsh-guide-accent, var(--gold, #e8c76f)) 82%, white);
  color: #171109;
  font-weight: var(--umsh-weight-bold, 700);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-umsh-slot="sections"] .reading-block code {
  padding: .12em .36em;
  border: 1px solid color-mix(in srgb, var(--umsh-guide-accent, var(--gold, #e8c76f)) 30%, transparent);
  border-radius: 5px;
  background: rgba(0, 0, 0, .28);
  color: var(--gold-soft, #f2dc9a);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .9em;
}
[data-umsh-slot="sections"] .reading-subhead {
  margin: 20px 0 8px;
  padding-left: 10px;
  border-left: 3px solid var(--umsh-guide-accent, var(--gold, #e8c76f));
  color: var(--text-strong, #fffdf5);
  font-size: var(--umsh-text-base, 16px);
  font-weight: var(--umsh-weight-bold, 700);
  line-height: 1.55;
}
[data-umsh-slot="sections"] .reading-quote {
  margin: 15px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--umsh-guide-accent, var(--gold, #e8c76f));
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--umsh-guide-accent, var(--gold, #e8c76f)) 10%, transparent);
  color: var(--text, #fff7f2);
  font-size: var(--umsh-text-md, 14px);
  font-weight: var(--umsh-weight-semibold, 600);
  line-height: 1.8;
}
[data-umsh-slot="sections"] .reading-list {
  margin: 12px 0;
  padding-left: 23px;
  color: var(--text, #fff7f2);
}
[data-umsh-slot="sections"] .reading-list li {
  margin: 7px 0;
  padding-left: 3px;
  font-size: var(--umsh-text-md, 14px);
  line-height: 1.8;
  word-break: keep-all;
}
[data-umsh-slot="sections"] .reading-list li::marker {
  color: var(--umsh-guide-accent, var(--gold, #e8c76f));
  font-weight: var(--umsh-weight-bold, 700);
}
[data-umsh-slot="sections"] .reading-table-wrap {
  min-width: 0;
  margin: 15px 0;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--umsh-guide-accent, var(--gold, #e8c76f)) 30%, transparent);
  border-radius: 11px;
  -webkit-overflow-scrolling: touch;
}
[data-umsh-slot="sections"] .reading-table {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
  color: var(--text, #fff7f2);
  font-size: var(--umsh-text-sm, 13px);
}
[data-umsh-slot="sections"] .reading-table th,
[data-umsh-slot="sections"] .reading-table td {
  padding: 10px 11px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--umsh-guide-accent, var(--gold, #e8c76f)) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--umsh-guide-accent, var(--gold, #e8c76f)) 18%, transparent);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
  word-break: keep-all;
}
[data-umsh-slot="sections"] .reading-table th:last-child,
[data-umsh-slot="sections"] .reading-table td:last-child { border-right: 0; }
[data-umsh-slot="sections"] .reading-table tbody tr:last-child td { border-bottom: 0; }
[data-umsh-slot="sections"] .reading-table thead th {
  background: color-mix(in srgb, var(--umsh-guide-accent, var(--gold, #e8c76f)) 14%, rgba(0, 0, 0, .46));
  color: var(--umsh-guide-accent, var(--gold, #e8c76f));
  font-weight: var(--umsh-weight-bold, 700);
}

/* 첫 토글의 읽기 순서도 본문 표와 같은 위계로 보인다. */
[data-umsh-slot="sections"] .umsh-reading-guide {
  --umsh-guide-accent: var(--gold, #e8c76f);
  min-width: 0;
  margin: 16px 0 20px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--umsh-guide-accent) 38%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--umsh-guide-accent) 8%, rgba(0, 0, 0, .42));
}
[data-umsh-slot="sections"] .umsh-reading-guide .reading-role { color: var(--umsh-guide-accent); }
[data-umsh-slot="sections"] .umsh-reading-guide h3 {
  margin: 6px 0 12px;
  color: var(--text-strong, #fffdf5);
  font-size: var(--umsh-text-body, 15px);
  line-height: 1.5;
  word-break: keep-all;
}
[data-umsh-slot="sections"] .umsh-reading-guide-scroll {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--umsh-guide-accent) 26%, transparent);
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}
[data-umsh-slot="sections"] .umsh-reading-guide table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  color: var(--text, #fff7f2);
  font-size: var(--umsh-text-xs, 12px);
}
[data-umsh-slot="sections"] .umsh-reading-guide th,
[data-umsh-slot="sections"] .umsh-reading-guide td {
  padding: 10px 9px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--umsh-guide-accent) 20%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--umsh-guide-accent) 20%, transparent);
  text-align: left;
  vertical-align: top;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
[data-umsh-slot="sections"] .umsh-reading-guide th:last-child,
[data-umsh-slot="sections"] .umsh-reading-guide td:last-child { border-right: 0; }
[data-umsh-slot="sections"] .umsh-reading-guide tbody tr:last-child > * { border-bottom: 0; }
[data-umsh-slot="sections"] .umsh-reading-guide thead th {
  color: var(--text-strong, #fffdf5);
  background: color-mix(in srgb, var(--umsh-guide-accent) 15%, rgba(0, 0, 0, .5));
  font-weight: var(--umsh-weight-bold, 700);
}
[data-umsh-slot="sections"] .umsh-reading-guide tbody th {
  width: 40%;
  color: var(--umsh-guide-accent);
  font-weight: var(--umsh-weight-bold, 700);
}
[data-umsh-slot="sections"] :is(.umsh-reading-guide-scroll,.umsh-service-elements-scroll,.reading-table-wrap,.story-table-scroll):focus-visible {
  outline: 2px solid var(--umsh-guide-accent, var(--gold, #e8c76f));
  outline-offset: 3px;
}

/* ── 실제 오행 계산값 표 ─────────────────────────────────── */
[data-umsh-slot="sections"] .umsh-service-elements {
  min-width: 0;
  margin: 16px 0 22px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--umsh-guide-accent, var(--gold, #e8c76f)) 38%, transparent);
  border-radius: 13px;
  background: var(--panel-strong, rgba(255, 255, 255, .065));
}
[data-umsh-slot="sections"] .umsh-service-elements figcaption {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}
[data-umsh-slot="sections"] .umsh-service-elements figcaption strong {
  color: var(--umsh-guide-accent, var(--gold, #e8c76f));
  font-size: var(--umsh-text-md, 14px);
  line-height: 1.5;
}
[data-umsh-slot="sections"] .umsh-service-elements figcaption span {
  color: var(--muted, rgba(255, 247, 223, .76));
  font-size: var(--umsh-text-xs, 12px);
  line-height: 1.7;
  word-break: keep-all;
}
[data-umsh-slot="sections"] .umsh-service-elements-scroll {
  min-width: 0;
  overflow-x: auto;
}
[data-umsh-slot="sections"] .umsh-service-elements-table {
  width: 100%;
  min-width: 280px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--text, #fff7f2);
  font-size: var(--umsh-text-xs, 12px);
}
[data-umsh-slot="sections"] .umsh-service-elements-table th,
[data-umsh-slot="sections"] .umsh-service-elements-table td {
  padding: 9px 5px;
  border: 1px solid color-mix(in srgb, var(--umsh-guide-accent, var(--gold, #e8c76f)) 22%, transparent);
  text-align: center;
}
[data-umsh-slot="sections"] .umsh-service-elements-table th {
  background: color-mix(in srgb, var(--umsh-guide-accent, var(--gold, #e8c76f)) 12%, rgba(0, 0, 0, .42));
  color: var(--umsh-guide-accent, var(--gold, #e8c76f));
  font-weight: var(--umsh-weight-bold, 700);
}
[data-umsh-slot="sections"] .umsh-service-elements-table th:first-child { border-radius: 9px 0 0; }
[data-umsh-slot="sections"] .umsh-service-elements-table th:last-child { border-radius: 0 9px 0 0; }
[data-umsh-slot="sections"] .umsh-service-elements-table td strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text, #fff7f2);
  font-size: var(--umsh-text-base, 16px);
  font-variant-numeric: tabular-nums;
}
[data-umsh-slot="sections"] .umsh-service-element-track {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .11);
}
[data-umsh-slot="sections"] .umsh-service-element-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--umsh-guide-accent, var(--gold, #e8c76f));
}

/* ── 항목 준비중 스켈레톤 ────────────────────────────────── */
.umsh-section-skeleton {
  padding: 16px;
  border: 1px dashed var(--line, rgba(232, 199, 111, .35));
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
}
.umsh-section-skeleton strong {
  display: block;
  margin-bottom: 6px;
  color: var(--gold-soft, #f2dc9a);
  font-size: var(--umsh-text-md, 14px);
}
.umsh-section-skeleton p {
  margin: 0 0 12px;
  font-size: var(--umsh-text-sm, 13px);
  line-height: 1.65;
  color: var(--muted, rgba(255, 247, 223, .72));
  word-break: keep-all;
}
.interpret-progress {
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(232, 199, 111, .16);
}
.interpret-progress::before {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold, #e8c76f), var(--red, #a8261e));
  animation: umsh-progress-scan 1.65s ease-in-out infinite;
}
@keyframes umsh-progress-scan {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}
.reading-retry {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(232, 199, 111, .35));
  background: rgba(255, 255, 255, .06);
  color: inherit;
  font-weight: var(--umsh-weight-bold, 700);
  cursor: pointer;
}

/* ── 미리보기(무료 티저) 자리를 만들어 넣은 경우 ─────────── */
/*
 * 디자인에 headline·summary·insights 자리가 없을 때만 쓰인다. 자리가 있으면
 * 그 자리에 채우므로 이 블록은 나오지 않는다. 색은 슬롯과 같은 규칙으로 받는다.
 */
[data-umsh-slot="preview"] {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--line, rgba(232, 199, 111, .35));
  border-radius: 14px;
  background: var(--panel, rgba(255, 255, 255, .045));
}
.umsh-preview-headline {
  margin: 0;
  font-size: var(--umsh-text-lg, 18px);
  line-height: 1.4;
  word-break: keep-all;
}
.umsh-preview-summary,
.umsh-preview-paid {
  margin: 0;
  font-size: var(--umsh-text-md, 14px);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.umsh-preview-insights {
  display: grid;
  gap: 10px;
}
.umsh-preview-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--gold, #e8c76f);
  border-radius: 12px;
  color: var(--gold, #e8c76f);
  font-weight: var(--umsh-weight-bold, 700);
  text-decoration: none;
}

/* ── 직장 선택 무료 공개 해석 1·2 ──────────────────────
 * 서버가 공개 범위로 보낸 실제 본문과 이미지를 기승전결 순서로 읽는다.
 * 기존 정적 티저는 가리고 CTA는 두 장을 모두 읽은 뒤 한 번만 둔다. */
[data-umsh-slot="preview"]:has(.job-teaser-reading) {
  gap: 18px;
  margin: 0;
  padding: 18px 14px 28px;
  border: 0;
  border-radius: 0;
  background: #080b17;
}
.job-teaser-opening,
.job-teaser-final-cta {
  padding: 22px 18px;
  border: 1px solid rgba(232, 199, 111, .34);
  border-radius: var(--umsh-radius-button, 8px);
  background: linear-gradient(145deg, rgba(39, 31, 22, .96), rgba(12, 14, 26, .98));
}
.job-teaser-opening > span,
.job-teaser-final-cta > span,
.job-teaser-number,
.job-teaser-stage {
  display: block;
  color: var(--gold, #e8c76f);
  font-size: var(--umsh-text-2xs, 11px);
  font-weight: var(--umsh-weight-bold, 700);
  letter-spacing: .04em;
}
.job-teaser-opening h1,
.job-teaser-final-cta h2,
.job-teaser-reading h2 {
  margin: 10px 0;
  color: var(--text, #fff7f2);
  line-height: 1.42;
  word-break: keep-all;
}
.job-teaser-opening h1 { font-size: clamp(22px, 7vw, 30px); }
.job-teaser-opening > p,
.job-teaser-final-cta > p {
  margin: 0;
  color: var(--muted, rgba(255, 247, 242, .78));
  font-size: var(--umsh-text-md, 14px);
  line-height: 1.78;
  word-break: keep-all;
}
.job-teaser-reading {
  overflow: hidden;
  border: 1px solid rgba(232, 199, 111, .28);
  border-radius: 17px;
  background: rgba(12, 14, 26, .98);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .28);
}
.job-teaser-reading .story-image {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #090b12;
}
.job-teaser-reading .story-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.job-teaser-reading.quit-teaser-reading .story-image { aspect-ratio: 4 / 5; }
.job-teaser-reading.quit-teaser-reading .story-image img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.job-teaser-reading.money-teaser-reading .story-image { aspect-ratio: 3 / 2; }
.job-teaser-reading.money-teaser-reading .story-image img { object-position: center; }
.job-teaser-reading-inner { padding: 20px 17px 22px; }
.job-teaser-stage { margin-bottom: 5px; color: rgba(255, 247, 242, .62); }
.job-teaser-number { margin: 0; }
.job-teaser-reading h2 { font-size: var(--umsh-text-xl, 20px); }
.job-teaser-body h3 { margin: 24px 0 10px; color: var(--gold, #e8c76f); font-size: var(--umsh-text-base, 16px); line-height: 1.55; word-break: keep-all; }
.job-teaser-hook {
  margin: 15px 0 18px;
  padding: 13px 14px;
  border-left: 3px solid var(--gold, #e8c76f);
  border-radius: 0 10px 10px 0;
  background: rgba(232, 199, 111, .09);
  color: var(--text, #fff7f2);
  font-size: var(--umsh-text-body, 15px);
  font-weight: var(--umsh-weight-bold, 700);
  line-height: 1.7;
}
.job-teaser-body { color: var(--text, #fff7f2); }
.job-teaser-body p { margin: 0 0 16px; font-size: var(--umsh-text-body, 15px); line-height: 1.9; word-break: keep-all; }
.job-teaser-body strong { color: #fffdf5; font-weight: var(--umsh-weight-bold, 700); }
[data-umsh-slot="preview"] .reading-table-wrap {
  min-width: 0;
  margin: 18px 0;
  overflow-x: auto;
  border: 1px solid rgba(232, 199, 111, .28);
  border-radius: 11px;
}
[data-umsh-slot="preview"] .reading-table { width: 100%; min-width: 340px; border-collapse: collapse; color: var(--text, #fff7f2); font-size: var(--umsh-text-xs, 12px); }
[data-umsh-slot="preview"] .reading-table th,
[data-umsh-slot="preview"] .reading-table td { padding: 10px; border-right: 1px solid rgba(232, 199, 111, .16); border-bottom: 1px solid rgba(232, 199, 111, .16); text-align: left; vertical-align: top; line-height: 1.65; word-break: keep-all; }
[data-umsh-slot="preview"] .reading-table th { background: rgba(232, 199, 111, .1); color: var(--gold, #e8c76f); }
.job-teaser-reading .story-chart-figure { margin: 22px 0 0; padding: 16px; border: 1px solid rgba(232, 199, 111, .24); border-radius: 12px; background: rgba(0, 0, 0, .22); }
.job-teaser-closing { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(232, 199, 111, .18); color: rgba(255, 247, 242, .82); font-size: var(--umsh-text-md, 14px); line-height: 1.75; word-break: keep-all; }
.job-teaser-closing strong { display: block; margin-bottom: 5px; color: var(--gold, #e8c76f); font-size: var(--umsh-text-2xs, 11px); }
.job-teaser-final-cta { margin-top: 2px; }
.job-teaser-final-cta h2 { font-size: var(--umsh-text-xl, 20px); }
.job-teaser-toc {
  margin: 0 0 22px;
  border: 1px solid rgba(232, 199, 111, .3);
  border-radius: 12px;
  background: rgba(5, 7, 14, .48);
}
.job-teaser-toc > header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 64px;
  padding: 12px 15px;
  color: var(--text, #fff7f2);
}
.job-teaser-toc > header strong,
.job-teaser-toc > header small { display: block; }
.job-teaser-toc > header strong { font-size: var(--umsh-text-body, 15px); }
.job-teaser-toc > header small { margin-top: 3px; color: rgba(255, 247, 242, .58); font-size: var(--umsh-text-2xs, 11px); font-weight: var(--umsh-weight-semibold, 600); }
.job-teaser-toc ol { margin: 0; padding: 0 12px 12px; list-style: none; }
.job-teaser-toc li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 58px; padding: 9px 4px; border-top: 1px solid rgba(232, 199, 111, .14); }
.job-teaser-toc-number { color: var(--gold, #e8c76f); font-size: var(--umsh-text-2xs, 11px); font-weight: var(--umsh-weight-bold, 700); }
.job-teaser-toc-copy strong { display: block; color: var(--text, #fff7f2); font-size: var(--umsh-text-sm, 13px); line-height: 1.45; word-break: keep-all; }
.job-teaser-toc-copy small { display: block; margin-top: 3px; color: rgba(255, 247, 242, .55); font-size: var(--umsh-text-2xs, 11px); line-height: 1.4; }
.job-teaser-final-cta .umsh-preview-checkout { margin-top: 18px; background: var(--gold, #e8c76f); color: #16100a; }
.job-teaser-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.job-teaser-usage { margin: 0 !important; color: var(--gold, #e8c76f) !important; font-size: var(--umsh-text-xs, 12px) !important; }
.job-teaser-retry { display: block; flex: 0 0 auto; color: rgba(255, 247, 242, .78); font-size: var(--umsh-text-xs, 12px); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 360px) {
  .job-teaser-status-row { align-items: flex-start; flex-direction: column; gap: 7px; }
}

/* 퇴사운은 실제 입력 표가 긴 문장을 담는다. 셀 안에서 줄을 바꾸고 화면 자체에는
   가로 스크롤을 만들지 않는다. 오행 차트 역시 저장 사주의 계산값만 표시한다. */
[data-umsh-slot="preview"] .quit-teaser-reading .story-table-figure,
[data-umsh-slot="preview"] .quit-teaser-reading .story-chart-figure { margin: 22px 0 0; padding: 16px; border: 1px solid rgba(48, 240, 223, .2); border-radius: 12px; background: rgba(0, 0, 0, .22); }
[data-umsh-slot="preview"] .quit-teaser-reading .story-table-scroll { overflow: visible; }
[data-umsh-slot="preview"] .quit-teaser-reading .story-table { width: 100%; table-layout: fixed; }
[data-umsh-slot="preview"] .quit-teaser-reading .story-table th,
[data-umsh-slot="preview"] .quit-teaser-reading .story-table td { white-space: normal; overflow-wrap: anywhere; word-break: keep-all; vertical-align: top; }
[data-umsh-slot="preview"] .quit-teaser-reading .story-table th:first-child,
[data-umsh-slot="preview"] .quit-teaser-reading .story-table td:first-child { width: 34%; }
.quit-teaser-opening,
.quit-teaser-final-cta { background: linear-gradient(145deg, rgba(13, 35, 32, .96), rgba(10, 13, 22, .98)); }
.quit-teaser-reading { border-color: rgba(48, 240, 223, .2); }

/* 저축운 표에는 사용자가 직접 적은 긴 문장이 들어간다. 화면 안에서 줄바꿈하고,
   오행 차트는 저장 사주의 서버 계산값만 표시한다. */
[data-umsh-slot="preview"] .money-teaser-reading .story-table-figure,
[data-umsh-slot="preview"] .money-teaser-reading .story-chart-figure,
[data-umsh-slot="preview"] .money-teaser-reading .money-flow-figure,
[data-umsh-slot="preview"] .move-teaser-reading .story-table-figure,
[data-umsh-slot="preview"] .move-teaser-reading .story-chart-figure,
[data-umsh-slot="preview"] .move-teaser-reading .money-flow-figure,
[data-umsh-slot="preview"] .couple-teaser-reading .story-table-figure,
[data-umsh-slot="preview"] .couple-teaser-reading .story-chart-figure,
[data-umsh-slot="preview"] .couple-teaser-reading .money-flow-figure,
[data-umsh-slot="preview"] .marry-teaser-reading .story-table-figure,
[data-umsh-slot="preview"] .marry-teaser-reading .story-chart-figure,
[data-umsh-slot="preview"] .marry-teaser-reading .money-flow-figure { margin: 22px 0 0; padding: 16px; border: 1px solid rgba(112, 194, 146, .24); border-radius: 12px; background: rgba(0, 0, 0, .22); }
[data-umsh-slot="preview"] .money-teaser-reading .story-table-scroll,
[data-umsh-slot="preview"] .move-teaser-reading .story-table-scroll,
[data-umsh-slot="preview"] .couple-teaser-reading .story-table-scroll,
[data-umsh-slot="preview"] .marry-teaser-reading .story-table-scroll { overflow: visible; }
[data-umsh-slot="preview"] .money-teaser-reading .story-table,
[data-umsh-slot="preview"] .move-teaser-reading .story-table,
[data-umsh-slot="preview"] .couple-teaser-reading .story-table,
[data-umsh-slot="preview"] .marry-teaser-reading .story-table { width: 100%; table-layout: fixed; }
/* Keep the established shared preview contract stable for regression checks and older cached pages. */
[data-umsh-slot="preview"] .money-teaser-reading .story-table,
[data-umsh-slot="preview"] .move-teaser-reading .story-table,
[data-umsh-slot="preview"] .couple-teaser-reading .story-table { width: 100%; table-layout: fixed; }
[data-umsh-slot="preview"] .money-teaser-reading .story-table th,
[data-umsh-slot="preview"] .money-teaser-reading .story-table td,
[data-umsh-slot="preview"] .move-teaser-reading .story-table th,
[data-umsh-slot="preview"] .move-teaser-reading .story-table td,
[data-umsh-slot="preview"] .couple-teaser-reading .story-table th,
[data-umsh-slot="preview"] .couple-teaser-reading .story-table td,
[data-umsh-slot="preview"] .marry-teaser-reading .story-table th,
[data-umsh-slot="preview"] .marry-teaser-reading .story-table td {
  min-width: 0;
  padding: 10px 9px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
  vertical-align: top;
}
[data-umsh-slot="preview"] .money-teaser-reading .story-table th:first-child,
[data-umsh-slot="preview"] .money-teaser-reading .story-table td:first-child,
[data-umsh-slot="preview"] .move-teaser-reading .story-table th:first-child,
[data-umsh-slot="preview"] .move-teaser-reading .story-table td:first-child,
[data-umsh-slot="preview"] .couple-teaser-reading .story-table th:first-child,
[data-umsh-slot="preview"] .couple-teaser-reading .story-table td:first-child,
[data-umsh-slot="preview"] .marry-teaser-reading .story-table th:first-child,
[data-umsh-slot="preview"] .marry-teaser-reading .story-table td:first-child { width: 27%; }
.money-teaser-reading { border-color: rgba(112, 194, 146, .28); }
.move-teaser-reading { border-color: rgba(216, 169, 79, .34); }
.move-teaser-opening,
.move-teaser-final-cta { background: linear-gradient(145deg, rgba(42, 14, 17, .98), rgba(10, 13, 22, .98)); }
.move-teaser-reading .story-image { aspect-ratio: 3 / 2; }
.move-teaser-reading .story-image img { object-position: center 22%; }
.couple-teaser-reading { border-color: rgba(131, 243, 237, .28); }
.couple-teaser-opening,
.couple-teaser-final-cta { background: linear-gradient(145deg, rgba(7, 42, 45, .97), rgba(10, 13, 22, .98)); }
.couple-teaser-reading .story-image { aspect-ratio: 3 / 2; }
.couple-teaser-reading .story-image img { object-position: center 28%; }
.marry-teaser-reading { border-color: rgba(240, 192, 111, .32); }
.marry-teaser-opening,
.marry-teaser-final-cta { background: linear-gradient(145deg, rgba(52, 17, 17, .98), rgba(10, 13, 22, .98)); }
.marry-teaser-reading .story-image { aspect-ratio: 3 / 2; background: #1b0d0d; }
.marry-teaser-reading .story-image img { object-position: center 24%; }
.marry-teaser-reading .story-chart-fill { background: linear-gradient(90deg, #d76d67, #f0c06f); }
.marry-teaser-reading .money-flow li { border-left-color: rgba(240, 192, 111, .76); background: rgba(240, 192, 111, .08); }
.marry-teaser-reading .money-flow li + li::before,
.marry-teaser-reading .money-flow-label { color: #f0c06f; }
.money-flow { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.money-flow li { position: relative; display: grid; gap: 4px; padding: 12px 12px 12px 16px; border-left: 3px solid rgba(112, 194, 146, .72); border-radius: 0 9px 9px 0; background: rgba(112, 194, 146, .08); }
.money-flow li + li::before { content: "↓"; position: absolute; top: -15px; left: -10px; color: #70c292; font-weight: var(--umsh-weight-bold, 700); }
.money-flow-label { color: #9bd8b5; font-size: var(--umsh-text-2xs, 11px); font-weight: var(--umsh-weight-bold, 700); }
.money-flow strong { min-width: 0; color: #fff8e9; font-size: var(--umsh-text-md, 14px); line-height: 1.45; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; }
.money-flow small { min-width: 0; color: rgba(255,255,255,.68); font-size: var(--umsh-text-xs, 12px); line-height: 1.5; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; }
.money-flow-figure figcaption { min-width: 0; margin-top: 10px; color: rgba(255,255,255,.6); font-size: var(--umsh-text-xs, 12px); line-height: 1.6; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; }

@media (max-width: 360px) {
  .job-teaser-reading-inner { padding-inline: 15px; }
}

@media (max-width: 430px) {
  [data-umsh-slot="preview"] .money-teaser-reading .story-table thead,
  [data-umsh-slot="preview"] .move-teaser-reading .story-table thead,
  [data-umsh-slot="preview"] .couple-teaser-reading .story-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  [data-umsh-slot="preview"] .marry-teaser-reading .story-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  [data-umsh-slot="preview"] .money-teaser-reading .story-table,
  [data-umsh-slot="preview"] .money-teaser-reading .story-table tbody,
  [data-umsh-slot="preview"] .money-teaser-reading .story-table tr,
  [data-umsh-slot="preview"] .money-teaser-reading .story-table td,
  [data-umsh-slot="preview"] .move-teaser-reading .story-table,
  [data-umsh-slot="preview"] .move-teaser-reading .story-table tbody,
  [data-umsh-slot="preview"] .move-teaser-reading .story-table tr,
  [data-umsh-slot="preview"] .move-teaser-reading .story-table td,
  [data-umsh-slot="preview"] .couple-teaser-reading .story-table,
  [data-umsh-slot="preview"] .couple-teaser-reading .story-table tbody,
  [data-umsh-slot="preview"] .couple-teaser-reading .story-table tr,
  [data-umsh-slot="preview"] .couple-teaser-reading .story-table td,
  [data-umsh-slot="preview"] .marry-teaser-reading .story-table,
  [data-umsh-slot="preview"] .marry-teaser-reading .story-table tbody,
  [data-umsh-slot="preview"] .marry-teaser-reading .story-table tr,
  [data-umsh-slot="preview"] .marry-teaser-reading .story-table td { display: block; width: 100%; }
  [data-umsh-slot="preview"] .money-teaser-reading .story-table tr,
  [data-umsh-slot="preview"] .move-teaser-reading .story-table tr,
  [data-umsh-slot="preview"] .couple-teaser-reading .story-table tr,
  [data-umsh-slot="preview"] .marry-teaser-reading .story-table tr { padding: 8px 0; border-bottom: 1px solid rgba(112, 194, 146, .16); }
  [data-umsh-slot="preview"] .money-teaser-reading .story-table tr:last-child,
  [data-umsh-slot="preview"] .move-teaser-reading .story-table tr:last-child,
  [data-umsh-slot="preview"] .couple-teaser-reading .story-table tr:last-child,
  [data-umsh-slot="preview"] .marry-teaser-reading .story-table tr:last-child { border-bottom: 0; }
  [data-umsh-slot="preview"] .money-teaser-reading .story-table td,
  [data-umsh-slot="preview"] .money-teaser-reading .story-table td:first-child,
  [data-umsh-slot="preview"] .move-teaser-reading .story-table td,
  [data-umsh-slot="preview"] .move-teaser-reading .story-table td:first-child,
  [data-umsh-slot="preview"] .couple-teaser-reading .story-table td,
  [data-umsh-slot="preview"] .couple-teaser-reading .story-table td:first-child,
  [data-umsh-slot="preview"] .marry-teaser-reading .story-table td,
  [data-umsh-slot="preview"] .marry-teaser-reading .story-table td:first-child { display: grid; grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); gap: 8px; width: 100%; padding: 5px 0; border: 0; }
  [data-umsh-slot="preview"] .money-teaser-reading .story-table td::before,
  [data-umsh-slot="preview"] .move-teaser-reading .story-table td::before,
  [data-umsh-slot="preview"] .couple-teaser-reading .story-table td::before,
  [data-umsh-slot="preview"] .marry-teaser-reading .story-table td::before { min-width: 0; content: attr(data-label); color: #f0c06f; font-size: var(--umsh-text-2xs, 11px); font-weight: var(--umsh-weight-bold, 700); line-height: 1.55; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; }
}
/* Compatibility group retained for the three earlier rich-preview services. */
[data-umsh-slot="preview"] .money-teaser-reading .story-table td,
[data-umsh-slot="preview"] .move-teaser-reading .story-table td,
[data-umsh-slot="preview"] .couple-teaser-reading .story-table td {
  white-space: normal;
  overflow-wrap: anywhere;
}

.marry-analysis-loading { display: none; margin: 14px 16px; padding: 18px; border: 1px solid rgba(240, 192, 111, .42); border-radius: 14px; background: rgba(52, 17, 17, .94); color: #fff7ec; text-align: center; }
.marry-analysis-loading.is-visible { display: grid; justify-items: center; gap: 8px; }
.marry-analysis-loading > span { width: 34px; height: 34px; border: 3px solid rgba(240, 192, 111, .22); border-top-color: #f0c06f; border-radius: 50%; animation: marry-analysis-spin .8s linear infinite; }
.marry-analysis-loading strong { font-size: var(--umsh-text-base, 16px); }
.marry-analysis-loading p { margin: 0; color: rgba(255, 239, 220, .76); font-size: var(--umsh-text-sm, 13px); line-height: 1.65; word-break: keep-all; }
@keyframes marry-analysis-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .marry-analysis-loading > span { animation: none; border-color: #f0c06f; } }

/* ── 접근 차단 안내 ─────────────────────────────────────── */
.umsh-gate-message {
  margin: 0 0 8px;
  font-size: var(--umsh-text-md, 14px);
  line-height: 1.7;
  word-break: keep-all;
}
.umsh-gate-actions {
  margin: 0;
  font-size: var(--umsh-text-sm, 13px);
}
.umsh-gate-actions a { color: var(--gold, #e8c76f); }

/* 모션을 줄여 달라고 한 사용자에게는 애니메이션을 멈춘다. */
@media (prefers-reduced-motion: reduce) {
  .umsh-progress-fill { transition: none; }
  .interpret-progress::before { animation: none; transform: none; width: 100%; opacity: .5; }
}

/* ── 톤 v2 섹션 블록 ─────────────────────────────────────── */
[data-umsh-slot="sections"] .story-image {
  margin: 0 0 14px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--line, rgba(222, 188, 113, .24));
  border-radius: 14px;
  background: var(--panel, rgba(255, 255, 255, .045));
}
[data-umsh-slot="sections"] .story-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reading-feel .reading-role,
.reading-bridge .reading-role,
.reading-scene .reading-role { color: var(--gold-soft, #f2dc9a); }

.story-actions {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
.story-actions li {
  font-size: var(--umsh-text-md, 14px);
  line-height: 1.7;
  word-break: keep-all;
}

/* 표 — 좁은 화면에서는 표 컨테이너만 가로 스크롤한다 */
.story-table-figure { margin: 0 0 14px; }
.story-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.story-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--umsh-text-sm, 13px);
  font-variant-numeric: tabular-nums;
}
.story-table th,
.story-table td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line, rgba(222, 188, 113, .2));
  white-space: nowrap;
}
.story-table th {
  font-weight: var(--umsh-weight-bold, 700);
  color: var(--gold, #e8c76f);
  border-bottom-width: 2px;
}
.story-table tbody tr:last-child td { border-bottom: 0; }
.story-table-figure figcaption,
.story-chart-figure figcaption {
  margin-top: 8px;
  font-size: var(--umsh-text-xs, 12px);
  line-height: 1.6;
  color: var(--muted, rgba(255, 247, 223, .7));
  word-break: keep-all;
}

/* 차트 — 단일 계열 수평 막대.
   값과 설명을 전부 글자로 붙여 색만으로 정보를 전달하지 않는다.
   막대 색은 다크 표면 기준으로 검증한 값이다(lightness band·대비 PASS). */
.story-chart-figure { margin: 0 0 14px; --viz-series: #c98500; }
.story-chart { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.story-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.story-chart-label {
  font-size: var(--umsh-text-sm, 13px);
  font-weight: var(--umsh-weight-bold, 700);
  word-break: keep-all;
}
.story-chart-value {
  font-size: var(--umsh-text-sm, 13px);
  font-variant-numeric: tabular-nums;
  color: var(--muted, rgba(255, 247, 223, .78));
}
.story-chart-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.story-chart-fill {
  height: 100%;
  /* 데이터 끝만 둥글게. 기준선 쪽은 각지게 붙인다. */
  border-radius: 0 4px 4px 0;
  background: var(--viz-series);
}
.story-chart-note {
  margin: 6px 0 0;
  font-size: var(--umsh-text-xs, 12px);
  line-height: 1.6;
  color: var(--muted, rgba(255, 247, 223, .7));
  word-break: keep-all;
}

/* 근거 칩 */
.story-evidence { margin-top: 12px; }
.story-evidence ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.story-evidence li {
  padding: 4px 10px;
  border: 1px solid var(--line, rgba(222, 188, 113, .28));
  border-radius: 999px;
  font-size: var(--umsh-text-2xs, 11px);
  line-height: 1.6;
  color: var(--muted, rgba(255, 247, 223, .78));
}


/* 올해 연애운: 따뜻한 실사진과 실제 입력 표·네 기둥·다섯 기운을 한 카드 안에서 읽는다. */
[data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table-figure,
[data-umsh-slot="preview"] .love-this-year-teaser-reading .story-chart-figure,
[data-umsh-slot="preview"] .love-this-year-teaser-reading .money-flow-figure { margin: 22px 0 0; padding: 16px; border: 1px solid rgba(255, 150, 187, .26); border-radius: 12px; background: rgba(19, 8, 17, .7); }
[data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table-scroll { overflow: visible; }
[data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table { width: 100%; table-layout: fixed; }
[data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table th,
[data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table td { min-width: 0; padding: 10px 9px; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; vertical-align: top; }
[data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table th:first-child,
[data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table td:first-child { width: 27%; }
.love-this-year-teaser-reading { border-color: rgba(255, 150, 187, .34); }
.love-this-year-teaser-opening,
.love-this-year-teaser-final-cta { background: linear-gradient(145deg, rgba(54, 20, 39, .98), rgba(10, 13, 22, .98)); }
.love-this-year-teaser-reading .story-image { aspect-ratio: 4 / 5; background: #1d1018; }
.love-this-year-teaser-reading .story-image img { object-position: center 18%; }
.love-this-year-teaser-reading .story-chart-fill { background: linear-gradient(90deg, #ff8fb8, #f5cf94); }
.love-this-year-teaser-reading .money-flow li { border-left-color: rgba(255, 150, 187, .78); background: rgba(255, 150, 187, .08); }
.love-this-year-teaser-reading .money-flow li + li::before,
.love-this-year-teaser-reading .money-flow-label { color: #ffb8d1; }

[data-umsh-slot="preview"] .cat-teaser-reading .story-table-figure,
[data-umsh-slot="preview"] .cat-teaser-reading .story-chart-figure,
[data-umsh-slot="preview"] .cat-teaser-reading .money-flow-figure { margin: 22px 0 0; padding: 16px; border: 1px solid rgba(168, 255, 31, .22); border-radius: 12px; background: rgba(8, 14, 6, .76); }
[data-umsh-slot="preview"] .cat-teaser-reading .story-table-scroll { overflow: visible; }
[data-umsh-slot="preview"] .cat-teaser-reading .story-table { width: 100%; table-layout: fixed; }
[data-umsh-slot="preview"] .cat-teaser-reading .story-table th,
[data-umsh-slot="preview"] .cat-teaser-reading .story-table td { min-width: 0; padding: 10px 9px; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; vertical-align: top; }
[data-umsh-slot="preview"] .cat-teaser-reading .story-table th:first-child,
[data-umsh-slot="preview"] .cat-teaser-reading .story-table td:first-child { width: 27%; }
.cat-teaser-reading { border-color: rgba(168, 255, 31, .3); }
.cat-teaser-opening,
.cat-teaser-final-cta { border-color: rgba(168, 255, 31, .24); }
.cat-teaser-reading .story-image { aspect-ratio: 4 / 5; background: #101609; }
.cat-teaser-reading .story-image img { object-position: center 20%; }
.cat-teaser-reading .story-chart-fill { background: linear-gradient(90deg, #a8ff1f, #f4ca6a); }
.cat-teaser-reading .money-flow li { border-left-color: rgba(168, 255, 31, .72); background: rgba(168, 255, 31, .07); }
.cat-teaser-reading .money-flow li + li::before,
.cat-teaser-reading .money-flow-label { color: #caff73; }

@media (max-width: 430px) {
  [data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  [data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table,
  [data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table tbody,
  [data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table tr,
  [data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table td { display: block; width: 100%; }
  [data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table tr { padding: 8px 0; border-bottom: 1px solid rgba(255, 150, 187, .16); }
  [data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table tr:last-child { border-bottom: 0; }
  [data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table td,
  [data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table td:first-child { display: grid; grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); gap: 8px; width: 100%; padding: 5px 0; border: 0; }
  [data-umsh-slot="preview"] .love-this-year-teaser-reading .story-table td::before { min-width: 0; content: attr(data-label); color: #ffb8d1; font-size: var(--umsh-text-2xs, 11px); font-weight: var(--umsh-weight-bold, 700); line-height: 1.55; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; }
  [data-umsh-slot="preview"] .cat-teaser-reading .story-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  [data-umsh-slot="preview"] .cat-teaser-reading .story-table,
  [data-umsh-slot="preview"] .cat-teaser-reading .story-table tbody,
  [data-umsh-slot="preview"] .cat-teaser-reading .story-table tr,
  [data-umsh-slot="preview"] .cat-teaser-reading .story-table td { display: block; width: 100%; }
  [data-umsh-slot="preview"] .cat-teaser-reading .story-table tr { padding: 8px 0; border-bottom: 1px solid rgba(168, 255, 31, .14); }
  [data-umsh-slot="preview"] .cat-teaser-reading .story-table tr:last-child { border-bottom: 0; }
  [data-umsh-slot="preview"] .cat-teaser-reading .story-table td,
  [data-umsh-slot="preview"] .cat-teaser-reading .story-table td:first-child { display: grid; grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); gap: 8px; width: 100%; padding: 5px 0; border: 0; }
  [data-umsh-slot="preview"] .cat-teaser-reading .story-table td::before { min-width: 0; content: attr(data-label); color: #caff73; font-size: var(--umsh-text-2xs, 11px); font-weight: var(--umsh-weight-bold, 700); line-height: 1.55; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; }
}