.cg{ max-width: 420px; margin: var(--v3-fig-gap, 40px) auto }
.cg__card{ background: #fff; border: 1px solid #C3CEE6; border-radius: 18px; padding: 18px 16px 16px; color: #0b1c4d;
  box-shadow: 0 6px 20px rgba(11, 28, 77, .07) }
.cg__kick{ font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; color: #1E40AF }
.cg__h{ margin: 4px 0 2px; font-size: var(--fs-subtitle); font-weight: 800; letter-spacing: -.02em; line-height: 1.35 }
.cg__lead{ margin: 0 0 14px; font-size: var(--fs-xs); color: #5b6b8f; line-height: 1.5 }

.cg__step{ margin: 0 0 12px }
.cg__lbl{ display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 700; color: #2B3D63 }
.cg__lbl b{ color: #1E40AF; letter-spacing: .04em }
.cg__row{ display: grid; gap: 6px }
.cg__row--2{ grid-template-columns: 1fr 1fr }
.cg__row--3{ grid-template-columns: 1fr 1fr 1fr }
.cg__c{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px;
  padding: 6px 4px; border: 1px solid #A3B3D4; border-radius: 10px; background: #F5F8FD; text-align: center;
  font-size: var(--fs-sm); font-weight: 700; color: #0b1c4d; line-height: 1.25 }
.cg__c small{ font-size: var(--fs-micro); font-weight: 500; color: inherit; opacity: .72 }   
.cg__c--on{ background: #1E40AF; border-color: #1E40AF; color: #fff }
.cg__c--on::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: rgba(255, 196, 0, .55); opacity: 0; pointer-events: none }

.cg__res{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0; padding: 12px 14px;
  border-radius: 12px; background: #eef2fa }
.cg__res span{ font-size: var(--fs-sm); font-weight: 700; color: #2B3D63 }
.cg__res b{ position: relative; font-size: var(--fs-num-md); font-weight: 800; color: #1E40AF; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.cg__res b::before{ content: "—원"; position: absolute; right: 0; top: 0; color: #8796B8; opacity: 0; pointer-events: none }
.cg__cond{ margin: 6px 0 0; font-size: var(--fs-micro); color: #5b6b8f; text-align: right; line-height: 1.5 }
.cg__go{ display: block; margin: 14px 0 0; padding: 12px; border-radius: 12px; background: #0b1c4d; color: #fff !important;
  text-align: center; font-size: var(--fs-sm); font-weight: 800; text-decoration: none !important }

.cg__note{ margin: 12px 0 0; padding: 14px 16px 10px; background: #fff; border: 1px solid #C3CEE6; border-radius: 16px }
.cg__note b.cg__nt{ display: block; margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 800; color: #0b1c4d }
.cg__note ul{ margin: 0; padding: 0; list-style: none }
.cg__note li{ position: relative; margin: 0 0 6px; padding-left: 12px; font-size: var(--fs-xs); line-height: 1.6; color: #2B3D63 }
.cg__note li::before{ content: ""; position: absolute; left: 0; top: .7em; width: 4px; height: 4px; border-radius: 50%; background: #1E40AF }

.cg[data-fm="wait"] .cg__c--on{ background: #F5F8FD; border-color: #A3B3D4; color: #0b1c4d }
.cg[data-fm="wait"] .cg__res b{ color: transparent }
.cg[data-fm="wait"] .cg__res b::before{ opacity: 1 }

.cg[data-fm="play"] .cg__s1 .cg__c--on{ animation: cg-sel1 9s infinite }
.cg[data-fm="play"] .cg__s2 .cg__c--on{ animation: cg-sel2 9s infinite }
.cg[data-fm="play"] .cg__s3 .cg__c--on{ animation: cg-sel3 9s infinite }
.cg[data-fm="play"] .cg__s4 .cg__c--on{ animation: cg-sel4 9s infinite }
.cg[data-fm="play"] .cg__s1 .cg__c--on::after{ animation: cg-tap1 9s infinite }
.cg[data-fm="play"] .cg__s2 .cg__c--on::after{ animation: cg-tap2 9s infinite }
.cg[data-fm="play"] .cg__s3 .cg__c--on::after{ animation: cg-tap3 9s infinite }
.cg[data-fm="play"] .cg__s4 .cg__c--on::after{ animation: cg-tap4 9s infinite }
.cg[data-fm="play"] .cg__res b{ animation: cg-res 9s infinite }
.cg[data-fm="play"] .cg__res b::before{ animation: cg-dash 9s infinite }
.cg[data-fm-off] *, .cg[data-fm-off] *::after, .cg[data-fm-off] *::before{ animation-play-state: paused !important }

@keyframes cg-sel1{ 0%,9%{ background:#F5F8FD; border-color:#A3B3D4; color:#0b1c4d } 11%,90%{ background:#1E40AF; border-color:#1E40AF; color:#fff } 96%,100%{ background:#F5F8FD; border-color:#A3B3D4; color:#0b1c4d } }
@keyframes cg-sel2{ 0%,21%{ background:#F5F8FD; border-color:#A3B3D4; color:#0b1c4d } 23%,90%{ background:#1E40AF; border-color:#1E40AF; color:#fff } 96%,100%{ background:#F5F8FD; border-color:#A3B3D4; color:#0b1c4d } }
@keyframes cg-sel3{ 0%,33%{ background:#F5F8FD; border-color:#A3B3D4; color:#0b1c4d } 35%,90%{ background:#1E40AF; border-color:#1E40AF; color:#fff } 96%,100%{ background:#F5F8FD; border-color:#A3B3D4; color:#0b1c4d } }
@keyframes cg-sel4{ 0%,45%{ background:#F5F8FD; border-color:#A3B3D4; color:#0b1c4d } 47%,90%{ background:#1E40AF; border-color:#1E40AF; color:#fff } 96%,100%{ background:#F5F8FD; border-color:#A3B3D4; color:#0b1c4d } }
@keyframes cg-tap1{ 0%,5%{ opacity:0; transform:scale(.4) } 8%{ opacity:1; transform:scale(.8) } 13%,100%{ opacity:0; transform:scale(1.6) } }
@keyframes cg-tap2{ 0%,17%{ opacity:0; transform:scale(.4) } 20%{ opacity:1; transform:scale(.8) } 25%,100%{ opacity:0; transform:scale(1.6) } }
@keyframes cg-tap3{ 0%,29%{ opacity:0; transform:scale(.4) } 32%{ opacity:1; transform:scale(.8) } 37%,100%{ opacity:0; transform:scale(1.6) } }
@keyframes cg-tap4{ 0%,41%{ opacity:0; transform:scale(.4) } 44%{ opacity:1; transform:scale(.8) } 49%,100%{ opacity:0; transform:scale(1.6) } }
@keyframes cg-res{ 0%,53%{ color:transparent } 58%,90%{ color:#1E40AF } 96%,100%{ color:transparent } }
@keyframes cg-dash{ 0%,53%{ opacity:1 } 56%,93%{ opacity:0 } 97%,100%{ opacity:1 } }

.blog-content .cg ul{ padding: 0; margin: 0 }
.blog-content .cg p{ margin-bottom: 0 }
.blog-content .cg .cg__lead{ margin: 0 0 14px }
html body.v3 .blog-content .cg .cg__h{ font-size: var(--fs-subtitle); line-height: 1.35; font-weight: 800; color: #0b1c4d }
html body.v3 .blog-content .cg .cg__lead{ font-size: var(--fs-xs); line-height: 1.5; color: #5b6b8f }
html body.v3 .blog-content .cg .cg__lbl{ font-size: var(--fs-xs); line-height: 1.4; margin: 0 0 6px; color: #2B3D63 }
html body.v3 .blog-content .cg .cg__cond{ font-size: var(--fs-micro); line-height: 1.5; color: #5b6b8f; margin-top: 6px }
html body.v3 .blog-content .cg .cg__note li{ font-size: var(--fs-xs); line-height: 1.6 }

.cg + .aiask, .cg + figure, .cg + .fm{ margin-top: 56px }