:root{
 /* 마스터 브랜드 (셀러루트) */
 --sr-master: #000000;
 --sr-master-light: #1A1A1A;
 --sr-master-soft: #333333;
 
 /* 공통 뉴트럴 컬러 */
 --neutral-50: #FAFAFA;
 --neutral-100: #F6F7FB;
 --neutral-200: #E6E8EF;
 --neutral-300: #D1D5DB;
 --neutral-400: #9CA3AF;
 --neutral-500: #6B7280;
 --neutral-600: #5B6374;
 --neutral-700: #374151;
 --neutral-800: #1F2937;
 --neutral-900: #141821;
 
 /* 공통 시맨틱 컬러 */
 --success: #10B981;
 --success-light: #D1FAE5;
 --success-dark: #047857;
 --warning: #F59E0B;
 --warning-light: #FEF3C7;
 --warning-dark: #D97706;
 --error: #EF4444;
 --error-light: #FEE2E2;
 --error-dark: #DC2626;
 --info: #3B82F6;
 --info-light: #DBEAFE;
 --info-dark: #1D4ED8;
 
 /* 루트스마일 브랜드 색상 */
 --smile-main: #FAB03C;
 --smile-50: #FFF8ED;
 --smile-100: #FFF4E1;
 --smile-200: #FFE4B8;
 --smile-300: #FFD08F;
 --smile-400: #FFC066;
 --smile-500: #FAB03C;
 --smile-600: #E09825;
 --smile-700: #C98213;
 --smile-800: #A66A0E;
 --smile-900: #7A4D0A;
 --smile-accent: #1F2A44;
 --smile-accent-light: #2D3A5C;
 --smile-neutral: #F2EFEA;
 --smile-cream: #FFF5E8;
 --smile-contrast-1: #2563EB;
 --smile-contrast-2: #10B981;
 
 /* 레거시 호환 변수 (기존 코드와의 호환성) */
 --smile: var(--smile-500);
 --smile-tint: var(--smile-100);
 --smile-shade: var(--smile-700);
 --sr-dark: var(--neutral-900);
 --sr-bg: var(--neutral-100);
 --sr-border: var(--neutral-200);
 --sr-text2: var(--neutral-600);
 --sr-surface: #FFFFFF;
 
 /* 공통 그림자/반경 */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.04);
  --shadow-md: 0 10px 28px rgba(0,0,0,.06);
  --shadow-lg: 0 20px 40px rgba(0,0,0,.08);
  --radius: 18px;
  --radius-sm: 8px;
  --radius-lg: 24px;
}

.text-secondary-2{ color: var(--neutral-600)!important; }
.bg-dark-2{ background: var(--neutral-900)!important; }
.bg-accent{ background: var(--smile-accent)!important; }
.text-accent{ color: var(--smile-accent)!important; }

.card-soft{ 
  border:1px solid var(--neutral-200); 
  border-radius: var(--radius); 
  box-shadow: var(--shadow-md); 
  background: var(--sr-surface);
  transition: all 0.3s ease;
}

