/* Success reveal — shared component (docs/modal.md "성공 리빌").
   Two reusable pieces:
   ① the success BLOCK — a teal check that DRAWS itself + rotates 30° CCW in,
      with a title + message. Toggle `.is-in` on `.ktg-success` to play.
   ② the modal REVEAL choreography lives in partials/success-reveal.js
      (`KTG.revealSuccess` — form lifts/fades, panel height morphs).
   Depends on header.css tokens (--color-brand-tint/-strong, --radius-circle). */
:root { --ktg-morph: 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

.ktg-success {
    text-align: center;
    padding: 44px 0 38px;              /* top/bottom gap 72/72 (with a 28 body inset + 14 footer) */
    opacity: 0;
    transform: translateY(10px);       /* rises into place */
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: 0.1s;
}
.ktg-success[hidden] { display: none; }
.ktg-success.is-in { opacity: 1; transform: translateY(0); }
.ktg-success h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; color: var(--color-text); }
.ktg-success p { margin: 0; font-size: 14px; color: var(--color-text-muted); line-height: 1.5; }

.ktg-success-icon {
    display: inline-flex;
    width: 56px; height: 56px;
    background: var(--color-brand-tint);
    color: var(--color-brand-strong);
    border-radius: var(--radius-circle, 50%);
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    transform: scale(0.5);             /* circle pops in first */
    transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.15s;
}
.ktg-success.is-in .ktg-success-icon { transform: scale(1); }
.ktg-success-icon svg { width: 28px; height: 28px; position: relative; top: 2px; }

/* the check spins 30° counter-clockwise AND draws itself, both delayed 0.34s so
   they land together after the circle has popped in */
.ktg-check-rot {
    display: inline-flex;
    transform: rotate(30deg);
    transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.34s;
}
.ktg-success.is-in .ktg-check-rot { transform: rotate(0deg); }
.ktg-success-icon polyline {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;             /* hidden → strokes on */
    transition: stroke-dashoffset 0.3s ease;
    transition-delay: 0.34s;
}
.ktg-success.is-in .ktg-success-icon polyline { stroke-dashoffset: 0; }

/* the leaving view (form) lifts up + fades; JS pins it absolute at its spot so
   it stops contributing height while the panel morphs down */
.ktg-leaving {
    position: absolute;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .ktg-success, .ktg-success-icon, .ktg-check-rot,
    .ktg-success-icon polyline, .ktg-leaving { transition: none; }
}