/* Paid-reading front matter and the shared score gauge (Chununrok's own forms). */
.ro-front { display: grid; gap: 22px; margin: 0 0 30px; }
.ro-cover { overflow: hidden; border-radius: 22px; background: #fffaf3; border: 1px solid #eedfcd; }
.ro-cover img.ro-cover-art { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 18%; border-radius: 0; }
.ro-cover-copy { padding: 18px 20px 22px; color: #4a3426; }
.ro-cover-guide { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 650; color: #8c6a50; }
.ro-cover-sd { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; background: #f6ebdc; }
.ro-cover-title { margin: 0 0 6px; font-size: clamp(30px, 9vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.04em; color: #5e3a26; word-break: keep-all; }
.ro-cover-caption { margin: 0; font-size: 15px; line-height: 1.7; color: #7c6250; word-break: keep-all; }

.sg-card { padding: 20px 20px 18px; border-radius: 24px; background: #fffaf3; border: 1px solid #eedfcd; color: #4a3426; }
.sg-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #8c6a50; }
.sg-main { display: grid; justify-items: center; gap: 12px; }
.sg-gauge { position: relative; width: 170px; }
.sg-arc { display: block; width: 100%; height: auto; overflow: visible; }
.sg-arc path { fill: none; stroke-width: 11; stroke-linecap: round; }
.sg-arc-track { stroke: #efe3d3; }
.sg-arc-fill { stroke: #c9773f; }
.sg-card.is-anim .sg-arc-fill { transition: stroke-dasharray 1.1s cubic-bezier(.22,.7,.25,1); }
.sg-number strong, .sg-value { font-variant-numeric: tabular-nums; }
.sg-verdict { position: absolute; left: 0; right: 0; bottom: 20px; margin: 0; text-align: center; font-size: 38px; line-height: 1; font-weight: 900; letter-spacing: -.02em; color: #5e3a26; }
.sg-verdict.is-great { color: #b23a2a; } .sg-verdict.is-good { color: #c0622a; } .sg-verdict.is-even { color: #7d6a4c; } .sg-verdict.is-low { color: #55525e; }
.sg-number { position: absolute; left: 0; right: 0; bottom: -4px; margin: 0; text-align: center; }
.sg-number strong { font-size: 18px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: #8c6a50; }
.sg-number span { font-size: 16px; font-weight: 700; color: #8c6a50; margin-left: 2px; }
.sg-talk { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.sg-guide { width: 58px; height: 68px; object-fit: contain; flex: none; }
.sg-bubble { position: relative; flex: 1; margin: 0; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: #fff; border: 1px solid #ead9c6;
  font-size: 14px; font-weight: 650; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.sg-speaker { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: #a0805f; }
.sg-items { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed #e4d3bf; display: grid; gap: 10px; }
.sg-items li { display: grid; grid-template-columns: minmax(4.5em, 1fr) auto 2.2em; align-items: center; gap: 12px; font-size: 14px; font-weight: 650; }
.sg-label { word-break: keep-all; }
.sg-beads { display: inline-flex; gap: 6px; }
.sg-beads span { width: 13px; height: 13px; border-radius: 50%; background: #efe3d3; box-shadow: inset 0 0 0 1px #e2d0bb; }
.sg-beads span.is-on { background: radial-gradient(circle at 35% 35%, #f3c08e, #c9773f); box-shadow: none; }
/* Beads light one after another (180ms apart); every aspect starts together. */
.sg-card.is-anim .sg-beads span.is-on { background: #efe3d3; box-shadow: inset 0 0 0 1px #e2d0bb; }
.sg-card.is-play .sg-beads span.is-on { animation: sg-bead .34s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(250ms + var(--i) * 180ms); }
@keyframes sg-bead { from { background: #efe3d3; box-shadow: inset 0 0 0 1px #e2d0bb; transform: scale(.55); }
  to { background: radial-gradient(circle at 35% 35%, #f3c08e, #c9773f); box-shadow: none; transform: scale(1); } }
.sg-value { text-align: right; font-size: 13px; color: #8c6a50; font-variant-numeric: tabular-nums; }
.sg-note { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: #9b7f6b; word-break: keep-all; }

.pc-card { padding: 18px 14px 16px; border-radius: 24px; background: #fffaf3; border: 1px solid #eedfcd; color: #4a3426; }
.pc-head { padding: 0 4px 12px; }
.pc-name { margin: 0; font-size: 15px; font-weight: 700; color: #8c6a50; }
.pc-date { margin: 2px 0 0; font-size: clamp(17px, 5vw, 21px); font-weight: 800; letter-spacing: -.02em; }
.pc-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pc-pillar { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 4px 12px; border-radius: 18px; background: #f7eee2; }
.pc-pillar.is-self { background: #f1e1cd; box-shadow: inset 0 0 0 2px #d9a978; }
.pc-pillar-name { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; font-weight: 700; color: #7c6250; }
.pc-self { padding: 1px 6px; border-radius: 99px; background: #b0683c; color: #fff; font-size: 11px; }
.pc-badge { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; color: #fff; text-align: center; }
.pc-badge b { font-size: 27px; line-height: 1; font-family: serif; color: #fff; }
.pc-badge small { font-size: 10px; opacity: .92; margin-top: -10px; }
.pc-badge.is-목 { background: #5f9a6e; } .pc-badge.is-화 { background: #d0604b; } .pc-badge.is-토 { background: #c79a57; }
.pc-badge.is-금 { background: #a5a09a; } .pc-badge.is-수 { background: #44607e; }
.pc-god { margin: 0; font-size: 12px; font-weight: 650; text-align: center; word-break: keep-all; }
.pc-god.is-hidden { margin-top: -4px; font-weight: 500; color: #8c6a50; }
.pc-missing { margin: 22px 0; font-size: 12px; line-height: 1.5; text-align: center; color: #9b7f6b; word-break: keep-all; }
.pc-elements { list-style: none; margin: 14px 4px 0; padding: 12px 0 0; border-top: 1px dashed #e4d3bf; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 13px; font-weight: 650; }
.pc-elements li { display: inline-flex; align-items: center; gap: 5px; }
.pc-elements li span { width: 10px; height: 10px; border-radius: 50%; }
.pc-elements .is-목 span { background: #5f9a6e; } .pc-elements .is-화 span { background: #d0604b; } .pc-elements .is-토 span { background: #c79a57; }
.pc-elements .is-금 span { background: #a5a09a; } .pc-elements .is-수 span { background: #44607e; }
@media (max-width: 360px) {
  .sg-gauge { width: 150px; } .sg-verdict { font-size: 32px; bottom: 19px; }
  .pc-pillars { gap: 5px; } .pc-badge { width: 52px; height: 52px; } .pc-badge b { font-size: 22px; } .pc-god { font-size: 11px; }
}