.card-soft:hover{
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.hero{ 
  background: linear-gradient(135deg, var(--sr-surface) 0%, var(--smile-neutral) 50%, var(--neutral-100) 100%); 
  border-bottom:1px solid var(--neutral-200);
  position: relative;
  /* overflow: hidden; */
}

.hero::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(250,176,60,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.btn-smile{ 
  background: var(--smile-500); 
  border-color: var(--smile-500); 
  color: var(--neutral-900); 
  font-weight:700;
  padding: 0.65rem 1.5rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(250,176,60,0.25);
}

.btn-smile:hover{ 
  background: var(--smile-700); 
  border-color: var(--smile-700); 
  color: var(--sr-surface);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(250,176,60,0.35);
}

/* Outline variant: matches .btn-smile tone */
.btn-outline-smile{
  background: transparent;
  border: 2px solid var(--smile-500);
  color: var(--smile-700);
  font-weight: 700;
  padding: 0.65rem 1.5rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(250,176,60,0.12);
}

.btn-outline-smile:hover{
  background: var(--smile-500);
  border-color: var(--smile-500);
  color: var(--neutral-900);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(250,176,60,0.28);
}

/* Optional: focus/active/disabled states (권장) */
.btn-outline-smile:focus,
.btn-outline-smile:focus-visible{
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(250,176,60,0.35);
}

.btn-outline-smile:active{
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(250,176,60,0.18);
}

.btn-outline-smile:disabled,
.btn-outline-smile.disabled{
  opacity: 0.6;
  pointer-events: none;
  box-shadow: none;
}

.btn-outline-dark2{ 
  border-color: var(--neutral-900); 
  color: var(--neutral-900); 
  font-weight:700;
  padding: 0.65rem 1.5rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  border-width: 2px;
}

.btn-outline-dark2:hover{ 
  background: var(--neutral-900); 
  color: var(--sr-surface);
  transform: translateY(-2px);
}

.btn-outline-light{
  border-width: 2px;
  border-radius: 12px;
  padding: 0.65rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline-light:hover{
  transform: translateY(-2px);
}

.kicker{ 
  letter-spacing:.08em; 
  text-transform:uppercase; 
  font-weight:800; 
  color: var(--smile-700); 
  font-size:.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.kicker::before{
  content: '';
  width: 32px;
  height: 3px;
  background: var(--smile-500);
  border-radius: 2px;
}

.section{ padding: 80px 0; }
.section-tight{ padding: 48px 0; }
.anchor{ scroll-margin-top: 96px; }

.pill{
  display:inline-flex; 
  align-items:center; 
  gap:.5rem;
  padding:.5rem 1rem; 
  border-radius:999px;
  background: var(--sr-surface); 
  border:1px solid var(--neutral-200);
  font-size:.85rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.pill:hover{
  border-color: var(--smile-500);
  background: var(--smile-100);
}

.brand-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .9rem;
  border-radius:999px;
  background: var(--smile-100);
  border:2px solid var(--smile-500);
  font-size:.8rem;
  font-weight: 600;
  color: var(--smile-700);
  box-shadow: var(--shadow-sm);
}

.toc{ background: linear-gradient(135deg, var(--sr-surface) 0%, var(--smile-100) 100%); }
.toc a{ 
  text-decoration:none; 
  color: var(--neutral-900);
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.toc a::before{
  content: '→';
  color: var(--smile-500);
  font-weight: 800;
  transition: transform 0.2s ease;
}

.toc a:hover{ 
  color: var(--smile-700);
  transform: translateX(4px);
}

.toc a:hover::before{
  transform: translateX(4px);
}

.strength-badge{
  display:inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding:.4rem .85rem; 
  border-radius:999px;
  background: var(--smile-100); 
  border:2px solid var(--smile-500);
  font-weight:800; 
  font-size:.82rem;
  color: var(--smile-700);
  box-shadow: 0 2px 8px rgba(250,176,60,0.2);
}

.strength-badge i{
  font-size: 1rem;
}

.mini-title{ 
  font-weight:800; 
  color: var(--smile-accent);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mini-title::before{
  content: '';
  width: 4px;
  height: 18px;
  background: var(--smile-500);
  border-radius: 2px;
}

.soft-hr{ 
  border-top:2px solid var(--neutral-200); 
  opacity: 1;
}
/*
.navbar{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.95)!important;
  border-bottom: 1px solid var(--neutral-200);
}

.navbar-brand{
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--neutral-900)!important;
}

.nav-link{
  font-weight: 600;
  color: var(--neutral-600)!important;
  transition: all 0.2s ease;
  position: relative;
}

.nav-link:hover{
  color: var(--smile-700)!important;
}
*/
.icon-circle{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--smile-100) 0%, var(--smile-neutral) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--smile-700);
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

.highlight-text{
  background: var(--smile-100);
  padding:.08em .25em;
  border-radius:.35em;
  font-weight: 700;
  color: var(--smile-700);
}

.strength-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--smile-500);
  color: var(--neutral-900);
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.85rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.service-map-card{
  background: linear-gradient(135deg, var(--sr-surface) 0%, var(--smile-neutral) 100%);
  border: 2px solid var(--smile-500);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}

.service-step{
  position: relative;
  padding-left: 3rem;
}

.service-step::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background: var(--smile-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* FAQ Toggle 스타일 */
.faq-item{
  background: var(--sr-surface);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  overflow: hidden;
}

.faq-item:hover{
  box-shadow: var(--shadow-md);
  border-color: var(--smile-500);
}

.faq-question{
  font-weight: 700;
  color: var(--smile-accent);
  font-size: 1.05rem;
  margin: 0;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}

.faq-question:hover{
  background: var(--smile-50);
}

.faq-question::before{
  content: 'Q';
  background: var(--smile-500);
  color: var(--neutral-900);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-right: 0.75rem;
}

.faq-question::after{
  content: '\f078';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: var(--smile-500);
  font-size: 1rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 0.75rem;
}

.faq-question.active::after{
  transform: rotate(180deg);
}

.faq-answer{
  color: var(--neutral-600);
  padding: 0;
  padding-left: 4.25rem;
  padding-right: 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-answer.active{
  max-height: 600px;
  padding: 0 1.5rem 1.5rem 4.25rem;
}
/*
footer a{
  transition: all 0.2s ease;
}

footer a:hover{
  color: var(--smile-500)!important;
}
*/


/* 애니메이션 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up{
  animation: fadeInUp 0.6s ease-out;
}

/* 리스트 스타일 개선 */
ul li{
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 0.5rem;
}

/* 반응형 개선 */
@media (max-width: 991px) {
  .section{ padding: 60px 0; }
  .section-tight{ padding: 40px 0; }
  .kicker::before{ width: 24px; }
  .hero{ padding: 3rem 0!important; }
  .display-6{ font-size: 1.75rem!important; }
}

@media (max-width: 767px) {
  .section{ padding: 48px 0; }
  .section-tight{ padding: 32px 0; }
  .display-6{ font-size: 1.5rem!important; }
  .service-map-card{ padding: 1.5rem; }
}



.fs-5 {
    font-size: 1.0rem !important;
}
.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

h1, h2, h3, h4, h5, h6{
  font-weight: 800;
  line-height: 1.3;
}
/* 
.small, small {
    font-size: .875em;
} */

.rs-modal-stack p { line-height: 1.7; }
.rs-modal-stack img { width: 100%; height: auto; display: block; }
.rs-modal-stack figure { margin: 0; }