.easy-preview {
    width: 100%;
    color: var(--c-ink);
    font: 400 17px/1.62 "Noto Sans KR", sans-serif;
    word-break: keep-all;
}

.easy-preview *,
.easy-preview *::before,
.easy-preview *::after { box-sizing: border-box; }

.ep-wrap { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 16px; }

.ep-header { padding: 46px 0 6px; text-align: center; }
.ep-header h1 { margin: 0 0 4px; font: 400 30px/1.3 "Gowun Dodum", serif; }
.ep-header p { margin: 0; color: var(--c-ink-2); font-size: 15px; }

.ep-profile-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 14px 0 0;
    border-block: 1px solid rgb(94 66 39 / 18%);
    text-align: left;
}

.ep-profile-meta > div {
    min-width: 0;
    padding: 10px 12px;
}

.ep-profile-meta > div:not(.is-wide) + div:not(.is-wide) {
    border-left: 1px solid rgb(94 66 39 / 18%);
}

.ep-profile-meta .is-wide {
    grid-column: 1 / -1;
    border-bottom: 1px solid rgb(94 66 39 / 18%);
}

.ep-profile-meta dt {
    margin: 0 0 2px;
    color: var(--c-ink-2);
    font-size: 15px;
}

.ep-profile-meta dd {
    margin: 0;
    color: var(--c-ink);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.45;
}

.ep-zone {
    margin: 14px 0;
    padding: 22px 18px 24px;
    border-radius: 20px;
    background: var(--c-white);
    box-shadow: 0 6px 20px rgb(94 66 39 / 12%);
}
.ep-zone.is-cream { background: var(--jb-paper-2); }
.ep-zone > :first-child,
.ep-core-evidence > :first-child { margin-top: 0; }
.ep-zone > :last-child,
.ep-core-evidence > :last-child { margin-bottom: 0; }
.ep-zone h2,
.ep-core-evidence h2 { margin: 0 0 4px; font: 400 22px/1.35 "Gowun Dodum", serif; }
.ep-sub { margin: 0 0 16px; color: var(--c-ink-2); font-size: 15px; }

.ep-steps { display: grid; gap: 8px; counter-reset: ep-step; }
.ep-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 14px;
    background: var(--c-white);
    box-shadow: 0 2px 8px rgb(94 66 39 / 10%);
}
.ep-step::before {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--jb-red-deep);
    color: var(--c-white);
    content: counter(ep-step);
    counter-increment: ep-step;
    font-size: 16px;
    font-weight: 800;
    line-height: 34px;
    text-align: center;
}
.ep-step b { display: block; font-size: 16px; }
.ep-step span { display: block; color: var(--c-ink-2); font-size: 15px; line-height: 1.5; }

.ep-board { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.ep-board th { padding: 0 0 2px; color: var(--c-ink-2); font-size: 15px; line-height: 1.4; }
.ep-board td {
    padding: 10px 2px 8px;
    border-radius: 12px;
    background: var(--c-white);
    text-align: center;
    box-shadow: 0 2px 6px rgb(94 66 39 / 10%);
}
.ep-han { display: block; font: 400 26px/1.15 "Gowun Dodum", serif; }
.ep-reading { display: block; margin-top: 2px; color: var(--c-ink-2); font-size: 15px; }
.ep-board-empty span { display: block; font-size: 22px; }
.ep-board-empty small { display: block; color: var(--c-ink-soft); font-size: 15px; }
.ep-board .ep-el-fire { box-shadow: inset 0 -3px 0 var(--jb-red), 0 2px 6px rgb(94 66 39 / 10%); }
.ep-board .ep-el-metal { box-shadow: inset 0 -3px 0 var(--jb-el-metal), 0 2px 6px rgb(94 66 39 / 10%); }
.ep-board .ep-el-water { box-shadow: inset 0 -3px 0 var(--jb-el-water), 0 2px 6px rgb(94 66 39 / 10%); }
.ep-board .ep-el-wood { box-shadow: inset 0 -3px 0 var(--jb-el-wood), 0 2px 6px rgb(94 66 39 / 10%); }
.ep-board .ep-el-earth { box-shadow: inset 0 -3px 0 var(--c-gold), 0 2px 6px rgb(94 66 39 / 10%); }

.ep-bars { display: grid; gap: 7px; margin: 14px 0 6px; }
.ep-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 30px; align-items: center; gap: 10px; font-size: 15px; }
.ep-track { display: block; height: 14px; overflow: hidden; border-radius: 7px; background: var(--jb-paper-2); }
.ep-fill { display: block; width: var(--ep-bar-width); height: 100%; border-radius: inherit; background: var(--c-sand); }
.ep-bar > b { text-align: right; font-variant-numeric: tabular-nums; }
.ep-bar.ep-el-fire .ep-fill { background: var(--jb-red); }
.ep-bar.ep-el-metal .ep-fill { background: var(--jb-el-metal); }
.ep-bar.ep-el-water .ep-fill,
.ep-yin .ep-fill { background: var(--jb-el-water); }
.ep-bar.ep-el-wood .ep-fill { background: var(--jb-el-wood); }
.ep-bar.ep-el-earth .ep-fill { background: var(--c-gold); }
.ep-yang .ep-fill { background: var(--jb-red); }
.ep-caption { margin: 8px 0 0; color: var(--c-ink-2); font-size: 15px; }

