/* 12·13번은 기존 템플릿 레이아웃을 우선합니다. */
.ti.lt-template-12 > .ti-section,.ti.lt-template-13 > .ti-section{width:auto!important;max-width:1120px!important;margin-left:auto!important;margin-right:auto!important;overflow:visible!important;isolation:auto!important}
.ti.lt-template-12 > .ti-section#guide,.ti.lt-template-13 > .ti-section#guide,.ti.lt-template-12 > .ti-section#timeline,.ti.lt-template-13 > .ti-section#timeline,.ti.lt-template-12 > .ti-section#faq,.ti.lt-template-13 > .ti-section#faq{background:transparent!important}
.ti.lt-template-12 > .ti-section#check,.ti.lt-template-13 > .ti-section#check{background:transparent!important}
.ti.lt-template-12 > .ti-section:before,.ti.lt-template-12 > .ti-section:after,.ti.lt-template-13 > .ti-section:before,.ti.lt-template-13 > .ti-section:after{display:none!important;content:none!important}
.ti.lt-template-12 > .ti-section#check h2,.ti.lt-template-13 > .ti-section#check h2{color:inherit!important}
.ti.lt-template-12 .ti-cta h2{font-size:clamp(30px,3.2vw,42px)!important;line-height:1.2!important;letter-spacing:-.055em!important}
.ti.lt-template-12 .ti-nav{height:56px!important;min-height:56px!important;padding:0 24px!important;align-items:center!important}
.ti.lt-template-12 .ti-card,.ti.lt-template-12 .ti-check,.ti.lt-template-12 .ti-time{position:relative!important;overflow:hidden!important}
.ti.lt-template-12 .ti-card:after,.ti.lt-template-12 .ti-check:after,.ti.lt-template-12 .ti-time:after{content:''!important;display:block!important;position:absolute!important;right:-34px!important;top:-34px!important;width:120px!important;height:120px!important;border-radius:50%!important;background:#2b6df314!important;z-index:0!important}
.ti.lt-template-12 .ti-card:nth-child(2):after,.ti.lt-template-12 .ti-check:nth-child(2):after,.ti.lt-template-12 .ti-time:nth-child(2):after{left:-36px!important;right:auto!important;top:auto!important;bottom:-42px!important;background:#80b8ff18!important}
.ti.lt-template-12 .ti-card>* ,.ti.lt-template-12 .ti-check>* ,.ti.lt-template-12 .ti-time>*{position:relative!important;z-index:1!important}
body:has(.ti.lt-template-12) .mi-foot{background:#fff!important;border-top:0!important}
body:has(.ti.lt-template-12) .mi-container{background:#fff!important}

/* 12 · Paybooc Support: CTA와 푸터 사이의 빈 색상 띠를 없애고 다른 테마와 높이를 맞춥니다. */
.ti.lt-template-12 .ti-cta{margin-bottom:0!important;padding-top:76px!important;padding-bottom:76px!important}
.ti.lt-template-12 .ti-cta h2{max-width:760px!important;font-size:clamp(24px,2.35vw,34px)!important;line-height:1.28!important;letter-spacing:-.06em!important}
.ti.lt-template-12 .ti-cta>p{font-size:14px!important;line-height:1.7!important}
.ti.lt-template-12 .ti-cta>p{max-width:560px!important;margin-left:auto!important;margin-right:auto!important;white-space:normal!important;word-break:keep-all!important}
body:has(.ti.lt-template-12) .mi-foot{min-height:0!important;margin-top:0!important;padding-top:32px!important;padding-bottom:34px!important;background:#fff!important;border-top:0!important}

/* 콘텐츠 박스 가장자리에만 장식을 배치해 내용과 겹치지 않게 합니다. */
.ti.lt-template-12 .ti-card,.ti.lt-template-12 .ti-check,.ti.lt-template-12 .ti-time{position:relative!important;overflow:hidden!important;isolation:isolate!important}
.ti.lt-template-12 .ti-card:before,.ti.lt-template-12 .ti-check:before,.ti.lt-template-12 .ti-time:before{content:""!important;display:block!important;position:absolute!important;left:-42px!important;bottom:-48px!important;width:128px!important;height:128px!important;border-radius:42% 58% 55% 45%!important;background:#2b6df31c!important;transform:rotate(18deg)!important;pointer-events:none!important;z-index:0!important}
.ti.lt-template-12 .ti-card:nth-child(even):before,.ti.lt-template-12 .ti-check:nth-child(even):before,.ti.lt-template-12 .ti-time:nth-child(even):before{left:auto!important;right:-42px!important;top:-46px!important;bottom:auto!important;background:#80b8ff22!important;transform:rotate(-18deg)!important}

/* CORE GUIDE · CHECKLIST · HOW IT WORKS 카드 색상과 좌우 장식 */
.ti.lt-template-12 #guide .ti-card:nth-child(3n+1){background:#f5f8ff!important;border-color:#d9e6ff!important}
.ti.lt-template-12 #guide .ti-card:nth-child(3n+2){background:#f7f4ff!important;border-color:#e5dcff!important}
.ti.lt-template-12 #guide .ti-card:nth-child(3n){background:#fff8ef!important;border-color:#f3e3cc!important}
.ti.lt-template-12 #check .ti-check:nth-child(3n+1){background:#eef7ff!important;border-color:#d4e8fa!important}
.ti.lt-template-12 #check .ti-check:nth-child(3n+2){background:#f4f0ff!important;border-color:#e2d9fa!important}
.ti.lt-template-12 #check .ti-check:nth-child(3n){background:#fff6eb!important;border-color:#f4dfc5!important}
.ti.lt-template-12 #timeline .ti-time:nth-child(3n+1){background:#f0f8ff!important;border-color:#d2e8f8!important}
.ti.lt-template-12 #timeline .ti-time:nth-child(3n+2){background:#f6f1ff!important;border-color:#e4dafa!important}
.ti.lt-template-12 #timeline .ti-time:nth-child(3n){background:#fff7ed!important;border-color:#f2dfc7!important}
.ti.lt-template-12 #guide .ti-card:after,.ti.lt-template-12 #check .ti-check:after,.ti.lt-template-12 #timeline .ti-time:after{content:""!important;position:absolute!important;right:-30px!important;top:-34px!important;width:112px!important;height:112px!important;border-radius:50%!important;background:#2b6df31a!important;pointer-events:none!important;z-index:0!important}
.ti.lt-template-12 #guide .ti-card:nth-child(even):after,.ti.lt-template-12 #check .ti-check:nth-child(even):after,.ti.lt-template-12 #timeline .ti-time:nth-child(even):after{right:auto!important;left:-34px!important;top:auto!important;bottom:-38px!important;background:#8d72e51a!important}

/* 섹션별 기본색도 분리해 카드가 모두 같은 흰색으로 보이지 않게 합니다. */
.ti.lt-template-12 #guide .ti-card{background:#eef6ff!important;border-color:#cfe3ff!important}
.ti.lt-template-12 #check .ti-check{background:#f5f0ff!important;border-color:#ded0ff!important}
.ti.lt-template-12 #timeline .ti-time{background:#fff5e8!important;border-color:#f1d7b3!important}
.ti.lt-template-12 #guide .ti-card:nth-child(3n+2){background:#f5f0ff!important;border-color:#ded0ff!important}
.ti.lt-template-12 #guide .ti-card:nth-child(3n){background:#fff5e8!important;border-color:#f1d7b3!important}
.ti.lt-template-12 #check .ti-check:nth-child(3n+2){background:#fff0f3!important;border-color:#f3ced8!important}
.ti.lt-template-12 #check .ti-check:nth-child(3n){background:#fff8df!important;border-color:#f0df9f!important}
.ti.lt-template-12 #timeline .ti-time:nth-child(3n+2){background:#f1f8e9!important;border-color:#d4e8b7!important}
.ti.lt-template-12 #timeline .ti-time:nth-child(3n){background:#fff0e7!important;border-color:#f1d0bd!important}

/* 12번은 섹션 자체에 도형을 배치하고, 카드 안 도형과 구분합니다. */
.ti.lt-template-12{width:100%!important;max-width:100%!important;overflow-x:clip!important}
.ti.lt-template-12 .ti-section,.ti.lt-template-12 .ti-cta{max-width:100%!important;overflow-x:hidden!important}
.ti.lt-template-12 > #guide,.ti.lt-template-12 > #check,.ti.lt-template-12 > #timeline,.ti.lt-template-12 > #faq{padding-top:72px!important;padding-bottom:72px!important}
.ti.lt-template-12 > #guide .ti-card,.ti.lt-template-12 > #check .ti-check,.ti.lt-template-12 > #timeline .ti-time{min-height:168px!important;padding:24px!important}
.ti.lt-template-12 > #guide .ti-card h3,.ti.lt-template-12 > #timeline .ti-time strong{margin-top:18px!important;margin-bottom:8px!important}
.ti.lt-template-12 > #check .ti-check{min-height:145px!important;padding:24px 24px 22px 68px!important}
.ti.lt-template-12 > .ti-section.ti-dark{min-height:0!important;height:auto!important;padding-top:72px!important;padding-bottom:72px!important}
.ti.lt-template-12 > .ti-section.ti-dark .ti-cards{gap:18px!important;margin-top:0!important}
.ti.lt-template-12 > .ti-section.ti-dark .ti-card{min-height:168px!important;height:auto!important;padding:24px!important}
.ti.lt-template-12 > #faq,.ti.lt-template-12 > .ti-cta{width:100%!important;max-width:1120px!important;margin-left:auto!important;margin-right:auto!important}
.ti.lt-template-12 > #guide,.ti.lt-template-12 > #check,.ti.lt-template-12 > #timeline{position:relative!important;isolation:isolate!important;overflow:hidden!important}
.ti.lt-template-12 > #guide,.ti.lt-template-12 > #check,.ti.lt-template-12 > #timeline{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding-left:max(24px,calc((100vw - 1120px)/2))!important;padding-right:max(24px,calc((100vw - 1120px)/2))!important}
.ti.lt-template-12 > #guide:before,.ti.lt-template-12 > #check:before,.ti.lt-template-12 > #timeline:before{content:""!important;display:block!important;position:absolute!important;pointer-events:none!important;z-index:0!important;width:360px!important;height:360px!important;border-radius:50%!important}
.ti.lt-template-12 > #guide:before{left:-150px!important;top:30px!important;background:#b9d7ff80!important;animation:lt12-section-orb-a 12s ease-in-out infinite!important}
.ti.lt-template-12 > #check{background:#f5f1ff!important}
.ti.lt-template-12 > #check:before{right:-150px!important;top:80px!important;width:410px!important;height:410px!important;border-radius:34% 66% 58% 42%!important;background:#bba2ff99!important;transform:rotate(18deg)!important;animation:lt12-section-orb-b 7s ease-in-out infinite!important}
.ti.lt-template-12 > #timeline{background:#fff6ea!important}
.ti.lt-template-12 > #timeline:before{left:12%!important;bottom:-190px!important;width:430px!important;height:300px!important;border-radius:58% 42% 30% 70%!important;background:#ffb97999!important;transform:rotate(-12deg)!important;animation:lt12-section-orb-c 9s ease-in-out infinite!important}
.ti.lt-template-12 > #guide:before,.ti.lt-template-12 > #check:before,.ti.lt-template-12 > #timeline:before{will-change:transform!important;animation-play-state:running!important;transform-origin:center!important}
.ti.lt-template-12 > #guide>* ,.ti.lt-template-12 > #check>* ,.ti.lt-template-12 > #timeline>*{position:relative!important;z-index:1!important}
@keyframes lt12-section-orb-a{0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}50%{transform:translate(46px,26px) scale(1.12) rotate(8deg)}}
@keyframes lt12-section-orb-b{0%,100%{right:-150px;top:80px;transform:rotate(18deg) scale(1)}50%{right:-72px;top:118px;transform:rotate(34deg) scale(1.14)}}
@keyframes lt12-section-orb-c{0%,100%{left:12%;bottom:-190px;transform:rotate(-12deg) scale(1)}50%{left:22%;bottom:-156px;transform:rotate(6deg) scale(1.14)}}

/* 도형은 카드 내부가 아니라 섹션 배경에만 표시합니다. */
.ti.lt-template-12 > #guide .ti-card:before,.ti.lt-template-12 > #guide .ti-card:after,
.ti.lt-template-12 > #check .ti-check:before,.ti.lt-template-12 > #check .ti-check:after,
.ti.lt-template-12 > #timeline .ti-time:before,.ti.lt-template-12 > #timeline .ti-time:after{display:none!important;content:none!important}
.ti.lt-template-12 > #guide .ti-card:before,.ti.lt-template-12 > #guide .ti-card:after,.ti.lt-template-12 > #check .ti-check:before,.ti.lt-template-12 > #check .ti-check:after,.ti.lt-template-12 > #timeline .ti-time:before,.ti.lt-template-12 > #timeline .ti-time:after{display:none!important;content:none!important;background:none!important;box-shadow:none!important}

/* 실제 CHECKLIST 마크업: section.ti-dark 자체의 ::before를 움직입니다. */
.ti.lt-template-12 > .ti-section.ti-dark{position:relative!important;overflow:hidden!important;isolation:isolate!important;background:#f5f1ff!important}
.ti.lt-template-12 > .ti-section.ti-dark:before{content:""!important;display:block!important;position:absolute!important;z-index:0!important;pointer-events:none!important;right:-150px!important;top:80px!important;width:410px!important;height:410px!important;border-radius:34% 66% 58% 42%!important;background:#bba2ff99!important;opacity:1!important;transform:rotate(18deg)!important;animation:lt12-dark-section-motion 6s ease-in-out infinite alternate!important;will-change:right,top,transform!important}
.ti.lt-template-12 > .ti-section.ti-dark>*{position:relative!important;z-index:1!important}
.ti.lt-template-12 > .ti-section.ti-dark>.ti12-motion-shape,.ti.lt-template-12 > #timeline>.ti12-motion-shape{position:absolute!important;z-index:0!important}
.ti.lt-template-12 > #check>.ti12-motion-shape{position:absolute!important;display:block!important;z-index:0!important;right:-150px!important;top:80px!important;left:auto!important;bottom:auto!important}
.ti.lt-template-12 > #timeline>.ti12-motion-shape{position:absolute!important;display:block!important;z-index:0!important;left:12%!important;bottom:-190px!important;right:auto!important;top:auto!important}
@keyframes lt12-dark-section-motion{from{right:-150px;top:80px;transform:rotate(18deg) scale(1)}to{right:-58px;top:132px;transform:rotate(34deg) scale(1.15)}}
@media (prefers-reduced-motion:reduce){
  .ti.lt-template-12 > .ti-section.ti-dark:before{animation:lt12-dark-section-motion 6s ease-in-out infinite alternate!important}
  .ti.lt-template-12 > #timeline:before{animation:lt12-section-orb-c 9s ease-in-out infinite!important}
  .ti.lt-template-12 > #guide:before{animation:lt12-section-orb-a 12s ease-in-out infinite!important}
}