/* 무료 결과지 v3 — 중앙정렬. 한 화면에 한 메시지. */
.chart-overview { font-family: var(--sans); text-align: center; }

.ov-section { margin: 0 0 34px; padding: 26px 18px 28px; background: linear-gradient(160deg,#faf9fd,#f3f5f9); border: 1px solid #e8e6ee; border-radius: 18px; }
.ov-kicker { margin: 0 0 10px; font: 600 12px/1 var(--serif); letter-spacing: .22em; color: #a08a5f; }
.ov-title { margin: 0 auto 12px; max-width: 15em; font-size: 22.5px; line-height: 1.45; letter-spacing: -.02em; color: #2f3947; }
.ov-title::after { content: ''; display: block; width: 34px; height: 1px; margin: 14px auto 0; background: #cbb98f; }
.ov-lead { margin: 0 auto 20px; max-width: 24em; font-size: 15.5px; line-height: 1.8; color: #5c6675; }
.ov-foot { margin: 16px auto 0; max-width: 26em; font-size: 12px; line-height: 1.7; color: #8b929d; }

/* 해석 문단. 본문은 좌측 정렬로 읽고, 블록 자체는 가운데 놓는다. */
.ov-para { max-width: 27em; margin: 18px auto 0; text-align: left; }
.ov-para p { margin: 0 0 13px; font-size: 16px; line-height: 1.85; color: #3f4854; }
.ov-para p:last-child { margin-bottom: 0; }

/* 0 · 명식 — 설명 없는 시각 배지 */
.ov-pillars { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; max-width: 340px; margin: 4px auto 0; }
.ov-pillar { border-radius: 13px; background: #fff; border: 1px solid #e6e9ef; padding: 11px 4px 12px; }
.ov-pillar.is-day { border-color: #9bacc3; background: #edf2f8; }
.ov-pillar-label { display: block; font-size: 11px; font-weight: 700; color: #667a96; margin-bottom: 6px; }
.ov-pillar-god { display: block; min-height: 15px; color: #82693d; font-size: 10px; font-weight: 700; line-height: 15px; }
.ov-pillar-god.is-bottom { margin-top: 5px; }
.ov-char { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0; }
.ov-char + .ov-char { border-top: 1px solid #edf0f4; }
.ov-char strong { font: 600 27px/1.1 var(--serif); color: #384653; }
.ov-char small { font-size: 10px; color: #6c737e; display: flex; align-items: center; gap: 4px; }
.ov-polarity { position: absolute; top: 7px; right: 5px; color: #82693d; font: 800 12px/1 var(--sans); }
.ov-char small::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--element-color,#c5cbd3); }
.ov-quote { margin: 22px auto 0; max-width: 24em; padding: 0; }
.ov-quote p { margin: 0 0 8px; font: 600 17px/1.7 var(--serif); color: #3f4854; }
.ov-quote p::before { content: '\201C'; display: block; font-size: 26px; color: #cbb98f; line-height: 1; margin-bottom: 2px; }
.ov-quote small { font-size: 13px; color: #7a6642; }
.ov-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 20px auto 0; max-width: 30em; }
.ov-chips span { padding: 8px 14px; border: 1px solid #ddd5c2; border-radius: 999px; background: #fffdf7; font-size: 13px; line-height: 1.5; color: #6d6350; }

/* 2 · 레이더 + 슬라이더 */
.ov-radar { display: block; width: 100%; max-width: 360px; margin: 4px auto 0; overflow: visible; }
.ov-radar-web { fill: none; stroke: #dfe3ea; stroke-width: 1; }
.ov-radar-shape { fill: #c9a86a33; stroke: #b9985a; stroke-width: 1.6; }
.ov-radar-label { font-size: 10.5px; fill: #6b7482; }
.ov-radar-score { font-size: 11px; font-weight: 700; fill: #3f4854; }
.ov-sliders { display: grid; gap: 11px; max-width: 340px; margin: 22px auto 0; }
.ov-slider { display: grid; grid-template-columns: minmax(58px, auto) 1fr minmax(58px, auto); align-items: center; gap: 10px; }
.ov-slider-side { font-size: 12px; color: #6b7482; white-space: nowrap; }
.ov-slider-side:last-child { text-align: right; }
.ov-slider-track { position: relative; height: 4px; border-radius: 4px; background: linear-gradient(90deg,#e3e7ee,#d8cdb4); }
.ov-slider-dot { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: #b9985a; border: 2px solid #fff; box-shadow: 0 1px 4px #0002; transform: translate(-50%,-50%); }

/* 4 · 오행 막대 + 기운 저울 */
.ov-bars { display: grid; gap: 10px; max-width: 320px; margin: 4px auto 0; }
.ov-bar-row { display: grid; grid-template-columns: 44px 1fr 38px; align-items: center; gap: 10px; }
.ov-bar-label { font-size: 13px; color: #5c6675; text-align: left; }
.ov-bar-row > strong { font-size: 13px; color: #5c6675; text-align: right; font-variant-numeric: tabular-nums; }
.ov-track { display: block; height: 7px; border-radius: 7px; background: #e7eaef; overflow: hidden; }
.ov-fill { display: block; height: 100%; border-radius: inherit; }
.ov-scale { max-width: 320px; margin: 24px auto 0; }
.ov-scale-meter { position: relative; height: 7px; border-radius: 7px; background: #e2e0ea; overflow: visible; }
.ov-scale-fill { position: absolute; inset: 0 auto 0 0; width: var(--support,50%); border-radius: inherit; background: linear-gradient(90deg,#b9985a,#cbb98f); }
.ov-scale-dot { position: absolute; top: 50%; left: var(--support,50%); width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #9a7f4d; transform: translate(-50%,-50%); }
.ov-scale-legend { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: 12px; color: #6b7482; }
.ov-scale-legend > * { white-space: nowrap; }
@media (max-width: 360px) { .ov-scale-legend { font-size: 11px; } }

/* 5 · 대운 라인차트 */
.ov-line-scroll { overflow-x: auto; margin: 4px -8px 0; padding: 0 8px; -webkit-overflow-scrolling: touch; }
.ov-line { display: block; height: 218px; }
.ov-line-grid { stroke: #e4e7ed; stroke-width: 1; }
.ov-line-band-label { font-size: 8.5px; fill: #99a1ad; }
.ov-line-path { fill: none; stroke: #c2ad83; stroke-width: 1.8; stroke-linejoin: round; }
.ov-line-dot { cursor: pointer; }
.ov-line-dot.is-now { stroke: #fff; stroke-width: 2.5; }
.ov-line-dot:focus { outline: none; stroke: #6f5a35; stroke-width: 2.5; }
.ov-line-score { font-size: 9px; font-weight: 700; fill: #9a7f4d; }
.ov-line-ten-god { font-size: 9px; font-weight: 700; fill: #687486; }
.ov-line-year { font-size: 9px; fill: #99a1ad; }
.ov-line-note { margin: 5px auto 0; font-size: 11px; color: #8b929d; }
.ov-line-current { max-width: 340px; margin: 12px auto 0; padding: 12px 14px; border: 1px solid #ddd5c2; border-radius: 12px; background: #fffdf7; text-align: left; }
.ov-line-current-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; color: #8b929d; font-size: 12px; }
.ov-line-current-title strong { color: #4a514f; font-size: 15px; font-variant-numeric: tabular-nums; }
.ov-line-current-score { margin: 5px 0 2px; color: #7a6642; font: 600 16px/1.4 var(--serif); }
.ov-line-current-detail { display: block; color: #89919c; font-size: 11px; }
.ov-line-detail { display: grid; gap: 3px; max-width: 340px; margin: 10px auto 0; padding: 10px 12px; border: 1px solid #e3ddcf; border-radius: 10px; background: #fffdf8; text-align: left; }
.ov-line-detail strong { font-size: 13px; color: #4a514f; }
.ov-line-detail span { font-size: 12px; color: #7a6642; }
.ov-line-detail small { font-size: 11px; color: #89919c; }

/* 6 · 3년 */
.ov-year-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; max-width: 330px; margin: 4px auto 0; }
.ov-year-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 92px; padding: 14px 11px 12px; border: 1px solid #dfe3e8; border-radius: 9px; background: #fff; text-align: left; }
.ov-year-card strong { font-size: 18px; line-height: 1.2; color: #303944; font-variant-numeric: tabular-nums; }
.ov-year-card span { width: 100%; margin-top: auto; padding-top: 9px; border-top: 1px solid #edf0f3; font: 600 14px/1.2 var(--serif); color: #4f5966; }
.ov-year-card small { margin-top: 4px; font-size: 10px; color: #89919c; }

/* 7 · 사람 */
.ov-people-rows { display: grid; gap: 10px; max-width: 340px; margin: 4px auto 0; }
.ov-people-row { padding: 15px 16px; background: #fff; border: 1px solid #e6e9ef; border-radius: 13px; }
.ov-people-label { display: block; font-size: 12px; color: #8b929d; margin-bottom: 5px; }
.ov-people-value { display: block; font: 600 15px/1.6 var(--serif); color: #3f4854; }

/* 잠금 — 질문은 읽히고 답만 막힌다 */
.ov-slot { display: inline-flex; align-items: baseline; gap: 2px; font-size: 14.5px; color: #3f4854; }
.ov-slot-text { white-space: pre; }
.ov-lock { display: inline-block; height: 15px; margin: 0 3px 0 0; border-radius: 4px; vertical-align: -2px;
  background: linear-gradient(100deg,#ded7ca,#ece7dc 45%,#ded7ca); }
.ov-lock-full { width: 150px; }
.ov-lock-mid { width: 74px; }
.ov-lock-short { width: 44px; }
.ov-lock-year { width: 34px; }
.ov-lock-digit { width: 11px; }
.ov-lock-month { width: 22px; }
.ov-locked-line { max-width: 27em; margin: 16px auto 0; padding: 14px 16px; background: #fff; border: 1px solid #ebe6dc; border-radius: 12px; text-align: left; }
.ov-locked-year { margin: 0 0 6px; font: 700 13px var(--sans); color: #9a7f4d; font-variant-numeric: tabular-nums; }
.ov-locked-q { margin: 0 0 9px; font-size: 14.5px; line-height: 1.75; color: #3f4854; }
.ov-locked-open { margin: 0; font-size: 14.5px; line-height: 1.75; color: #3f4854; }
.ov-locked-a { margin: 0; line-height: 1.9; }
.ov-locked-a em { font-style: normal; font-size: 12px; color: #8b929d; margin-right: 7px; }

/* 3 · 개인화 목차 */
.ov-toc-row { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid #ece8e0; text-align: left; }
.ov-toc-row:first-child { border-top: 0; }
.ov-toc-row > small { font: 700 12px var(--sans); color: #bfae8a; padding-top: 3px; }
.ov-toc-fact { margin: 0 0 6px; font-size: 14px; line-height: 1.7; color: #7a6642; font-weight: 600; }
.ov-toc-q { margin: 0 0 8px; font-size: 14.5px; line-height: 1.75; color: #3f4854; }
.ov-toc-a { margin: 0; line-height: 1.9; }
.ov-toc-a em { font-style: normal; font-size: 12px; color: #8b929d; margin-right: 7px; }

/* 접힘 — 명리에 관심 있는 사람만 연다 */
.ov-more { max-width: 360px; margin: 20px auto 0; border: 1px solid #e5e8ec; border-radius: 12px; background: #fff; }
.ov-more summary { padding: 14px; font-size: 13.5px; color: #6b7482; cursor: pointer; }
.ov-more summary:focus-visible { outline: 2px solid #7d9fbf; outline-offset: 2px; border-radius: 10px; }
.ov-more > * { text-align: left; }

/* 무료에서는 지장간 수치 대신 주월이 심층 해설의 범위를 알려 준다. */
.ov-juwol-note { display: grid; grid-template-columns: 54px 1fr; align-items: end; gap: 10px;
  max-width: 360px; margin: 24px auto 0; text-align: left; }
.ov-juwol-note-face { display: block; width: 54px; height: 54px; border: 1px solid #ddd6c7;
  border-radius: 50%; background: #fffdf7; object-fit: cover; }
.ov-juwol-note p { position: relative; margin: 0; padding: 11px 13px; border: 1px solid #ddd6c7;
  border-radius: 14px 14px 14px 4px; background: #fffdf7; font-size: 13px; line-height: 1.65;
  color: #4a4335; }
.ov-juwol-note p::before { content: ''; position: absolute; left: -7px; bottom: 9px; width: 12px;
  height: 12px; border-left: 1px solid #ddd6c7; border-bottom: 1px solid #ddd6c7;
  background: #fffdf7; transform: rotate(45deg); }

@media (max-width: 400px) {
  .ov-section { padding: 22px 14px 24px; }
  .ov-title { font-size: 20.5px; }
  .ov-slider { grid-template-columns: minmax(52px, auto) 1fr minmax(52px, auto); gap: 8px; }
  .ov-slider-side { font-size: 11.5px; }
}

/* ── 마케팅 섹션 — 해석 섹션과 같은 뼈대를 쓰되 바탕만 다르다 ── */
.ov-sales { background: linear-gradient(160deg,#fffdf8,#f7f3e9); border-color: #e9e0cd; }
.ov-sales .ov-lead strong { color: #7a6642; }
.ov-trust-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; max-width: 360px; margin: 4px auto 0; }
.ov-trust-grid article { padding: 14px 12px; background: #fff; border: 1px solid #ece4d4; border-radius: 12px; }
.ov-trust-grid strong { display: block; font-size: 13.5px; color: #7a6642; margin-bottom: 5px; }
.ov-trust-grid p { margin: 0; font-size: 12.5px; line-height: 1.7; color: #6b7482; }
.ov-toc-list { max-width: 360px; margin: 4px auto 0; padding: 4px 16px; background: #fff; border: 1px solid #ece4d4; border-radius: 14px; }
.ov-toc-chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 30em; margin: 20px auto 0; }
.ov-toc-chapters small { width: 100%; font-size: 12px; color: #8b929d; margin-bottom: 3px; }
.ov-toc-chapters span { padding: 7px 12px; border: 1px solid #e2d8c3; border-radius: 999px; font-size: 12.5px; color: #7a6642; background: #fffdf7; }
.ov-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin: 22px auto 0; padding: 16px 28px;
  background: #2f3947; color: #f6f2e8; border-radius: 999px; font-size: 15.5px; font-weight: 600; text-decoration: none; }
.ov-cta:focus-visible { outline: 2px solid #b9985a; outline-offset: 3px; }
.ov-offer { max-width: 360px; margin: 28px auto 0; text-align: center; }
.ov-offer-price { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 0; font-family: var(--sans); }
.ov-offer-price del { color: #a8a096; font-size: 14px; text-decoration-thickness: 1px; }
.ov-offer-price strong { color: #2f3947; font-size: 25px; line-height: 1.2; letter-spacing: -.04em; }
.ov-offer .ov-cta { display: flex; width: 100%; margin-top: 12px; box-sizing: border-box; }
.ov-offer-hook { margin: 11px auto 0; max-width: 26em; color: #7a6e5c; font: 500 13px/1.65 var(--sans); letter-spacing: -.015em; }

/* 실제 계산 데모 — 한지 위 장부 한 장. 계기판·네온 없이 글자와 가는 선으로만 보여 준다.
   움직임은 스크롤로 들어올 때 한 번: 글자가 드러나고, 막대가 차고, 관계선이 그어진다(1초 안). */
.ov-calc-demo { --calc-ink: #2b2620; --calc-soft: #6f6556; --calc-gold: #a3854f; --calc-line: #e6dccb;
  box-sizing: border-box; width: 100%; max-width: 430px; margin: 30px auto 28px; padding: 26px 22px 22px;
  border: 1px solid #e0d5c0; border-radius: 4px; background: #fffdf8; text-align: left;
  box-shadow: 0 1px 0 #fff inset, 0 18px 36px -28px #4a3a2240; }
.ov-calc-demo *, .ov-calc-demo *::before, .ov-calc-demo *::after { box-sizing: border-box; }
.ov-calc-heading { display: grid; gap: 8px; margin-bottom: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--calc-ink); }
.ov-calc-live { color: var(--calc-gold); font: 600 11px/1.4 var(--sans); letter-spacing: .14em; }
.ov-calc-heading strong { color: var(--calc-ink); font: 700 22px/1.35 var(--serif); letter-spacing: -.04em; }
.ov-calc-sub { margin: 0; color: var(--calc-soft); font: 400 13px/1.75 var(--sans); word-break: keep-all; }

.ov-calc-stage { padding: 22px 0 4px; }
.ov-calc-stage + .ov-calc-stage { border-top: 1px solid var(--calc-line); }
.ov-calc-label { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; color: var(--calc-ink); font: 600 14px/1.5 var(--sans); letter-spacing: -.02em; word-break: keep-all; }
.ov-calc-step { flex: 0 0 auto; color: var(--calc-gold); font: 700 15px/1 var(--serif); }
.ov-calc-note { margin: -6px 0 14px; color: #8a8171; font: 12px/1.65 var(--sans); word-break: keep-all; }

.ov-calc-glyphs { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 0; border: 1px solid var(--calc-line); border-radius: 3px; overflow: hidden; }
.ov-calc-glyph { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 12px 2px 10px; background: #fffdf8;
  box-shadow: inset 0 -2px 0 color-mix(in srgb,var(--calc-color) 70%,white); }
.ov-calc-glyph + .ov-calc-glyph { border-left: 1px solid var(--calc-line); }
.ov-calc-glyph:nth-child(2n+1) { border-left-color: #cfc3ac; }
.ov-calc-glyph strong { color: color-mix(in srgb,var(--calc-color) 82%,#2b2620); font: 600 21px/1.1 var(--serif); }
.ov-calc-glyph small { color: #857c6d; font: 11px/1.4 var(--sans); }
.ov-calc-polarity { position: absolute; top: 4px; right: 4px; color: #a3854f; font: 700 9px/1 var(--sans); }

.ov-calc-bars { display: grid; gap: 10px; }
.ov-calc-bar { display: grid; grid-template-columns: 32px minmax(0,1fr) 66px; align-items: center; gap: 10px; color: var(--calc-soft); font: 12px/1.4 var(--sans); }
.ov-calc-bar > span:first-child { color: var(--calc-ink); font-weight: 600; }
.ov-calc-bar > strong { color: var(--calc-soft); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ov-calc-track { height: 6px; overflow: hidden; border-radius: 1px; background: #efe8db; }
.ov-calc-track i { display: block; width: var(--target); height: 100%; background: var(--calc-color); opacity: .85; transform-origin: left; }

/* Higher specificity keeps the later shared diagram surface out of this panel. */
.ov-calc-demo .ov-calc-network { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; }
.ov-calc-network .ov-net { margin: -12px 0 0; }
.ov-calc-network .ov-net-edge { stroke-width: 1.6; stroke-linecap: round; opacity: .75; }
.ov-calc-network .ov-net-edge:nth-of-type(2) { --edge-delay: .1s; }
.ov-calc-network .ov-net-edge:nth-of-type(3) { --edge-delay: .2s; }
.ov-calc-network .ov-net-edge:nth-of-type(4) { --edge-delay: .3s; }
.ov-calc-network .ov-net-summary { color: var(--calc-soft); font: 500 12px/1.7 var(--sans); margin: 4px 0 12px; }
.ov-calc-network .ov-net-pos { fill: #857c6d; font-size: 13px; font-weight: 600; }
.ov-calc-network .ov-net-read { fill: #857c6d; font-size: 12px; }
.ov-calc-network .ov-net-chips { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; border-top: 1px solid var(--calc-line); }
.ov-calc-network .ov-net-chip { min-width: 0; min-height: 44px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--calc-line); border-radius: 0;
  background: transparent; box-shadow: none; transition: background-color .16s; }
.ov-calc-network .ov-net-chip strong { display: flex; align-items: center; gap: 6px; color: #287b71; font-size: 12px; }
.ov-calc-network .ov-net-chip strong::before { content: ''; width: 13px; flex: 0 0 13px; border-top: 2px solid currentColor; }
.ov-calc-network .ov-net-chip span { color: #857c6d; font-size: 11px; overflow-wrap: anywhere; }
.ov-calc-network .edge-chung { stroke: #ba4c64; }
.ov-calc-network .chip-chung strong { color: #ba4c64; }
.ov-calc-network .edge-wonjin { stroke: #8560a8; stroke-dasharray: 4 4; }
.ov-calc-network .chip-wonjin strong { color: #8560a8; }
.ov-calc-network :is(.edge-hyeong,.edge-jahyeong) { stroke: #a17a32; stroke-dasharray: 8 3; }
.ov-calc-network :is(.chip-hyeong,.chip-jahyeong) strong { color: #92702f; }
.ov-calc-network :is(.edge-pa,.edge-hae) { stroke: #577da5; stroke-dasharray: 1 4; }
.ov-calc-network :is(.chip-pa,.chip-hae) strong { color: #577da5; }
.ov-calc-network :is(.chip-wonjin,.chip-hyeong,.chip-jahyeong) strong::before { border-top-style: dashed; }
.ov-calc-network :is(.chip-pa,.chip-hae) strong::before { border-top-style: dotted; }
.ov-calc-network .ov-net-edge.is-active { stroke-width: 3; opacity: 1; }
.ov-calc-network .ov-net-edge.is-muted { opacity: .12; }
.ov-calc-network .ov-net-chip[aria-pressed=true] { background: #f7f0e1; }
.ov-calc-network .ov-net-chip:focus-visible { outline: 2px solid #73603c; outline-offset: -2px; }
@media (hover: hover) {
  .ov-calc-network .ov-net-chip:hover { background: #faf5ea; }
}
.ov-calc-empty { margin: 0; padding: 14px 0; color: #857c6d; font: 13px/1.7 var(--sans); }

/* 四 · 대조 기록 — 상자 없이 줄 단위 장부 */
.ov-calc-console-line { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 12px; margin: 0; padding: 9px 0;
  border-bottom: 1px dotted #d9ceb9; color: var(--calc-ink); font: 13px/1.65 var(--sans); word-break: keep-all; }
.ov-calc-console-line:last-child { border-bottom: 0; }
.ov-calc-console-line strong { color: var(--calc-gold); font: 600 11px/1 var(--sans); letter-spacing: .08em; }
.ov-calc-console-line strong::before { content: '✓ '; }

/* 五 · 규칙표 — 무리별 한 줄, 확인된 항목만 먹색 */
.ov-calc-inventory-row + .ov-calc-inventory-row { margin-top: 12px; padding-top: 12px; border-top: 1px dotted #d9ceb9; }
.ov-calc-inventory-row > p { margin: 0 0 8px; color: var(--calc-soft); font: 600 11.5px/1.4 var(--sans); }
.ov-calc-inventory-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-calc-inventory-list span { padding: 5px 9px; border: 1px solid var(--calc-line); border-radius: 2px; background: transparent;
  color: #978d7c; font: 500 11.5px/1.4 var(--sans); max-width: 100%; overflow-wrap: anywhere; }
.ov-calc-inventory-list span.is-found { border-color: #cdbd9c; background: #f6efe0; color: var(--calc-ink); font-weight: 600; }
.ov-calc-inventory-list span.is-found::before { content: '✓ '; color: var(--calc-gold); }
.ov-calc-redaction { display: inline-block; width: 2.6em; height: .62em; margin-left: 4px; border-radius: 1px; vertical-align: -.02em; background: #d6c8aa; }
.ov-calc-inventory-list .ov-calc-redaction { background: #d6c8aa; }
.ov-net-chip .ov-calc-redaction { width: 1.8em; height: .6em; background: currentColor; opacity: .22; }
.ov-net-summary-lock { display: inline-flex; align-items: baseline; }
.ov-net-summary-lock .ov-calc-redaction { width: 1.5em; height: .58em; background: #a89b80; opacity: .4; }
.ov-calc-inventory-list span.is-more { border-color: transparent; padding-inline: 2px; color: #a0968a; }

/* 맺음 — 어두운 상자 대신 굵은 선 아래 한 줄 */
.ov-calc-result { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--calc-ink); color: var(--calc-ink);
  font: 600 14px/1.7 var(--serif); letter-spacing: -.02em; text-align: left; word-break: keep-all; overflow-wrap: anywhere; }

/* 한 번만, 짧게 */
.ov-calc-demo.is-calculated .ov-calc-glyph { animation: ov-calc-rise .4s ease calc(var(--i) * 40ms) both; }
.ov-calc-demo.is-calculated .ov-calc-track i { animation: ov-calc-fill .6s cubic-bezier(.2,.75,.25,1) calc(300ms + var(--i) * 60ms) both; }
.ov-calc-demo.is-calculated .ov-calc-network .ov-net-edge { animation: ov-calc-line .5s ease calc(.6s + var(--edge-delay,0s)) both; }
@keyframes ov-calc-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ov-calc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ov-calc-line { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -5% 0 -5%); } }

/* 아래 네 가지 약속 — 흰 카드 넷 대신 가는 선으로 나눈 2×2 */
.ov-trust-grid { gap: 0; max-width: 430px; border-top: 1px solid #d9ccb3; border-bottom: 1px solid #d9ccb3; }
.ov-trust-grid article { padding: 16px 12px 15px; border: 0; border-radius: 0; background: transparent; text-align: left; }
.ov-trust-grid article:nth-child(2n) { border-left: 1px solid #e6dccb; }
.ov-trust-grid article:nth-child(n+3) { border-top: 1px solid #e6dccb; }
.ov-trust-grid strong { color: #2b2620; font: 700 13.5px/1.45 var(--sans); }
.ov-trust-grid p { color: #7a7063; font-size: 12.5px; line-height: 1.7; word-break: keep-all; }
@media (max-width: 400px) {
  .ov-calc-demo { padding-inline: 12px; }
  .ov-calc-glyphs { gap: 3px; }
  .ov-calc-glyph strong { font-size: 18px; }
  .ov-calc-bar { grid-template-columns: 28px minmax(0,1fr) 58px; gap: 7px; }
  .ov-calc-demo .ov-net-chips { grid-template-columns: minmax(0,1fr); }
  .ov-calc-demo .ov-net-chip { flex-direction: row; align-items: center; gap: 12px; }
  .ov-calc-demo .ov-net-chip strong { flex: 0 0 auto; }
  .ov-section:has(.ov-calc-demo) { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-calc-demo, .ov-calc-demo *, .ov-calc-demo *::before, .ov-calc-demo *::after { animation: none !important; transition: none !important; }
}

/* 원국 관계도 — 여덟 글자를 잇는 합·충·형·파·해·원진 */
.ov-net-wrap { max-width: 380px; margin: 18px auto 0; }
.ov-net { width: 100%; height: auto; display: block; margin: -6px 0 -10px; }
.ov-net-pos { fill: #8b929d; font: 12px var(--sans); }
.ov-net-char { font: 600 27px var(--serif); }
.ov-net-polarity { fill: #82693d; font: 800 12px var(--sans); }
.ov-net-read { fill: #8b929d; font: 10px var(--sans); }
.ov-net-edge { stroke: #3d9e93; stroke-width: 2; opacity: .6; transition: opacity .15s, stroke-width .15s; }
.edge-chung { stroke: #d66178; }
.edge-wonjin { stroke: #9270b9; stroke-dasharray: 4 4; }
.edge-hyeong, .edge-jahyeong { stroke: #c4933e; stroke-dasharray: 8 3; }
.edge-pa, .edge-hae { stroke: #7194bb; stroke-dasharray: 2 3; }
.ov-net-edge.is-active { stroke-width: 3.5; opacity: 1; }
.ov-net-edge.is-muted { opacity: .1; }
.ov-net-summary { margin: 10px 0 12px; font-size: 12.5px; color: #8b929d; }
.ov-net-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ov-net-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; min-height: 48px;
  background: #fff; border: 1px solid #e6e9ef; border-radius: 11px; text-align: left; cursor: pointer; font: 11px var(--sans); }
.ov-net-chip strong { color: #41998f; font-size: 12.5px; }
.chip-chung strong { color: #d66178; }
.chip-wonjin strong { color: #9270b9; }
.chip-hyeong strong, .chip-jahyeong strong { color: #c4933e; }
.ov-net-chip span { color: #70758b; font-size: 10.5px; line-height: 1.5; }
.ov-net-chip[aria-pressed=true] { border-color: #b9985a; background: #fbf6ea; }
.ov-net-chip:focus-visible { outline: 2px solid #b9985a; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ov-net-edge { transition: none; } }

/* 對照 — 주장 대신 우리가 실제로 하는 처리를 나란히 둔다 */



/* 檢證 — 비교표가 아니라 독자가 직접 해볼 세 가지 */
.ov-verify { counter-reset: verify; list-style: none; display: grid; gap: 10px; max-width: 380px; margin: 4px auto 24px; padding: 0; }
.ov-verify li { counter-increment: verify; position: relative; padding: 18px 16px 16px 48px; background: #fff; border: 1px solid #ece4d4; border-radius: 14px; text-align: left; }
.ov-verify li::before { content: counter(verify); position: absolute; top: 17px; left: 16px; width: 21px; height: 21px;
  display: grid; place-items: center; border-radius: 50%; background: #2f3947; color: #f0e6d2; font: 700 11px var(--sans); }
.ov-verify h4 { margin: 0 0 9px; font-size: 15px; line-height: 1.5; color: #3f4854; }
.ov-verify p { margin: 0; font-size: 14px; line-height: 1.8; color: #3f4854; }
.ov-verify strong { color: #7a6642; }
.ov-verify-how { margin-top: 9px !important; padding-top: 9px; border-top: 1px solid #f2ede3; font-size: 12.5px !important; color: #7b838f !important; }

/* 대조 카드 — 경쟁사가 아니라 「확인 가능한가」를 축으로 가른다 */
.ov-compare-lead { margin: 0 auto 13px; font-size: 13px; font-weight: 600; color: #9a7f4d; }
.ov-compare { display: grid; gap: 10px; max-width: 380px; margin: 0 auto 24px; }
.ov-compare article { padding: 16px 16px 14px; background: #fff; border: 1px solid #ece4d4; border-radius: 14px; text-align: left; }
.ov-compare h4 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #f0ebe0; font-size: 14.5px; color: #3f4854; }
.ov-compare p { margin: 0; font-size: 13.5px; line-height: 1.75; }
.ov-compare p + p { margin-top: 11px; }
.ov-compare p > span { display: inline-block; width: 16px; font-weight: 700; }
.ov-compare .is-vague { color: #9aa0aa; }
.ov-compare .is-vague > span { color: #c3c7ce; }
.ov-compare .is-clear { color: #3f4854; }
.ov-compare .is-clear > span { color: #9a7f4d; }
.ov-compare .is-clear strong { color: #7a6642; }

/* 목차 — 풀이 챕터를 그대로 펼치고, 값이 들어갈 자리만 가린다 */
.ov-toc-chapter { margin: 0 0 10px; font-size: 15.5px; line-height: 1.5; color: #3f4854; }
.ov-toc-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; margin: 0 0 7px; font-size: 13.5px; line-height: 1.75; color: #6b7482; }
.ov-toc-line:last-child { margin-bottom: 0; }
.ov-toc-dash { flex-shrink: 0; width: 9px; height: 1px; margin-right: 3px; background: #cbb98f; transform: translateY(-4px); }
.ov-toc-line .ov-slot { font-size: 13.5px; color: #6b7482; }

/* 前兆 — 뒤흔드는 세 시기 */
.ov-omen-list { display: grid; gap: 9px; max-width: 360px; margin: 4px auto 0; }
.ov-omen-row { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 8px;
  padding: 14px 15px; background: #fff; border: 1px solid #e6e9ef; border-radius: 13px; text-align: left; }
.ov-omen-row strong { font: 700 16px var(--sans); color: #9a7f4d; font-variant-numeric: tabular-nums; }
.ov-omen-what { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.6; color: #3f4854; }
.ov-omen-count { grid-column: 1 / -1; font-size: 11.5px; color: #8b929d; }
.ov-locked-year em { font-style: normal; margin-left: 7px; font-weight: 400; color: #8b929d; }
.is-arrived { animation: ov-fade .35s ease-out; }
@keyframes ov-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .is-arrived { animation: none; } }
.ov-slot-block { display: inline-flex; margin-left: 4px; }

/* 고민 섹션 — 프롤로그에서 고른 영역에 먼저 답한다 */
.ov-concern { background: linear-gradient(160deg,#fffdf8,#f6f2e8); border-color: #e6dcc6; }
.ov-concern-body { max-width: 27em; margin: 4px auto 0; text-align: left; }
.ov-concern-body p { margin: 0 0 13px; font-size: 16px; line-height: 1.85; color: #3f4854; }
.ov-concern-body p:last-child { margin-bottom: 0; }
.ov-concern-wait { color: #a09582 !important; font-size: 14px !important; text-align: center; }

/* 결과지의 두 알약 — 전폭 바 대신. 바닥을 막지 않는다 */
.ov-floats { position: fixed; left: 50%; width: min(100%, var(--app-max-width)); transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 60; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; pointer-events: none; transition: opacity .25s, transform .25s; }
.ov-floats[hidden] { display: none; }
.ov-floats.is-dimmed { opacity: .25; transform: translateX(-50%) translateY(6px); }
/* 읽는 글을 가리지 않도록 평소에는 비쳐 보인다. 누르려고 다가가면 또렷해진다. */
.ov-float { pointer-events: auto; border: 0; cursor: pointer; text-decoration: none;
  opacity: .55; backdrop-filter: blur(3px); box-shadow: 0 4px 14px rgba(47,57,71,.12);
  transition: opacity .2s, box-shadow .2s; }
.ov-float:hover, .ov-float:active, .ov-float:focus-visible { opacity: 1; box-shadow: 0 6px 20px rgba(47,57,71,.2); }
/* 주월 알약은 말풍선 모양으로 감싼다. 오른쪽 아래 모서리만 각을 세워 꼬리를 만든다. */
.ov-float-chat { position: relative; width: 58px; height: 58px; padding: 3px;
  border: 1.5px solid #c9bfa8; border-radius: 50% 50% 6px 50%; background: #fffdf7f2;
  opacity: .82; }
.ov-float-chat img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
/* 꼬리 — 각진 모서리에서 바깥으로 삐져나오는 작은 삼각형 */
.ov-float-chat::after { content: ''; position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px; background: #fffdf7f2;
  border-right: 1.5px solid #c9bfa8; border-bottom: 1.5px solid #c9bfa8;
  border-radius: 0 0 3px 0; transform: rotate(-8deg); }
.ov-float-share { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid #c9bfa8; border-radius: 50%; color: #62533f; background: #fffdf7f2; opacity: .82; }
.ov-float-share svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ov-float:focus-visible { outline: 2px solid #b9985a; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ov-floats, .ov-float { transition: none; } }

/* 스크롤에 맞춰 주월이 건네는 한마디 */
/* 말풍선을 결제 버튼(오른쪽)을 가리지 않도록 아바타 '위쪽(top)'으로 띄운다 */
.ov-chatwrap { position: relative; pointer-events: none; }
.ov-chattip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  pointer-events: auto;
  width: max-content;
  max-width: min(72vw, 260px);
  margin: 0;
  padding: 9px 13px;
  border: 1px solid #d9ccb4;
  border-radius: 14px 14px 14px 2px;
  background: #fffdf8;
  box-shadow: 0 6px 18px rgba(47, 38, 30, 0.16);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b231e;
  animation: tip-in .25s ease-out both;
  z-index: 100;
}
.ov-chattip::after {
  content: '';
  position: absolute;
  left: 14px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: #fffdf8;
  border-right: 1px solid #d9ccb4;
  border-bottom: 1px solid #d9ccb4;
  transform: rotate(45deg);
}
.ov-chattip[hidden] { display: none; }
@keyframes tip-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ov-chattip { animation: none; } }

/* 공유 카드(본캐 판정서)는 share-card.css 에 있다. */

/* ══ 리듬 정비 ══ 스크롤하는 내내 같은 무게였던 문제를 위계로 푼다 ══ */

/* 2. 카드를 걷어낸다 — 해석 섹션은 종이 위에 그냥 얹힌다 */
.ov-section { background: none; border: 0; border-radius: 0; padding: 46px 18px 42px; margin: 0; }
.ov-section + .ov-section { border-top: 1px solid #e9e2d4; }
/* 마케팅·명리 구역은 카드를 남겨 「다른 방」임을 유지한다 */
.ov-sales { background: linear-gradient(160deg,#fffdf8f0,#f7f3e9e6); border: 1px solid #e9e0cd;
  border-radius: 18px; padding: 34px 18px 32px; margin: 20px 0; }
.ov-sales + .ov-section, .ov-section + .ov-sales { border-top: 0; }

/* 3. 타이포 위계 — 제목은 크게, 리드는 작게, 각주는 더 작게 */
.ov-kicker { font-size: 11.5px; letter-spacing: .3em; color: #b5a98c; margin-bottom: 14px; }
.ov-title { max-width: 13em; font-size: 27px; line-height: 1.38; letter-spacing: -.035em;
  font-weight: 700; color: #2b3038; }
.ov-title::after { width: 26px; margin-top: 18px; background: #d8c9a4; }
.ov-lead { max-width: 23em; font-size: 14.5px; line-height: 1.8; color: #7a8290; }
.ov-foot { font-size: 11px; color: #a9afb8; }

/* 4. 명리 근거는 뒤로 물린다 — 읽고 싶은 사람만 보게 */
.ov-net-summary, .ov-bar-row > strong { color: #a9afb8; }
.ov-more { border-color: #ece6da; background: #fffdf8b8; }
.ov-more summary { font-size: 12.5px; color: #9aa0aa; }

/* 5. 장면 사진 — 섹션 머리에 직사각으로 */
.ov-art { margin: 0 -18px 26px; padding: 0; }
.ov-art img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 624; object-fit: cover; }
.ov-sales .ov-art { margin: -34px -18px 24px; }
@media (min-width: 560px) {
  .ov-art { margin-inline: 0; }
  .ov-art img { border-radius: 14px; }
}

/* ══ 훑는 길 ══ 세리프로 쓴 문장만 이어 읽어도 이야기가 통하게 한다 ══
   제목과 「해석 한 줄」은 세리프, 근거·수치·설명은 산세리프로 남긴다. */
.ov-title { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; }

/* 섹션 리드 — 겉은 단정한데 속은 뜨거워요 / 물이 가장 많고 나무는 한 자리도 없어요 */
.ov-lead { font-family: var(--serif); font-size: 18px; line-height: 1.85;
  letter-spacing: -.015em; color: #4a5360; max-width: 20em; }

/* 인물 서사 · 고민 풀이 — 읽히는 본문 자체가 해석이다 */
.ov-para p, .ov-concern-body p { font-family: var(--serif); font-size: 17px; line-height: 1.95;
  letter-spacing: -.012em; color: #3b434e; }

/* 시기 한 줄 · 뒤흔들 시기 — 훑을 때 눈에 걸려야 하는 문장 */
.ov-locked-open, .ov-omen-what { font-family: var(--serif); font-size: 16.5px; line-height: 1.8;
  letter-spacing: -.012em; color: #3b434e; }

/* 히어로 인용구도 같은 결로 */
.ov-quote p { font-size: 19px; line-height: 1.8; }

/* 반대로 근거·수치는 산세리프로 눌러 둔다 */
.ov-foot, .ov-bar-label, .ov-bar-row > strong,
.ov-net-summary, .ov-more summary { font-family: var(--sans); }

/* 세리프 길을 더 진하게 — 훑을 때 확실히 걸리도록 무게와 색을 올린다 */
.ov-title { font-weight: 700; color: #1f242c; }
.ov-lead { font-weight: 600; font-size: 20px; line-height: 1.8; color: #2b323c; max-width: 18em; }
.ov-para p, .ov-concern-body p { font-weight: 500; font-size: 17.5px; color: #2f3742; }
/* 서사의 첫 문단은 한 단계 더 세워 둔다 */
.ov-para:first-of-type p:first-child { font-weight: 600; font-size: 19px; color: #232a34; }
.ov-locked-open, .ov-omen-what { font-weight: 600; font-size: 17px; color: #2b323c; }
.ov-quote p { font-weight: 600; font-size: 20px; color: #232a34; }
/* 근거는 더 뒤로 */
.ov-foot { color: #b3b8c0; }
.ov-more summary { color: #a6acb5; }

/* 무료 성향 단문 — 한 줄에 한 가지. 긴 서사는 유료에서만 쓴다. */
.ov-points { list-style: none; max-width: 24em; margin: 20px auto 0; padding: 0; text-align: left; }
.ov-points li { position: relative; padding: 11px 2px 11px 20px; border-top: 1px solid #ece6da;
  font: 600 16.5px/1.7 var(--serif); letter-spacing: -.012em; color: #2f3742; }
.ov-points li:first-child { border-top: 0; }
.ov-points li::before { content: ''; position: absolute; left: 3px; top: 1.3em;
  width: 6px; height: 6px; border-radius: 50%; background: #cbb98f; }

/* 귀인 목록 — 이름 · 뜻 · 자리를 한 줄씩 세운다 */
.ov-guiin-list { list-style: none; display: grid; gap: 1px; margin: 8px 0 12px; padding: 0;
  border-radius: 11px; overflow: hidden; background: #ece6da; }
.ov-guiin-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: 9px; padding: 11px 13px; background: #fffdf8; }
.ov-guiin-list strong { font: 600 15px var(--serif); color: #2b323c; white-space: nowrap; }
.ov-guiin-list span { font-size: 13.5px; color: #7a8290; }
.ov-guiin-list small { font-size: 11.5px; color: #b3b8c0; white-space: nowrap; }

/* 결과지 큰 제목 — 페이지에서 가장 무거운 한 덩어리 */
#chart-screen .screen-heading { margin-bottom: 8px; }
#chart-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 7.4vw, 40px);
  line-height: 1.32;
  letter-spacing: -.045em;
  color: #1b2028;
  white-space: pre-line;   /* 문구에 넣어 둔 줄바꿈을 살린다 */
}

/* 계산 장부 — 주장 대신 이 사람의 실제 값을 편다 */
.ov-ledger { max-width: 380px; margin: 0 auto 24px; padding: 20px 18px 16px;
  border: 1px solid #e2d8c3; border-radius: 16px; background: #fffdf8; text-align: left; }
.ov-ledger-title { margin: 0 0 14px; font: 600 15px var(--serif); color: #2b323c; letter-spacing: -.02em; }
.ov-ledger table { width: 100%; border-collapse: collapse; }
.ov-ledger th, .ov-ledger td { padding: 9px 0; border-top: 1px solid #f0eade;
  font-family: var(--sans); font-size: 13px; line-height: 1.5; vertical-align: baseline; }
.ov-ledger tr:first-child th, .ov-ledger tr:first-child td { border-top: 0; }
.ov-ledger th { font-weight: 400; color: #9aa0aa; text-align: left; white-space: nowrap; padding-right: 12px; }
.ov-ledger td { color: #2f3742; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.ov-ledger-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.7; color: #a6acb5; }

/* ══ 도표 받침 ══ 흰 판을 걷어내니 그림이 한지 결에 묻힌다.
   바깥 판은 비운 채로, 도표 덩어리에만 옅은 받침을 깐다. ══ */
.ov-pillars,
.ov-bars,
.ov-sliders,
.ov-scale,
.ov-radar,
.ov-line-scroll,
.ov-net-wrap,
.ov-year-cards,
.ov-omen-list,
.ov-guiin-list,
.ov-toc-list {
  box-sizing: border-box;
  background: #fffdf8d1;
  border: 1px solid #eae3d4;
  border-radius: 16px;
  padding: 16px 14px;
  backdrop-filter: blur(2px);
}
/* 안쪽 칸들은 받침 위에서 테두리를 덜어 이중선을 피한다 */
.ov-pillars .ov-pillar,
.ov-year-cards .ov-year-card { background: #fffdfaeb; }
.ov-omen-list .ov-omen-row,
.ov-guiin-list li { background: transparent; }
.ov-guiin-list { gap: 0; background: #fffdf8d1; }
.ov-guiin-list li + li { border-top: 1px solid #f0eade; }
.ov-net-wrap { padding: 14px 12px 16px; }
.ov-radar { padding: 10px 6px; }
.ov-toc-list { border-color: #ece4d4; }

/* 고전 인용 */
.ov-classic-list { display: grid; gap: 22px; max-width: 26em; margin: 4px auto 0; }
.ov-classic { margin: 0; padding: 0 0 0 16px; border-left: 2px solid #d9c9a3; text-align: left; }
.ov-classic-text { margin: 0 0 8px; font: 600 19px/1.7 var(--serif); letter-spacing: .06em; color: #3f4854; word-break: keep-all; overflow-wrap: anywhere; }
.ov-classic-gloss { margin: 0 0 6px; font-size: 14.5px; line-height: 1.75; color: #5c6675; }
.ov-classic-source { font: 12px/1.5 var(--serif); color: #a08a5f; }

/* 무료에서 가린 성향 값 — 자리 표시 글자를 흐리게 보여 준다. 책임감만 열어 둔다. */
.ov-blurred { filter: blur(4px); user-select: none; }
.ov-sliders.is-hidden .ov-slider-dot { opacity: .45; }
.ov-radar-label.ov-radar-open { font-weight: 700; fill: #7a6642; }
.ov-radar-score.ov-radar-open { fill: #7a6642; }
.ov-year-keyword { margin: 8px 0 0; font: 700 17px/1.3 var(--serif); color: #303944; }
.ov-year-field { margin: 6px 0 0; font: 600 13px/1.5 var(--serif); color: #7a6642; overflow-wrap: anywhere; }
/* 격자 칸은 기본값(min-width: auto)이면 긴 문구만큼 넓어져 옆 칸을 침범한다. */
.ov-year-card { min-width: 0; }
.ov-toc-part { margin: 22px 0 4px; padding-top: 16px; border-top: 1px solid #ece6da; color: #a08a5f; font: 600 12px/1.5 var(--serif); letter-spacing: .12em; text-align: left; }
.ov-toc-part:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ══ 본캐 판정서 진열대 ══ 평생사주 차례 바로 위. 본문은 단정하게 두고 카드는 액자 속 한 장으로만 보인다 ══ */
.ov-card-feature { position: relative; overflow: hidden; margin: 20px 0; padding: 36px 18px 30px; border: 1px solid #e2d4b9; border-radius: 18px;
  background: radial-gradient(90% 60% at 50% 46%, #fffaf0 0%, #f4ecdd 58%, #eadfc9 100%); }
.ov-card-feature + .ov-section, .ov-section + .ov-card-feature { border-top: 0; }
.ov-card-feature .ov-lead { margin-inline: auto; }
.ov-card-stage { display: block; width: 100%; margin: 26px 0 8px; padding: 10px 0 26px; border: 0; background: none; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
/* 카드 안 치수가 cqw 라서 액자가 곧 카드의 기준 너비다 */
.ov-card-frame { position: relative; isolation: isolate; display: block; width: min(72%, 280px); margin: 0 auto; container-type: inline-size;
  transform: rotate(-2deg); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
/* 뒤에 한 장 더 — 겹쳐 놓인 종이처럼 */
.ov-card-frame::before { position: absolute; inset: 0; z-index: -1; border-radius: 2cqw; content: '';
  background: #efe5d3 url(/images/bg/paper.webp) center / cover; box-shadow: 0 10px 28px #5a3f2422; transform: rotate(6deg) translate(7%, 1%); }
.ov-card-frame .bc-card { box-shadow: 0 22px 44px #3b281733, 0 2px 6px #3b28171f; pointer-events: none; }
.ov-card-stage:hover .ov-card-frame, .ov-card-stage:focus-visible .ov-card-frame { transform: rotate(0deg) translateY(-6px); }
.ov-card-stage:focus-visible { outline: none; }
.ov-card-stage:focus-visible .bc-card { outline: 3px solid #b9985a; outline-offset: 4px; }
.ov-card-actions { display: grid; justify-items: center; gap: 12px; }
.ov-card-actions .ov-cta { margin-top: 0; border: 0; background: var(--ov-action, #7d271f); font-family: inherit; cursor: pointer; }
.ov-card-link { padding: 4px 8px; border: 0; background: none; color: #7a6642; font: 600 14px/1.4 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .ov-card-frame { transition: none; } }
/* report.css 의 #chart-screen h2·h3 가 카드 안 제목까지 덮는다. 카드 자체 치수(cqw)로 되돌린다 */
#chart-screen .ov-card-frame .bc-block h3 { font: 700 3.5cqw/1.2 var(--serif); letter-spacing: -.04em; }
#chart-screen .ov-card-frame .bc-title { font: inherit; white-space: normal; letter-spacing: -.05em; }

/* ══ 칸 사이 간격 ══ 칸과 칸 사이가 90px 넘게 비어 한 화면에 한 칸도 안 들어왔다. 절반 가까이로 줄인다 ══ */
.ov-section { padding: 30px 18px 26px; }
.ov-sales, .ov-card-feature { margin: 10px 0; padding: 28px 18px 26px; }

/* ══ 통일 ①  버튼·제목 위계 ══
   결제 단추는 남색, 카드·소개 단추는 자주색으로 갈려 있었다. 사이트 단추색(landing.css .promo-cta-button)인 자주 하나로 맞춘다.
   report.css 의 #chart-screen h3 가 칸 제목을 22px 산세리프로 덮어, 20px 세리프 설명문이 제목보다 커 보였다.
   제목은 세리프 25px 로 되살리고 설명문은 17px 로 한 단계 낮춘다. */
.chart-overview { --ov-action: #7d271f; --ov-ink: #2b2620; }
.ov-cta { background: var(--ov-action); color: #fbf4e6; font-family: var(--sans); }
.ov-cta:focus-visible { outline-color: #b9985a; }
.ov-offer-price strong { color: var(--ov-ink); }
.ov-offer-price del { color: #a79d8d; }
#chart-screen .ov-title { font: 700 25px/1.4 var(--serif); letter-spacing: -.04em; color: #1f242c; }
.ov-lead { font-weight: 500; font-size: 17px; line-height: 1.8; color: #4a4f57; max-width: 21em; }
@media (max-width: 400px) { #chart-screen .ov-title { font-size: 23px; } .ov-lead { font-size: 16px; } }

/* ══ 통일 ②  계산 공개 + 검증 한 칸 ══ 위의 계산 장부와 같은 결 — 흰 카드·검은 번호 동그라미 대신 가는 선과 금색 숫자 */
.ov-trust .ov-verify { gap: 0; max-width: 430px; margin: 4px auto 18px; border-top: 1px solid #2b2620; }
.ov-trust .ov-verify li { padding: 18px 2px 16px 34px; border: 0; border-bottom: 1px solid #e6dccb; border-radius: 0; background: transparent; }
.ov-trust .ov-verify li::before { top: 18px; left: 2px; width: auto; height: auto; border-radius: 0; background: none; color: #a3854f; font: 700 15px/1.5 var(--serif); }
.ov-trust .ov-verify h4 { margin: 0 0 6px; color: #2b2620; font: 700 15px/1.5 var(--sans); letter-spacing: -.02em; }
.ov-trust .ov-verify p { color: #4a4f57; font-size: 14px; line-height: 1.75; }
.ov-trust .ov-verify strong { color: #2b2620; font-weight: 600; }
.ov-trust .ov-verify-how { margin-top: 8px !important; padding-top: 0; border-top: 0; color: #8a8171 !important; }
.ov-compare-fold { max-width: 430px; margin: 0 auto 22px; border-bottom: 1px solid #e6dccb; text-align: left; }
.ov-compare-fold summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 2px; list-style: none; cursor: pointer;
  color: #7a6642; font: 600 14px/1.5 var(--sans); }
.ov-compare-fold summary::-webkit-details-marker { display: none; }
.ov-compare-fold summary::after { content: '+'; color: #a3854f; font: 400 20px/1 var(--sans); }
.ov-compare-fold[open] summary::after { content: '−'; }
.ov-compare-fold .ov-compare { gap: 0; max-width: none; margin: 0 0 6px; }
.ov-compare-fold .ov-compare article { padding: 14px 2px; border: 0; border-top: 1px dotted #d9ceb9; border-radius: 0; background: transparent; }
.ov-compare-fold .ov-compare h4 { margin: 0 0 8px; padding: 0; border: 0; color: #2b2620; font: 600 14px/1.5 var(--sans); }
.ov-compare-fold .ov-compare p { font-size: 13px; }

/* ══ 통일 ③  모서리 ══ 칸(ov-section)은 18px, 칸 안의 판·표는 6px, 글자 칩은 2~4px. 13·14·16px 이 섞여 있던 것을 정리한다 */
.chart-overview :is(.ov-pillars, .ov-sliders, .ov-bars, .ov-scale, .ov-locked-line, .ov-toc-list, .ov-calc-demo, .ov-juwol-note p, .ov-radar, svg.ov-radar-svg) { border-radius: 6px; }
.chart-overview .ov-pillar { border-radius: 4px; }
.chart-overview .ov-portrait svg { border-radius: 6px; }

/* Keep the illustrated editorial layout; make its data and controls legible. */
.chart-overview { --ov-action: var(--ui-action); --ov-ink: var(--ui-ink); }
.chart-overview :is(.ov-foot,.ov-net-summary,.ov-bar-row>strong,.ov-more summary,.ov-kicker,.ov-ledger th,.ov-ledger-note,.ov-guiin-list small,.ov-omen-count) { color: var(--ui-muted); }
.chart-overview :is(.ov-pillars,.ov-sliders,.ov-bars,.ov-scale,.ov-locked-line,.ov-toc-list,.ov-calc-demo,.ov-juwol-note p,.ov-radar) { border-color: var(--ui-line); border-radius: var(--ui-control-radius); background-color: var(--ui-surface); }
.chart-overview .ov-pillar { border-radius: 8px; }
.chart-overview :is(.ov-sales,.ov-card-feature) { border-color: var(--ui-line); border-radius: var(--ui-radius); }
.chart-overview .ov-more { border-radius: var(--ui-control-radius); border-color: var(--ui-line); background: var(--ui-surface); }
.chart-overview :is(.ov-more summary,.ov-compare-fold summary) { min-height: 48px; box-sizing: border-box; padding-block: 14px; }
.chart-overview .ov-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; max-width: 100%; box-sizing: border-box; border-radius: var(--ui-control-radius); font: 600 15px/1.5 var(--sans); white-space: normal; }
.chart-overview .ov-cta:hover { background: var(--ui-action-hover); }
.chart-overview .ov-card-link { min-height: 44px; }
.chart-overview :is(a,button,summary):focus-visible { outline: 2px solid var(--ui-action); outline-offset: 4px; }
.ov-float { opacity: 1; }
@media(max-width:360px){.ov-guiin-list li{grid-template-columns:minmax(0,1fr) auto}.ov-guiin-list li span{grid-column:1/-1;grid-row:2}.ov-ledger{padding:16px 12px}}

/* 결과지 맨 앞: 남기신 고민 풀이와 다섯 영역 안내 */
.ov-concern { background: linear-gradient(160deg,#fffdf8,#f6efe2); border-color: #e0d3bd; }
.ov-concern-quote { margin: 0 auto 16px; max-width: 24em; padding: 12px 14px; border-radius: 12px; background: #fbf5e9; color: #55312d; font: 500 14.5px/1.7 var(--serif); }
.ov-concern-body { max-width: 27em; margin: 0 auto; text-align: left; }
.ov-concern-headline { margin: 0 0 6px; color: #55312d; font: 700 17px/1.6 var(--serif); letter-spacing: -.02em; text-align: center; }
.ov-area-list { display: grid; gap: 22px; margin: 18px auto 0; padding: 0; max-width: 27em; list-style: none; text-align: left; }
.ov-area-card { position: relative; padding: 14px 16px 12px; border: 1px solid #e8e0d0; border-radius: 14px; background: #fffdf8; overflow: hidden; }
.ov-area-card.is-mine { border-color: #e8e0d0; background: #fffdf8; }
.ov-area-card header { display: flex; align-items: center; gap: 8px; }
.ov-area-card b { color: #2b231e; font: 700 16px/1.4 var(--serif); }
.ov-area-card em { padding: 1px 8px; border-radius: 999px; background: #55312d; color: #fff8e9; font: 600 11px/1.7 var(--sans); }
.ov-area-chapter { margin: 2px 0 8px; color: #8a7d6a; font: 500 12px/1.5 var(--sans); letter-spacing: .02em; }
.ov-area-lead { margin: 0; color: #3a2f28; font: 600 15px/1.65 var(--serif); }
.ov-area-veil { margin: 6px 0 0; color: #3f4854; font: 400 14px/1.7 var(--sans); filter: blur(5px); opacity: .7; user-select: none; pointer-events: none; max-height: 3.4em; overflow: hidden; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.ov-area-where { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2d8c6; color: #8a7d6a; font: 500 11.5px/1.5 var(--sans); }
.ov-area-offer { display: grid; gap: 8px; margin: 18px auto 0; max-width: 27em; }
.ov-area-offer .ov-cta { display: block; box-sizing: border-box; width: 100%; padding: 14px; border-radius: 12px; background: #55312d; color: #fff8e9; font: 700 15px/1.4 var(--sans); text-align: center; text-decoration: none; }
.ov-area-offer .ov-cta-sub { border: 1px solid #55312d; background: transparent; color: #55312d; }

.ov-area-wrap { display: grid; gap: 10px; }
.ov-area-hook { margin: 0; padding: 0 4px; color: #55312d; font: 700 16.5px/1.6 var(--serif); letter-spacing: -.02em; word-break: keep-all; }

/* 정통사주 미리보기 카드: 후크 → 읽고 나서 얻는 것 → 첫 장면 → 가린 풀이 → 소파트 제목 */
.ov-gains-title { margin: 6px 0 8px; color: #8a7d6a; font: 600 12px/1.4 var(--sans); letter-spacing: .08em; }
.ov-gains { margin: 0 auto; padding: 0; max-width: 27em; list-style: none; text-align: left; display: grid; gap: 8px; }
.ov-gains li { position: relative; padding-left: 26px; color: #2b231e; font: 600 15.5px/1.55 var(--sans); word-break: keep-all; }
.ov-gains li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #55312d; color: #fff8e9; font: 700 11px/18px var(--sans); text-align: center; }
.ov-area-hook { font-size: 17.5px; }
.ov-area-gain { margin: 4px 0 12px; color: #55312d; font: 600 13.5px/1.6 var(--sans); }
.ov-area-text { margin: 8px 0 0; color: #3f4854; font: 400 14.5px/1.75 var(--sans); }
.ov-area-veil { max-height: 3.6em; margin-top: 4px; }
.ov-area-subs { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #d9ccb4; }
.ov-area-subhead { margin: 0 0 8px; color: #8a7d6a; font: 600 12px/1.4 var(--sans); letter-spacing: .06em; }
.ov-area-subs ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ov-area-subs li { position: relative; padding-left: 24px; color: #2b231e; font: 700 17px/1.5 var(--serif); letter-spacing: -.02em; word-break: keep-all; }
.ov-area-subs li::before { content: ''; position: absolute; left: 0; top: .42em; width: 11px; height: 9px; border-radius: 2px; background: #b9a88f; }
.ov-area-subs li::after { content: ''; position: absolute; left: 2px; top: calc(.42em - 5px); width: 7px; height: 7px; border: 2px solid #b9a88f; border-bottom: 0; border-radius: 5px 5px 0 0; }
.ov-area-subs small { display: block; margin-top: 12px; color: #8a7d6a; font: 500 12px/1.5 var(--sans); }

.ov-area-card header { justify-content: space-between; }
.ov-area-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ov-area-thumb { flex: none; width: 56px; height: 56px; border-radius: 14px; object-fit: cover; object-position: 50% 30%; border: 1px solid #e4dccd; }
.ov-concern .ov-art { margin-bottom: 14px; }
.ov-area-list + .ov-juwol-note, .ov-concern .ov-juwol-note { margin-top: 18px; text-align: left; }

/* 소파트 제목 앞은 자물쇠 대신 체크박스 */
.ov-area-subs li::before { content: "✓"; top: .3em; width: 16px; height: 16px; border: 2px solid #55312d; border-radius: 4px; background: #fff; color: #55312d; font: 800 11px/12px var(--sans); text-align: center; }
.ov-area-subs li::after { content: none; }
.ov-area-subs li { padding-left: 28px; }

/* 분량·소장 안내 */
.ov-doc-badge { display: grid; gap: 2px; margin: 4px auto 18px; padding: 12px 16px; max-width: 26em; border: 1px solid #d9ccb4; border-radius: 12px; background: #fbf5e9; text-align: center; }
.ov-doc-badge b { color: #55312d; font: 700 16px/1.5 var(--serif); letter-spacing: -.02em; }
.ov-doc-badge span { color: #6f6455; font: 500 13.5px/1.5 var(--sans); }
.ov-area-offer .ov-doc-badge { margin: 0; }

/* 상부(후크 카드)와 하부(기존 풀이)의 리듬을 중간으로 맞춘다: 후크는 가운데, 카드 본문은 읽기 좋게 왼쪽, 글자는 명조 계열 15.5~17px. */
.ov-area-list { gap: 28px; }
.ov-area-hook { text-align: center; font-size: 17px; line-height: 1.7; padding: 0 6px; }
.ov-area-card { padding: 20px 18px 18px; }
.ov-area-text, .ov-area-lead { font-family: var(--serif); }
.ov-area-text { font-size: 15.5px; line-height: 1.85; color: #3a2f28; }
.ov-area-lead { font-size: 16px; line-height: 1.7; }
.ov-area-gain { font-size: 14px; }
.ov-area-subs ol { gap: 13px; }
.ov-gains { gap: 12px; }
.ov-gains li { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.ov-gains-title { text-align: center; }
.ov-area-offer { margin-top: 24px; }
.ov-points li { padding-block: 10px; }

.ov-chat-perk { display: grid; gap: 4px; margin: 22px auto 0; padding: 14px 16px; max-width: 26em; border: 1px solid #d9ccb4; border-radius: 12px; background: #fbf5e9; text-align: center; }
.ov-chat-perk b { color: #55312d; font: 700 16px/1.5 var(--serif); letter-spacing: -.02em; }
.ov-chat-perk span { color: #6f6455; font: 500 13.5px/1.6 var(--sans); }

.ov-area-wrap { gap: 6px; }
.ov-area-list { gap: 52px; }
.ov-area-hook { margin-bottom: 0; }
.ov-area-easy { margin: 0 0 8px; padding: 0 10px; color: #6f6455; font: 500 14px/1.65 var(--sans); text-align: center; word-break: keep-all; }
.ov-gains { margin-bottom: 0; }
.ov-gains + .ov-area-list { margin-top: 56px; }

/* 남겨 주신 고민 박스: 아래 영역 카드와 같은 테두리·바탕·폭으로 맞춘다. */
.ov-concern { margin-inline: 18px; border: 1px solid #e8e0d0; border-radius: 14px; background: #fffdf8; }

/* ══ 통일 ② 앞부분(남겨 주신 고민 · 영역 미리보기)을 뒷부분과 같은 말씨로 ══
   뒷부분은 박스 없이 구역을 가는 선으로 나누고, 제목은 세리프 큰 글씨에 금빛 밑줄, 본문은 세리프 17.5px, 목록은 금빛 점이다.
   앞부분만 카드 박스·갈색 소제목·체크 상자를 써서 읽는 흐름이 끊겼다. 같은 값으로 맞춘다. */
.ov-concern { margin: 0; padding: 30px 18px 26px; border: 0; border-radius: 0; background: none; }
.ov-concern-quote { background: #faf6ec; color: #55312d; font: 500 15px/1.75 var(--serif); }
.ov-concern-headline { margin: 0 0 12px; color: #232a34; font: 600 19px/1.7 var(--serif); letter-spacing: -.015em; }
.ov-concern-body p { text-align: left; }

/* 읽고 나면 달라지는 것 — 뒷부분 목록(.ov-points)과 같은 금빛 점 */
.ov-gains-title { margin: 22px 0 4px; color: #b5a98c; font: 600 11.5px/1.4 var(--sans); letter-spacing: .3em; text-align: center; }
.ov-gains { max-width: 24em; gap: 0; }
.ov-gains li { padding: 11px 2px 11px 20px; border-top: 1px solid #ece6da; color: #2f3742; font: 600 16.5px/1.7 var(--serif); letter-spacing: -.012em; }
.ov-gains li:first-child { border-top: 0; }
.ov-gains li::before { content: ''; font: inherit; left: 3px; top: 1.3em; width: 6px; height: 6px; border-radius: 50%; background: #cbb98f; }

/* 영역별 구역 — 카드 대신 구역 */
.ov-area-list { gap: 0; max-width: none; margin-top: 30px; }
.ov-area-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 40px 0 8px; border-top: 1px solid #e9e2d4; }
.ov-area-hook { max-width: 13em; margin: 0 auto 12px; padding: 0; color: #1f242c; font: 700 27px/1.38 var(--serif); letter-spacing: -.02em; text-align: center; }
.ov-area-hook::after { content: ''; display: block; width: 26px; height: 1px; margin: 18px auto 0; background: #d8c9a4; }
.ov-area-easy { max-width: 20em; margin: 0 auto 8px; color: #2b323c; font: 600 17px/1.8 var(--serif); letter-spacing: -.015em; text-align: center; }
.ov-area-card { box-sizing: border-box; width: 100%; max-width: 24em; margin: 0 auto; padding: 14px 0 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.ov-area-card.is-mine { border: 0; background: none; }
.ov-area-card header b { color: #b5a98c; font: 600 11.5px/1.4 var(--sans); letter-spacing: .3em; }
.ov-area-card em { background: #55312d; }
.ov-area-gain { margin: 10px 0 14px; color: #232a34; font: 600 17.5px/1.8 var(--serif); letter-spacing: -.012em; }
.ov-area-lead { color: #232a34; font: 600 19px/1.8 var(--serif); letter-spacing: -.012em; }
.ov-area-text { margin-top: 10px; color: #2f3742; font: 500 17.5px/1.95 var(--serif); letter-spacing: -.012em; }
.ov-area-veil { margin-top: 8px; }
.ov-area-subs { margin-top: 20px; padding-top: 16px; border-top: 1px solid #ece6da; }
.ov-area-subhead { color: #b5a98c; font: 600 11.5px/1.4 var(--sans); letter-spacing: .3em; }
.ov-area-subs ol { gap: 0; }
.ov-area-subs li { padding: 11px 2px 11px 20px; border-top: 1px solid #ece6da; color: #2f3742; font: 600 16.5px/1.7 var(--serif); letter-spacing: -.012em; }
.ov-area-subs li:first-child { border-top: 0; }
.ov-area-subs li::before { content: ''; font: inherit; left: 3px; top: 1.3em; width: 6px; height: 6px; border: 0; border-radius: 50%; background: #cbb98f; }
.ov-area-subs small, .ov-area-where { color: #a6acb5; font: 500 11.5px/1.6 var(--sans); }

/* ══ 통일 ③ 카드 복원 · 글자 키우기 ══
   흐림 처리한 맛보기와 「이 장에서 풀어 드리는 질문」이 배경에 묻혀 안 보였다. 영역마다 카드를 두고, 맛보기·질문은 카드 안의 색 면 위에 올린다.
   작은 글자(11~12px)는 읽기 힘들어 14px 아래로는 쓰지 않는다. */
.ov-gains-title { margin: 24px 0 6px; color: #7a6a4f; font: 700 14px/1.5 var(--sans); letter-spacing: .04em; }
.ov-area-card, .ov-area-card.is-mine { padding: 20px 18px 18px; border: 1px solid #e3d9c6; border-radius: 14px; background: #fffdf8; box-shadow: 0 2px 10px #5a3f2410; }
.ov-area-card header b { color: #2b231e; font: 700 17px/1.5 var(--serif); letter-spacing: -.01em; }
.ov-area-card em { padding: 2px 10px; font: 600 13px/1.7 var(--sans); }
.ov-area-gain { margin: 8px 0 12px; }
/* 맛보기: 글자만 흐리게 하고 바탕은 또렷한 색 면으로 둔다 */
.ov-area-veil { margin: 12px 0 0; padding: 12px 14px; max-height: none; border-radius: 10px; background: #f3ecdd; filter: none; opacity: 1; color: transparent; text-shadow: 0 0 7px #3f4854cc; -webkit-mask-image: none; mask-image: none; font-size: 15px; line-height: 1.7; overflow: hidden; }
.ov-area-subs { margin-top: 16px; padding: 14px 14px 8px; border: 0; border-radius: 12px; background: #f8f2e6; }
.ov-area-subhead { margin: 0 0 4px; color: #55312d; font: 700 14.5px/1.5 var(--sans); letter-spacing: 0; }
.ov-area-subs li { border-top-color: #e6dcc8; }
.ov-area-subs small, .ov-area-where { margin-top: 10px; color: #7c7f87; font: 500 13.5px/1.6 var(--sans); }

/* 글자 크기 바닥: 본문 설명·각주·라벨은 14px 아래로 쓰지 않는다(사주표 안의 십신·방향 표시는 칸이 좁아 12~13px). */
#chart-overview .ov-foot, #chart-overview .ov-toc-part, #chart-overview .ov-verify-how, #chart-overview .ov-calc-note, #chart-overview .ov-calc-sub,
#chart-overview .ov-calc-live, #chart-overview .ov-net-summary, #chart-overview .ov-net-summary-lock, #chart-overview .ov-omen-count,
#chart-overview .ov-offer-hook, #chart-overview .ov-more summary, #chart-overview .ov-bar-label { font-size: 14px; }
.ov-pillar-label { font-size: 13px; }
.ov-pillar-god { font-size: 12px; }

/* 공개 문장의 끝부분만 흐리게 — 읽다가 끊기는 자리에서 「뒤가 더 있다」가 보이게 한다. */
.ov-blur { color: #3f4854; filter: blur(5px); opacity: .85; user-select: none; pointer-events: none; }

/* ══ 읽다가 끊기는 자리의 이어 읽기 · 내 위치 · 결제 앞 설득 ══ (글자 14px 이상, 그림 없이 글과 표로만) */
.ov-hook { max-width: 24em; margin: 8px auto 26px; padding: 18px 18px 16px; border: 1px solid #e3d9c6; border-radius: 14px; background: #fbf5e9; text-align: left; }
.ov-hook-kicker { margin: 0 0 6px; color: #7a6a4f; font: 700 14px/1.5 var(--sans); letter-spacing: .02em; }
.ov-hook-text { margin: 0 0 14px; color: #2b323c; font: 600 17px/1.75 var(--serif); letter-spacing: -.012em; }
.ov-hook-cta { display: block; padding: 13px 14px; border-radius: 10px; background: #55312d; color: #fff8e9; font: 700 15.5px/1.4 var(--sans); text-align: center; text-decoration: none; }
.ov-hook-cta:hover { filter: brightness(1.08); }

.ov-rank { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; max-width: 24em; margin: 22px auto 0; padding: 16px 16px; border: 1px solid #e3d9c6; border-radius: 12px; background: #fffdf8; text-align: left; }
.ov-rank-big { color: #55312d; font: 800 28px/1.1 var(--serif); letter-spacing: -.03em; white-space: nowrap; }
.ov-rank-text { margin: 0; color: #3f4854; font: 500 14.5px/1.7 var(--sans); }

.ov-benefit-list { display: grid; gap: 0; max-width: 24em; margin: 22px auto 0; padding: 0; list-style: none; counter-reset: benefit; text-align: left; }
.ov-benefit-item { position: relative; display: grid; gap: 4px; padding: 16px 0 16px 44px; border-top: 1px solid #ece6da; counter-increment: benefit; }
.ov-benefit-item:first-child { border-top: 0; }
.ov-benefit-item::before { content: counter(benefit); position: absolute; left: 0; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #55312d; color: #fff8e9; font: 800 15px/1 var(--serif); }
.ov-benefit-item small { color: #7a6a4f; font: 700 14px/1.4 var(--sans); }
.ov-benefit-item b { color: #232a34; font: 700 17.5px/1.6 var(--serif); letter-spacing: -.015em; }
.ov-benefit-item span { color: #4a5360; font: 500 15px/1.75 var(--sans); }

.ov-pricetable { width: 100%; max-width: 26em; margin: 22px auto 0; border-collapse: separate; border-spacing: 0; font: 500 14px/1.55 var(--sans); text-align: left; }
.ov-pricetable th, .ov-pricetable td { padding: 11px 8px; border-bottom: 1px solid #ece6da; vertical-align: top; color: #4a5360; }
.ov-pricetable thead th { color: #7a6a4f; font-weight: 700; text-align: center; }
.ov-pricetable tbody th { width: 4.6em; color: #2b323c; font-weight: 700; }
.ov-pricetable .is-mine { background: #f7efe0; color: #2b231e; font-weight: 700; }
.ov-pricetable thead .is-mine { border-radius: 10px 10px 0 0; color: #55312d; }
.ov-pricetable tbody tr:last-child .is-mine { border-radius: 0 0 10px 10px; }

.ov-review-list { display: grid; gap: 14px; max-width: 24em; margin: 22px auto 0; text-align: left; }
.ov-review { padding: 16px 16px 14px; border: 1px solid #e3d9c6; border-radius: 12px; background: #fffdf8; }
.ov-review header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ov-review header b { color: #2b231e; font: 700 15px/1.4 var(--sans); }
.ov-review header span { color: #7a6a4f; font: 500 14px/1.4 var(--sans); }
.ov-review p { margin: 0; color: #2f3742; font: 500 16px/1.8 var(--serif); letter-spacing: -.01em; }

/* 계산 근거 접기 */
.ov-trust-fold > summary { display: grid; gap: 2px; padding: 4px 0; cursor: pointer; list-style: none; text-align: center; }
.ov-trust-fold > summary::-webkit-details-marker { display: none; }
.ov-trust-fold > summary b { color: #1f242c; font: 700 20px/1.5 var(--serif); }
.ov-trust-fold > summary span { color: #7a6a4f; font: 600 14.5px/1.5 var(--sans); }
.ov-trust-fold > summary span::after { content: ' ▾'; }
.ov-trust-fold[open] > summary span::after { content: ' ▴'; }
.ov-trust-inner { margin-top: 18px; }
.ov-trust .ov-offer { margin-top: 22px; }
.promo-fold { margin: 0 18px; padding: 14px 0 16px; border-top: 1px solid #e9e2d4; }
.promo-fold > .engine-proof { margin-top: 18px; }

/* 사주표 아래 확인된 항목 칩 */
.ov-found { max-width: 24em; margin: 6px auto 26px; padding: 0 4px; text-align: left; }
.ov-found-title { margin: 0 0 10px; color: #7a6a4f; font: 700 14.5px/1.5 var(--sans); }
.ov-found-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-found-tags span { padding: 7px 13px; border: 1px solid #e3d9c6; border-radius: 999px; background: #fbf5e9; color: #3b434e; font: 600 14.5px/1.3 var(--sans); }
.ov-found-tags .is-more { border-style: dashed; color: #7a6a4f; }
.ov-found-note { margin: 12px 0 0; color: #6b6f78; font: 500 14px/1.6 var(--sans); }

/* 하단 고정 결제 단추: 주월(왼쪽)과 공유(오른쪽) 사이. 첫 화면 몰입을 위해 스크롤을 내린 후 나타난다 */
.ov-float-cta { pointer-events: auto; flex: 1 1 auto; min-width: 0; margin: 0 8px; padding: 10px 12px; border-radius: 999px; background: #55312d; color: #fff8e9; font: 700 14px/1.2 var(--sans); text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 18px rgba(47,31,29,.28); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: opacity .35s ease, transform .35s ease, filter .2s; }
.ov-float-cta.is-hidden { opacity: 0; pointer-events: none; transform: translateY(16px); }
.ov-float-text { font-size: 13.5px; font-weight: 700; }
.ov-float-cta:hover, .ov-float-cta:active { filter: brightness(1.1); }
.ov-float-cta:focus-visible { outline: 3px solid #b9985a; outline-offset: 2px; }
.ov-floats .ov-chatwrap { flex: none; }
.ov-floats .ov-float-share { flex: none; }

/* 영역 카드: 질문 목록 대신 한 줄 */
.ov-area-count { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #ece6da; color: #6b5f4a; font: 600 14.5px/1.6 var(--sans); }
/* 세 시기: 방향 표시 */
.ov-omen-dir { display: inline-block; justify-self: start; margin-top: 6px; padding: 4px 12px; border-radius: 999px; font: 700 14px/1.4 var(--sans); }
.ov-omen-dir.is-up { background: #e6f0e8; color: #2f6b4b; }
.ov-omen-dir.is-down { background: #f6e4de; color: #9a4a35; }
.ov-omen-dir.is-mix { background: #f1ead9; color: #6b5f4a; }
.ov-omen-foot { margin: 12px auto 0; max-width: 24em; color: #6b6f78; font: 500 14px/1.6 var(--sans); text-align: center; }

/* 주월의 코멘트: 개인 값을 짚는 문장이라 본문 크기로 읽히게 한다 */
.ov-juwol-note { max-width: 24em; }
.ov-juwol-note p { font-size: 15px; line-height: 1.75; }

/* ══ 신년운세 무료 결과 ══ */
.ov-ny-score { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'label label' 'num stars' 'num rank'; align-items: center; column-gap: 16px; row-gap: 2px; max-width: 24em; margin: 20px auto 0; padding: 16px 18px; border: 1px solid #e3d9c6; border-radius: 14px; background: #fffdf8; text-align: left; }
.ov-ny-score-label { grid-area: label; color: #7a6a4f; font: 700 14px/1.5 var(--sans); }
.ov-ny-score-num { grid-area: num; color: #55312d; font: 800 44px/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ov-ny-stars { grid-area: stars; color: #b5894a; font: 400 20px/1.2 var(--sans); letter-spacing: .08em; }
.ov-ny-rank { grid-area: rank; color: #2b323c; font: 700 16px/1.4 var(--sans); font-style: normal; }
.ov-ny-line { max-width: 24em; margin: 18px auto 0; color: #2f3742; font: 600 18px/1.85 var(--serif); letter-spacing: -.012em; text-align: left; }
.ov-ny-tags { max-width: 24em; margin: 16px auto 0; }
.ov-ny-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 24em; margin: 18px auto 0; }
.ov-ny-month { display: grid; justify-items: center; gap: 4px; padding: 10px 4px 9px; border: 1px solid #e3d9c6; border-radius: 12px; background: #fbf5e9; color: #7a7f88; }
.ov-ny-month b { color: #3b434e; font: 700 14.5px/1.3 var(--sans); }
.ov-ny-month i { color: #55312d; font: 800 19px/1.2 var(--serif); font-style: normal; }
.ov-ny-month small { color: #6b6f78; font: 500 13.5px/1.3 var(--sans); }
.ov-ny-month.is-open { background: #fffdf8; border-color: #c9b88f; }
.ov-ny-month .ov-lock { margin: 2px 0; }
.ov-ny-quarters .ov-bar-row { grid-template-columns: 6.6em minmax(0, 1fr) 2.2em; }
.ov-ny-quarters .ov-bar-label { white-space: nowrap; font-size: 14px; }

/* 0.3 · 드문 것: 종이 바탕·금색 선 안에서 숫자만 크게. */
.ov-funnel { max-width: 24em; margin: 4px auto 0; text-align: left; }
.ov-funnel-row { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 2px 10px; color: #5c6675; font-size: 13.5px; }
.ov-funnel-row::after { content: ''; position: absolute; left: 0; bottom: 0; width: var(--w, 100%); height: 2px; border-radius: 2px; background: linear-gradient(90deg, #cbb98f, #e8dcc2); }
.ov-funnel-row b { color: #6d6350; font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-funnel-last { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 16px 16px; border: 1px solid #e3d9c6; border-radius: 12px; background: #fffdf8; }
.ov-funnel-last > span { color: #3f4854; font: 700 14.5px/1.5 var(--sans); }
.ov-funnel-num { color: #55312d; font: 800 34px/1 var(--serif); letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-funnel-num small { font: 600 14px/1 var(--sans); color: #7a6642; letter-spacing: 0; }
.ov-rare-heading { max-width: 24em; margin: 30px auto 12px; color: #7a6a4f; font: 700 14.5px/1.5 var(--sans); text-align: left; }
.ov-rare-list { display: grid; gap: 10px; max-width: 24em; margin: 0 auto; text-align: left; }
.ov-rare-row { padding: 14px 16px 15px; border: 1px solid #ebe6dc; border-radius: 12px; background: #fff; }
.ov-rare-row.is-weapon { border-color: #d8c7a0; background: #fffdf8; }
.ov-rare-tag { display: inline-block; margin: 0 0 8px; padding: 3px 9px; border: 1px solid #d8c7a0; border-radius: 999px; color: #8a6d3b; font: 700 11.5px/1.4 var(--sans); letter-spacing: .08em; }
.ov-rare-row header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ov-rare-row h4 { margin: 0; color: #2f3947; font: 700 16px/1.4 var(--serif); }
.ov-rare-bar { position: relative; display: block; height: 5px; margin: 10px 0 0; border-radius: 5px; background: #eeebe4; overflow: hidden; }
.ov-rare-bar::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--rate, 10%); border-radius: inherit; background: linear-gradient(90deg, #9a7f4d, #cbb98f); }
.ov-rare-say { margin: 10px 0 0; color: #4b5563; font: 500 14px/1.7 var(--sans); }
.ov-rare-when { margin: 12px 0 0; padding: 12px 14px; }
.ov-rare-when .ov-locked-q { margin: 0 0 6px; font-weight: 600; }
.ov-rare-when-note { margin: 0; color: #7a6642; font-size: 12.5px; line-height: 1.6; }
.ov-rare-year { white-space: nowrap; }
.ov-rare-lead { max-width: 24em; margin: 0 auto; padding: 22px 18px 18px; border: 1px solid #e3d9c6; border-radius: 14px; background: #fffdf8; }
.ov-rare-line { margin: 0 0 16px; color: #2f3947; font: 700 18px/1.65 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.ov-rare-who { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 0; color: #5c6675; font-size: 14.5px; }
.ov-rare-pct { color: #55312d; font: 800 46px/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-rare-pct small, .ov-rare-rate small { margin-left: 2px; font: 700 .45em/1 var(--sans); color: #7a6642; letter-spacing: 0; }
.ov-rare-lead .ov-foot { margin-top: 14px; }
.ov-rare-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0 0; }
.ov-rare-chips span { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border: 1px solid #ddd5c2; border-radius: 999px; background: #fff; color: #6d6350; font-size: 12.5px; line-height: 1.4; }
.ov-rare-chips span.is-rare { border-color: #c9b88f; color: #55312d; }
.ov-rare-chips b { font-weight: 700; }
.ov-rare-chips i { font-style: normal; color: #8a6d3b; font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-rare-rate { color: #55312d; font: 800 24px/1 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.is-weapon .ov-rare-rate { font-size: 30px; }

/* 칸 사이 다리 문장: 본문이 아니라 숨 고르는 감성 에세이 브릿지 */
.ov-bridge { max-width: 25em; margin: 10px auto; padding: 12px 18px 24px; text-align: center; }
.ov-bridge::before {
  content: '✦';
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 14px;
  color: #bfae8a;
  font-size: 11px;
  line-height: 1;
  background: linear-gradient(#e4dac8, #e4dac8) left center / calc(50% - 16px) 1px no-repeat,
              linear-gradient(#e4dac8, #e4dac8) right center / calc(50% - 16px) 1px no-repeat;
  justify-content: center;
}
.ov-bridge p {
  margin: 0;
  color: #5a4f3e;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: -.01em;
  font-weight: 500;
  text-wrap: balance;
}

/* 영역 카드: 다섯 개를 다 펼치되 짧게. 머리(영역·질문 수) → 궁금증 한 줄 → 첫 문장(끝만 흐림). */
.ov-areas.is-compact .ov-area-list { display: grid; gap: 10px; max-width: 26em; margin: 4px auto 0; padding: 0; }
.ov-areas.is-compact .ov-area-card { padding: 14px 16px 15px; border: 1px solid #ebe6dc; border-radius: 12px; background: #fff; text-align: left; }
.ov-areas.is-compact .ov-area-card.is-mine { background: #fffdf8; border-color: #e3d9c6; }
.ov-areas.is-compact .ov-area-card header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 6px; }
.ov-areas.is-compact .ov-area-title { display: flex; align-items: center; gap: 6px; }
.ov-areas.is-compact .ov-area-title b { color: #8a6d3b; font: 700 12.5px/1 var(--sans); letter-spacing: .06em; }
.ov-areas.is-compact .ov-area-title em { padding: 2px 7px; border: 1px solid #d8c7a0; border-radius: 999px; color: #8a6d3b; font: 600 11px/1.4 var(--sans); font-style: normal; }
.ov-areas.is-compact .ov-area-count { margin: 0; padding: 0; border: 0; color: #9aa0a8; font: 500 12px/1 var(--sans); }
.ov-areas.is-compact .ov-area-hook { max-width: none; margin: 0 0 6px; padding: 0; color: #2f3947; font: 700 16.5px/1.5 var(--serif); text-align: left; }
.ov-areas.is-compact .ov-area-hook::after { display: none; }
.ov-areas.is-compact .ov-area-text { margin: 0; color: #4b5563; font: 500 14px/1.7 var(--sans); }
/* 차례: 접지 않고 장마다 한 줄. */
.ov-toc-part { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ov-toc-part small { color: #b5a98c; font: 600 12px/1 var(--sans); }
.ov-toc-row { padding: 9px 0; }
.ov-toc-row .ov-toc-line { margin: 2px 0 0; font-size: 12.5px; color: #8b929d; }

.ov-toc-row { align-items: baseline; padding: 7px 0; border-top: 0; }
.ov-toc-row > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ov-toc-row .ov-toc-chapter { margin: 0; font-size: 14.5px; }
.ov-toc-count { flex: none; color: #8a6d3b; font: 600 12px/1 var(--sans); }
.ov-toc-part { margin-top: 14px !important; padding-top: 12px; }
.ov-rare-who { flex-direction: column; align-items: center; gap: 8px; }
.ov-rare-joint-line { margin: 12px 0 0; color: #6d6350; font: 600 13.5px/1.6 var(--sans); }
/* 드문 것 칸 안의 판정서 축소본 한 줄. 누르면 판정서 팝업. */
.ov-rare-share { display: flex; align-items: center; gap: 14px; width: 100%; margin: 16px 0 0; padding: 12px 14px; border: 1px solid #e3d9c6; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ov-rare-share-thumb { flex: none; display: block; width: 54px; container-type: inline-size; transform: rotate(-4deg); }
.ov-rare-share-thumb .bc-card { box-shadow: 0 6px 14px #3b281726; pointer-events: none; }
.ov-rare-share-text { display: grid; gap: 4px; }
.ov-rare-share-text b { color: #2f3947; font: 700 15px/1.4 var(--serif); }
.ov-rare-share-text small { color: #8a6d3b; font: 600 12.5px/1.4 var(--sans); }
#chart-screen .ov-rare-share-thumb .bc-block h3 { font: 700 3.5cqw/1.2 var(--serif); letter-spacing: -.04em; }
#chart-screen .ov-rare-share-thumb .bc-title { font: inherit; white-space: normal; letter-spacing: -.05em; }
/* 결과지 제목 위 소제목: ○○님의 사주 분석 */
.chart-kicker { margin: 0 0 10px; color: #a08a5f; font: 700 13px/1.4 var(--sans); letter-spacing: .12em; }
/* 드문 것 카드의 재해석: 옛 풀이(옅게) → 지금 풀이(진하게). */
.ov-rare-reframe { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed #e6dcc8; }
.ov-rare-then { margin: 0 0 4px; color: #8b929d; font: 500 13px/1.6 var(--sans); }
.ov-rare-now { margin: 0; color: #55312d; font: 700 15px/1.65 var(--serif); letter-spacing: -.01em; }
.ov-rare-term { margin-left: 7px; color: #a5abb3; font: 500 11.5px/1 var(--sans); letter-spacing: .02em; vertical-align: 2px; }

/* ══ 드문 것 / 숨은 기질: 답답한 박스 대신 품격 있는 매거진 리드 헤더 ══ */
.ov-rare { --rule: #d9ccb0; --rule-soft: #ece4d3; --ink: #2b2620; --seal: #a3392b; }
.ov-rare {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 34px 16px 28px;
  margin: 0 auto;
  max-width: 480px;
  box-shadow: none;
}
.ov-rare .ov-rare-lead { max-width: 28em; margin: 0 auto; padding: 14px 0 10px; border: 0; text-align: left; }
.ov-rare-lead-head { display: block; margin-bottom: 12px; }
.ov-rare .ov-rare-line {
  margin: 0 0 14px;
  color: #1a1612;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -.03em;
  text-wrap: pretty;
}

/* 심리적 팩폭 3줄: 답답한 박스를 벗고 에세이형 넘버링 리스트로 정돈 */
.ov-psych-points {
  margin: 18px 0 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--rule-soft, #ece4d3);
  background: none;
}
.ov-psych-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ov-psych-item { display: flex; align-items: baseline; gap: 10px; text-align: left; }
.ov-psych-num {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--seal, #a3392b);
  letter-spacing: 0.05em;
  flex: none;
}
.ov-psych-text {
  margin: 0;
  color: #2b2620;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.015em;
  font-weight: 500;
}

/* 통계 접어두기 (details) */
.ov-stats-fold { margin: 24px auto 0; max-width: 26em; border: 1px dashed var(--rule, #d9ccb0); border-radius: 6px; padding: 10px 14px; background: rgba(0, 0, 0, 0.015); }
.ov-stats-summary { font-size: 13px; color: var(--muted, #666); cursor: pointer; font-weight: 600; outline: none; }
.ov-stats-body { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule-soft, #ece4d3); }

/* 판정서 축소본 줄: 흰 상자 대신 실선 위 한 줄 */
.ov-rare .ov-rare-share { margin: 14px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
/* 근거 카드 → 문서의 항목. 상자·그림자 없이 실선으로 나눈다. */
.ov-rare .ov-rare-heading { max-width: 26em; margin: 20px auto 0; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); color: var(--ink); font: 700 13px/1.4 var(--sans); letter-spacing: .08em; }
.ov-rare .ov-rare-list { gap: 0; max-width: 26em; }
.ov-rare .ov-rare-row, .ov-rare .ov-rare-row.is-weapon { padding: 12px 0 14px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
.ov-rare .ov-rare-row h4 { color: var(--ink); font-size: 15px; }
.ov-rare .ov-rare-rate { color: var(--ink); font-size: 17px; }
.ov-rare .is-weapon .ov-rare-rate { color: var(--seal); font-size: 19px; }
.ov-rare .ov-rare-tag { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; padding: 0; border: 0; color: var(--seal); font: 700 12px/1 var(--sans); letter-spacing: .06em; }
.ov-rare-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--seal); border-radius: 2px; font: 700 11px/1 var(--serif); transform: rotate(-4deg); }
.ov-rare .ov-rare-say { margin-top: 6px; font-size: 14px; color: #4a4338; }
.ov-rare .ov-rare-reframe { border-top: 0; padding-top: 4px; }
.ov-rare .ov-rare-when { margin: 10px 0 0; padding: 2px 0 2px 10px; border: 0; border-left: 2px solid var(--seal); border-radius: 0; background: none; }
/* 같은 여덟 글자: 흰 상자 대신 이중선 위 합계 줄 */
.ov-rare .ov-funnel { max-width: 26em; margin-top: 10px; }
.ov-rare .ov-funnel-last { margin-top: 6px; padding: 10px 0 4px; border: 0; border-top: 3px double var(--rule); border-radius: 0; background: none; }
.ov-rare .ov-funnel-num { color: var(--seal); }
.chart-overview .ov-rare .ov-rare-when { margin: 10px 0 0; padding: 2px 0 2px 10px; border: 0; border-left: 2px solid var(--seal); border-radius: 0; background: none; }
.ov-rare .ov-funnel + .ov-foot { max-width: 26em; text-align: left; font-size: 12px; }
/* 본캐 판정서 축소본은 문서 본문이 아니라 들고 갈 물건이라 카드에 담는다. */
.chart-overview .ov-rare .ov-rare-share { margin: 14px 0 2px; padding: 12px 14px; border: 1px solid #e3d6bb; border-radius: 10px; background: #fffdf8; box-shadow: 0 4px 12px #3b28170f; }
.chart-overview .ov-rare .ov-rare-share:active { transform: translateY(1px); }

/* ══ 문서형 확장 ══ 「드문 것」 칸의 문법(가는 실선·장부 줄·붉은 인장·왼쪽 정렬)을 결과지 읽는 구간 전체로 넓힌다.
   상자 안 상자, 알약, 받침 판을 걷어 낸다. 명식 표와 판정서처럼 「물건」인 것만 모서리 작은 판으로 남긴다. */
#chart-overview { --rule: #d9ccb0; --rule-soft: #ece4d3; --ink: #2b2620; --seal: #a3392b; }

/* 이어서 풀리는 것: 베이지 상자 → 굵은 먹선 위 문단 + 단추 */
#chart-overview .ov-hook { max-width: 26em; padding: 14px 0 4px; border: 0; border-top: 1.5px solid var(--ink); border-radius: 0; background: none; }
#chart-overview .ov-hook-kicker { color: var(--seal); font-size: 12.5px; letter-spacing: .08em; }
#chart-overview .ov-hook-text { font-size: 16.5px; }
#chart-overview .ov-hook-cta { border-radius: 4px; }

/* 원국: 조잡한 격자 테두리를 벗고 하나의 단아한 명식 족자 형태로 정돈 */
#chart-overview .ov-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  max-width: 360px;
  margin: 16px auto 0;
  padding: 14px 12px;
  background: #fbf7ee;
  border: 1px solid #e7dcce;
  border-radius: 12px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}
#chart-overview .ov-pillar {
  border: 0;
  background: transparent;
  padding: 6px 2px 8px;
}
#chart-overview .ov-pillar.is-day {
  background: #efe7d6;
  border-radius: 8px;
}
#chart-overview .ov-chips { display: block; max-width: 26em; margin: 18px auto 0; border-top: 1px solid var(--rule); text-align: left; }
#chart-overview .ov-chips span { position: relative; display: block; padding: 9px 0 9px 16px; border: 0; border-bottom: 1px solid var(--rule-soft); border-radius: 0; background: none; color: #4a4338; font-size: 14px; }
#chart-overview .ov-chips span::before { content: ''; position: absolute; left: 3px; top: 1.05em; width: 5px; height: 5px; background: var(--seal); transform: rotate(45deg); }
#chart-overview .ov-found { max-width: 26em; }
#chart-overview .ov-found-tags { gap: 2px 0; }
#chart-overview .ov-found-tags span { padding: 0; border: 0; border-radius: 0; background: none; color: #4a4338; font: 600 14px/1.9 var(--sans); }
#chart-overview .ov-found-tags span + span::before { content: '·'; margin: 0 8px; color: #c6b896; }
#chart-overview .ov-found-tags span.is-more { color: var(--seal); }

/* 오행 막대·힘의 저울·큰 변화 목록: 받침 판을 걷고 위아래 실선으로 */
#chart-overview :is(.ov-bars, .ov-scale, .ov-omen-list) { max-width: 26em; padding: 12px 14px; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; backdrop-filter: none; }
#chart-overview .ov-scale { margin-top: 16px; }

/* 네 영역: 카드 다섯 장 → 먹선 아래 항목 다섯 개 */
#chart-overview .ov-areas.is-compact .ov-area-list { gap: 0; max-width: 26em; border-top: 1.5px solid var(--ink); }
#chart-overview .ov-areas.is-compact .ov-area-card { padding: 16px 0 18px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; }
#chart-overview .ov-areas.is-compact .ov-area-title b { color: var(--seal); }
#chart-overview .ov-areas.is-compact .ov-area-title em { padding: 1px 6px; border: 1px solid var(--seal); border-radius: 2px; background: none; color: var(--seal); }
#chart-overview .ov-area-teaser-capsule {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fbf7ee;
  border: 1px solid #ebdcc5;
  font-size: 13.5px;
  color: #3f362a;
}
#chart-overview .ov-teaser-icon { font-size: 13px; line-height: 1; }
#chart-overview .ov-area-teaser-capsule strong { font-weight: 600; color: #2b231a; flex: 1; text-align: left; }
#chart-overview .ov-area-teaser-capsule small { color: var(--seal); font-weight: 700; font-size: 12px; white-space: nowrap; }

/* 지금 시기: 요약 상자 → 장부 한 줄, 상위 % 상자 → 인장, 잠긴 줄 → 붉은 세로선 */
#chart-overview .premium-decade-summary { gap: 0; border-top: 1.5px solid var(--ink); }
#chart-overview .premium-decade-stat { padding: 10px 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
#chart-overview .ov-rank { max-width: 26em; padding: 16px 0; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
#chart-overview .ov-rank-big { display: grid; place-items: center; min-width: 78px; padding: 12px 8px; border: 2px solid var(--seal); border-radius: 3px; background: #a3392b0a; color: var(--seal); font-size: 21px; text-align: center; transform: rotate(-3deg); box-shadow: inset 0 0 0 3px #fffdf8, inset 0 0 0 4px #a3392b66; }
#chart-overview .ov-locked-line { padding: 2px 0 2px 12px; border: 0; border-left: 2px solid var(--seal); border-radius: 0; background: none; }

/* 큰 변화의 시기: 상자 속 상자 → 장부 줄, 알약 → 색 글씨 */
#chart-overview .ov-omen-list { gap: 0; }
#chart-overview .ov-omen-list .ov-omen-row { padding: 12px 0; border: 0; border-bottom: 1px solid var(--rule-soft); border-radius: 0; background: none; }
#chart-overview .ov-omen-list .ov-omen-row:last-child { border-bottom: 0; }
#chart-overview .ov-omen-dir { padding: 0; border-radius: 0; background: none; font-size: 13px; }
#chart-overview .ov-omen-dir.is-down { color: var(--seal); }
#chart-overview .ov-omen-dir.is-mix { color: #8a6d3b; }

/* 결제 구간은 상품 안내라 판을 두되 모서리를 줄여 같은 문서 안에 둔다. */
#chart-overview :is(.ov-sales, .ov-card-feature) { border-radius: 6px; }
#chart-overview .ov-toc-list { border-radius: 4px; }

/* ══ 무료 결과지 에세이·매거진 룩: 답답한 이중/삼중 테두리 상자를 벗고 자연스러운 여백과 깊이감 부여 ══ */
#chart-overview .ov-section:is(.ov-hero, .ov-portrait, .ov-energy, .ov-luck, .ov-omen, .ov-concern, .ov-areas) {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 38px 16px 32px;
  margin: 0 auto;
  max-width: 480px;
  box-shadow: none;
}
#chart-overview .ov-section:is(.ov-hero, .ov-portrait, .ov-energy, .ov-luck, .ov-omen, .ov-concern, .ov-areas) + .ov-section {
  border-top: 1px solid var(--rule-soft, #ece4d3);
}
#chart-overview .ov-section:is(.ov-hero, .ov-portrait, .ov-energy, .ov-luck, .ov-omen, .ov-concern) .ov-title {
  color: #1a1612;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
#chart-overview .ov-section:is(.ov-hero, .ov-portrait, .ov-energy, .ov-luck, .ov-omen, .ov-concern) .ov-lead {
  color: #3b332a;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}
#chart-overview .ov-section:is(.ov-hero, .ov-portrait, .ov-energy, .ov-luck, .ov-omen, .ov-concern) .ov-para p {
  color: #2b2620;
  font-size: 16px;
  line-height: 1.8;
}
#chart-overview .ov-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#chart-overview .ov-point-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-align: left;
}
#chart-overview .ov-point-num {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--seal, #a3392b);
  letter-spacing: 0.05em;
  flex: none;
}
#chart-overview .ov-point-text {
  margin: 0;
  color: #2b2620;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}
#chart-overview .ov-points li {
  color: #2b2620;
  font-size: 16px;
  line-height: 1.75;
}

/* 캡션처럼 작고 흐리던 요소들(원국 요약, 칩, 태그, 기둥 라벨) 정상 본문 크기로 보정 */
#chart-overview .ov-quote {
  margin: 20px auto 0;
  padding: 14px 18px;
  background: #fbf7ee;
  border: 1px solid #e8decb;
  border-radius: 10px;
  text-align: left;
}
#chart-overview .ov-quote p {
  color: #1a1612;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 6px;
}
#chart-overview .ov-quote p::before { display: none; }
#chart-overview .ov-quote small {
  display: block;
  color: #5c503e;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
}
#chart-overview .ov-chips span {
  font-size: 15px;
  line-height: 1.6;
  color: #3b332a;
  font-weight: 500;
}
#chart-overview .ov-found-tags span {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  color: #2b2620;
}
#chart-overview .ov-pillar-label {
  font-size: 13px;
  font-weight: 700;
  color: #4a5b73;
}
#chart-overview .ov-pillar-god {
  font-size: 12px;
  font-weight: 700;
}
#chart-overview .ov-char strong {
  font-size: 28px;
}
#chart-overview .ov-char small {
  font-size: 12px;
  font-weight: 600;
  color: #4b5360;
}
/* 무료 결과 하단의 주월 채팅 단추: 장면 그림을 동그랗게 자르면 얼굴이 작아서, 얼굴만 담은 그림을 쓰고 한 단계 키운다. */
.ov-float-chat { width: 64px; height: 64px; padding: 2px; }
.ov-float-chat img { object-position: 50% 50%; }

/* 무료 결과의 큰 단추(결제·이어 읽기·카드 저장)는 폭과 모서리를 입력폼과 같게 맞춘다. 맨 아래 떠 있는 단추(.ov-floats)는 건드리지 않는다. */
#chart-screen .ov-cta,
#chart-screen .ov-hook-cta,
#chart-screen .promo-cta-button,
#chart-screen .ov-area-offer .ov-cta,
#chart-screen .ov-offer .ov-cta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: min(100%, 312px); max-width: 100%; min-height: 52px; margin-inline: auto; padding: 0 18px; box-sizing: border-box;
  border-radius: 12px; font: 700 15px/1.3 var(--sans); text-align: center; text-decoration: none;
}
#chart-screen .ov-card-actions { justify-items: center; }

/* 무료 결과의 바깥 큰 카드는 모서리를 모두 16px로 맞춘다(최상단 카드 기준). 카드 안쪽 인용문·후기·목록은 바깥보다 작게 그대로 둔다. */
#chart-screen #chart-overview :is(.ov-sales, .ov-card-feature) { border-radius: 16px; }
#chart-screen .engine-proof.engine-proof, #free-promo-flow-report .engine-proof.engine-proof { border-radius: 16px; }

/* 결과 화면의 떠 있는 채팅·공유 아이콘은 쓰지 않는다. 버튼 요소는 다른 곳의 "주월에게 물어보기"가 클릭을 넘겨 쓰므로 남기고 숨긴다. */
#ov-floats .ov-chatwrap, #ov-floats .ov-float-chat, #ov-floats .ov-float-share, #ov-chattip { display: none !important; }

/* 정통사주 무료 결과: 평생사주와의 차이 목록 */
.ov-diff-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ov-diff-list li { display: grid; gap: 2px; padding: 11px 14px; border: 1px solid #e3d6b8; border-radius: 10px; background: #fffdf9; text-align: left; }
.ov-diff-list b { color: #a3392b; font-size: 14px; }
.ov-diff-list span { color: #4a4038; font-size: 13.5px; line-height: 1.6; word-break: keep-all; }
/* 사주 원국표의 글자(시·일·월·연, 십신, 지지 이름)는 기둥 안에서 가운데로 맞춘다. 카드 안에 들어가도 왼쪽으로 쏠리지 않는다. */
#chart-overview .ov-pillar { text-align: center; }
#chart-overview .ov-pillar > :is(.ov-pillar-label, .ov-pillar-god) { display: block; text-align: center; }
#chart-overview .ov-pillar .ov-char { justify-items: center; align-items: center; text-align: center; }
#chart-overview .ov-pillar .ov-char > * { text-align: center; }

/* 첫 질문 시트 */
.ov-ask { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; justify-content: center; }
.ov-ask[hidden] { display: none; }
.ov-ask-backdrop { position: absolute; inset: 0; background: rgba(36, 28, 20, .45); }
.ov-ask-sheet { position: relative; width: min(100%, 460px); box-sizing: border-box; padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; background: #fffdf8; box-shadow: 0 -8px 28px rgba(47, 38, 30, .22); font-family: var(--sans); color: #2b231e; animation: ask-in .22s ease-out both; }
.ov-ask-close { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; background: none; font-size: 24px; line-height: 1; color: #7a6a4f; cursor: pointer; }
.ov-ask-title { margin: 0 28px 4px 0; font: 700 17px/1.45 var(--sans); }
.ov-ask-lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: #6d5f4b; }
.ov-ask-chips { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ov-ask-chip { padding: 9px 12px; border: 1px solid #d9ccb4; border-radius: 12px; background: #fbf6ea; font: 500 14px/1.4 var(--sans); color: #3b3126; text-align: left; cursor: pointer; }
.ov-ask-chip:hover, .ov-ask-chip:focus-visible { border-color: #b9985a; outline: none; }
.ov-ask-input { display: block; width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #d9ccb4; border-radius: 12px; background: #fff; font: 500 16px/1.5 var(--sans); color: #2b231e; resize: none; }
.ov-ask-send { display: block; width: 100%; margin-top: 10px; padding: 13px; border: 0; border-radius: 12px; background: #3a2d22; color: #fffdf7; font: 700 15px/1 var(--sans); cursor: pointer; }
.ov-ask-send:disabled { opacity: .4; cursor: default; }
.ov-ask-note { min-height: 1.4em; margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: #7a6a4f; text-align: center; }
.ov-ask-room { display: block; margin: 2px auto 0; padding: 6px 8px; border: 0; background: none; font: 500 12.5px/1.4 var(--sans); color: #8a7a60; text-decoration: underline; cursor: pointer; }
.ov-chattip { cursor: pointer; }
@keyframes ask-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ov-ask-sheet { animation: none; } }
.login-send-question { margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid #b9985a; background: #fbf6ea; font: 500 14.5px/1.55 var(--sans); color: #3b3126; word-break: keep-all; }
.login-send-go { text-align: center; text-decoration: none; box-sizing: border-box; }

/* 차례 미리보기: 장 이름은 한 줄로, 설명은 그 아래 전체 폭에 둔다(좁은 칸에 장 이름이 "여는/글"처럼 끊기지 않게). */
.ov-toc-row > div { display: block; }
.ov-toc-row .ov-toc-chapter { white-space: nowrap; }
.ov-toc-row .ov-toc-line { display: block; margin: 3px 0 0; }
.ov-toc-row .ov-toc-dash { display: none; }

/* 구매 영역: 가격 바로 위에 함께 드리는 것을 보여 준다. */
.ov-offer-includes { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; text-align: left; }
.ov-offer-includes li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: #f6efe3; color: #3a2c20; font: 600 13.5px/1.55 var(--sans, Pretendard, sans-serif); word-break: keep-all; }
.ov-offer-includes b { color: #a3392b; font-size: 11.5px; font-weight: 800; }
.ov-offer-own { margin: 0 0 10px; text-align: center; color: #a3392b; font: 700 13.5px/1.6 var(--sans, Pretendard, sans-serif); word-break: keep-all; }

.ov-offer-book { display: grid; justify-items: center; gap: 6px; margin: 0 0 16px; text-align: center; }
.ov-offer-book-kicker { color: #a3392b; font: 800 12px/1.4 var(--sans, Pretendard, sans-serif); letter-spacing: .08em; }
.ov-offer-book-title { color: #2f241a; font: 800 20px/1.5 'Noto Serif KR', 'Noto Serif CJK KR', serif; letter-spacing: -.03em; word-break: keep-all; }
.ov-offer-book-text { margin: 0; color: #4a4038; font: 500 14px/1.7 var(--sans, Pretendard, sans-serif); word-break: keep-all; }

.ov-offer-event { margin: 4px 0 0; color: #3b6ea8; font: 600 13px/1.5 var(--sans); text-align: center; }

.ov-love-teaser { margin: 16px 0 6px; padding: 16px 16px 14px; border-radius: 14px; background: #fff7ee; border: 1px solid #ecd9bf; text-align: center; }
.ov-love-kicker { display: block; color: #8a6d62; font: 600 12px/1.4 var(--sans); }
.ov-love-title { margin: 4px 0 6px; color: #55312d; font: 700 16px/1.4 var(--sans); }
.ov-love-when { margin: 0; color: #b3345a; font: 800 28px/1.3 var(--sans); }
.ov-love-why, .ov-love-near, .ov-love-count { margin: 6px 0 0; color: #5a463b; font: 500 14px/1.6 var(--sans); }
.ov-love-near { color: #3b6ea8; font-weight: 700; }
.ov-love-lock { margin: 10px 0 12px; color: #8a7466; font: 400 13px/1.6 var(--sans); }
.ov-love-teaser[hidden] { display: none; }