.ep-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.ep-chip {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--jb-paper-2);
    color: var(--c-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgb(94 66 39 / 10%);
}
.ep-chip.is-red { background: var(--jb-red-deep); color: var(--c-white); }

.ep-period-card {
    display: grid;
    gap: 3px;
    padding: 15px 16px;
    border: 2px solid var(--jb-red-deep);
    border-radius: 14px;
    background: var(--jb-me);
}
.ep-period-card strong { color: var(--jb-red-deep); font: 400 24px/1.25 "Gowun Dodum", serif; }
.ep-period-card span { color: var(--c-ink); font-size: 15px; font-weight: 700; }

.ep-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.ep-months > span { display: grid; min-width: 0; gap: 1px; padding: 9px 3px; border-radius: 10px; background: var(--jb-paper-2); text-align: center; }
.ep-months > span.is-high { background: var(--jb-yellow); }
.ep-months > span.is-low { background: var(--c-paper); color: var(--c-ink-soft); }
.ep-months b { font-size: 15px; }
.ep-months small { font-size: 15px; }

.ep-proof-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0 18px; color: var(--c-ink-2); font-size: 15px; }
.ep-proof-divider::before,
.ep-proof-divider::after { flex: 1; height: 1px; background: var(--c-sand); content: ""; }
.ep-core-evidence.is-compact h2 { font-size: 20px; }

.ep-year-pillars {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 14px 0 4px;
}
.ep-year-pillar {
    min-width: 0;
    padding: 12px 6px 10px;
    border-radius: 14px;
    background: var(--c-white);
    text-align: center;
    box-shadow: 0 2px 8px rgb(94 66 39 / 10%);
}
.ep-year-pillar-title { display: block; margin-bottom: 4px; color: var(--c-ink-2); font-size: 15px; font-weight: 700; line-height: 1.4; }
.ep-year-pillar-han { display: block; font: 400 30px/1.2 "Gowun Dodum", serif; }
.ep-year-pillar-reading { display: block; margin-top: 2px; color: var(--c-ink-2); font-size: 15px; line-height: 1.45; }
.ep-year-meet-sign { color: var(--jb-red-deep); font: 700 22px/1 "Gowun Dodum", serif; text-align: center; }
.ep-year-meet-caption { color: var(--c-ink); }

