/* ==========================================================================
   아닙니다 (현실 인식) — 상간소송 피고 랜딩페이지 (법무법인 정서)
   ========================================================================== */
/* ---------- 현실 인식 ---------- */
/* 말풍선: 대화처럼 왼쪽 → 오른쪽, 아래 모서리에 꼬리 */
.myth .quotes{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.myth .quotes p{position:relative;max-width:max-content;font-family:var(--serif);font-size:22px;line-height:1.5;color:#d4d2dd;padding:18px 32px;border-radius:32px;background:var(--navy-2)}
.myth .quotes p::after{content:"";position:absolute;bottom:-9px;width:22px;height:18px;background:var(--navy-2);clip-path:polygon(0 0,100% 0,0 100%)}
.myth .quotes p:nth-child(1){align-self:flex-start;border-bottom-left-radius:8px}
.myth .quotes p:nth-child(1)::after{left:0;clip-path:polygon(0 0,100% 0,0 100%)}
.myth .quotes p:nth-child(2){align-self:flex-end;border-bottom-right-radius:8px}
.myth .quotes p:nth-child(2)::after{right:0;clip-path:polygon(0 0,100% 0,100% 100%)}
/* 메인 타이틀 줄 단위 등장 */
.rv-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.rv-line>span{display:block}
.js [data-rv] .rv-line>span{transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.js [data-rv].is-in .rv-line>span{transform:none}
/* 아닙니다: 스크롤로 보이면 아래에서 위로 올라옴 */
.myth .no{margin-top:72px;font-family:var(--serif);font-weight:200;font-size:clamp(64px,7vw,104px);line-height:1.15;letter-spacing:-.04em;color:#fff}
.myth .no__mask{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em}
.myth .no__txt{display:inline-block}
.js .myth .no__txt{transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.js .myth .no.is-in .no__txt{transform:none}

/* 결과: [청구액 그대로] → [청구 기각 ∩ 최대 70% 감액]. 원은 SVG 선으로 그려지며 하나씩 등장 */
.versus{--ring:min(360px,27vw);margin:72px auto 0;display:flex;align-items:center;justify-content:center}
.vgroup{display:flex;align-items:center}
.vgroup .vring+.vring{margin-left:calc(var(--ring)*-.13)}
.vring{position:relative;flex:0 0 var(--ring);width:var(--ring);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 calc(var(--ring)*.14)}
.vring__line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.vring__line circle.v{fill:none;stroke:var(--plum-soft);stroke-width:1;vector-effect:non-scaling-stroke}
.vring--bad .vring__line circle.v{stroke:rgba(255,255,255,.55);stroke-dasharray:6 6}
.vring__line circle.m{fill:none;stroke:#fff;stroke-width:6;stroke-dasharray:101 101;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50% 50%}
.vring__body{display:flex;flex-direction:column;align-items:center}
.vring__ic{display:grid;place-items:center;color:var(--plum-soft)}
.vring__ic svg{width:40px;height:40px}
.vring__en{margin-top:16px;font-family:var(--serif);font-weight:400;font-size:17px;color:var(--plum-soft);letter-spacing:.01em}
.vring__if{margin-top:18px;font-size:15px;color:rgba(255,255,255,.66)}
.vring h3{margin-top:4px;font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.1vw,30px);letter-spacing:-.03em;color:#fff}
.vring p{margin-top:12px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.74)}
.vring--bad .vring__ic{color:#bdbbc8}
.vring--bad .vring__en{color:#bdbbc8}
.vring--bad h3{color:#cfccd8}
.varrow{flex:0 0 55px;height:24px;margin:0 28px;color:var(--plum-soft)}
.varrow svg{width:100%;height:100%;overflow:visible}
.varrow path{fill:none;stroke:url(#vaGrad);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* 그려지는 효과: 왼쪽 원 → 화살표 → 기각 원 → 감액 원 순서 */
@keyframes vDraw{from{stroke-dashoffset:101}to{stroke-dashoffset:0}}
@keyframes vArrow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes vFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.js .versus .vring__line circle.m{stroke-dashoffset:101}
.js .versus .vring__body{opacity:0}
.js .versus .varrow path{stroke-dasharray:1 1;stroke-dashoffset:1}
.js .versus.is-in .vring__line circle.m{animation:vDraw .8s cubic-bezier(.6,0,.3,1) both}
.js .versus.is-in .vring__body{animation:vFade .45s ease-out both}
.js .versus.is-in .varrow path{animation:vArrow .35s ease-out .7s both}
.js .versus.is-in>.vring .vring__body{animation-delay:.35s}
.js .versus.is-in .vgroup .vring:nth-child(1) circle.m{animation-delay:.95s}
.js .versus.is-in .vgroup .vring:nth-child(1) .vring__body{animation-delay:1.3s}
.js .versus.is-in .vgroup .vring:nth-child(2) circle.m{animation-delay:1.35s}
.js .versus.is-in .vgroup .vring:nth-child(2) .vring__body{animation-delay:1.7s}
.myth__close{margin-top:64px;font-family:var(--serif);font-weight:200;font-size:30px;line-height:1.5;color:#fff}
.myth__close b{font-weight:600}