: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;
    }
    
    /*
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body{ 
      background: var(--neutral-100); 
      color: var(--neutral-900); 
      font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      line-height: 1.7;
    }
    */
    
    .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);
    }
    
    .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);
    }
    
    .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);
    }
    
    .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; }
    /*
    .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;
    }
    */
    
    /* Guide Specific Styles */
    .guide-header{
      background: linear-gradient(135deg, var(--sr-surface) 0%, var(--smile-neutral) 50%, var(--neutral-100) 100%);
      border-bottom: 1px solid var(--neutral-200);
      padding: 3rem 0 2rem;
    }
    
    .breadcrumb{
      background: transparent;
      padding: 0;
      margin-bottom: 1rem;
    }
    
    .breadcrumb-item{
      font-size: 0.9rem;
    }
    
    .breadcrumb-item a{
      color: var(--neutral-600);
      text-decoration: none;
      transition: all 0.2s ease;
    }
    
    .breadcrumb-item a:hover{
      color: var(--smile-700);
    }
    
    .breadcrumb-item.active{
      color: var(--neutral-900);
      font-weight: 600;
    }
    
    .breadcrumb-item + .breadcrumb-item::before{
      content: '›';
      color: var(--neutral-400);
      font-size: 1.1rem;
    }
    
    .category-badge{
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.4rem 0.9rem;
      border-radius: 999px;
      background: var(--smile-100);
      border: 2px solid var(--smile-500);
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--smile-700);
      text-decoration: none;
      transition: all 0.3s ease;
    }
    
    .category-badge:hover{
      background: var(--smile-500);
      color: var(--neutral-900);
      transform: translateY(-2px);
    }
    
    .guide-meta{
      display: flex;
      align-items: center;
      gap: 1.5rem;
      flex-wrap: wrap;
      font-size: 0.9rem;
      color: var(--neutral-600);
      margin-top: 1rem;
    }
    
    .guide-meta i{
      color: var(--smile-500);
      margin-right: 0.35rem;
    }
    
    .guide-content{
      background: var(--sr-surface);
      border-radius: var(--radius);
      padding: 3rem;
      box-shadow: var(--shadow-md);
      margin-bottom: 2rem;
    }
    
    .guide-content h2{
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--smile-accent);
      margin-top: 3rem;
      margin-bottom: 1.5rem;
      padding-bottom: 0.75rem;
      border-bottom: 3px solid var(--smile-500);
      position: relative;
    }
    
    .guide-content h2:first-child{
      margin-top: 0;
    }
    
    .guide-content h3{
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--neutral-900);
      margin-top: 2.5rem;
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .guide-content h3::before{
      content: '';
      width: 4px;
      height: 24px;
      background: var(--smile-500);
      border-radius: 2px;
    }
    
    .guide-content p{
      margin-bottom: 1.5rem;
      line-height: 1.8;
      font-size: 1.05rem;
    }
    
    .guide-content img{
      max-width: 100%;
      height: auto;
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-md);
      margin: 1rem 0;
      border: 1px solid var(--neutral-200);
    }
    
    .guide-content ul,
    .guide-content ol{
      margin-bottom: 1.5rem;
      padding-left: 1.5rem;
    }
    
    .guide-content li{
      margin-bottom: 0.75rem;
      line-height: 1.8;
      font-size: 1.05rem;
    }
    
    .guide-content ul li::marker{
      color: var(--smile-500);
      font-weight: 800;
    }
    
    .guide-content ol li::marker{
      color: var(--smile-500);
      font-weight: 800;
    }
    
    .step-number{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: var(--smile-500);
      color: var(--neutral-900);
      border-radius: 50%;
      font-weight: 800;
      font-size: 0.95rem;
      margin-right: 0.75rem;
      flex-shrink: 0;
    }
    
    .info-box{
      background: var(--info-light);
      border-left: 4px solid var(--info);
      border-radius: var(--radius-sm);
      padding: 1.5rem;
      margin: 2rem 0;
    }
    
    .info-box-title{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 700;
      color: var(--info-dark);
      margin-bottom: 0.75rem;
      font-size: 1.05rem;
    }
    
    .info-box-title i{
      font-size: 1.2rem;
    }
    
    .info-box p:last-child{
      margin-bottom: 0;
    }
    
    .warning-box{
      background: var(--warning-light);
      border-left: 4px solid var(--warning);
      border-radius: var(--radius-sm);
      padding: 1.5rem;
      margin: 2rem 0;
    }
    
    .warning-box-title{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 700;
      color: var(--warning-dark);
      margin-bottom: 0.75rem;
      font-size: 1.05rem;
    }
    
    .warning-box-title i{
      font-size: 1.2rem;
    }
    
    .warning-box p:last-child{
      margin-bottom: 0;
    }
    
    .success-box{
      background: var(--success-light);
      border-left: 4px solid var(--success);
      border-radius: var(--radius-sm);
      padding: 1.5rem;
      margin: 2rem 0;
    }
    
    .success-box-title{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 700;
      color: var(--success-dark);
      margin-bottom: 0.75rem;
      font-size: 1.05rem;
    }
    
    .success-box-title i{
      font-size: 1.2rem;
    }
    
    .success-box p:last-child{
      margin-bottom: 0;
    }
    
    /* Sidebar Styles */
    .guide-sidebar{
      position: sticky;
      top: 96px;
    }
    
    .sidebar-card{
      background: var(--sr-surface);
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      box-shadow: var(--shadow-sm);
    }
    
    .sidebar-title{
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--smile-accent);
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .sidebar-title::before{
      content: '';
      width: 4px;
      height: 20px;
      background: var(--smile-500);
      border-radius: 2px;
    }
    
    .category-list{
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .category-list li{
      margin-bottom: 0.5rem;
    }
    
    .category-list a{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.65rem 0.85rem;
      background: var(--neutral-50);
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius-sm);
      color: var(--neutral-900);
      text-decoration: none;
      font-weight: 600;
      font-size: 0.95rem;
      transition: all 0.2s ease;
    }
    
    .category-list a:hover{
      background: var(--smile-100);
      border-color: var(--smile-500);
      color: var(--smile-700);
      transform: translateX(4px);
    }
    
    .category-list a.active{
      background: var(--smile-500);
      border-color: var(--smile-500);
      color: var(--neutral-900);
      font-weight: 700;
    }
    
    .category-list a i{
      font-size: 0.85rem;
      flex-shrink: 0;
    }
    
    /* 해시태그 스타일 */
    .hashtag-list{
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .hashtag-list li{
      margin: 0;
    }
    
    .hashtag-item{
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.5rem 0.85rem;
      background: var(--neutral-50);
      border: 1px solid var(--neutral-200);
      border-radius: 999px;
      color: var(--neutral-700);
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: 600;
      transition: all 0.2s ease;
    }
    
    .hashtag-item:hover{
      background: var(--smile-100);
      border-color: var(--smile-500);
      color: var(--smile-700);
      transform: translateY(-2px);
    }
    
    .hashtag-item.active{
      background: var(--smile-500);
      border-color: var(--smile-500);
      color: var(--neutral-900);
      font-weight: 700;
    }
    
    .hashtag-item::before{
      content: '#';
      font-weight: 800;
      font-size: 0.9rem;
    }
    
    .related-guides{
      background: linear-gradient(135deg, var(--sr-surface) 0%, var(--smile-neutral) 100%);
      border: 2px solid var(--smile-500);
      border-radius: var(--radius);
      padding: 2rem;
      margin-top: 3rem;
    }
    
    .related-guides-title{
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--smile-accent);
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .related-guides-title i{
      color: var(--smile-500);
    }
    
    .related-guide-card{
      background: var(--sr-surface);
      border: 1px solid var(--neutral-200);
      border-radius: var(--radius-sm);
      padding: 1.25rem;
      text-decoration: none;
      display: block;
      transition: all 0.3s ease;
    }
    
    .related-guide-card:hover{
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
      border-color: var(--smile-500);
    }
    
    .related-guide-category{
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--smile-700);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.5rem;
    }
    
    .related-guide-title{
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--neutral-900);
      margin-bottom: 0.5rem;
    }
    
    .related-guide-desc{
      font-size: 0.9rem;
      color: var(--neutral-600);
      margin-bottom: 0;
    }
    
    /* TOC Styles */
    .toc-card{
      background: linear-gradient(135deg, var(--sr-surface) 0%, var(--smile-100) 100%);
      border: 1px solid var(--smile-500);
      border-radius: var(--radius-sm);
      padding: 1.25rem;
      margin-bottom: 2rem;
    }
    
    .toc-title{
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--smile-accent);
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .toc-title i{
      color: var(--smile-500);
    }
    
    .toc-list{
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .toc-list li{
      margin-bottom: 0.5rem;
    }
    
    .toc-list a{
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--neutral-900);
      text-decoration: none;
      font-weight: 600;
      font-size: 0.95rem;
      transition: all 0.2s ease;
    }
    
    .toc-list a::before{
      content: '→';
      color: var(--smile-500);
      font-weight: 800;
    }
    
    .toc-list a:hover{
      color: var(--smile-700);
      transform: translateX(4px);
    }
    /*
    footer a{
      transition: all 0.2s ease;
    }
    
    footer a:hover{
      color: var(--smile-500)!important;
    }
    */
    /* 반응형 개선 */
    @media (max-width: 991px) {
      .section{ padding: 60px 0; }
      .section-tight{ padding: 40px 0; }
      .guide-header{ padding: 2rem 0 1.5rem; }
      .guide-content{ padding: 2rem; }
      .guide-content h2{ font-size: 1.5rem; margin-top: 2.5rem; }
      .guide-content h3{ font-size: 1.2rem; margin-top: 2rem; }
      .guide-sidebar{ position: static; margin-top: 2rem; }
    }
    
    @media (max-width: 767px) {
      .section{ padding: 48px 0; }
      .section-tight{ padding: 32px 0; }
      .guide-header{ padding: 1.5rem 0 1rem; }
      .guide-content{ padding: 1.5rem; }
      .guide-content h2{ font-size: 1.35rem; margin-top: 2rem; }
      .guide-content h3{ font-size: 1.1rem; margin-top: 1.5rem; }
      .guide-meta{ gap: 1rem; font-size: 0.85rem; }
    }

    

.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;
}

/* 커스텀 스타일 시트 */
figure img {
    width: auto !important; /* reboot 설정을 무력화 */
    max-width: 100%;
}