.ep-year-pair { display: grid; gap: 10px; margin: 14px 0 6px; }
.ep-year-pair-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 15px; }
.ep-year-pair-lines { display: grid; gap: 3px; }
.ep-year-pair-lines > div { display: grid; grid-template-columns: 40px minmax(0, 1fr) 26px; align-items: center; gap: 8px; }
.ep-year-pair-lines span { color: var(--c-ink-2); font-size: 15px; }
.ep-year-pair-lines i { display: block; height: 11px; overflow: hidden; border-radius: 6px; background: var(--jb-paper-2); }
.ep-year-pair-lines b { display: block; width: var(--ep-year-width); height: 100%; border-radius: 6px; background: var(--c-sand); }
.ep-year-pair-lines strong { font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.ep-year-pair-row.ep-el-fire b { background: var(--jb-red); }
.ep-year-pair-row.ep-el-metal b { background: var(--jb-el-metal); }
.ep-year-pair-row.ep-el-water b { background: var(--jb-el-water); }
.ep-year-pair-row.ep-el-wood b { background: var(--jb-el-wood); }
.ep-year-pair-row.ep-el-earth b { background: var(--c-gold); }

.ep-cycles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.ep-cycles > span { display: grid; min-width: 0; gap: 2px; padding: 10px 5px; border: 2px solid transparent; border-radius: 10px; background: var(--jb-paper-2); text-align: center; }
.ep-cycles > span.is-current { border-color: var(--jb-red-deep); background: var(--jb-me); }
.ep-cycles b { font: 400 20px/1.2 "Gowun Dodum", serif; }
.ep-cycles small { overflow: hidden; color: var(--c-ink-2); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }

.ep-gunghap-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 4px; }
.ep-gunghap-duo > div { min-width: 0; padding: 13px 10px; border-radius: 14px; background: var(--c-white); text-align: center; box-shadow: 0 2px 8px rgb(94 66 39 / 10%); }
.ep-gunghap-duo b { display: block; font: 400 20px/1.3 "Gowun Dodum", serif; }
.ep-gunghap-duo span { display: block; margin-top: 3px; color: var(--c-ink-2); font-size: 15px; }
.ep-gunghap-duo p { margin: 6px 0 0; color: var(--c-ink); font-size: 15px; }
.ep-gunghap-seatgrid { width: 100%; margin-top: 10px; border-collapse: separate; border-spacing: 5px; table-layout: fixed; }
.ep-gunghap-seatgrid th { color: var(--c-ink-2); font: 700 15px/1.4 "Noto Sans KR", sans-serif; }
.ep-gunghap-seatgrid td { padding: 8px 2px; border-radius: 10px; background: var(--c-white); font: 400 19px/1.2 "Gowun Dodum", serif; text-align: center; box-shadow: 0 2px 6px rgb(94 66 39 / 8%); }
.ep-gunghap-seatgrid td small { display: block; color: var(--c-ink-2); font: 400 15px/1.4 "Noto Sans KR", sans-serif; }
.ep-gunghap-seatgrid td.is-hit { box-shadow: inset 0 0 0 2px var(--c-jade), 0 2px 6px rgb(94 66 39 / 8%); }
.ep-gunghap-seatgrid td.is-clash { box-shadow: inset 0 0 0 2px var(--jb-red-deep), 0 2px 6px rgb(94 66 39 / 8%); }
.ep-gunghap-seatnote { display: flex; justify-content: center; gap: 14px; margin-top: 8px; color: var(--c-ink-2); font-size: 15px; }
.ep-gunghap-seatnote i { display: inline-block; width: 11px; height: 11px; margin-right: 4px; border-radius: 3px; vertical-align: -1px; }
.ep-gunghap-seatnote i.is-hit { background: var(--c-jade); }
.ep-gunghap-seatnote i.is-clash { background: var(--jb-red-deep); }
.ep-gunghap-gauge { display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; align-items: center; gap: 10px; margin: 12px 0 2px; font-size: 15px; }
.ep-gunghap-gauge > span:last-child { text-align: right; }
.ep-gunghap-gauge-track { display: flex; height: 16px; overflow: hidden; border-radius: 8px; }
.ep-gunghap-gauge-track i { display: block; width: 50%; height: 100%; }
.ep-gunghap-gauge-track i.is-hit { background: var(--c-jade); }
.ep-gunghap-gauge-track i.is-clash { background: var(--jb-red-deep); }

/* 무료 분석의 핵심 그림은 화면에 들어올 때 크게 움직이고, 쉬었다 다시 재생한다.
   모션은 완성된 화면 위에만 얹어서 JS가 멈춰도 내용이 숨지 않는다. */
