/* ---------- 아닙니다 (상간 피고 '아닙니다' 구성) ---------- */
.myth{background:var(--bg)}
.quotes{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.quotes p{position:relative;max-width:max-content;font-family:var(--serif);font-size:22px;line-height:1.5;color:#e6e6e6;padding:18px 32px;border-radius:32px;background:var(--qb)}
.quotes p::after{content:"";position:absolute;bottom:-9px;width:22px;height:18px;background:var(--qb)}
.quotes p:nth-child(1){--qb:#262626}
.quotes p:nth-child(2){--qb:#1b1b1b;color:#cfcfcf}
.quotes p:nth-child(1){align-self:flex-start;border-bottom-left-radius:8px}
.quotes p:nth-child(1)::after{left:0;clip-path:polygon(0 0,100% 0,0 100%)}
.quotes p:nth-child(2){align-self:flex-end;border-bottom-right-radius:8px}
.quotes p:nth-child(2)::after{right:0;clip-path:polygon(0 0,100% 0,100% 100%)}
.no{margin-top:72px;font-family:var(--serif);font-weight:200;font-size:clamp(64px,7vw,104px);line-height:1.15;letter-spacing:-.04em}
.no__mask{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em}
.no__txt{display:inline-block}
.js .no__txt{transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.js .no.is-in .no__txt{transform:none}
.myth__fact{margin-top:24px;font-size:18px;line-height:1.75;color:var(--tx-2)}
.versus{--ring:min(380px,28vw);margin:72px auto 0;display:flex;align-items:center;justify-content:center}
.vring{position:relative;flex:0 0 var(--ring);width:var(--ring);aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 calc(var(--ring)*.13)}
.vring__line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.vring__line circle.v{fill:none;stroke:var(--pt);stroke-width:1;vector-effect:non-scaling-stroke}
.vring--bad .vring__line circle.v{stroke:rgba(255,255,255,.5);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;translate:0 -10px}
/* 원 아래쪽이 좁아 글씨가 눌려 보여서, 내용을 살짝 위로 올려 시각적 상하 여백을 맞춤 */
.vring__ic{display:grid;place-items:center;color:var(--pt)}
.vring__ic svg{width:40px;height:40px}
.vring__if{margin-top:18px;font-size:15px;color:rgba(255,255,255,.66)}
.vring h3{margin-top:6px;font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.8vw,26px);line-height:1.45;letter-spacing:-.03em}
.vring p{margin-top:12px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.74)}
.vring--bad .vring__ic{color:#b9bcc8}
.vring--bad h3{color:#cfd1da}
.varrow{flex:0 0 55px;height:24px;margin:0 28px}
.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}
.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:first-child .vring__body{animation-delay:.35s}
.js .versus.is-in>.vring:last-child circle.m{animation-delay:.95s}
.js .versus.is-in>.vring:last-child .vring__body{animation-delay:1.3s}
@keyframes vDraw{from{stroke-dashoffset:101}to{stroke-dashoffset:0}}
@keyframes vFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes vArrow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.myth__close{margin-top:64px;font-family:var(--serif);font-weight:200;font-size:30px;line-height:1.5}
.myth__close b{font-weight:200}