.navbar-nav { background-color: #fff; border-radius: 30px; box-shadow: 0 2px 6px rgba(137,87,250,.271); padding: 10px}
.navbar-nav .nav-link { color: #1b1920}
.hero-section { overflow: hidden; padding-bottom: 140px; padding-top: 200px}
@media (max-width:991px) {
	.hero-section { padding-bottom: 0; padding-top: 140px}
}
.hero-section .hero-bg-img { height: 100%; position: absolute; right: 0; top: 0; width: 45%; z-index: -1}
@media (max-width:1850px) {
	.hero-section .hero-bg-img { width: 43.5%}
}
@media (max-width:1699px) {
	.hero-section .hero-bg-img { width: 41.5%}
}
@media (max-width:1564px) {
	.hero-section .hero-bg-img { width: 40%}
}
@media (max-width:1466px) {
	.hero-section .hero-bg-img { width: 39%}
}
@media (max-width:1399px) {
	.hero-section .hero-bg-img { width: 46%}
}
@media (max-width:1299px) {
	.hero-section .hero-bg-img { width: 44%}
}
@media (max-width:1199px) {
	.hero-section .hero-bg-img { width: 52.5%}
}
@media (max-width:991px) {
	.hero-section .hero-bg-img { width: 55%}
}
@media (max-width:768px) {
	.hero-section .hero-bg-img { width: 60%}
}
@media (max-width:575px) {
	.hero-section .hero-bg-img { display: none!important}
}
.hero-section .hero-bg-left-img { height: 100%; left: 0!important; position: absolute; top: 0; width: 45%; z-index: -1}
@media (max-width:1850px) {
	.hero-section .hero-bg-left-img { width: 43.5%}
}
@media (max-width:1699px) {
	.hero-section .hero-bg-left-img { width: 41.5%}
}
@media (max-width:1564px) {
	.hero-section .hero-bg-left-img { width: 40%}
}
@media (max-width:1466px) {
	.hero-section .hero-bg-left-img { width: 39%}
}
@media (max-width:1399px) {
	.hero-section .hero-bg-left-img { width: 46%}
}
@media (max-width:1299px) {
	.hero-section .hero-bg-left-img { width: 44%}
}
@media (max-width:1199px) {
	.hero-section .hero-bg-left-img { width: 52.5%}
}
@media (max-width:991px) {
	.hero-section .hero-bg-left-img { width: 55%}
}
@media (max-width:768px) {
	.hero-section .hero-bg-left-img { width: 60%}
}
@media (max-width:575px) {
	.hero-section .hero-bg-left-img { display: none!important}
}
.hero-section .main-banner { position: absolute; z-index: -1}
.hero-section .main-banner img { width: 100%}
@media (max-width:768px) {
	.hero-section .main-banner img { width: 70%}
}
@media (max-width:575px) {
	.hero-section .main-banner img { width: 50%}
}
.hero-section .main-banner.banner-img-1 { animation: movetopbounce 5s linear infinite; left: 0; top: 12%}
.hero-section .main-banner.banner-img-2 { animation: zoom-in 3s linear infinite; left: 20%; top: 20%}
.hero-section .main-banner.banner-img-3 { animation: moveleftbounce 5s linear infinite; left: 35%; top: 14%; transform: translateY(-10%) translateX(-35%)}
.hero-section .main-banner.banner-img-4 { animation: zoom-in 3s linear infinite; bottom: 20%; left: 8%}
.hero-section .main-banner.banner-img-5 { animation: movetopbounce 5s linear infinite; bottom: 15%; left: 40%}
.hero-section .main-banner.banner-img-6 { animation: zoom-in 5s linear infinite; right: 10%; top: 16%}
.hero-section .main-banner.banner-img-7 { animation: moveleftbounce 5s linear infinite; bottom: 15%; right: 3%}
.hero-section .main-banner.banner-img-8 { animation: movetopbounce 5s linear infinite; right: 0; text-align: right; top: 30%}
.zoom-in-zoom-out { animation: zoom-in-zoom-out 3s ease-out infinite}
.features-section .section-heading h2:after { left: 0;}
.features-section .feature-slider .slick-list { -webkit-clip-path: inset(-100vw -100vw -100vw 0); clip-path: inset(-100vw -100vw -100vw 0); overflow: visible; padding-bottom: 100px}
@media (max-width:991px) {
	.features-section .feature-slider .slick-list { padding-bottom: 50px}
}
.features-section .feature-slider .slick-list .feature-card { border-radius: 20px; box-shadow: 0 20px 50px hsla(261,8%,52%,.1); margin: 0 20px; min-height: 319px; padding: 40px 20px}
@media (max-width:768px) {
	.features-section .feature-slider .slick-list .feature-card { margin: 0 10px}
}
.features-section .feature-slider .slick-list .feature-card:hover .card-img { }
.features-section .feature-slider .slick-list .feature-card .card-img { align-items: center; background-color: #f3f3ff; border: 1px solid #f3f3ff; border-radius: 50%; display: flex; height: 80px; justify-content: center; margin-bottom: 25px; min-width: 80px; transition: all .3s ease; width: 80px}
.features-section .feature-slider .slick-list .feature-card .card-body p { -webkit-line-clamp: 4; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden}
.features-section .feature-slider .slick-arrow { top: -103px}
@media (max-width:991px) {
	.features-section .feature-slider .slick-arrow { top: -83px}
}
@media (max-width:575px) {
	.features-section .feature-slider .slick-arrow { top: -78px}
}
.features-section .feature-slider .slick-arrow.prev-arrow { right: 70px}
@media (max-width:575px) {
	.features-section .feature-slider .slick-arrow.prev-arrow { right: 55px}
}
.features-section .feature-slider .slick-arrow.next-arrow { right: 0}
.modern-interface-section .interface-card .interface-img { border-radius: 20px; margin: 0 auto; max-height: 300px; max-width: 500px; position: relative}
.modern-interface-section .interface-card .interface-img img { border-radius: 20px; max-height: 300px; max-width: 500px; -o-object-fit: cover; object-fit: cover}
.modern-interface-section .interface-card .interface-img:hover:before { left: -8px; top: -8px}
.modern-interface-section .interface-card .interface-img:before { border: 2px solid #7638f9; border-radius: 20px; content: ""; height: 100%; left: 8px; position: absolute; top: 8px; transition: all .3s ease; width: 100%}
.modern-interface-section .interface-card .card-desc .card-text { -webkit-line-clamp: 5; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden}
.pricing-plan-section .pricing-slider .slick-list { margin: 0; padding: 0!important}
/* ✅ 더블클릭 깨짐 방지: animation 제거, 상태 기반 transition으로 변경 */
.pricing-plan-section .pricing-slider .pricing-card { 
	border: 1px solid #d8d8d8; 
	border-radius: 0px; 
	box-shadow: 1px 6px 10px 0 rgba(0,0,0,.1); 
	margin: 0 20px; 
	max-width: 400px; 
	padding: 30px;
	opacity: 0;
	transform: translateY(-40px);
	transition: opacity .4s ease, transform .4s ease;
}
.pricing-plan-section .pricing-slider .slick-slide .pricing-card {
	opacity: 1;
	transform: translateY(0);
}
/* ✅ 더블클릭 시 outline 제거 */
.pricing-plan-section .pricing-slider .slick-slide {
	outline: none !important;
}
.pricing-plan-section .pricing-slider .slick-slide:focus {
	outline: none !important;
}
.pricing-plan-section .pricing-slider .slick-slide:focus-visible {
	outline: none !important;
}
@media (max-width:1199px) {
	.pricing-plan-section .pricing-slider .pricing-card { margin: 0 15px}
}
@media (max-width:768px) {
	.pricing-plan-section .pricing-slider .pricing-card { margin: 0 auto}
}
@media (max-width:575px) {
	.pricing-plan-section .pricing-slider .pricing-card { padding: 30px 20px}
}
@media (max-width:460px) {
	.pricing-plan-section .pricing-slider .pricing-card { margin: 0 10px}
}
.pricing-plan-section .pricing-slider .pricing-card .card-title { font-size: 25px;    font-weight: 700;}
@media (max-width:575px) {
	.pricing-plan-section .pricing-slider .pricing-card .card-title { font-size: 24px}
}
.pricing-plan-section .pricing-slider .pricing-card .price { font-size: 40px}
@media (max-width:575px) {
	.pricing-plan-section .pricing-slider .pricing-card .price { font-size: 30px}
}
.pricing-plan-section .pricing-slider .pricing-card .pricing-plan-list { height: 100%; }
.pricing-plan-section .pricing-slider .pricing-card .pricing-plan-list li { margin-bottom: 15px}
@media (max-width:575px) {
	.pricing-plan-section .pricing-slider .pricing-card .pricing-plan-list li { font-size: 15px}
}
.pricing-plan-section .pricing-slider .pricing-card .pricing-plan-list li:last-child { margin-bottom: 0}
.pricing-plan-section .pricing-slider .pricing-card .pricing-plan-list li.active-check .check-box { color: #7638f9; font-size: 18px!important}
@media (max-width:575px) {
	.pricing-plan-section .pricing-slider .pricing-card .pricing-plan-list li.active-check .check-box { font-size: 16px!important}
}
.pricing-plan-section .pricing-slider .pricing-card .pricing-plan-list li.unactive-check { color: #99999a}
.pricing-plan-section .pricing-slider .pricing-card .pricing-plan-list li.unactive-check .check-box { color: #99999a; font-size: 18px!important}
@media (max-width:575px) {
	.pricing-plan-section .pricing-slider .pricing-card .pricing-plan-list li.unactive-check .check-box { font-size: 16px!important}
}
.pricing-plan-section .pricing-slider .pricing-card .pricing-plan-list li .check-box { border-radius: 50%; display: inline-block; font-size: 14px; height: 20px; margin-right: 20px; text-align: center; width: 20px}
@media (max-width:575px) {
	.pricing-plan-section .pricing-slider .pricing-card .pricing-plan-list li .check-box { margin-right: 15px}
}
.pricing-plan-section .pricing-slider .pricing-card .btn-gray { font-size: 20px; height: 60px; max-width: 240px; width: 100%}
/* ✅ 라이트/다크모드 발란스 개선: theme 변수 기반으로 통일 */
.pricing-plan-section .pricing-slider .slick-current .pricing-card { 
	background-color: var(--theme-card-muted) !important; 
	border: 2px solid var(--theme-border) !important;
	box-shadow: 0 20px 50px -20px rgba(79, 70, 229, 0.3) !important;
}
.pricing-plan-section .pricing-slider .slick-current .pricing-card .card-title { 
	color: var(--theme-text-primary) !important;
}
.pricing-plan-section .pricing-slider .slick-current .pricing-card .price,
.pricing-plan-section .pricing-slider .slick-current .pricing-card .price span { 
	color: #4f46e5 !important; /* indigo-600 */
}
html.dark .pricing-plan-section .pricing-slider .slick-current .pricing-card .price,
html.dark .pricing-plan-section .pricing-slider .slick-current .pricing-card .price span { 
	color: #a5b4fc !important; /* indigo-300 */
}
.pricing-plan-section .pricing-slider .slick-current .pricing-card .btn-gray { 
	background-color: var(--theme-accent) !important; 
	color: var(--theme-accent-contrast) !important;
}
.pricing-plan-section .pricing-slider .slick-dots { bottom: -30px; position: relative}
.pricing-plan-section .pricing-slider .slick-dots li { margin: 0}
.pricing-plan-section .pricing-slider .slick-dots li button { padding: 0}
.pricing-plan-section .pricing-slider .slick-dots li button:before { color: #d8d8d8; font-size: 30px; opacity: 1}
.pricing-plan-section .pricing-slider .slick-dots li.slick-active button:before { color: #7638f9}
.testimonial-section .testimonial-slider .testimonial-card { background-color: #fff; border-bottom: 5px solid #7638f9; border-radius: 20px; border-right: 5px solid #7638f9; margin: 50px 30px; padding: 40px 80px 80px; position: relative}
@media (max-width:991px) {
	.testimonial-section .testimonial-slider .testimonial-card { padding: 40px 60px 60px}
}
@media (max-width:768px) {
	.testimonial-section .testimonial-slider .testimonial-card { padding: 40px}
}
@media (max-width:575px) {
	.testimonial-section .testimonial-slider .testimonial-card { padding: 30px}
}
.testimonial-section .testimonial-slider .testimonial-card .quote-img { align-items: center; background-color: #fff; border: 10px solid #f3f3ff; border-radius: 50%; display: flex; height: 110px; justify-content: center; left: -20px; min-width: 110px; position: absolute; top: -50px; width: 110px}
@media (max-width:991px) {
	.testimonial-section .testimonial-slider .testimonial-card .quote-img { height: 90px; min-width: 90px; width: 90px}
}
@media (max-width:575px) {
	.testimonial-section .testimonial-slider .testimonial-card .quote-img { height: 75px; min-width: 75px; width: 75px}
}
@media (max-width:991px) {
	.testimonial-section .testimonial-slider .testimonial-card .quote-img img { width: 60%}
}
@media (max-width:575px) {
	.testimonial-section .testimonial-slider .testimonial-card .quote-img img { width: 50%}
}
.testimonial-section .testimonial-slider .testimonial-card .profile-img { border: 5px solid #7638f9; border-radius: 50%; bottom: -50px; height: 120px; min-width: 120px; overflow: hidden; position: absolute; right: -25px; width: 120px}
@media (max-width:991px) {
	.testimonial-section .testimonial-slider .testimonial-card .profile-img { height: 100px; min-width: 100px; width: 100px}
}
@media (max-width:575px) {
	.testimonial-section .testimonial-slider .testimonial-card .profile-img { height: 80px; min-width: 80px; width: 80px}
}
.testimonial-section .testimonial-slider .testimonial-card .profile-desc { position: relative}
.testimonial-section .testimonial-slider .testimonial-card .profile-desc:after { background-color: #d8d8d8; content: ""; height: 1px; max-width: 200px; position: absolute; width: 100%}
@media (max-width:375px) {
	.testimonial-section .testimonial-slider .testimonial-card .profile-desc:after { max-width: 150px}
}
.testimonial-section .testimonial-slider .testimonial-card .profile-text { -webkit-line-clamp: 5; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden}
@media (max-width:575px) {
	.testimonial-section .testimonial-slider .testimonial-card .profile-text { font-size: 15px}
}
.testimonial-section .testimonial-slider .slick-arrow { bottom: 0}
.testimonial-section .testimonial-slider .slick-arrow.prev-arrow { right: 53%}
.testimonial-section .testimonial-slider .slick-arrow.next-arrow { left: 51%; position: relative}
.contact-section .contact-img { margin: 0 auto; max-width: 530px; position: relative}
.contact-section .contact-form { border: 1px solid #d8d8d8; border-radius: 20px; padding: 40px}
@media (max-width:575px) {
	.contact-section .contact-form { padding: 25px}
}
.contact-section .contact-form .submit-btn { height: 60px; max-width: 340px}
.contact-section { background-size: cover; display: block}
.contact-section .contact-info__block { margin-bottom: 60px}
@media (max-width:575px) {
	.contact-section .contact-info__block { margin-bottom: 30px}
}
.contact-section .contact-info__contact-label { font-size: 1.25rem}
@media (max-width:480px) {
	.contact-section .contact-info__contact-label { font-size: 1.125rem}
}
.contact-section .contact-icon { height: 60px; margin-right: 20px; min-width: 60px; width: 60px}
.contact-section .icon-purpul { color: #7638f9!important}
.contact-section .address-text { width: 60%!important}
.banner-section { bottom: 0!important; box-shadow: 6px 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19); height: 300px!important; overflow: hidden; position: fixed!important; width: 100%; z-index: 1000!important}
.banner-section .main-banner { position: absolute; z-index: -1}
.banner-section .main-banner img { width: 100%}
@media (max-width:768px) {
	.banner-section .main-banner img { width: 70%}
}
@media (max-width:575px) {
	.banner-section .main-banner img { width: 50%}
}
.banner-section .main-banner.left-curve-1 { right: 86%!important}
.banner-section .main-banner.left-curve2 { right: 84%!important; top: 0!important; z-index: -1}
.banner-section .main-banner.square-1 { left: 11%!important; top: 29%!important}
.banner-section .main-banner.right-curve1 { left: 84%}
.banner-section .main-banner.right-curve-2 { bottom: 0!important; left: 82%!important}
.banner-section .main-banner.banner-img-3 { left: 35%; top: 14%}
.banner-section .main-banner.square-2 { bottom: 6%!important; left: 35%!important}
.banner-section .main-banner.banner-img-4 { bottom: 20%; left: 8%}
.banner-section .main-banner.group-dot { left: 20%; top: 77%}
.banner-section .main-banner.squre-img { animation: movetopbounce 5s linear infinite; right: 35%; top: 7%}
.banner-section .main-banner.round-1 { animation: zoom-in 5s linear infinite; bottom: 15%; right: 30%}
.banner-section .main-banner.group-dot-2 { animation: moveleftbounce 5s linear infinite; right: 17%; top: 35%}
.banner-section .main-banner.triangel-img { animation: moveleftbounce 5s linear infinite; right: 7%; top: 42%}
.banner-section .main-banner.close-btn { background: transparent!important; font-size: 22px; right: 1%; top: 5%}
.banner-section .act-now { width: 40%!important}
.banner-section .demo { background: #fff; position: sticky!important; top: 40%; z-index: 10}
.vcard-section { margin-bottom: -70px}
.center-slider .slick-slide { border-radius: 20px; height: 600px; margin: 0 10px; opacity: .5; overflow: hidden; transform: scale(.8); transition: all .4s ease-in-out}
.center-slider .slick-current.slick-active { border-radius: 20px; opacity: 1; overflow: hidden; transform: scale(1)}
.center-slider .slick-arrow { align-items: center; background-color: #fff; border: none; border-radius: 50%; box-shadow: 0 5px 10px #00000026; color: #7638f9; display: flex; font-size: 20px; height: 50px; justify-content: center; min-width: 50px; position: absolute; width: 50px; z-index: 5}
@media (max-width:480px) {
	.center-slider .slick-arrow { font-size: 18px; height: 40px; min-width: 40px; width: 40px}
}
.center-slider .next-arrow { right: 25px; top: 45%}
@media (max-width:991px) {
	.center-slider .next-arrow { right: 15px}
}
@media (max-width:480px) {
	.center-slider .next-arrow { right: 10px}
}
.center-slider .prev-arrow { left: 25px; top: 45%}
@media (max-width:991px) {
	.center-slider .prev-arrow { left: 15px}
}
@media (max-width:480px) {
	.center-slider .prev-arrow { left: 10px}
}
.center-slider .slick-current.slick-active+.slick-active { opacity: .8; transform: scale(.9)}
.center-slider .slick-active:has(+.slick-current) { opacity: .8; transform: scale(.9)}
.footer-section { height: 450px}
@media (max-width:575px) {
	.footer-section { height: 520px}
}
@media (max-width:380px) {
	.footer-section { height: 560px}
}
.footer-section .app-name { font-weight: 500}
@media (max-width:320px) {
	.footer-section .google-play-img { margin-bottom: 5px}
}
/* ✅ 플랜 펼침 버튼 가려짐 해결: margin-bottom 제거 */
.less-plan-features,.show-plan-features { 
	margin-bottom: 0 !important;
	margin-top: 1rem;
}
.less-plan-icon-btn,.show-plan-icon-btn { background-color: #fff; border-radius: 50%!important; color: #7638f9; font-size: 30px!important}
.home1-rtl .text-end { text-align: left!important}
@media (min-width:1200px) {
	.home1-rtl .pe-xl-5 { padding-left: 3rem!important; padding-right: 0!important}
	.home1-rtl .me-xl-5 { margin-left: 3rem!important; margin-right: 0!important}
}
@media (min-width:992px) {
	.home1-rtl .text-lg-end { text-align: left!important}
	.home1-rtl .text-lg-start { text-align: right!important}
}
@media (min-width:768px) {
	.home1-rtl .text-md-start { text-align: right!important}
}
@media (min-width:576px) {
	.home1-rtl .text-sm-end { text-align: left!important}
}
.home1-rtl .text-start { text-align: right!important}
.home1-rtl .me-1 { margin-left: .25rem!important}
.home1-rtl footer .email .subscribe-btn { left: 10px; right: auto}
.home1-rtl footer .email input { padding: 20px 20px 20px 162px}
.home1-rtl .modern-interface-section .interface-card .interface-img:before { bottom: auto; left: -8px; right: auto; top: -8px}
.home1-rtl .modern-interface-section .interface-card .interface-img:hover:before { bottom: -8px; left: auto; right: -8px; top: auto}
.home1-rtl .contact-section .contact-icon { margin-left: 20px; margin-right: 0}
.home1-rtl .section-heading h2:after { left: auto; right: 6%}
.home1-rtl .hero-content { text-align: right!important}
.home1-rtl .hero-bg-img { left: 0; right: auto; transform: rotateY(180deg)}
.home1-rtl .banner-img-1 { animation: movetopbounce 5s linear infinite; left: auto!important; right: 0!important; top: 20%}
.home1-rtl .banner-img-1 img { transform: rotateY(180deg)}
.home1-rtl .banner-img-2 { animation: zoom-in 3s linear infinite; left: auto!important; right: 20%!important; top: 20%}
.home1-rtl .banner-img-3 { animation: moveleftbounce 5s linear infinite; left: auto!important; right: 35%!important; top: 14%; transform: translateY(-10%) translateX(-35%)}
.home1-rtl .banner-img-4 { animation: zoom-in 3s linear infinite; bottom: 12%; left: auto!important; right: 8%!important}
.home1-rtl .banner-img-5 { animation: movetopbounce 5s linear infinite; bottom: 15%; left: auto!important; right: 40%!important}
.home1-rtl .banner-img-6 { animation: zoom-in 5s linear infinite; left: 10%!important; right: auto!important; top: 16%}
.home1-rtl .banner-img-7 { animation: moveleftbounce 5s linear infinite; bottom: 15%; left: 3%!important; right: auto!important}
.home1-rtl .banner-img-8 { animation: movetopbounce 5s linear infinite; left: 0!important; right: auto!important; text-align: right; top: 30%}
.home1-rtl .features-section .feature-slider .slick-arrow.prev-arrow { left: 70px!important; right: auto!important}
@media (max-width:575px) {
	.home1-rtl .features-section .feature-slider .slick-arrow.prev-arrow { left: 55px!important; right: auto!important}
}
.home1-rtl .features-section .feature-slider .slick-arrow.next-arrow { left: 0!important; right: auto!important}


:root {
	color-scheme: light;
	--theme-bg: #ffffff;
	--theme-surface: #f5f5f5;
	--theme-card: #ffffff;
	--theme-card-muted: #f3f4f6;
	--theme-text-primary: #111827;
	--theme-text-secondary: #4b5563;
	--theme-border: rgba(17, 24, 39, 0.08);
	--theme-accent: #000000;
	--theme-accent-contrast: #ffffff;
	--theme-hero-gradient: linear-gradient(to bottom, #ffffff, #f8fafc);
	--theme-hero-gradient: #ffffff;
	--theme-shadow-card: 0 20px 45px -18px rgba(15, 23, 42, 0.18);
  }
  html.dark {
	color-scheme: dark;
	--theme-bg: #0f172a;
	--theme-surface: #0f1e33;
	--theme-card: #1e293b;
	--theme-card-muted: #243249;
	--theme-text-primary: #f8fafc;
	--theme-text-secondary: #cbd5f5;
	--theme-border: rgba(148, 163, 184, 0.28);
	--theme-accent: #ffffff;
	--theme-accent-contrast: #0f172a;
	--theme-hero-gradient: linear-gradient(to bottom, #0f172a, #1e293b);
	--theme-section-gradient: #121b2f;
	--theme-shadow-card: 0 28px 50px -20px rgba(15, 23, 42, 0.65);
  }
  * {
	font-family: 'Pretendard', 'Noto Sans KR', 'Inter', 'ui-sans-serif', 'system-ui', sans-serif !important;
  }
  body {
	background: var(--theme-bg);
	color: var(--theme-text-primary);
	transition: background-color 0.3s ease, color 0.3s ease;
  }
  .theme-hero {
	background: var(--theme-hero-gradient);
  }
  .theme-section {
	background: var(--theme-section-gradient);
  }
  .theme-bg {
	background-color: var(--theme-bg) !important;
  }
  .theme-surface {
	background-color: var(--theme-surface) !important;
  }
  .theme-card {
	background-color: var(--theme-card) !important;
	color: var(--theme-text-primary) !important;
	box-shadow: var(--theme-shadow-card);
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }
  .theme-card-muted {
	background-color: var(--theme-card-muted) !important;
  }
  .theme-text {
	color: var(--theme-text-primary) !important;
  }
  .theme-text-muted {
	color: var(--theme-text-secondary) !important;
  }
  .theme-border {
	border-color: var(--theme-border) !important;
	--tw-ring-color: var(--theme-border);
  }
  .theme-btn {
	background-color: var(--theme-accent) !important;
	color: var(--theme-accent-contrast) !important;
	border-color: transparent !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  .theme-btn:hover {
	filter: brightness(0.92);
  }
  .theme-btn-outline {
	background-color: transparent !important;
	color: var(--theme-text-primary) !important;
	border: 1px solid var(--theme-border) !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  .theme-btn-outline:hover {
	background-color: var(--theme-card-muted) !important;
  }
  .theme-link {
	color: var(--theme-accent) !important;
  }
  .theme-link:hover {
	opacity: 0.8;
  }
  header,
  .navbar,
  .features-section,
  .pricing-plan-section,
  .testimonial,
  .contact-section,
  .modern-interface-section {
	background-color: var(--theme-bg);
	color: var(--theme-text-primary);
	transition: background-color 0.3s ease, color 0.3s ease;
  }
  .feature-card,
  .pricing-card,
  .testimonial-card,
  .contact-form,
  .interface-card {
	background-color: var(--theme-card) !important;
	color: var(--theme-text-primary) !important;
	box-shadow: var(--theme-shadow-card);
	border-radius: 1rem;
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }
  .theme-glass {
	background-color: rgba(255, 255, 255, 0.75) !important;
  }
  html.dark .theme-glass {
	background-color: rgb(15 23 42) !important;
  }
  .feature-card p,
  .pricing-card p,
  .testimonial-card p,
  .contact-form p,
  .interface-card p,
  .text-gray-100,
  .text-secondary,
  .tw-text-ink-600,
  .tw-text-ink-500,
  .tw-text-ink-400,
  .tw-text-ink-300,
  .tw-text-gray-500,
  .tw-text-gray-400,
  .tw-text-gray-300 {
	color: var(--theme-text-secondary) !important;
  }
  .feature-card h3,
  .pricing-card h3,
  .testimonial-card .profile-desc p,
  .interface-card h3,
  .section-heading h2,
  .tw-text-ink-900,
  .tw-text-ink-800,
  .tw-text-ink-700,
  .tw-text-gray-900,
  .tw-text-gray-800,
  .tw-text-gray-700 {
	color: var(--theme-text-primary) !important;
  }
  .theme-nav-link {
	color: var(--theme-text-primary) !important;
	transition: color 0.3s ease;
  }
  .theme-nav-link:hover,
  .theme-nav-link:focus-visible {
	color: var(--theme-accent) !important;
  }
  .feature-slider .slick-arrow,
  .center-slider .slick-arrow,
  .feature-slider-prev,
  .feature-slider-next,
  .slide-arrow {
	background-color: var(--theme-accent) !important;
	color: var(--theme-accent-contrast) !important;
	border: 1px solid var(--theme-border) !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  .feature-slider .slick-arrow:hover,
  .center-slider .slick-arrow:hover,
  .slide-arrow:hover,
  .feature-slider-prev:hover,
  .feature-slider-next:hover {
	filter: brightness(0.92);
  }
  .btn,
  .btn-primary,
  .btn.btn-primary,
  .contact-section-submit-btn {
	background-color: var(--theme-accent) !important;
	color: var(--theme-accent-contrast) !important;
	border-color: var(--theme-accent) !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  .btn-outline,
  .btn-secondary,
  .btn-light,
  .btn-outline-primary {
	background-color: transparent !important;
	color: var(--theme-text-primary) !important;
	border-color: var(--theme-border) !important;
  }
  .btn-outline:hover,
  .btn-secondary:hover,
  .btn-light:hover,
  .btn-outline-primary:hover {
	background-color: var(--theme-card-muted) !important;
  }
  .theme-icon-btn {
	background-color: transparent !important;
	color: var(--theme-text-primary) !important;
	border: 1px solid transparent !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  .theme-icon-btn:hover,
  .theme-icon-btn:focus-visible {
	background-color: var(--theme-card-muted) !important;
	color: var(--theme-text-primary) !important;
  }
  .theme-list {
	background-color: var(--theme-card) !important;
	color: var(--theme-text-primary) !important;
	box-shadow: var(--theme-shadow-card);
  }
  .theme-list-item {
	color: var(--theme-text-primary) !important;
  }
  .theme-list-item:hover,
  .theme-list-item:focus-visible {
	background-color: var(--theme-card-muted) !important;
	color: var(--theme-text-primary) !important;
  }
  .front-input,
  .form-control,
  .form-select {
	background-color: var(--theme-card) !important;
	color: var(--theme-text-primary) !important;
	border: 1px solid var(--theme-border) !important;
  }
  .front-input::placeholder,
  .form-control::placeholder {
	color: var(--theme-text-secondary) !important;
  }
  .bg-light {
	background-color: var(--theme-surface) !important;
  }
  .text-secondary {
	color: var(--theme-text-secondary) !important;
  }
  .theme-tag {
	background-color: var(--theme-card-muted) !important;
	color: var(--theme-text-secondary) !important;
  }
  .theme-outline {
	border: 1px solid var(--theme-border) !important;
  }
  .theme-divider {
	background-color: var(--theme-border) !important;
  }


            /* 🌌 Features 섹션 백그라운드 */
            .features-backdrop {
                position: absolute;
                inset: 0;
                pointer-events: none;
                overflow: hidden;
            }
            .features-radial {
                position: absolute;
                border-radius: 9999px;
                filter: saturate(120%);
                opacity: 0.65;
                animation: featuresGlow 24s ease-in-out infinite;
            }
            .features-radial--left {
                top: 70px;
                left: 80px;
                width: 200px;
                height: 200px;
                background: radial-gradient(circle at center, rgba(129, 140, 248, 0.3), rgba(59, 130, 246, 0));
            }
            .features-radial--right {
                bottom: -180px;
                right: -160px;
                width: 480px;
                height: 480px;
                background: radial-gradient(circle at center, rgba(236, 72, 153, 0.26), rgba(168, 85, 247, 0));
                animation-delay: -8s;
            }
            html.dark .features-radial--left {
                background: radial-gradient(circle at center, rgba(99, 102, 241, 0.42), rgba(56, 189, 248, 0.14));
                opacity: 0.85;
            }
            html.dark .features-radial--right {
                background: radial-gradient(circle at center, rgba(236, 72, 153, 0.4), rgba(168, 85, 247, 0.16));
                opacity: 0.9;
            }
            .features-grid {
                position: absolute;
                inset: -12% -8%;
                background-image:
                    linear-gradient(rgba(148, 163, 184, 0.14) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(148, 163, 184, 0.14) 1px, transparent 1px);
                background-size: 220px 220px;
                opacity: 0.28;
                mix-blend-mode: multiply;
                animation: featuresDrift 36s linear infinite;
            }
            html.dark .features-grid {
                background-image:
                    linear-gradient(rgba(148, 163, 184, 0.2) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(148, 163, 184, 0.2) 1px, transparent 1px);
                opacity: 0.2;
                mix-blend-mode: screen;
            }

            /* 🎨 카드 스타일 오버라이드 */
            .features-section .feature-slider .feature-card {
                padding: 2.5rem 2rem !important;
                border-radius: 1.75rem !important;
                position: relative;
                overflow: hidden;
            }
            .feature-card__glow {
                position: absolute;
                inset: 0;
                background: radial-gradient(circle at top right, rgba(168, 85, 247, 0.18), transparent 60%);
                opacity: 0;
                transition: opacity .3s ease;
                pointer-events: none;
            }
            .features-section .feature-slider .feature-card:hover .feature-card__glow {
                opacity: 1;
            }
            .features-section .feature-slider .feature-card .card-img {
                background: rgba(243, 244, 250, 0.9);
                border: 1px solid rgba(148, 163, 184, 0.24);
            }
            html.dark .features-section .feature-slider .feature-card .card-img {
                background: rgba(30, 41, 59, 0.85);
                border-color: rgba(148, 163, 184, 0.32);
            }
            .features-section .feature-slider .feature-card .card-body p {
                display: -webkit-box;
                line-clamp: 4;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            /* 🧭 화살표 위치 조정 */
            .features-section .feature-slider .slick-arrow {
                top: -88px;
            }
            @media (max-width: 1024px) {
                .features-section .feature-slider .slick-arrow {
                    top: -72px;
                }
            }

            @keyframes featuresGlow {
                0%, 100% { transform: scale(0.92); opacity: 0.55; }
                50% { transform: scale(1.05); opacity: 1; }
            }
            @keyframes featuresDrift {
                0% { transform: translate3d(0, 0, 0); }
                100% { transform: translate3d(-140px, -80px, 0); }
            }












.hero-backdrop {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.hero-radial {
	position: absolute;
	border-radius: 9999px;
	mix-blend-mode: normal;
	opacity: 0.78;
	animation: heroGlow 18s ease-in-out infinite;
	filter: saturate(120%);
}
.hero-radial--primary {
	top: -220px;
	right: -150px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle at center, rgba(168, 85, 247, 0.32), rgba(79, 70, 229, 0.08));
}
.hero-radial--secondary {
	bottom: 120px;
	left: 60px;
	width: 440px;
	height: 440px;
	background: radial-gradient(circle at center, rgba(59, 130, 246, 0.28), rgba(14, 165, 233, 0.06));
	animation-duration: 22s;
	animation-delay: -6s;
}
html.dark .hero-radial {
	mix-blend-mode: screen;
	opacity: 0.92;
}
html.dark .hero-radial--primary {
	background: radial-gradient(circle at center, rgba(168, 85, 247, 0.38), rgba(129, 140, 248, 0.08));
	opacity: 0.95;
}
html.dark .hero-radial--secondary {
	background: radial-gradient(circle at center, rgba(79, 70, 229, 0.32), rgba(56, 189, 248, 0.08));
	opacity: 0.85;
}
.hero-grid {
	position: absolute;
	inset: -15% -12%;
	background-image:
		linear-gradient(rgba(120, 113, 245, 0.16) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 113, 245, 0.16) 1px, transparent 1px);
	background-size: 160px 160px;
	opacity: 0.55;
	mix-blend-mode: multiply;
	animation: heroDrift 32s linear infinite;
}
html.dark .hero-grid {
	background-image:
		linear-gradient(rgba(148, 163, 184, 0.18) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
	opacity: 0.32;
}
.hero-orbit {
	position: absolute;
	top: 14%;
	right: 8%;
	width: 320px;
	height: 320px;
	border-radius: 9999px;
	border: 1px solid rgba(120, 113, 245, 0.28);
	mix-blend-mode: screen;
	animation: heroOrbit 45s linear infinite;
}
.hero-orbit span {
	position: absolute;
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 9999px;
	background: linear-gradient(135deg, rgba(236, 72, 153, 0.85), rgba(79, 70, 229, 0.8));
	box-shadow: 0 12px 32px -14px rgba(79, 70, 229, 0.85);
	animation: heroTwinkle 6s ease-in-out infinite;
}
.hero-orbit span:nth-child(1) {
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
}
.hero-orbit span:nth-child(2) {
	bottom: -16px;
	right: 12%;
	width: 11px;
	height: 11px;
	animation-delay: 1.6s;
}
html.dark .hero-orbit {
	border-color: rgba(148, 163, 184, 0.28);
}
html.dark .hero-orbit span {
	background: linear-gradient(135deg, rgba(168, 85, 247, 0.92), rgba(129, 140, 248, 0.74));
	box-shadow: 0 16px 36px -16px rgba(129, 140, 248, 0.9);
}

/* 부드러운 떠있는 애니메이션 + 배경 모션 */
@keyframes heroGlow {
	0%, 100% { transform: scale(0.94) translate3d(0, 0, 0); opacity: 0.7; }
	50% { transform: scale(1.05) translate3d(0, -14px, 0); opacity: 1; }
}
@keyframes heroDrift {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-120px, -80px, 0); }
}
@keyframes heroOrbit {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes heroTwinkle {
	0%, 100% { transform: scale(0.8); opacity: 0.55; }
	50% { transform: scale(1.15); opacity: 1; }
}
@keyframes floaty {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
.preview-card {
	animation: floaty 4s ease-in-out infinite;
}


.interface-panorama-backdrop {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.interface-panorama-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(79, 70, 229, 0.08), rgba(14, 165, 233, 0.08), rgba(15, 23, 42, 0.02));
}
html.dark .interface-panorama-veil {
	background: linear-gradient(200deg, rgba(30, 41, 59, 0.85), rgba(17, 24, 39, 0.7), rgba(15, 23, 42, 0.55));
}
.interface-panorama-spot {
	position: absolute;
	width: 420px;
	height: 420px;
	filter: blur(140px);
	opacity: 0.28;
}
.interface-panorama-spot--one {
	top: -160px;
	left: -120px;
	background: rgba(79, 70, 229, 0.8);
}
.interface-panorama-spot--two {
	bottom: -180px;
	right: -140px;
	background: rgba(14, 165, 233, 0.72);
}
html.dark .interface-panorama-spot {
	opacity: 0.22;
}
.interface-panorama-flow {
	position: relative;
	isolation: isolate;
}
.interface-panorama-flow::before {
	content: '';
	position: absolute;
	inset: -80px 0 0 0;
	margin: 0 auto;
	width: min(4px, 100%);
	background: linear-gradient(180deg, rgba(79, 70, 229, 0), rgba(79, 70, 229, 0.18), rgba(79, 70, 229, 0));
	border-radius: 9999px;
}
html.dark .interface-panorama-flow::before {
	background: linear-gradient(180deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.35), rgba(129, 140, 248, 0));
}
.interface-panorama-card {
	background: rgba(248, 250, 252, 0.82);
	box-shadow: 0 18px 42px -26px rgba(15, 23, 42, 0.28);
	backdrop-filter: blur(10px);
}
html.dark .interface-panorama-card {
	background: rgba(15, 23, 42, 0.78);
	box-shadow: 0 26px 60px -36px rgba(15, 23, 42, 0.9);
}
.interface-panorama-visual__frame {
	position: relative;
	border-radius: 1.5rem;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(79, 70, 229, 0.16), rgba(14, 165, 233, 0.08));
}
.interface-panorama-visual__frame::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}
.interface-panorama-index {
	position: absolute;
	bottom: 20px;
	left: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 9999px;
	background: rgba(17, 24, 39, 0.78);
	color: rgba(248, 250, 252, 0.95);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	box-shadow: 0 12px 28px -18px rgba(17, 24, 39, 0.8);
}
html.dark .interface-panorama-index {
	background: rgba(248, 250, 252, 0.78);
	color: rgba(17, 24, 39, 0.88);
	box-shadow: 0 12px 28px -20px rgba(248, 250, 252, 0.32);
}
@media (max-width: 1023px) {
	.interface-panorama-index {
		left: auto;
		right: 16px;
	}
	.interface-panorama-link-wrapper {
		justify-content: flex-start !important;
	}
}
.interface-panorama-tag,
.interface-panorama-pill {
	background-color: rgba(168, 85, 247, 0.12);
	color: rgba(79, 70, 229, 0.82);
}
html.dark .interface-panorama-tag,
html.dark .interface-panorama-pill {
	background-color: rgba(129, 140, 248, 0.16);
	color: rgba(196, 181, 253, 0.9);
}
.interface-panorama-dot {
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: rgba(79, 70, 229, 0.65);
}
html.dark .interface-panorama-dot {
	background: rgba(196, 181, 253, 0.65);
}
.interface-panorama-label {
	color: rgba(107, 114, 128, 0.9);
}
html.dark .interface-panorama-label {
	color: rgba(203, 213, 225, 0.85);
}
.interface-panorama-link {
	color: var(--theme-accent);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.interface-panorama-description {
	max-width: min(38rem, 95%);
	word-break: keep-all;
	color: var(--theme-text-secondary);
	font-size: 0.9375rem;
	line-height: 1.65;
}
.interface-panorama-overlay {
	position: absolute;
	inset: -45% -30%;
	background: conic-gradient(from 120deg, transparent 0deg, rgba(79, 70, 229, 0.12) 50deg, transparent 120deg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}
.interface-panorama-card:hover .interface-panorama-overlay {
	opacity: 1;
}

/* ✅ 인터페이스 파노라마 미디어 섬네일 비율 제한 (모바일 대응) */
.interface-panorama-media {
	flex-shrink: 0;
}
.interface-panorama-media__frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 20px;
}
/* 데스크톱: 1:1 정사각형 */
@media (min-width: 1024px) {
	.interface-panorama-media__frame {
		aspect-ratio: 1 / 1;
		height: auto;
	}
}
/* 모바일: 고정 높이로 강제 제한 (아이폰 대응) */
@media (max-width: 1023px) {
	.interface-panorama-media__frame {
		aspect-ratio: 4 / 3 !important;
		height: 200px !important;
		max-height: 200px !important;
		min-height: 200px !important;
	}
}
/* 작은 모바일 화면 (아이폰 SE 등) */
@media (max-width: 375px) {
	.interface-panorama-media__frame {
		height: 180px !important;
		max-height: 180px !important;
		min-height: 180px !important;
	}
}
.interface-panorama-media__frame img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
	display: block;
}

/* ✅ Pricing Section - Hero/Features 스타일과 일관된 백그라운드 효과 */
.pricing-backdrop {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.pricing-radial {
	position: absolute;
	border-radius: 9999px;
	mix-blend-mode: normal;
	opacity: 0.75;
	animation: pricingGlow 20s ease-in-out infinite;
	filter: saturate(120%);
}
.pricing-radial--primary {
	top: -200px;
	right: -140px;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle at center, rgba(168, 85, 247, 0.30), rgba(79, 70, 229, 0.06));
}
.pricing-radial--secondary {
	bottom: -180px;
	left: -150px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle at center, rgba(59, 130, 246, 0.26), rgba(14, 165, 233, 0.05));
	animation-duration: 24s;
	animation-delay: -8s;
}
html.dark .pricing-radial {
	mix-blend-mode: screen;
	opacity: 0.88;
}
html.dark .pricing-radial--primary {
	background: radial-gradient(circle at center, rgba(168, 85, 247, 0.36), rgba(129, 140, 248, 0.08));
	opacity: 0.92;
}
html.dark .pricing-radial--secondary {
	background: radial-gradient(circle at center, rgba(79, 70, 229, 0.30), rgba(56, 189, 248, 0.08));
	opacity: 0.82;
}
.pricing-grid {
	position: absolute;
	inset: -12% -10%;
	background-image:
		linear-gradient(rgba(120, 113, 245, 0.14) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 113, 245, 0.14) 1px, transparent 1px);
	background-size: 180px 180px;
	opacity: 0.50;
	mix-blend-mode: multiply;
	animation: pricingDrift 34s linear infinite;
}
html.dark .pricing-grid {
	background-image:
		linear-gradient(rgba(148, 163, 184, 0.16) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, 0.16) 1px, transparent 1px);
	opacity: 0.28;
}
@keyframes pricingGlow {
	0%, 100% { transform: scale(0.93) translate3d(0, 0, 0); opacity: 0.68; }
	50% { transform: scale(1.06) translate3d(0, -12px, 0); opacity: 1; }
}
@keyframes pricingDrift {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-130px, -70px, 0); }
}

/* ✅ Contact Section - 심플한 배경 효과 (오렌지/레드 계열 Radial Glow만) */
.contact-backdrop {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

/* 🔥 오렌지/레드 계열 Radial Glow (다른 섹션과 차별화) */
.contact-radial {
	position: absolute;
	border-radius: 9999px;
	mix-blend-mode: normal;
	opacity: 0.70;
	animation: contactGlow 22s ease-in-out infinite;
	filter: saturate(120%);
}
.contact-radial--primary {
	top: -180px;
	right: -120px;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle at center, rgba(251, 146, 60, 0.30), rgba(239, 68, 68, 0.06));
}
.contact-radial--secondary {
	bottom: -160px;
	left: -130px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle at center, rgba(249, 115, 22, 0.28), rgba(220, 38, 38, 0.05));
	animation-duration: 26s;
	animation-delay: -10s;
}
html.dark .contact-radial {
	mix-blend-mode: screen;
	opacity: 0.80;
}
html.dark .contact-radial--primary {
	background: radial-gradient(circle at center, rgba(251, 146, 60, 0.38), rgba(239, 68, 68, 0.10));
	opacity: 0.85;
}
html.dark .contact-radial--secondary {
	background: radial-gradient(circle at center, rgba(249, 115, 22, 0.35), rgba(220, 38, 38, 0.08));
	opacity: 0.82;
}
@keyframes contactGlow {
	0%, 100% { transform: scale(0.92) translate3d(0, 0, 0); opacity: 0.65; }
	50% { transform: scale(1.06) translate3d(0, -12px, 0); opacity: 1; }
}

/* ✅ 다크모드 전환 및 네비게이션 중 애니메이션 일시 중지 */
.no-anim *,
.no-anim *::before,
.no-anim *::after {
	animation: none !important;
	transition: none !important;
	animation-duration: 0s !important;
	transition-duration: 0s !important;
}

/* ✅ 슬라이더 깨짐 방지 - 최소 높이 보장 */
.center-slider,
.feature-slider,
.pricing-slider,
.testimonial-slider {
	min-height: 400px;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.center-slider.slick-initialized,
.feature-slider.slick-initialized,
.pricing-slider.slick-initialized,
.testimonial-slider.slick-initialized {
	opacity: 1;
	min-height: auto;
}

/* ✅ 슬라이더 아이템 깨짐 방지 */
.slick-slide {
	outline: none !important;
	backface-visibility: hidden;
	transform: translateZ(0);
}
.slick-track {
	display: flex !important;
	align-items: stretch;
}

      /* ============================================ */
        /* 공통 스타일 (모드와 무관) */
        /* ============================================ */
        *, ::after, ::before {
            box-sizing: border-box;
            border-width: 0;
            border-style: solid;
        }
        
        * {
            font-family: 'Pretendard', 'Noto Sans KR', 'Inter', 'ui-sans-serif', 'system-ui', sans-serif !important;
        }
        
        body {
            background-color: var(--theme-bg);
            color: var(--theme-text-primary);
            transition: background-color 0.25s ease, color 0.25s ease;
        }
        
        /* ============================================ */
        /* 라이트 모드 변수 및 스타일 */
        /* ============================================ */
        :root {
            color-scheme: light;
            --theme-bg: #ffffff;
            --theme-surface: #f5f5f5;
            --theme-card: #ffffff;
            --theme-card-muted: #f3f4f6;
            --theme-text-primary: #111827;
            --theme-text-secondary: #4b5563;
            --theme-border: rgba(17, 24, 39, 0.08);
            --theme-accent: #000000;
            --theme-accent-contrast: #ffffff;
            --theme-hero-gradient: #ffffff;
            --theme-shadow-card: 0 20px 45px -18px rgba(15, 23, 42, 0.18);
        }
        
        /* 라이트 모드 전용 스타일 */
        .theme-glass {
            background-color: rgba(255, 255, 255, 0.75) !important;
        }
        
        /* 라이트 모드 Hero 텍스트 그라디언트 */
        .slogan-line1-text {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 20%, #1a1a1a 40%, #0f172a 60%, #1e293b 80%, #1a1a1a 100%);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            font-weight: 900;
            position: relative;
            animation: premium-gradient-shift 5s ease-in-out infinite;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            transition: none !important;
        }
        
        /* 라이트 모드 Digital Card 그라디언트 */
        .digital-card-gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            font-weight: 900;
            position: relative;
            animation: gradient-shift 4s ease infinite;
            text-shadow: 0 0 30px rgba(102, 126, 234, 0.3);
            transition: none !important;
        }
        
        .digital-card-gradient-text::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: blur(10px);
            opacity: 0.5;
        }
        
        /* 라이트 모드 Brand Premium 텍스트 */
        .brand-premium-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 20%, #f093fb 40%, #4facfe 60%, #00f2fe 80%, #667eea 100%);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            font-weight: 900;
            position: relative;
            animation: premium-brand-flow 5s ease-in-out infinite;
            letter-spacing: -0.02em;
            transition: none !important;
        }
        
        .brand-premium-text::before, .brand-premium-text::after {
            display: none;
        }
        
        /* ============================================ */
        /* 다크 모드 변수 및 스타일 */
        /* ============================================ */
        html.dark {
            color-scheme: dark;
            --theme-bg: #0f172a;
            --theme-surface: #0f1e33;
            --theme-card: #1e293b;
            --theme-card-muted: #243249;
            --theme-text-primary: #f8fafc;
            --theme-text-secondary: #cbd5f5;
            --theme-border: rgba(148, 163, 184, 0.28);
            --theme-accent: #ffffff;
            --theme-accent-contrast: #0f172a;
            --theme-hero-gradient: linear-gradient(to bottom, #0f172a, #1e293b);
            --theme-section-gradient: #1e293b;
            --theme-shadow-card: 0 28px 50px -20px rgba(15, 23, 42, 0.65);
        }
        
        /* 다크 모드 전용 스타일 */
        html.dark .theme-glass {
            background-color: rgb(15 23 42) !important;
        }
        
        /* 다크 모드 Hero 텍스트 그라디언트 */
        html.dark .slogan-line1-text {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 20%, #f8fafc 40%, #cbd5e1 60%, #e2e8f0 80%, #f8fafc 100%);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: premium-gradient-shift 5s ease-in-out infinite;
            text-shadow: 0 2px 10px rgba(248, 250, 252, 0.15);
        }
        
        /* 다크 모드 Digital Card 그라디언트 */
        html.dark .digital-card-gradient-text {
            background: linear-gradient(135deg, #818cf8 0%, #a78bfa 25%, #f472b6 50%, #60a5fa 75%, #34d399 100%);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradient-shift 4s ease infinite;
            text-shadow: 0 0 40px rgba(129, 140, 248, 0.4);
        }
        
        /* 다크 모드 Brand Premium 텍스트 */
        html.dark .brand-premium-text {
            background: linear-gradient(135deg, #818cf8 0%, #a78bfa 20%, #f472b6 40%, #60a5fa 60%, #34d399 80%, #818cf8 100%);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: premium-brand-flow 5s ease-in-out infinite;
        }
        
        html.dark .brand-premium-text::before, html.dark .brand-premium-text::after {
            display: none;
        }
        
        /* ============================================ */
        /* 공통 컴포넌트 스타일 (변수 사용) */
        /* ============================================ */
        .theme-hero {
            background: var(--theme-hero-gradient);
        }
        
        .theme-section {
            background: var(--theme-section-gradient);
        }
        
        .theme-bg, .theme-surface {
            background-color: inherit !important;
        }
        
        .theme-card {
            background-color: var(--theme-card) !important;
            color: var(--theme-text-primary) !important;
            box-shadow: var(--theme-shadow-card);
            transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
        }
        
        .theme-card-muted {
            background-color: var(--theme-card-muted) !important;
        }
        
        .theme-text {
            color: var(--theme-text-primary) !important;
        }
        
        .theme-text-muted {
            color: var(--theme-text-secondary) !important;
        }
        
        .theme-border {
            border-color: var(--theme-border) !important;
            --tw-ring-color: var(--theme-border);
        }
        
        .theme-btn {
            background-color: var(--theme-accent) !important;
            color: var(--theme-accent-contrast) !important;
            border-color: transparent !important;
            transition: none !important;
        }
        
        .theme-btn:hover {
            filter: brightness(0.92);
        }
        
        .theme-btn-outline {
            background-color: transparent !important;
            color: var(--theme-text-primary) !important;
            border: 1px solid var(--theme-border) !important;
            transition: none !important;
        }
        
        .theme-btn-outline:hover {
            background-color: var(--theme-card-muted) !important;
        }
        
        .theme-link {
            color: var(--theme-accent) !important;
        }
        
        .theme-link:hover {
            opacity: 0.8;
        }
        
        header, .navbar, .features-section, .pricing-plan-section, .testimonial, .contact-section, .modern-interface-section {
            background-color: inherit;
            color: var(--theme-text-primary);
            transition: none !important;
        }
        
        .feature-card, .pricing-card, .testimonial-card, .contact-form, .interface-card {
            background-color: var(--theme-card) !important;
            color: var(--theme-text-primary) !important;
            box-shadow: var(--theme-shadow-card);
            border-radius: 1rem;
        }
        
        .feature-card p, .pricing-card p, .testimonial-card p, .contact-form p, .interface-card p,
        .text-gray-100, .text-secondary, .tw-text-ink-600, .tw-text-ink-500, .tw-text-ink-400, .tw-text-ink-300,
        .tw-text-gray-500, .tw-text-gray-400, .tw-text-gray-300 {
            color: var(--theme-text-secondary) !important;
        }
        
        .feature-card h3, .pricing-card h3, .testimonial-card .profile-desc p, .interface-card h3,
        .section-heading h2, .tw-text-ink-900, .tw-text-ink-800, .tw-text-ink-700,
        .tw-text-gray-900, .tw-text-gray-800, .tw-text-gray-700 {
            color: var(--theme-text-primary) !important;
        }
        
        .theme-nav-link {
            color: var(--theme-text-primary) !important;
            transition: none !important;
        }
        
        .theme-nav-link:hover, .theme-nav-link:focus-visible {
            color: var(--theme-accent) !important;
        }
        
        .feature-slider .slick-arrow, .center-slider .slick-arrow, .feature-slider-prev,
        .feature-slider-next, .slide-arrow {
            background-color: var(--theme-accent) !important;
            color: var(--theme-accent-contrast) !important;
            border: 1px solid var(--theme-border) !important;
            transition: none !important;
        }
        
        .feature-slider .slick-arrow:hover, .center-slider .slick-arrow:hover, .slide-arrow:hover,
        .feature-slider-prev:hover, .feature-slider-next:hover {
            filter: brightness(0.92);
        }
        
        .btn, .btn-primary, .btn.btn-primary, .contact-section-submit-btn {
            background-color: var(--theme-accent) !important;
            color: var(--theme-accent-contrast) !important;
            border-color: var(--theme-accent) !important;
            transition: none !important;
        }
        
        .btn-outline, .btn-secondary, .btn-light, .btn-outline-primary {
            background-color: transparent !important;
            color: var(--theme-text-primary) !important;
            border-color: var(--theme-border) !important;
        }
        
        .btn-outline:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover {
            background-color: var(--theme-card-muted) !important;
        }
        
        .theme-icon-btn {
            background-color: transparent !important;
            color: var(--theme-text-primary) !important;
            border: 1px solid transparent !important;
            transition: none !important;
        }
        
        .theme-icon-btn:hover, .theme-icon-btn:focus-visible {
            background-color: var(--theme-card-muted) !important;
            color: var(--theme-text-primary) !important;
        }
        
        .theme-list {
            background-color: var(--theme-card) !important;
            color: var(--theme-text-primary) !important;
            box-shadow: var(--theme-shadow-card);
        }
        
        .theme-list-item {
            color: var(--theme-text-primary) !important;
        }
        
        .theme-list-item:hover, .theme-list-item:focus-visible {
            background-color: var(--theme-card-muted) !important;
            color: var(--theme-text-primary) !important;
        }
        
        .front-input, .form-control, .form-select {
            background-color: var(--theme-card) !important;
            color: var(--theme-text-primary) !important;
            border: 1px solid var(--theme-border) !important;
        }
        
        .front-input::placeholder, .form-control::placeholder {
            color: var(--theme-text-secondary) !important;
        }
        
        .bg-light {
            background-color: var(--theme-surface) !important;
        }
        
        .text-secondary {
            color: var(--theme-text-secondary) !important;
        }
        
        .theme-tag {
            background-color: var(--theme-card-muted) !important;
            color: var(--theme-text-secondary) !important;
        }
        
        .theme-outline {
            border: 1px solid var(--theme-border) !important;
        }
        
        .theme-divider {
            background-color: var(--theme-border) !important;
        }