.ep-board.is-playing td,
.ep-months.is-playing > span,
.ep-cycles.is-playing > span,
.ep-gunghap-seatgrid.is-playing td {
    animation: ep-tile-rise .72s cubic-bezier(.18, .9, .24, 1.18) both;
    animation-delay: calc(var(--ep-motion-index, 0) * 85ms);
    will-change: opacity, transform;
}
.ep-board tbody tr:first-child td:nth-of-type(1),
.ep-gunghap-seatgrid tbody tr:first-child td:nth-of-type(1),
.ep-months > span:nth-child(1), .ep-cycles > span:nth-child(1) { --ep-motion-index: 0; }
.ep-board tbody tr:first-child td:nth-of-type(2),
.ep-gunghap-seatgrid tbody tr:first-child td:nth-of-type(2),
.ep-months > span:nth-child(2), .ep-cycles > span:nth-child(2) { --ep-motion-index: 1; }
.ep-board tbody tr:first-child td:nth-of-type(3),
.ep-gunghap-seatgrid tbody tr:first-child td:nth-of-type(3),
.ep-months > span:nth-child(3), .ep-cycles > span:nth-child(3) { --ep-motion-index: 2; }
.ep-board tbody tr:first-child td:nth-of-type(4),
.ep-gunghap-seatgrid tbody tr:first-child td:nth-of-type(4),
.ep-months > span:nth-child(4), .ep-cycles > span:nth-child(4) { --ep-motion-index: 3; }
.ep-board tbody tr:nth-child(2) td:nth-of-type(1),
.ep-gunghap-seatgrid tbody tr:nth-child(2) td:nth-of-type(1),
.ep-months > span:nth-child(5), .ep-cycles > span:nth-child(5) { --ep-motion-index: 4; }
.ep-board tbody tr:nth-child(2) td:nth-of-type(2),
.ep-gunghap-seatgrid tbody tr:nth-child(2) td:nth-of-type(2),
.ep-months > span:nth-child(6), .ep-cycles > span:nth-child(6) { --ep-motion-index: 5; }
.ep-board tbody tr:nth-child(2) td:nth-of-type(3),
.ep-gunghap-seatgrid tbody tr:nth-child(2) td:nth-of-type(3),
.ep-months > span:nth-child(7), .ep-cycles > span:nth-child(7) { --ep-motion-index: 6; }
.ep-board tbody tr:nth-child(2) td:nth-of-type(4),
.ep-gunghap-seatgrid tbody tr:nth-child(2) td:nth-of-type(4),
.ep-months > span:nth-child(8), .ep-cycles > span:nth-child(8) { --ep-motion-index: 7; }
.ep-months > span:nth-child(9), .ep-cycles > span:nth-child(9) { --ep-motion-index: 8; }
.ep-months > span:nth-child(10) { --ep-motion-index: 9; }
.ep-months > span:nth-child(11) { --ep-motion-index: 10; }
.ep-months > span:nth-child(12) { --ep-motion-index: 11; }

.ep-bars.is-playing .ep-fill,
.ep-year-pair.is-playing .ep-year-pair-lines b {
    animation: ep-meter-grow .92s cubic-bezier(.2, .9, .28, 1) both;
    animation-delay: calc(var(--ep-motion-index, 0) * 105ms);
    transform-origin: left center;
    will-change: transform;
}
.ep-bars .ep-bar:nth-child(1), .ep-year-pair .ep-year-pair-row:nth-child(1) { --ep-motion-index: 0; }
.ep-bars .ep-bar:nth-child(2), .ep-year-pair .ep-year-pair-row:nth-child(2) { --ep-motion-index: 1; }
.ep-bars .ep-bar:nth-child(3), .ep-year-pair .ep-year-pair-row:nth-child(3) { --ep-motion-index: 2; }
.ep-bars .ep-bar:nth-child(4), .ep-year-pair .ep-year-pair-row:nth-child(4) { --ep-motion-index: 3; }
.ep-bars .ep-bar:nth-child(5), .ep-year-pair .ep-year-pair-row:nth-child(5) { --ep-motion-index: 4; }

.ep-year-pillars.is-playing .ep-year-pillar:first-child,
.ep-gunghap-duo.is-playing > div:first-child {
    animation: ep-meet-left .9s cubic-bezier(.18, .9, .24, 1.12) both;
}
.ep-year-pillars.is-playing .ep-year-pillar:last-child,
.ep-gunghap-duo.is-playing > div:last-child {
    animation: ep-meet-right .9s cubic-bezier(.18, .9, .24, 1.12) both;
}
.ep-year-pillars.is-playing .ep-year-meet-sign {
    animation: ep-sign-pop .7s cubic-bezier(.18, .9, .24, 1.28) .62s both;
}
.ep-gunghap-gauge.is-playing .ep-gunghap-gauge-track i {
    animation: ep-gauge-open .85s cubic-bezier(.2, .9, .28, 1) both;
}
.ep-gunghap-gauge-track i:first-child { transform-origin: right center; }
.ep-gunghap-gauge-track i:last-child { transform-origin: left center; }

@keyframes ep-tile-rise {
    0% { opacity: .12; transform: translateY(22px) scale(.78) rotateX(-20deg); }
    62% { opacity: 1; transform: translateY(-4px) scale(1.07) rotateX(0); }
    100% { opacity: 1; transform: none; }
}
@keyframes ep-meter-grow {
    0% { opacity: .28; transform: scaleX(0); }
    70% { opacity: 1; transform: scaleX(1.05); }
    100% { opacity: 1; transform: scaleX(1); }
}
@keyframes ep-meet-left {
    0% { opacity: .18; transform: translateX(-34px) rotate(-4deg) scale(.88); }
    70% { opacity: 1; transform: translateX(4px) rotate(1deg) scale(1.04); }
    100% { opacity: 1; transform: none; }
}
@keyframes ep-meet-right {
    0% { opacity: .18; transform: translateX(34px) rotate(4deg) scale(.88); }
    70% { opacity: 1; transform: translateX(-4px) rotate(-1deg) scale(1.04); }
    100% { opacity: 1; transform: none; }
}
@keyframes ep-sign-pop {
    0% { opacity: 0; transform: scale(.2) rotate(-24deg); }
    68% { opacity: 1; transform: scale(1.45) rotate(6deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes ep-gauge-open {
    0% { transform: scaleX(0); }
    72% { transform: scaleX(1.06); }
    100% { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    [data-ep-motion], [data-ep-motion] * { animation: none !important; }
}

.ep-cta { padding: 24px 18px 26px; text-align: center; }
.ep-cta-line { margin: 0 0 14px; font: 400 21px/1.45 "Gowun Dodum", serif; }
.ep-cta mark {
    padding: 0 1px;
    background: linear-gradient(transparent 55%, rgb(240 178 82 / 55%) 55%);
    color: inherit;
    font-weight: 700;
}
.pf-concern {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 2px solid var(--c-gold);
    border-radius: 18px;
    background: var(--c-paper);
    box-shadow: 0 5px 0 var(--c-sand);
}
.ep-cta > .pf-concern {
    width: 100%;
    margin: 0 auto 16px;
    text-align: left;
}
.pf-concern:focus-within {
    border-color: var(--c-cta);
    box-shadow: 0 0 0 4px var(--c-cta-soft), 0 5px 0 var(--c-sand);
}
.pf-ask { display: grid; gap: 4px; cursor: text; }
.pf-ask-title {
    color: var(--c-ink);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
    word-break: keep-all;
}
.pf-ask-help {
    color: var(--c-ink-soft);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    word-break: keep-all;
}
.pf-concern textarea {
    width: 100%;
    min-height: 120px;
    padding: 14px 16px;
    resize: vertical;
    border: 2px solid var(--c-gold);
    border-radius: 12px;
    background: var(--c-white);
    color: var(--c-ink);
    cursor: text;
    font-size: 20px;
    line-height: 1.55;
    box-shadow: inset 0 1px 2px rgb(1 12 28 / 8%);
}
.pf-concern textarea::placeholder {
    color: var(--c-ink-soft);
    font-size: 17px;
    opacity: 1;
}
.ep-cta-button {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 17px 0;
    border: 0;
    border-radius: 999px;
    background: var(--jb-red-deep);
    color: var(--c-white);
    cursor: pointer;
    font: 800 18px/1.3 "Noto Sans KR", sans-serif;
    box-shadow: 0 6px 16px rgb(194 30 39 / 35%);
}
.ep-cta-button:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; }
.ep-cta-button:disabled { cursor: wait; opacity: .62; }
.ep-price { margin: 10px 0 0; color: var(--c-ink-2); font-size: 15px; }
.ep-price b { color: var(--jb-red-deep); font-size: 16px; }

@media (max-width: 420px) {
    .ep-wrap { padding-inline: 10px; }
    .ep-zone { padding-inline: 14px; }
    .ep-step { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding-inline: 11px; }
    .ep-step::before { width: 32px; height: 32px; line-height: 32px; }
    .ep-board { border-spacing: 4px; }
    .ep-reading { font-size: 15px; }
    .ep-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}